NEWS & COLUMN
お知らせ・コラム
SCROLL
DESIGN
ホームページにおけるヘッダーとフッターの役割
2023
.05.26
ホームページには、ヘッダーとフッターと呼ばれるコンテンツが必ず含まれています。言葉自体はWordやExcel等でも使用されていることから聞き馴染みのある方が多い一方で、ホームページにおけるヘッダーとフッターの役割を深く理解できている方は少ないのではないでしょうか。今回は、ホームページにおけるヘッダーとフッターの役割についてご説明します。
【目次】
1. ヘッダーとは
2. ヘッダーが持つ役割
3. ヘッダーを制作する際のポイント
a. 掲載するコンテンツの優先順位を決める
b. 視線誘導を意識して制作する
c. 全ページのデザインや位置を統一する
4. フッターとは
5. フッターが持つ役割
6. フッターを制作する際のポイント
a. サイトマップをグループ化する
b. コンバージョンに繋がりやすい構成で制作する
7.今回のまとめ
ヘッダーとは
ホームページにおけるヘッダーとは、ホームページの最上部に表示されているロゴやh1タグ、グローバルナビゲーション、ページタイトル等の領域のことを指しています。どのページにおいても最上部に表示されていることから、ホームページに訪れたユーザーが一番多く目にする箇所であり、他のページへ誘導させるための重要なコンテンツでもあります。見づらいデザインや分かりにくい構成の場合は、ユーザーがホームページを閲覧することを諦めて離脱してしまうおそれがあるため、誰が見ても理解しやすい構成で制作することを意識しましょう。
◼︎ヘッダーを構成するコンテンツの一例
ロゴ
h1タグ
グローバルナビゲーション
ページタイトル
パンくずリスト
ヘッダーが持つ役割
ユーザーは、ホームページに訪れた際に最初に目にしたデザインによって企業イメージを判断します。前項でもお伝えしたとおり、ヘッダーは全ページの最上部に表示されるため、ユーザーの第一印象を左右する重要なコンテンツです。
また、ヘッダーにはホームページのメインページへ誘導するための役割を持つグローバルナビゲーションが含まれます。この部分が複雑で分かりづらいデザインの場合は離脱率が上がってしまうおそれがあるため、ユーザーが他のページへ遷移しやすいように理解しやすい構成で制作するよう心がけましょう。
ヘッダーを制作する際のポイント
本項では、ヘッダーを制作する際に意識したいポイントを3つご紹介します。
掲載するコンテンツの優先順位を決める
全ページの最上部にあるヘッダーは、最もユーザーの目に入りやすいコンテンツであるため、誘導したいページへのリンクやコンバージョンに繋がるボタン、電話番号などを掲載するには最適な場所です。しかし、情報を詰め込みすぎてしまうと、どれが本当に重要な情報なのかが分かりづらくなってしまい、ユーザーを混乱させてしまうおそれがあります。掲載するコンテンツは優先順位を決めて取捨選択を行い、本当に見てほしい情報や、ユーザーが必要としている情報だけを掲載しましょう。
視線誘導を意識して制作する
ユーザーの視線は基本的に左から右へ移動することから、グローバルナビゲーション内のリンクは、ユーザーが求めている情報を左から順番に記載しましょう。
また、視線の最終的な着地点は右側であることや、右利きのユーザーが多いことから、右側にあるボタンはクリックしやすいと言われています。そのため、お問い合わせボタンや資料請求ボタン等のコンバージョンに繋がるボタンは右側に配置すると良いでしょう。
全ページのデザインや位置を統一する
ヘッダーのデザインや位置がページごとに異なる場合、ユーザーがページを遷移するたびに情報を理解しなおさなければならないため、ストレスを感じてしまうおそれがあります。できる限りユーザーの負担を減らすためにも、ヘッダーのデザインや位置は全ページ統一しましょう。
また、ヘッダー内コンテンツの視認性が悪い場合は、ユーザーが他のページへ遷移する前に離脱してしまうおそれがあるため、背景とのコントラスト比を意識して制作しましょう。
フッターとは
ホームページにおけるフッターとは、ホームページ最下部に表示されている会社情報やサイトマップ、コピーライト等の領域のことを指しています。フッターにこれらの情報を正しく記載することにより、Googleのクローラーがホームページを回遊しやすくなるため、SEO対策を行う上でも非常に重要なコンテンツであると言えます。
◼︎フッターを構成するコンテンツの一例
ロゴ
会社情報
Googleマップ
SNSリンク
お問い合わせページへのボタン
サイトマップ
フッターテキスト
コピーライト
フッターが持つ役割
フッターはホームページの最下部にあることから、下層ページのコンテンツを読み終わったユーザーが必ず目にするコンテンツです。次のページへ遷移させたり、コンバージョンに繋げたりする役割を担っているため、フッターに設置するコンテンツや見せ方を工夫しましょう。
また、フッター内に設置するサイトマップは、ユーザーが各ページへ遷移しやすくするためだけでなく、Googleのクローラーがホームページを回遊しやすくする役割を担っています。ユーザーにもクローラーにも分かりやすい構成でサイトマップを制作することを心がけましょう。
フッターを制作する際のポイント
本項では、フッターを制作する際に意識したいポイントを2つご紹介します。
サイトマップをグループ化する
ホームページのページ数が多い場合は、ただ各ページへのリンクを羅列するだけでは、ユーザーが求めているページのリンクを見つけるまでに時間がかかってしまうおそれがあります。求めているページを見つけやすくするためにも、会社情報やサービス内容ごとにページをグループ化して表示すると良いでしょう。
コンバージョンに繋がりやすい構成で制作する
ホームページの最下部に設置されているフッターは、下層ページのコンテンツが読み終わったユーザーが目にする部分です。そんなフッターの目立つ位置にお問い合わせボタンや資料請求ボタン、電話番号を設置することで、スムーズにコンバージョンに繋げることが可能です。なお、セールス感が全面に出した目立つデザインで制作してしまうと安っぽさを感じてしまうことがありますが、さりげないデザインの場合はボタンの存在に気付かずコンバージョンに繋げるチャンスを逃してしまうおそれがあるため、ある程度存在感のあるデザインで制作することをお勧めします。
今回のまとめ
ホームページに欠かせない要素であるヘッダーとフッターは、ユーザーの離脱を防いだり、コンバージョンに繋げたりするための重要なコンテンツです。ユーザーが求めている情報に辿り着きやすくするためにも、企業がアピールしたいコンテンツを無闇に詰め込むのではなく、ユーザー視点で掲載する内容や順番を検討しましょう。
また、フッターのサイトマップは、ユーザーだけでなくGoogleのクローラーにも分かりやすい構成で制作することを心がけましょう。
関連記事
グローバルナビゲーションを魅力的にするWEBデザインアイデア
WEBデザインにおけるフッターデザインのポイントとデザイン例
