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)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ