「ヒーローヘッダー」新しいWEBデザインのトレンドをBtoBの企業で使うとこうなる！

記事公開日：2017/06/07
最終更新日：2023/10/26

2,300社以上のWeb制作実績！
BtoB企業で成果を出すWeb制作プラン公開中！
Webサイトを制作するだけではなく、戦略・施策立案、Web制作、SEO、MAを活用したリードナーチャリング、コンテンツマーケティングなど、Webマーケティングの川上から川下まで、一気通貫で支援が可能です。少しでもWebリニューアル、ホームページ制作に興味がある方はお気軽に詳細をご覧ください！

詳細を見てみる

ビジネスの世界では、相手に与える“第一印象”は数秒で決まると言われています。

第一印象が良いと、次のステップも良い方向に進みやすいですが、悪い印象を与えてしまうと回復するのに余計な時間がかかってしまいます。

“第一印象”が大切という考え方は、ウェブサイトでも同じように、印象が良いと次を見たいと興味を湧かせることができます。

その一方、悪い印象を与えてしまうと、サイトの閲覧者はページを閉じてしまいがちです。

今回は、ウェブサイトの“第一印象”を良くする、「ヒーローヘッダー」について説明します。

1「ヒーローヘッダー」とは

2「ヒーローヘッダー」の効果

3「ヒーローヘッダー」のポイント

4BtoB企業サイトの「ヒーローヘッダー」事例

5最後に

1.「ヒーローヘッダー」とは

「ヒーローヘッダー」とは、ウェブサイトのファーストビューに伝えたいメッセージ文言や、ナビゲーションメニューなどを全画面の画像や動画の上に配置したデザインのことをいいます。

これまでも、大きめの画像を使って会社や商品を訴求するという手法はありましたが、「ヒーローヘッダー」は、ヘッダーと言いながらも、全画面表示であることが特徴です。

ヒーローヘッダー

ヒーローヘッダーに表示するヘッダーイメージ例

テキスト付イメージ
スライドイメージ
固定イメージ
ビデオ動画
アニメーションイメージ

会社やブランドのロゴ、ナビゲーションメニューなどは、イメージ写真に注目されるように、大抵は左上や右上の端に配置されます。

「ヒーローヘッダー」は、ビジュアルの要素に強く注力するため、シンプルなタイポグラフィーやミニマルな配色で作成されることが多く、サイト全体的なコンテンツの配置もシングルカラムのレイアウトが目立ちます。

2.「ヒーローヘッダー」の効果

「ヒーローヘッダー」は、全画面の画像を使うことで、ウェブサイトを開いたときに、一瞬で会社や商品のイメージを印象づけて表現することができます。そして、閲覧者をサイトの中へと引き込むことで、見てほしいコンテンツへも誘導しやすくなります。

さらに、全画面の動画をウェブサイトの背景として使用することで、サイトを訪れた人の興味が全画面の画像のときよりも高まります。

ただし、「ヒーローヘッダー」を使用する際には注意も必要です。

全画面の画像や動画の画質が悪かったり、表現するイメージが悪かったりすると、サイト全体の印象も悪くする恐れがあるため、この効果をうまく活用するためには、高画質で雰囲気あるすばらしいイメージ画像や動画が必要不可欠となります。

また、レスポンシブサイトで「ヒーローヘッダー」を動画にした場合は、スマートフォンでは閲覧できないケースが多いため、固定イメージに変換したほうが良い効果を与えられます。

3.「ヒーローヘッダー」のポイント

ヒーローヘッダーを使用する場合、いくつかのポイントを念頭に置く必要があります。
ここでは作成するポイント５つをご紹介します。

シンプルなデザイン

使用する画像や動画のデザインの邪魔にならないように、コンテンツ全体にメリハリをつけて、シンプルなデザインを意識しましょう。シンプルなデザインでも、必ずヒーローとなる画像や動画の領域はしっかり確保しましょう。

見出しタイトル・メニューのフォント

見出しタイトルは、閲覧者がはじめに見る箇所となるため、訴求したい文言を的確に表現する必要があります。タイトルには太字を使用したり、ナビゲーションメニューにはシンプルなフォントを使用し、差別化を図りましょう。

ヒーローイメージ・ヒーロー動画

画像や動画には、テキストを読みやすくするためにパターンやグラデーションを重ねて文字を読みやすくしましょう。レスポンシブサイトの場合、ウィンドウサイズごとに確認して、重要な箇所が切れないかを必ず確認しましょう。特にスマートフォンで閲覧した際には注意が必要で、画像サイズや動画サイズが大きすぎると、処理速度に影響してしまうため、適切なサイズに圧縮してください。