Webサイトの訴求力を高めるのに参考になるヘッダーデザイン38選

ヘッダーは、いわばWebサイトの顔。訪問者が、あなたのWebサイトをじっくり見るか判断するための場所です。

ヘッダー作りのポイントは3つ。

• ブランドイメージを印象づけるデザイン
• 簡単な操作
• ユーザーがWebサイトを快適に探索できる環境

この記事ではWebサイトやブログのヘッダーをデザインするときに参考にしたいさまざまなアイデアを、海外の優れた事例とともに紹介します。

ヘッダーデザインの基本的な考え方

まずは、サービスや製品の特徴表現したグラフィックや写真をレイアウトし、画像を中心にアイコンや説明文などの要素を追加します。

次にヘッダーのデザインが、そのWebサイトのアイデンティティーをしっかりと表現しているかを確認してください。サービスや会社のロゴも忘れずに挿入しましょう。

ヘッダーは、Webサイトの中で非常に大切な構成要素の一部です。訴求力のあるWebサイトに仕上がるよう、しっかりと時間をかけてデザインや色を決定してください。

ヘッダーデザイン作りで考慮したい10のアイディア

1. 人物をメインにする

有名人やモデルの写真を利用する場合は、Webサイトの訪問者がその人物に親近感を抱きやすいよう工夫しましょう。笑顔の写真を使用すると、より効果的です。

人物を中心にしたヘッダーを作るときも、ロゴやサービスの名前、伝えたいメッセージをインターフェイスに組み込みましょう。

2. 製品、イベント、サービスなどの画像をメインにする

製品、イベント、サービスなどの画像をヘッダーとする場合は、ロゴやキャッチコピーをセンターに配置するのがポイントです。その下には、商材の信頼性を裏付けるような文章を加えましょう。特記事項だけに絞って記述すれば、訪問者はあなたのWebサイトで目的を達成できるかどうか判断できます。

また、イベントやプログラムを宣伝するためのヘッダーを設計するなら、ヘッダーに使う画像がその内容をしっかりと伝えていることを確認してください。屋内で開催するイベントなのに、屋外の写真を使ってはなりません。

3. 適切な大きさにする

情報やコンテンツ量の多いサイトなら、インパクトのあるヘッダーは必要ありません。すぐにコンテンツの探索をはじめられるように、縦の長さが短いヘッダーを使用しましょう。

特定の商品だけを宣伝するWebサイトの場合は、大きくてインパクトのあるビジュアルを使って訪問者を惹きつけると効果的です。このとき、サービスや製品を紹介するためのキャッチコピーや説明文もヘッダーに含めましょう。

4. 適切な情報量にする

ヘッダーは、訪問者にWebサイトの内容をすばやく認識してもらうための役割を担っています。

サービスを提供している場合は、過去の実績や作業内容をヘッダーで示すのも効果的です。

またイメージヘッダーとしてたくさんの画像を見せたい場合は、イメージカルーセルを利用しましょう。ポートフォリオなどを表示したいときにもこの方法はおすすめです。

5. できるだけシンプルにデザインする

Webサイトの訪問者が、探し物をすぐに見つけられるよう、できるだけシンプルなヘッダーをデザインするべきです。

6. ブランドの支持者を増やす

インパクトのあるビジュアルと効果的なコピーライティングを組み合わせれば、訪問者の心をグッと惹きつけられます。たったひとつのヘッダーで、ファンを増やせるのです。

7. 伝えたいメッセージ明確にする

ヘッダーで伝えることをひとつに絞りましょう。上記のスクリーンショットにはカメラを持った男性が写っていて、その隣には「INSPIRATION」の文字が並んでいます。最低限の情報のみで構成することによって、商品の特徴が伝わってきます。

8. 遊び心を加えてみる

ミニマムなヘッダーデザインが推奨されがちですが、上記の画像のようにプラスαの情報を提供した方が良い場合もあります。

9. 注目を集める

デザインが優れているWebサイトには常に人が訪れます。まずは訪問者の視覚に訴えかけて、「あなたのWebサイトをもっと見たい！」と思ってもらうことが重要です。

美しいデザインは、閲覧するだけでも楽しめます。

10. 小さなアクションを起こしてもらう

ヘッダーに、訪問者が簡単に参加できるようなアクティビティを用意しましょう。小さくても繰り返し行動してもらえば、Webサイトと訪問者の関係が深まり、次第にアクティブユーザーとなります。

その他の参考にしたいヘッダーデザイン20選

1. Kayako

2. Musicbed

3. Whiteboard

4. LEDbow

5. Baxter of California

6. Orangina

7. Tembo Inc.

8. Sternberg Clarke

9. The Prince Ink

10. Prott

11. World In My Lens

12. Brad Hogan

13. Runrunit

14. Tradestone Confections

15. Gooten

16. Etsy

17. Rokivo

18. Formfett

19. Postbox

20. Pictory

まとめ

Webサイトのヘッダーを制作する方法はたくさんありますが、多くの人に好まれているのはシンプルで明確なヘッダーです。まずはスタンダードなデザインを学ぶべきでしょう。優れた事例を研究して、製品やサービスの良さが伝わるヘッダーデザインに取り組んでみてください。

（翻訳：Hisae Sasaki）