エムタメ!について twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

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

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

記事公開日:2017/06/07
最終更新日:2023/10/26
「ヒーローヘッダー」新しいWEBデザインのトレンドをBtoBの企業で使うとこうなる!

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

    詳細を見てみる



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

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

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

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

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

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

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

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

ヒーローヘッダー

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

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

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

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

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

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

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

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

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

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

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

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

シンプルなデザイン

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

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

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

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

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

配色

ヒーローイメージは、ヒーローとなる画像の領域が広いため、派手過ぎる画像はあまり相応しくありません。 閲覧者を疲れさせないためにも、モノクロの写真を使用したり、単色カラーで色を抑えめにしてシンプルな配色にしましょう。

CTA(Call-to-Action)ボタン

ヒーローイメージや見出しタイトルの見せ方が決まったら、 閲覧者に押して欲しいアクションボタンもデザインしましょう。 ヒーローイメージ同様に、CTAボタンも視覚的に目立たせることが必要です。

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

IR情報などの情報発信を主としたコーポレートサイトではやや使いにくいですが、会社のメッセージを大胆に伝えたいブランディングを目的とした企業サイトではとても効果的です。

 

「ヒーローヘッダー」を上手く活用した、BtoB企業サイト5社をご紹介します。

 

株式会社アポローン

https://www.apollon-group.co.jp/

参考:株式会社アポローン

 

 

株式会社テイ・エス・メカティック

http://www.tsmechatech.jp/

参考:株式会社テイ・エス・メカティック

 

 

株式会社マーケットエンタープライズ

https://www.marketenterprise.co.jp/

参考:株式会社マーケットエンタープライズ

 

 

丸京染色株式会社

http://www.marukyou-mk.co.jp/

参考:丸京染色株式会社

 

 

株式会社前田組

https://maeda-g.co.jp/

参考:株式会社前田組

5.最後に

冒頭でも記述したとおり、ビジネスでは“第一印象”の大切さがよく言われますが、ウェブサイトでも“第一印象”の良さは、閲覧者のクリック率を上げる重要なポイントのひとつとなっております。

 

もちろん、ウェブサイトは“第一印象”がすべてではありませんが、 ユーザーに選んでもらえるようなサイトにしていかなければいけません。

 

今回ご紹介した「ヒーローヘッダー」は、会社や商品のイメージを訴求しやすい表示エリアのため、貴社のサイトで印象が良いイメージをユーザーに届けられるか、ぜひ考えてみてはいかがでしょうか。

 

 

 

 


特集

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング

この記事を共有