現役デザイナーが解説!ヘッダーデザインの参考事例を総まとめ【2019年最新版】

「ヘッダーデザインってどうやって設計すればいいの?」
「ヘッダーデザインの参考になるサイトはどれ?」
「スマホ表示の時にヘッダーデザインはどうしておくのが正解?」

普段、何気なくホームページを見ていて、ヘッダーの存在や役割はなんとなく分かっているものの「いざ、自分で設計するとなると分からない。。。」とお悩みの方も多いのではないでしょうか?

ホームページの全ページに表示されるヘッダーは、ユーザーに目的の情報を探してもらうための指針。いわば、「道案内役」になります。

このヘッダーの設計が上手くいってないと、せっかく良いコンテンツを掲載していても見られることもなくユーザーは去っていってしまいます。

本記事ではホームページのデザインを手がける現役デザイナーの筆者がヘッダーについて解説!

  • ヘッダーの役割
  • 参考になるヘッダーデザイン事例集
  • ヘッダーデザインの際の注意点

をご紹介します。ホームページのリニューアルを検討されている方はぜひ参考にしてください!

目次
  1. 1. なぜヘッダーは重要なのか?
    1. 1-1. ヘッダーはユーザーの目線が集まる場所
    2. 1-2. 固定ヘッダーは常にユーザーの目に触れる
    3. 1-3. 見せたいページへの導線として活用できる
  2. 2. ヘッダーのデザインの参考例
    1. 2-1. シンプルなヘッダーデザイン
    2. 2-2. コンバージョンのためのヘッダーデザイン
    3. 2-3. サイトマップとしてのヘッダーデザイン
    4. 2-4. スマホの時に参考になるヘッダーデザイン
  3. 3. ヘッダーデザインをもっと探したい方へ
    1. 3-1. UIDB.io
    2. 3-2. ランディングページWebデザインクリップ
  4. 4. ヘッダーデザイン まとめ

なぜヘッダーは重要なのか?

ヘッダーが重要であるのはなぜか?以下の3つの点から確認していきましょう。

  • ヘッダーはユーザーの目線が集まる場所
  • 固定ヘッダーは常にユーザーの目に触れる
  • 見せたいページへの導線として活用できる

ヘッダーはユーザーの目線が集まる場所

ユーザーがホームページを訪れた際に、このサイトは自分の求めていたものではないと判断されるとすぐに検索画面に戻ってしまいます。

そこで重要なのがヘッダーを含むファーストビューのデザインです。

ロゴやナビゲーションを含むヘッダー、メインイメージなどユーザーの最初の視界に入る「ファーストビュー」で注意を惹きつけ、検索画面に戻らずにホームページに長く滞在してもらえるような工夫が必要となります。

そこで意識したいのが「グーテンベルグ ダイアグラム」「Zパターン」「Fパターン」という3つの目線のパターンです。

これはユーザーがホームページに目を通す一連の流れのパターンで、これらを理解するとヘッダーをデザインをする際に役立ちます。

グーテンベルグ ダイアグラム

グーテンベルグ ダイアグラムとは、「視線は左上から右下に流れていくように習慣付けられる」というもので、活版印刷技術の発明者であるグーテンベルグ ダイアグラムが提唱したことによりこの名が付けられました。

グーテンベルグ ダイアグラム

しかしこの視線はWebよりも印刷物に当てはまることが多いパターンのため、Webでは後述する「Zパターン」と「Fのパターン」を用いることが多いです。

Zパターン(Zの法則)

左上から始まった視線が右上→左下→右下というパターンを描き、まるでアルファベットのZのような動きをとることから「Zパターン(Zの法則)」と呼ばれています。

Zパターン(Zの法則)

初めてサイトを訪れた初見ユーザーに多く見られる視線の動きと言われています。

Web上ではユーザーは、最初にざっとページの全体を見るため、このような動きをとっているとされています。そのため、初見ユーザーが多く訪れるTOPページなどはこの視線を意識してデザインすることが大切です。

Fパターン(Fの法則)

左上から始まった視線が右上→下に下がってまた左→ 右というパターンを描き、まるでアルファベットのFのような動きをとることから「Fパターン(Fの法則)」と呼ばれています。

Fパターン(Fの法則)

Fパターンはリピーターに多く見られる視線の動きと言われています。
商品ページや記事ページはこちらのFパターンを意識したデザインが有効とされています。

参考:http://vanseodesign.com/web-design/3-design-layouts/

固定ヘッダーは常にユーザーの目に触れる

2013年頃からヘッダーを固定して表示する「固定ヘッダー」を採用するサイトが増えました。
下記の参考サイトのように、ページを下にスクロールしてもナビゲーションが固定されているヘッダーを「固定ヘッダー」と呼びます。

固定ヘッダーの参考例

このサイトのヘッダーを見る

ユーザーがサイトを訪れた際に一番最初に視界に入る部分がヘッダーです。
このパーツを固定にすることでナビゲーションを常にユーザーの目に触れさせ、スクロールをしたり検索をしたりする手間をかけることなく、別ページにすぐに移動してもらうことができます。

また、固定ヘッダーは常にお問い合わせができる状態であることがポイントです。
お問い合わせを増やしたいというホームページの場合は、ヘッダーにお問い合わせページへのリンクを設置し、固定ヘッダーにすることをオススメします。

見せたいページへの導線として活用できる

見せたいページがある場合、ヘッダーをそのページへ誘導する導線として活用できます。

下記のサイトはナビゲーションにカーソルを合わせると、下層ページのリンクが表示されるようになっています。こうすることで、TOPページから1クリックで目的のページへ誘導することが可能となります。

ナビゲーション用ヘッダーの参考例

このサイトのヘッダーを見る

ヘッダーのデザインの参考例

ヘッダーをデザインする際の参考となるホームページをご紹介します。

シンプルなヘッダーデザイン

シンプルなヘッダーデザイン1

必要最低限の情報のみを記載したシンプルなヘッダーのデザインです。
ヘッダーの情報を絞ることで、メインビジュアルが際立ちます。
このサイトのヘッダーを見る

シンプルなヘッダーデザイン2

シンプルなヘッダーの中で「Men Sale」と「Women Sale」が赤文字になっているため自然と目に留まります。
右上にある「0」はカートに入っている商品数を表しています。とてもシンプルな表現に止めることで、ヘッダーがコンパクトになっています。
このサイトのヘッダーを見る

シンプルなヘッダーデザイン3

左にロゴ、右に「ハンバーガーメニュー」と呼ばれる三本線のアイコンのみを置いたとてもシンプルなデザインのヘッダーです。
ハンバーガーメニューはスマホ表示の際に活用されますが、海外のおしゃれなホームページではパソコン表示の際にもハンバーガーメニューを使用するのが定番になっています。
このサイトのヘッダーを見る

おしゃれなヘッダーデザイン

おしゃれなヘッダーデザイン1

手書き風のフォントが可愛いメニューが特徴的なヘッダーデザインです。
メニューのフォントと真ん中にあるロゴのフォントが同じテイストのため、ヘッダー全体の世界観が統一されている点が参考になります。
このサイトのヘッダーを見る

おしゃれなヘッダーデザイン2

デザインがおしゃれで、マウスオーバーした際のアニメーションにもこだわりが見えるサイト。おしゃれなサイトにしたい場合は、こちらのサイトのようにロゴを真ん中に置いてみるのもポイントの一つですね。
このサイトのヘッダーを見る

おしゃれなヘッダーデザイン3

ナビゲーションに可愛らしいイラストを採用したおしゃれなヘッダーデザインです。
カーソルを合わせると動くアニメーションも可愛いです。
楽しそうな幼稚園の様子がヘッダーからも伝わってくるのが好印象ですね。
このサイトのヘッダーを見る

コンバージョンのためのヘッダーデザイン

ヘッダーやホームページのデザインをする上で意識したいのがコンバージョンです。

コンバージョンとは サイトを訪れたユーザーが、商品を購入したりお問い合わせをしたり、資料請求をしたりアクションすることをCV(コンバージョン)と言います。

ヘッダーを設計する際にはこのコンバージョンというゴールを意識する必要があります。


コンバージョンのためのヘッダーデザイン1

こちらは人材派遣サービスのホームページです。
ユーザーにスタッフ登録してもらうことがこちらのサイトでのコンバージョン。

そのため、ヘッダーの右上にある「スタッフ登録」という目立つデザインのボタンを配置
さらに固定ヘッダーにすることでクリックされやすいような設計にしています。
このように「購入」「問い合わせ」「見積もり依頼」など、コンバージョンへと誘導する際にもヘッダーは活用することができます。
このサイトのヘッダーを見る

コンバージョンのためのヘッダーデザイン2

こちらは店舗やオフィスなどの空間デザインを手がける企業のホームページです。
ホームページを訪れたユーザーに、実際に無料相談会に足を運んでもらうことがこちらのサイトのコンバージョンとなります。
白背景に映える黄色のボタンに自然と目が留まります。
このサイトのヘッダーを見る

コンバージョンのためのヘッダーデザイン3

次世代運搬ロボット「サウザー」の ランディングページ で、こちらは電話もしくは右上のピンクのボタンからの相談やお問い合わせをしてもらうことがコンバージョンとなります。
コンバージョンを設定する際に、「ホームページではユーザーにどうしてもらいたいか」を考えることが大切になってきます。
このサイトのヘッダーを見る

サイトマップとしてのヘッダーデザイン

サイトマップとしてのヘッダーデザイン1

グローバルナビゲーションに主要なページが並んでおり、左上に最新情報が表示されるヘッダーデザインです。
法律事務所というと敷居が高いイメージですが、ヘッダーが整理されておりサイトマップとしてしっかり機能しているため、必要な情報へすぐアクセスすることができます。
このサイトのヘッダーを見る

サイトマップとしてのヘッダーデザイン2

ドロップダウンのメニューを活用し、掲載する情報を多くした「メガメニュー」を採用したグローバルナビゲーションが特徴的なサイトです。
情報がわかりやすく構造化されているので、TOPページから下層ページにアクセスできるのが親切な設計となっています。
このサイトのヘッダーを見る

サイトマップとしてのヘッダーデザイン3

こちらもメガメニューを採用したヘッダーデザインです。
数の多いリンクを画像を用いることでわかりやすくレイアウトしています。
リンクの数が多くなる際に参考になるデザインです。
このサイトのヘッダーを見る

スマホの時に参考になるヘッダーデザイン

スマホの時に参考になるヘッダーデザイン1

スマホでこのサイトにアクセスしたユーザーのを誘導しやすいよう「店舗検索」「ストアースタッフ募集」をハンバーガーメニューの外に置いています。
アイコンも付いているため、ぱっと見でリンク先の情報もわかるのが親切です。
このサイトのヘッダーを見る

スマホの時に参考になるヘッダーデザイン2

情報量の多いサイトですが、目的別にわかりやすくグループ分けされているのでユーザーにとって親切なデザインとなっています。
このようにイラストアイコンを使用することで、自然にナビゲーションに視線を誘導することができます。
このサイトのヘッダーを見る

スマホのヘッダーをデザインする際は下記の点に注意してみましょう!

  • ヘッダーの縦幅を広げすぎない
  • 要素を詰め込みすぎない
  • 固定させ、ユーザーが使用しやすいようにする
  • ハンバーガーメニューを使用する際は「menu」など文字を補足することでわかりやすくする

ヘッダーデザインをもっと探したい方へ

UIDB.io

UIDB.io

様々なパーツのデザインを集めたギャラリーサイトです。「nav」で検索すると色んなヘッダーデザインを見ることができます。
このサイトを見る

ランディングページ Webデザインクリップ

ランディングページWebデザインクリップ

ランディングページ に特化したギャラリーサイト「 ランディングページ Webデザインクリップ」内で「ヘッダー固定」タグで検索すると、参考になるヘッダーデザインを見ることができます。
このサイトを見る

ヘッダーデザイン まとめ

ヘッダーの役割や、ヘッダーをデザインする際に参考となるホームページをご紹介しました。

ヘッダーのデザイン・設計ポイントは下記の通りです。

  • ユーザーが目的のコンテンツにたどり着きやすいように
  • すぐにお問い合わせなどの行動が起こせるように
  • スマホのヘッダーはPCとは別で考える

ヘッダーデザインがユーザーに与える影響は大きいため、サイトをリニューアルしたり新しく作る際にはしっかり作り込みを行うことが望ましいです。

ヘッダーを有効活用することにより、コンバージョン数を増やすことも可能となりますので、参考にしてみてください!