ホームページのヘッダーの役割とデザインのポイント｜ユーザーの視線のパターンとは？

ホームページの作成・更新の担当となった当初は、何から手をつければよいかわからない人も多いのではないでしょうか。作成の際、まず考えるべきことはホームページの構成です。

この記事では、ホームページの訪問者が最初に目にすることになる「ヘッダー」について解説します。ヘッダーの役割やデザイン例、そしてデザインする際の注意点なども解説しますので、ホームページ作成の参考にしてください。

→ノーコードでWebデザインをカスタマイズできるBiNDupを30日間無料体験

ヘッダーとは？

ヘッダーとは、ホームページの上部の、サイトタイトルや画像などが表示されている箇所を指します。ヘッダーはサイト内の全ページに共通で表示されます。

ヘッダーはサイトの訪問者にとって、初めに目にする部分です。そのため、ヘッダーに何をどのように配置するのかは、ホームページの印象を左右する大きな要素となります。

ヘッダーで表示させるべき要素

わかりやすく印象的なホームページにするために、ヘッダーで表示させるべき要素がいくつかあります。特に大切なのはサイトのタイトルと、グローバルナビゲーションです。

グローバルナビゲーションとは、メインメニューとも呼ばれる、サイトの主要ページへの案内リンクのことです。サイト訪問者が、目的のページにたどり着くためのサポートを担います。

ホームページのデザイン構造

ホームページをデザインするうえでは、ヘッダーのほかにも必要となる要素がいくつかあります。

• ヘッダー
• グローバルナビゲーション
• サイドナビゲーション
• フッター

これらについて、それぞれ解説します。

ヘッダー

前述の通り、ヘッダーはサイト上部に表示される要素です。多くの場合、サイト名やイメージ画像、グローバルナビゲーションをすべて含めて、ヘッダーと呼びます。

サイト名やナビゲーションは、全ページ固定で表示させるのが一般的です。一方、イメージ画像に関しては、トップページのみの表示がおすすめです。他ページでは、メインコンテンツを優先して目立たせましょう。

グローバルナビゲーション

前述の通り、グローバルナビゲーションとは、サイトの主要ページへの案内リンクを指します。ヘッダーに含める必要はありませんが、含まれることが多いです。グローバルナビゲーションの役割は、訪問者が目的ページにたどり着くためのサポート、そしてホームページ全体のガイドです。

サイドナビゲーション

サイドナビゲーションとは、ページの右、または左の端に表示されるメニューのことをいいます。サイドバーやサイドメニューは別名です。グローバルナビゲーションと同じく、サイト内の他ページへのリンクが設置されています。また、ページ数の多いホームページの場合は、より細かくリンクが設定されることもあります。

フッター

フッターはコンテンツの下の、ページの最下部に配置されます。訪問者にとっては、ページコンテンツを読み終わった後に目にする部分です。そのため、ページ閲覧後の次の行動を誘導する役割もあります。関連のある記事や、お問合せページへのリンクなどを置くと効果的です。

→ノーコードでWebデザインをカスタマイズできるBiNDupを30日間無料体験

ヘッダーの役割

こちらでは、ヘッダーの役割についてさらに詳細に解説します。

サイトに対するイメージを決める

Webページを表示した際に、最初に表示される部分をファーストビューと呼びます。サイト訪問者はファーストビューで、サイトを閲覧するかどうか判断しています。ファーストビューでは、どんなサイトなのか、どのような情報が載っているのかなどを、わかりやすく示す必要があります。

他のページへの誘導につながる

ヘッダーは、訪問者をサイト内の他のページに誘導する役割があります。ヘッダー内のグローバルナビゲーションに、必要な情報やコンテンツへのリンクを設置しておくことで、利便性が高まり、他のページの閲覧を促すことができます。

ホームページに統一感を持たせられる

ヘッダーは、サイト内の全ページで表示されます。ヘッダーがあることによって、閲覧者はホームページ全体に共通するイメージをつかめます。また、繰り返し同じヘッダーを表示することで、他のホームページとの差別化がはかれることも役割のひとつです。

ブランディング効果が得られる

ヘッダーは最初に目に飛び込んでくるため、アイキャッチ効果があり、閲覧者の印象に残りやすい部分です。ヘッダー内に企業のロゴやアイコンなどを用いることで、それらを閲覧者に強く印象づけられ、ブランディングに繋がります。

デザイン性が高められる

ヘッダーに画像を使うことで、ホームページのデザイン性を高められます。ヘッダーにはシンプルなデザインから、多様なデザインを取り入れたものまであります。どのような印象を持たれたいのかによって、最適なデザインの方向性も違ってきます。

→ノーコードでWebデザインをカスタマイズできるBiNDupを30日間無料体験

ヘッダーの作成手順

ホームページにおける、ヘッダーの作成を解説します。

1.HTMLでコードを記載し保存する

HTMLには、ヘッダーのためのコードが用意されています。HTMLでヘッダーを設定する際は、このheaderタグでヘッダーの要素を挟みます。

これらを、テキストファイルに「header.html」として保存しておきます。

こちらはコードの一例なので、ヘッダー作成の際は、ヘッダーに入れたい要素に対応したコードを選んで組み込む必要があります。

2.CSSコードを記載し保存する

次にCSSで、先ほどのHTMLで作成した文書の色や大きさを指定します。

これらのコードを、先ほどのHTMLファイルに記載し保存します。こちらのコードも一例で、一部抜粋して記載しているため、実際は希望のデザインにあわせてコードを作成することになります。

3.保存したファイルをダブルクリックし確認する

これまでの手順で作成し保存した「header.html」ファイルをダブルクリックすれば、作成したWebページが表示されます。希望の配置やサイズになっているか、出来具合を確認しておくと安心です。

→ノーコードでWebデザインをカスタマイズできるBiNDupを30日間無料体験

ヘッダーのおすすめデザイン例

ヘッダーのデザイン例として、おすすめのものをいくつか紹介します。

シンプルなデザイン

ヘッダーには、トップページへのリンク・製品情報・企業紹介・最新情報・お問合せへのリンク、そして企業名とロゴといった、必要最低限の情報のみが記載されています。

コンバージョンを意識したデザイン

コンバージョンとは、商品購入や資料請求といった、ホームページにおける最終的な成果を指します。右端に水色のコンバージョンボタンが設置されています。他には資料請求やカタログダウンロードなどへのリンクを置いておくのが一般的です。

アイコンを使ったデザイン

アイコンを用いることで目を引く仕上がりになっています。アイコンはわかりやすく、意味をイメージしやすいものにすることが大切です。

ロゴを中央に配置したデザイン

ロゴが目立つため、ブランドの認知度を高める効果があります。また、おしゃれな演出が可能です。通常、ロゴは左側に表示させる方がよいとされているため、明確な意図がある場合のみ、戦略的に用いましょう。

必要な情報をまとめて表示させたデザイン

ファーストビューで、多くの情報が見られることが特徴です。ただし、情報が多すぎるのもよくないため、厳選する必要があります。

→ノーコードでWebデザインをカスタマイズできるBiNDupを30日間無料体験

ヘッダーのデザインをする際のポイント

ヘッダーのデザインをする際にはポイントがあります。ここでは3つの観点から紹介します。

ヘッダーのデザインはすべてのページで統一させる

ページごとにヘッダーがばらばらだと、閲覧者が異なるホームページと認識してしまう場合があります。ヘッダーはページ内で最も目立つ部分でもあるので、全ページで統一させておくことが大切です。

ユーザーの使いやすさを重視する

ヘッダーのデザインにおいて、第一に考えるべきなのはユーザーにとっての使いやすさです。近年では、ページを下にスクロールしてもナビゲーションが固定されている「固定ヘッダー」を採用する企業が増えてきています。

また、ナビゲーションを選ぶと、下層ページのリンクを表示されるように設定するのもおすすめです。ワンクリックでトップページから目的のページに誘導できます。これらの対策を行うことで、ユーザーの目にも留まりやすくなるうえに、別のページへ誘導しやすくなります。

ユーザーの視線を意識する

ヘッダーはホームページのファーストビューとしての役割もあります。そのため、ユーザーの視線の動きを意識したヘッダー作りが大切です。ユーザーの視線の動きには、いくつか決まったパターンがあります。このパターンに沿ったデザインを用いることで、ユーザーにとって使いやすく快適なヘッダーにすることができます。

ユーザー視線のふたつのパターン

ユーザーの視線にはZ型・F型のふたつのパターンがあります。それぞれの特徴や、ヘッダーを作る際の注意点などを解説します。

Z型

情報量の多いコンテンツを閲覧する際、人の視線は左上から右上へ、その後左下から右下へと、Z型に進んでいくのが一般的です。ヘッダーの左上には、サイト名や企業ロゴなど、目立たせたい項目を配置するのが効果的だといえます。

F型

左上から右に視線を移動させた後、一段下がってまた左から右へ視線をスライドさせていく動きがF型と呼ばれます。コンテンツのリピーターに多い動線だとされています。初めに視線が集まる最上部に、重要コンテンツを置いておくことが大切だとわかります。

まとめ

ホームページ作成において、ヘッダーは大切な要素です。ヘッダーはページ訪問者が最初に目にする大切な部分であり、サイト全体のイメージや使いやすさを左右する重要なものです。

BiNDupは、ホームページの作成・運用をサポートするお役立ちツールです。国産のCMSなので使いやすく、カスタマイズ性が高いのが特徴です。400種類以上のテンプレートで、トレンドのデザインを取り入れたホームページを簡単に作成・運用することができます。

ホームページ作成の際は、ぜひBiNDupの利用を検討してみてください。

BiNDupを無料で使ってみるBiNDの制作事例を見る