基本操作が出来るようになったら実践です。 下図のレイアウトをIllustratorで作っていきますよ。
Webページの構成を知ろう
Webページのデザインを作る前に、Webページを構成する部品の呼び名をおさえておきましょう。
Webページは、大まかに下記の４パートに分かれれていることが多いです。 よく目にするサイトの中にも、今回のデザインのような構成のものが結構あるんじゃないでしょうか？
また、それぞれのパートの順番や役割なども概ね決まっています。 機能的にその配置が見やすいというのもありますし、サイトを訪れるユーザーとしても見慣れた・使い慣れた配置のほうが迷いにくいんですね。
簡単に、各パートの役割を見てみましょう。
それぞれのエリアの役割
ヘッダー
ヘッダーは一つのサイトで、どのページが開かれても常に共通して表示される部分。基本的にはページの一番上にあります。
サイト名もしくはロゴ + ナビゲーション（他のページへのリンク）という構成が大半。 ナビゲーションは、ページを開いたユーザーが見たい情報のページへ移動しやすく、トップページへもすぐに戻れるように設置しています。
ファーストビュー
ファーストビューは、そのサイトや企業のイメージを伝える役割があります。 ヒーローやキービジュアルと呼ぶ方もいらっしゃいます。
ファーストビューという呼び名の通り、ページ上部にある画像は最初にユーザーの目に飛び込む部分です。 ナビゲーションなどの文字よりも、インパクトのある画像の方に自然と目が行きますよね。
ファーストビューにインパクトのある画像があると、サイトを見ている人に「面白そう」「気になる」と思ってもらえるでしょう。 興味をもったユーザーが、コンテンツ部分を見てくれる“きっかけ”を作る部分なのです。
コンテンツ
コンテンツはそのページでユーザーに伝えたい情報が書かれている部分です。
今回のようにメインカラムとサイドカラム（サイドバー）に分かれているようなデザインは、２カラムレイアウトやマルチカラムレイアウトと呼ばれます。
フッター
フッターはページ最下部に表示されている部分。 ヘッダーと同じく、同じサイト内では共通で使われることが多いです。
フッターにはサイトの運営元・アドレス（会社所在地）・著作権情報など補助的な情報を掲載することが多いです。 ナビゲーションやお問い合わせボタン、SNSアカウントへのリンクなどを配置する場合もあります。