ヒーローヘッダーとは？活用のメリット・デメリットとサイトの例を紹介

ヒーローヘッダーとは

「ヒーローヘッダー」とは、Webサイトのファーストビューを大きな画像や動画を使って覆い尽くすデザインです。ファーストビューとはWebサイトにアクセスしたとき、最初に表示されるメインビジュアルのことで、Webサイトの第一印象を決めます。

近年、ファーストビューのデザインにヒーローヘッダーがよく使われており、Webサイト制作のトレンドです。具体的にどのような効果やメリットが期待できるのでしょうか。

ヒーローヘッダーの特徴

ヒーローヘッダーは言葉のとおり、トップページのファーストビューに表示されます。あくまで「一番最初に表示される大きな画像や動画のデザイン」を指す言葉です。

ヒーローヘッダーは、大きな画像を画面いっぱいに表示するだけでもダイナミックな印象を与えることができます。シンプルなデザインであれば、技術的にそこまで難しいものではありません。

トップページ以外で画面を広く使い、画像を用いたデザインは「ヒーローイメージ」と呼ばれます。

ヒーローヘッダーを使うメリット

ヒーローヘッダーは大きく画面を使ってユーザーに訴えかけるデザインです。ヒーローヘッダーを使うことでどのようなメリットが得られるのでしょうか。

主な活用のメリットは、次の3つです。

商材をユーザーに印象付けられる

ヒーローヘッダーは視覚的に強く訴えかけるのに高い効果をもつため、ユーザーに強く商材の印象を与える働きがあります。ページを開いてすぐユーザーの目に留まるため、とくに強く宣伝したい商品情報やキャンペーン情報を表示すると効果的です。

テーマを簡潔に伝えられる

ヒーローヘッダーを用いるメリットは、テーマを簡潔に伝えられる点が挙げられます。Webサイトを制作する際に大切なのは、サイトのコンセプトやブランディングをユーザーに理解してもらうことです。

ヒーローヘッダーは大きな画像がトップビューを占める構造であり、視覚情報としてテーマをユーザーに伝達できます。初訪問のユーザーにとっては、文字情報より画像や動画の方がキャッチ―に映ることが多く、Webサイトへの関心を引くきっかけとなります。

おしゃれなWebサイトに見える

ヒーローヘッダーを利用するメリットは、比較的手軽におしゃれなWebサイトが作れる点です。ヒーローヘッダーは印象的なデザインですが、作り方は難しくありません。

背景画像に画面いっぱいを覆う大きなサイズの画像を設定するだけで完成するため、コーディングの知識がない人でも作ることができます。

制作工程が簡単でありながらパッと見て印象に残るWebサイトにできるため、ヒーローヘッダーは多くの企業が取り入れているデザインです。ファーストビューで好印象を与えることができれば、初訪問のユーザーがそのまま足を留めてくれる可能性が高まります。

ヒーローヘッダーを活用しているサイトの例

ヒーローヘッダーを実際に用い、ユーザーへのアピールをしているWebサイトを6つ紹介します。

voice cream 奈良

voice cream 奈良は、奈良県の魅力を発信するWebサイトです。運営元のvoice creamでは「訪れる人」と「暮らす人」の声を通じて土地の魅力を発信し、旅行者への価値提供をコンセプトにしています。

voice cream 奈良のWebサイトの特徴は、サイトに入るとすぐに観光促進のPR動画が大きく表示される点です。動画の中央には「Find the hidden essence of Japan」と書かれたロゴが設置されており、ロゴは数秒後に消失します。

ユーザーが見たくなるようなテンポのいい映像で、Webサイトのコンセプトである「奈良の魅力」を伝えるために鹿や寺院などが中心に取り扱われています。

MTRL （マテリアル）

MTRL（マテリアル）は、樹脂、繊維、金属など幅広い素材を取り扱うBtoB企業です。Webサイトのトップには、ヒーローヘッダーとして企業で実施しているキャンペーンや今後のビジョンなどを紹介しています。

モーションを加えた画像で3つのトピックを自動で循環する仕組みになっており、ユーザーが文字を読めるギリギリの速度で進みます。最後のトピックまで進むと最初に戻るので、ユーザーが操作を加えるまでは3つのトピック紹介を続ける形式です。

BtoB企業のWebサイトはBtoC企業のものに比べると堅いデザインが多いですが、MTRL はポップなWebサイトを構えているのが特徴です。

HAKONE RETREAT VILLA 1/f

HAKONE RETREAT VILLA 1/fは、神奈川県の箱根にある宿泊施設です。Webサイトのトップには宿泊施設内部の写真が自動で流れるヒーローヘッダーが設置され、上部には「HAKONE RETREAT VILLA 1/f」の文字と予約ページに進めるボタンがあります。

Webサイトを訪れたユーザーが宿泊施設の魅力を感じられるよう、テンポのいいスライドで施設内のさまざまな箇所を紹介しています。

コンバージョン率を高めるために予約ページのボタンをヒーローヘッダーに設置している点が特徴です。インパクトのあるデザインと実用性を兼ね備えたデザインといえます。

東京 日本橋

東京 日本橋 の公式サイトは、ヒーローヘッダーを効果的に使用したWebサイトの好例です。伝統を感じさせる大きな画像を背景に、その下にはアニメーションで日本橋を渡る人々の姿が表現されています。

スライドショー形式で、表示画像が一定時間で変化する工夫も特徴的です。江戸文化の象徴である日本橋を強く印象づける効果的なデザインといえるでしょう。

FEEL KIYOMIZUDERA

FEEL KIYOMIZUDERAは清水寺の魅力を伝えるプロジェクトのWebサイトです。ヒーローヘッダーに表示される画像がゆっくり切り替わり、清水寺のさまざまな瞬間をユーザーに強く印象づけます。落ち着いた色合いとシンプルなテキストで、全体的な雰囲気が統一されているのも効果的です。

映像が切り替わる瞬間に水面が揺れるような効果を使用することで、自然と文化が調和した清水寺の雰囲気が表現されています。

TYOパブリック・リレーションズ

TYOパブリック・リレーションズは青空と東京の町並みの大画像を表示したヒーローヘッダーによるデザインのWebサイトです。スクロールすると赤と白の三角が窓の効果を生み、まるで東京の町並みを丘の上から見下ろしているような気分になれるでしょう。

ページ全体に赤色を散りばめることで全体的に柔らかい雰囲気を出し、見る人に安心感を与えるデザインになっています。単純なようで考え抜かれたデザインです。

ヒーローヘッダーを使うリスク

ヒーローヘッダーの活用にはリスクがあります。導入の際には以下2つのリスクを念頭におき、ヒーローヘッダーを活用していきましょう。

メインコンテンツに到達するまでに時間がかかる

ヒーローヘッダーを利用すると、ユーザーがメインコンテンツに到達するまでに時間がかかります。ヒーローヘッダーはトップページの最上部の広い部分を使って情報を伝えるデザインです。そのため、専有面積が広く他のコンテンツを圧迫することがあります。

その結果、ユーザーが必要としている情報に到達するまでに時間がかかり、不便さを感じさせる可能性があります。

画像が重いと読み込みに時間がかかる

ヒーローヘッダーに使用される画像や動画は、ユーザーの興味を引くような、インパクトを重視した内容が求められます。そのため、画像や動画は作り込まれたものになる傾向があり、データ容量が重くなるリスクに注意しましょう。

画像や動画があまりに重すぎると、インターネット環境やデバイスの性能によっては読み込みに長時間かかることもあります。

ヒーローヘッダー作成の注意点

ヒーローヘッダーを作成するためには以下の5つのポイントに注意しましょう。

読み込み速度に配慮する

ヒーローヘッダーに用いる画像や動画は、ユーザーが読み込みにストレスを感じないサイズに設定しましょう。高性能のPCのみで作動テストをしていると、読み込み速度の遅さに気づけないことがあります。

さまざまな環境でさまざまなデバイスを用いてテストを実施し、スムーズにページを開けるか確認することが大切です。

内容を作り込んで精度の高いものを設置しても、読み込みが遅くなりユーザーの離脱を招いては元も子もありません。バランス感覚を大切にヒーローヘッダーを作成しましょう。

PCとスマホの両者の見え方を確認する

ヒーローヘッダーを作成する際には、使用デバイスによって見え方が異なる点に注意しましょう。PCの横長の画面であれば自然に感じるデザインでも、スマホやタブレットなど縦長の小型デバイスでは表示が不自然になることがあります。

とくにシンプルな画像ではなくモーション付きの画像や動画を用いる場合、他デバイスでの見え方は必ず確認しなければなりません。Webサイト閲覧のデバイスでスマホの割合が高い場合、スマホからの見え方を中心にデザインを考えましょう。

ヒーローヘッダー以外のコンテンツを充実させる

ヒーローヘッダーをWebサイトに取り入れる場合、ヒーローヘッダーのみに時間をかけずに他のコンテンツを充実させることも大切です。ヒーローヘッダーを見て興味を持ち立ち止まったユーザーが、長く滞在し回遊できる仕組みを作りましょう。

ヒーローヘッダーがいくらドラマチックでおしゃれでも、Webサイトの入り口部分にすぎません。コンバージョンを誘うためには、ヒーローヘッダー以外のコンテンツ作成にも力を入れ、ユーザーにとって魅力的なWebサイトにする必要があります。

ヒーローヘッダーとその他のデザインを統一する

ヒーローヘッダーを導入する場合、Webサイト内の他のデザインと統一感を大切にしましょう。他のデザインと大きくかけ離れてしまうとその部分だけ浮いてしまい違和感を与えてしまうでしょう。

配色があまりに違うものにならないように注意し、字体やロゴで統一感を出すと効果的です。デザインを統一することで、Webサイトが見やすくなり説得力が生まれます。

マルチデバイスへのレスポンシブを確認する

ヒーローヘッダーを採用する場合、PC、タブレット、スマホなど、さまざまなデバイスでの見栄えをチェックする必要があります。ヒーローヘッダーは、画面全体を大きく覆うデザインのため、閲覧するデバイスの画面の大きさによって印象が変わってしまいます。

PCの横長画面で見る場合とスマホの縦長画面で見る場合でヒーローヘッダーの印象は大きく変わります。スマホユーザーによる閲覧が多いWebサイトでは、スマホ画面でのヒーローヘッダーの見栄えを大切にしましょう。

まとめ

ヒーローヘッダーは、インパクトのあるWebサイトを作るためにおすすめのデザインです。画像や動画をトップに配置することでユーザーの目を引き、印象に残るWebサイトにできます。

簡単なヒーローヘッダーであれば画像を設定するだけですが、アニメーションを付けたり効果を追加したりするためには、高度な専門知識が必要になります。洗練されたおしゃれなWebサイトに仕上げるためには、プロに相談するのがおすすめです。

比較ビズでは、複数のWebサイト制作会社への一括見積を無料で承ります。条件を比較しながら最適な業者を選べるため、納得のいく仕上がりが期待できるでしょう。

お気軽にご相談ください。

監修者のコメント

株式会社セルリア

代表取締役 佐藤靖将

大学卒業後、Webコンサルティング企業で2年ほどセールス兼コンサルタントに従事。その後フリーランスに転身し総合広告代理店、Webシステム開発会社、クリエイティブエージェンシーなどの企業で主にプロジェクトマネージャーとして顧客のデジタル関連プロジェクトを支援する。それらの経験から、総合的かつ一気通貫のデジタルソリューションを提供したいと考え株式会社セルリアを設立。以降、クライアントの課題解決に邁進する日々を送る。

詳しく見る

Webサイトの第一印象を決めるTOPページのファーストビューは言うまでもなく非常に重要です。一般的なデザインの一つとして、左上にロゴ、右上にWebサイトのメニュー、その下に大きめの画像を複数枚、スライダーで設置する。といったものがよく見られます。

これは多くのサイトがそのような作りになっているため、ユーザーにとっても馴染みがあり使いやすいデザインと言えます。しかし、このようなデザインの難点はやはりありきたりな見た目で印象に残りづらいといった点であるかと思います。

見るひとにインパクトを与えたい場合、ヒーローヘッダーはとても有効です。一言にヒーローヘッダーといっても、1枚画像を見せるデザインや、背景動画を設置する、スライダーを設置するなどバリエーションがありますので、目的に合わせて実装を検討すると良いでしょう。

Webサイトの顔とも言えるファーストビューは工夫のしどころ。ヒーローヘッダーに限らず、アニメーションを使用したものや、あえて文字だけでデザインされたものなどオリジナリティに富んだサイトも数多く存在するので、デザイナーと話し合いながらより自社に合った表現を見つけていくのも良いかもしれません。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。