レイアウトとパーツ

ヘッダーはWebページ上部に表示されるコンテンツです。主に「ロゴ」「ナビゲーション」が配置されます。

基本的にサイト内のすべてのページに配置され「ロゴ」や「お問い合わせに関する情報」など常時表示しておきたい優先度高い情報を表示します。

主な構成

• リンクつきロゴ
• グローバルナビゲーション
  • 配下カテゴリトップページへのリンク
• 優先度の高い情報
  • どのページでも確認できた方がよい情報
    「電話番号」「定休日」等
  • 「資料請求ボタン」等目的達成への導線

サイト内を移動するためのメニューです。主に配下カテゴリのトップページに移動します。

ページ上部に表示される「グローバルナビゲーション」やフッター位置に配置される「フッターナビゲーション」が多くのサイトで利用されています。

ナビゲーションはヘッダー内に組み込まれることもあります。またページのレイアウトによっては横にナビゲーションを配置する場合もあります。

主な構成

• 配下カテゴリトップページへのリンク

フッターもヘッダー同様、すべてのページで利用することが多いため、「お問い合わせボタン」や「営業時間」等の優先度の高い情報を表示します。

また、文字サイズを小さくして「コピーライト」や「会社概要」、「規約」など優先度の低い情報へのリンクも表示します。

ページ下部は別ページに誘導する役割もあるので、各ページのリンクをフッターにまとめてサイトマップ代わりにしている場合もあります。

主な構成

• コピーライト
• 優先度の高い情報
  • どのページでも確認できた方がよい情報
    「電話番号」「定休日」等
  • 「資料請求ボタン」等目的達成への導線
• 優先度が低いページへのリンク
  • 利用規約
  • プライバシーポリシー
• サイト内別ページへの誘導

メインビジュアルやヒーロー画像はトップページのファーストビュー（最初に表示されるエリア）に配置されることが多いパーツです。

サイトイメージやインパクトを与えるビジュアルを使用します。JavaScript等を使用して時間で画像が切り替わる「カルーセル機能」を実装することも多いです。

配下ページでは高さを抑えたメインビジュアルを配置することもあります。

主な構成

• インパクトのある写真
• キャッチコピー
• 目的達成ページへのリンク
• 画像を時間差で複数枚見せる（カルーセル機能）
  ※JavaScriptで実装
• 配下ページではメインビジュアルの高さを低くしたり省略することもある

メリット

• スマホ対応が楽
• メインコンテンツに集中してもらいやすい

デメリット

• 画面内に表示できる情報が少ない
• ページが長くなりがち

メリット

• 画面内に多くの情報をコンパクトに表示できる

デメリット

• １つ１つのコンテンツが小さいので一覧表示に使用することが多い