Webページの構成・基礎知識【イラストレーター入門講座】

基本操作が出来るようになったら実践です。
下図のレイアウトをIllustratorで作っていきますよ。

が、作成の前に、Webページを構成するパートの呼び名をおさえておきましょう。

Webページの構成を知ろう

Webページを構成する部位は、大まかに分かると下記の４パートに分かれることが多いです。よく目にするサイトも、今回のデザインのような構成になっていることが多いのではないでしょうか。

また、それぞれのパートの順番や役割なども概ね決まっています。
機能的にその配置が見やすいというのもありますし、サイトを訪れるユーザーとしても見慣れた・使い慣れた配置のほうが迷いにくいんですね。

簡単に、各パートの役割を見てみましょう。

ヘッダー

ヘッダーは一つのサイトで、どのページが開かれても常に共通して表示される部分。基本的にはページの一番上にあります。

サイト名もしくはロゴ + ナビゲーション（他のページへのリンク）という構成が大半。
ナビゲーションは、ページを開いたユーザーが見たい情報のページへ移動しやすく、トップページへもすぐに戻れるように設置しています。

ファーストビュー

ファーストビューは、そのサイトや企業のイメージを伝える役割があります。
ヒーローやキービジュアルと呼ぶ方もいらっしゃいます。

ファーストビューという呼び名の通り、ページ上部にある画像は最初にユーザーの目に飛び込む部分です。ナビゲーションなどの文字よりも、インパクトのある画像の方に自然と目が行きますよね。

ファーストビューにインパクトのある画像があると、サイトを見ている人に「面白そう」「気になる」と思ってもらえるでしょう。
興味をもったユーザーが、コンテンツ部分を見てくれる“きっかけ”を作る部分なのです。

コンテンツ

コンテンツはそのページでユーザーに伝えたい情報が書かれている部分です。

今回のようにメインカラムとサイドカラム（サイドバー）に分かれているようなデザインは、２カラムレイアウトやマルチカラムレイアウトと呼ばれます。

フッター

フッターはページ最下部に表示されている部分。
ヘッダーと同じく、同じサイト内では共通で使われることが多いです。

フッターにはサイトの運営元・アドレス（会社所在地）・著作権情報など補助的な情報を掲載することが多いです。ナビゲーションやお問い合わせボタンなどを配置する場合もあります。