デザインを考える～ヒーローヘッダー～

ヒーローヘッダーとは

ヒーローヘッダーとは、ウェブサイトのフロントページのファーストビューに伝えたいメッセージやナビゲーションメニューなどを、全画面の画像や動画の上に色々なパーツを配置したデザインのことを言います。
 
ヒーローヘッダーはヘッダーと言いっても全画面表示であることが特徴です。

　ヒーローヘッダーに表示するヘッダーイメージ例は以下のような物があります。

・テキスト付イメージ
・スライドイメージ
・固定イメージ
・ビデオ動画
・アニメーションイメージ
 
　コーポレートサイトは会社のロゴやブランドのロゴ、ナビゲーションメニューなどがイメージ写真に注目されるように大抵は左上や右上の端に配置されます。
 
ヒーローヘッダーのビジュアルの要素に強く注力するため、シンプルなタイポグラフィーやミニマルな配色で作成されることが多く、サイト全体的なコンテンツの配置のワイヤーフレームはシングルカラムのレイアウトがよく目立ちます。

ヒーローヘッダーの効果

ヒーローヘッダーは、全画面の画像を使うことで、ウェブサイトを開いたときに、一瞬で会社や商品やサービスのイメージを印象づけて表現することができます。 閲覧者をサイトの中へと引き込むことで見てほしいコンテンツへも誘導しやすくなります。
 
　ウェブサイトの背景として動画を使うことでさらにサイトを訪れた人の興味が全画面の画像のときよりも高まります。
 
ヒーローヘッダーを使用する際には注意も必要です。
 
　全画面の画像や動画の画質が悪かったり、表現するイメージが悪かったりすると、 サイト全体の印象も悪くする恐れがあるため、この効果をうまく活用するためには高画質で雰囲気あるイメージ画像や動画が必要になります。
 
　レスポンシブ対応も考えないといけません。ヒーローヘッダーを動画にした場合、スマートフォン経由では閲覧できないケースや通信速度に配慮が必要が多いため、固定イメージに変換したほうが良い効果を与えられます。

ヒーローヘッダーのポイント

　ヒーローヘッダーを使用する場合、いくつかのポイントがあります。以下に５つのポイントをご紹介します。

デザイン

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

配色

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

フォント

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

背景素材（静止画／動画）

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

ボタン

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