一般的なWebサイトの見た目

基本構造

一般的な会社サイトや案内サイトは、上から順に、ヘッダー、ナビゲーション、メインビジュアル、本文、一覧やカード、お問い合わせ導線、フッターという流れで構成されます。

ヘッダー

ヘッダーは、ページの一番上にある領域です。サイト名、ロゴ、主要メニュー、問い合わせボタンなどが置かれます。

ヘッダーは、建物でいえば入口の看板に近い役割です。ここが分かりにくいと、訪問者は「どこのサイトに来たのか」「どこへ進めばよいのか」を把握しにくくなります。

ナビゲーション

ナビゲーションは、サイト内の主要ページへ移動するためのメニューです。パソコンでは横並び、スマートフォンではメニューボタンを押して開く形式がよく使われます。

メニュー項目が多すぎると、見える人にも迷いが生じます。重要な項目に絞ることが大切です。

メインビジュアル

トップページの上部に置かれる大きな見出し領域を、メインビジュアル、ヒーローエリア、ファーストビューなどと呼びます。

ここでは、「誰に向けたサイトか」「何を提供しているか」「次に何をしてほしいか」を短く伝えます。長文を詰め込む場所ではありません。

カードと一覧

カードは、1つの情報を箱のように区切って見せる部品です。サービス紹介、お知らせ、スタッフ紹介、商品一覧などで使われます。

カードの高さ、余白、見出しの位置がそろっていると、整って見えます。ばらばらだと、内容以前に雑な印象になります。

フッター

フッターはページ下部の領域です。会社情報、所在地、電話番号、サイトマップ、著作権表示などが置かれます。

視覚的には「ページの終わり」を示す場所です。本文とフッターの境目が分かりやすいと、画面全体に区切りが生まれます。