ヘッダーデザインでユーザーの目線をキャッチ！ コツと8つの実践例

何事も、第一印象が肝心。競争が激しいデジタル製品の分野においても、まったく同じことが言えます。その意味でも、Webページやモバイルスクリーンがどのような影響を与えるかは重要視すべきポイント。

今回はWebサイトのヘッダーに焦点を当ててみましょう。実際のWebデザインとともに、良いヘッダーとは何かをご紹介します。

ヘッダーとは？

ヘッダーとは、Webページのレイアウト上部のことです。ヘッダーは、人々が一番はじめに目にする、最も重要な部分。デジタル製品に関するコアインフォメーションを提供し、ユーザーが瞬時に情報を読み取れるような構成でなければいけません。

また、デザイン的にも、ヘッダーはキャッチーかつシンプルで、使いやすい設計である必要があります。ヘッダーはしばしば「サイトメニュー」と呼ばれ、Webサイトのレイアウトの主要要素として位置付けられています。

Comics Shop Website/Dribble

これはコミック専門のオンライン書店のWebサイトのヘッダーデザインです。ヘッダー上部には、サイトの名前と、商品カタログ、新着情報、フィギュアのセール情報、ブログ、購入状況を示すショッピングカートのアイコン、そして検索のアイコンなど、サイトの中核を担うナビゲーションが表示されています。

ヘッダーには何を記載するべきか？

 ヘッダーには、ブランドアイデンティティの基本要素を記載できます。

• ロゴ、ブランド名、スローガンまたは会社のステートメント、企業のマスコットキャラクター、会社のビル・オフィスまたはCEOの写真、コーポレートカラーなど
• 掲載商品またはサービスのテーマのコピーブロック設定
• Webサイトコンテンツへのリンク
• 主要SNSへのリンク
• 基本的な連絡先情報（電話番号、電子メールなど）
• 言語の切り替え
• 検索フィールド
• サブスクリプションフィールド
• 体験版などの製品とのやりとり、AppStoreからのダウンロードなど

以上がヘッダーに記載できる基本メニューです。しかし、決してすべての要項をヘッダーページに記載する必要はありません。あまりに情報が多すぎると、読む側は重要な情報に集中しづらくなります。
デザイナーは、設計タスクに基づいて戦略を練り、記載要項の取捨選択をしましょう。マーケティングスペシャリストを頼るのも良いアイデアです。

下のスクリーンショットは、インテリアデザインスタジオのWebサイトです。

Bjorn Website/Dribble

ページの上部は、スクロール中でも確認しやすい、固定ヘッダー仕様になっています。このヘッダーは2つのブロックに分かれていて、左側にはブランドロゴ、右側には「製品」「スタジオ」「プレス」がインタラクティブに表示される仕組みです。これらの2つのブロックを明確に分けるため、中央は一本のシンプルな線で区切られています。

Event Agency Website/Dribble

こちらは、また一味違ったアプローチのヘッダーデザイン。ここでは、ロゴとブランド名を中心に配置し、それを取り囲むようにしてメニューを構築しています。

ヘッダー上部には、メニューが左右それぞれ二つバランスよく配置され、ユーザーがすばやく目を通し、すぐに興味のある情報に飛べるようにデザインされています。

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

まず見ていただきたいのは、ユーザーがWebページをチェックするときの、最初の数秒間の目の動きを解析した、目視スキャンモデルです。

こういったユーザーの行動やインタラクションの研究分野は、デザインコンサルティング会社のニールセン・ノーマン・グループをはじめとする、ユーザビリティの専門家や、デザイナーたちによって支えられています。

残念ながら、ユーザーがはじめてそのWebサイトを訪れたとき、ページ上のすべてを慎重かつ詳細にチェックする可能性はかなり低いと思われます。しかし、ユーザビリティの専門家は、ユーザーの注意を惹きつけるフックを見つけ、ユーザーがWebサイトで長く時間を過ごすように仕向けることができます。

ユーザーの視線追跡に関するデータを収集する実験では、ユーザーがWebサイトに目を通す一連の流れには、典型的なモデルがあることが判明しています。

 スティーブン・ブラッドリー氏による記事の中では、典型的な3つのデザインレイアウト：グーテンベルグパターン、Zパターン、Fパターンが紹介されています。

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

研究によって明らかにされた傾向は以下のようなものです。

グーテンベルグパターン

 グーテンベルグパターンは、均等に配置された情報を見るときの視線の動きをパターン化した、典型的なデザインです。スティーブン・ブラッドリー氏の研究で見つかったスキームからもわかるように、グーテンベルグパターンは、4つの活動区域を示しており、そのうち2つはヘッダーエリアを横切るようにして配置されています。

Zパターン

もう1つのスキームは、Zパターンをさらにジグザグに分割したもの。視覚的に分割されたコンテンツブロックをもつページによくあるパターンです。

ユーザーの視線は、上左から水平に右に移動→斜め下に移動→最後は水平に移動→そして下右で終わります。ユーザーはページ内を右上に移動する形で、情報に目を通しています。

Fパターン

そして最後のFパターン。ニールセン・ノーマン・グループの調査結果によると、多くの場合、ユーザーの目線は次のような反応の流れを示すことが分かっています。

• ユーザーの目線は、まずコンテンツの上部を横切り→水平方向に移動。この目線の動きが、Fの上部のバーを形成しています。
• 次に、ユーザーの目線は、下に移動→その後もう少し短い距離を、第2の水平方向の動きを横切るようにして移動。この目線の動きが、Fの下部バーを形成しています。
• 最後に、ユーザーの目線は、コンテンツの左側を垂直方向に進むようにして動いています。かなり遅く、体系的な動きであり、ヒートマップは縞模様のように見えます。

これらの3つのパターンについて

以上の例でも分かるように、ユーザーはまず、Webページデザインの上部に目を奪われます。つまりヘッダーは、コアな情報を提供し、サイトのブランディングに繋がる部分でもあるのです。

Webサイトが適切にデザインされていれば、ユーザーに重要な情報をすばやく読み取らせ、印象づけることが可能です。

これこそが、ヘッダーデザインがUI / UXデザイナーやコンテンツスペシャリスト、そしてプロモーションスペシャリストにとって重要である所以です。

ヘッダーデザインの練習に関する記事の中で、著者ボグダン・サンドゥ氏は、次のことを念頭に置いておくように説いています。

人々は数秒でWebサイトの質を判断し、その他の判断要素はインターネット外にある。
結論として、Webサイトは人目を引くものでなければならない、それさえ気をつければ大きな失敗をすることはない。

–43 Interesting Examples Of Headers In Web Design

ヘッダーがあることで、ユーザーに重要なデータを素早く提示することができます。また、明確なナビゲーションを介してUXを提供する上でも、大きな手助けとなります。
しかし、すべてのWebサイトにヘッダーが必要なわけではありません。ただ、デザインを提供するクリエイティブソリューションには、レイアウトに一般的なヘッダー機能を加えたものが多く存在します。どんなWebサイトデザインにおいても、製品やサービスの対象となるオーディエンスの分析と調査は必要不可欠です。 

実践者たちのデザインを見てみよう！

読みやすさと視覚的階層が叶ったデザイン例

ヘッダーに使用する書体と背景の色は、ヘッダーの可読性において非常に重要に大きな割合を占める要素のひとつです。なのでそれらを選ぶ際は、精密な研究とテストを行なった上で決めるべきでしょう。

重要なのは、ユーザーが簡単に情報を理解できることです。それを念頭に置いておかなければ、ユーザーフレンドリーでないインターフェイスを提供することになりかねません。

Daily Bugle magazine/Dribble

上に示したのは、とあるニュースサイトのデザイン。Webサイトの名前・記事カテゴリへのリンク・ライブモードへのリンク・虫眼鏡のアイコンの検索フィールドからなる固定ヘッダーが特徴です。

The Big Landscape/Dribble

こちらのWebサイトは、ブロークングリッドレイアウトを採用することで、ヘッダーデザインとの相乗効果を生み出しています。

ヘッダーの左部分は長めに作られており、4つの要素で構成されています。

左側にはロゴと3つのデータブロックへのリンクを表示。それに対し、右部分は、検索ボタンと、登録を促すために黄色に色づけされた、サブスクライブボタンのみが表示されています。

また、ページのスクロール中にも、ヘッダーを変形させる方法がいくつかあります。固定ヘッダーを使用するWebサイトもあります。

固定ヘッダーは、Webサイトとのやりとりのどの時点でも常に表示され、アクティブになっています。また、Webサイトの中には、スクロールするとヘッダーが隠れるものもあります。そのほかに、ヘッダーを完全に隠さずに、スクロールするとヘッダーのサイズが縮小する、つまり、メニューの先にある2次情報を非表示にし、基本メニューだけを表示するWebサイトもあります。

ハンバーガーメニューを活用した事例

ヘッダー機能の中でもハンバーガーメニューはおなじみです。ハンバーガーボタンの中にメニューリンクが隠されています。水平線が重なった形がハンバーガーのように見えるので、この呼び名がついています。

Hamburger Button/Dribble

このボタンは、通常ヘッダーに配置され、現在では、インタラクションの定番になっています。定期的にWebサイトを訪問するユーザーは、このボタンにメニューが隠れているとわかっているので、追加の説明や誘導は必要ありません。ハンバーガーメニューを採用すれば、インターフェイスをよりスッキリ見せることができ、他の重要なレイアウトを配置するためのスペースも生まれます。このデザインテクニックは、インターフェイスに高いレスポンス性と、 適応性をもたらします。

また、メニューを隠すことで、どんなデバイスからアクセスしても、調和のとれたデザインを維持できるという利点もあります。

Ice Website/Dribble

上記は、ハンバーガーメニューを用いたWebデザインです。このWebサイトにはすでに複数のメニューが表記されているので、デザイナーは、最初にユーザーの目に入るエリア（左上隅）にハンバーガーボタンを配置しています。これにより、最も一般的かつミニマルなデザインを実現。

ヘッダー上部は、2つのゾーンに分かれています。左側のゾーンには、ブランディングと、Webサイトの簡潔な説明文を赤色で表示。色味を赤で揃えることで、その下の同じく赤色の見出しとの一貫性をもたせ、視覚におけるパフォーマンス性も生まれています。

そして右のゾーンには、SNSアイコンと検索アイコンを表示。

ヘッダーの中央部には何もおかず、あえて空白にしておくことで、左右のメニューアイコンの差別化に成功。バランスのとれた、スッキリとしたデザインに仕上がっています。

Slopes Website/Dribble

次のデザインコンセプトは、ページの左の部分に広い余白を残し、すぐにユーザーの目に入る左上にブランド名とロゴを表示しています。これにより、これが何のサイトなのかが一目瞭然となり、同時にサイトデザインのフックの役割も果たしています。

そして青色部分のヘッダーには、左側にハンバーガーボタン、右側に4つのメニューを提示しています。このデザイン例からもわかるとおり、デザイナーは、ハンバーガーメニューを使って複数の情報をまとめ上げ、効果的な視覚的階層を生み出すことができます。

ハンバーガーメニューは、現代のWebとアプリデザインの世界において賛否両論あるデザインですが、依然、ヘッダーのデザインに広く使用されています。ハンバーガーメニューを採用するときの懸念事項には、その抽象度の高さゆえ、Webサイトを定期的に訪れないユーザーの混乱を招く可能性などが挙げられます。

したがって、ハンバーガーボタン導入の可否は、ユーザー調査を行い、対象ユーザーのデジタル偏差値や需要などを把握した上で決めることが望ましいでしょう。

固定ヘッダー

固定ヘッダーは、ユーザビリティの向上に非常に効果的です。固定ヘッダーを設置することで、ユーザーはどのページを読んでいても、すぐに主要メニューにアクセスすることが可能となります。特に、情報量が多く、長いスクロールを伴うコンテンツの多いページでその威力を発揮します。

Structure Blog/Dribble

上記のWebデザインでは、ページをスクロールしている間も固定ヘッダーが隠れません。

ブランドの名前のレタリングを構成の中心に据え、ナビゲーションエリアには、検索アイコンと、ハンバーガーボタンのみを配置。ミニマリズムの原理に沿ったデザインになっています。

Photography Workshops/Dribble

もう一例、ヘッダーデザインに創造的なアプローチを取り入れたデザインをご紹介します。上記のWebサイトの初期ビューには、ソーシャルアイコンと検索のみが表示されており、最小限のヘッダーのみの構成です。

ユーザーがページをスクロールすると、横並びの配置はそのままに、固定ヘッダーが常に表示されるようになっています。

左上にはハンバーガーボタンが表示され、そこには複数のメニューが隠れています。間にブランドロゴを挟み、その後にはWebサイトの基本情報へのリンクが続きます。そしてページ右上部分に配置された検索アイコンで完結する構成にすることで、デザインに一貫性をもたせています。

ダブルメニューを採用したデザイン

ヘッダーのダブルメニューでは、2つのナビゲーションレイヤーを表示できます。こちらのベーカリーのWebサイトでは、2層構成の固定ヘッダーが使用されています。

Bakery Website/Dribble

上部メニューには、SNS・ショップロゴ・検索アイコン・買い物かごアイコン・ハンバーガーボタンへのリンクが表示されています。

もうひとつのナビゲーションエリアには、商品一覧・店舗情報・ニュース・連絡先などの基本情報へのアクセスリンクを表示。ビジュアルとタイポグラフィの階層構造により、すべての情報が読み取りやすいデザインとなり、ユーザーエクスペリエンスの向上につながっています。

まとめ：

どんなWebサイトにおいても、ヘッダーは戦略的役割を担う重要なパーツです。

対象ユーザーのタイプによって、使いやすいデザインも変わってくるので、それぞれサイトによって独自のアプローチを考える必要があります。ユーザーリサーチを行えば、伝統的なヘッダー構成を採用するのか、それともまったく新しい視点を投入するのか、といった選択の判断基準にもおおいに役立つでしょう。

（翻訳：Ayaka Takei）