ランディングページ（PC)のトレース、いよいよ最後です！
今回の実習の範囲
以下の３パーツを作成してください。
- 料金プラン
- お問合せフォーム
- フッター
※ファイル確認用。縮小していますので、トレースには使用しないでください。
トレース用の画像は、mihon07となります。
当レッスンページの素材、下記のボタンからダウンロードしてご利用ください。
training06.zipをダウンロード
制作のポイント
料金表
最初にガイドを作成した時にも使った“グリッドに分割”を使うと、作りやすいです。
幅1000pxの長方形を挿入し、水平方向中央に整列。
オブジェクト > パス > グリッドに分割 で4分割して、少し間隔を作ります。
テキストツールでプラン名を入力。中央に配置します。
一列出来たら、optin (Alt) + ドラッグで複製してください。
2行目からは左揃えになります。
“グリッドに分割”で作った枠をキーオブジェクトにして、位置を整えましょう。
フォントサイズを変えつつ、テキストを変更します。枠の高さも合わせて変更してください。
再び optin (Alt) + ドラッグ で複製。
枠の高さを調整しつつ、テキストを打ち替えます。
この下は全て同じなので、複製してテキストを変更していきます。
背景色をつけるための長方形を加え、文字の背面に移動。
枠を非表示にして、全体を確認します。
左の列が背景色ギリギリで見にくいので、少し右に寄せました。
表全体に白、黄色の背景を加えていけば完成です。
フォーム横のリスト
アイコンはGoogle Material iconsを使っています。
