ヒーローヘッダーはたくさんのWebサイトで採用されている人気のデザイン手法です。大きな写真や動画によるデザインは、多くの人を惹きつけ、同時に強烈なインパクトを与えることができます。

今回は、改めてヒーローヘッダーの特徴についてご紹介し、ヒーローヘッダーを効果的に取り入れている参考にしたいWebサイトをまとめてみました。

ヒーローヘッダーとは

ヒーロヘッダーとは、Webサイトを開いた時に表示されるファーストビュー(メインビジュアル)を覆い尽くすサイズの画像や動画を使用したデザインの事を指します。初めに海外でヒーローヘッダーを取り入れるサイトが増えてきて、今では多くのサイトで使われる流行りのデザイン手法となりました。最近では動画をヒーローヘッダーに使用するWebサイトも増えてきて、こちらも定番のデザイン手法になりつつあります。

似たような言葉で「ヒーローイメージ」という言葉がありますが、ヒーローイメージは、ファーストビュー以外の箇所で画面幅いっぱいに表示される画像のことを指します。

初心者の人でもコーディングを行いやすく、上級者の人も様々なWebサイトのデザインに取り入れているというのは、ヒーローヘッダーの特徴の1つですね。

ヒーローヘッダーの特徴

ヒーローヘッダーの特徴や、デザインに取り入れることによる効果をご紹介します。

Webサイトの世界観を演出できる

Webサイトのトップページのファーストビューは、多くのユーザーがそのWebサイトの中で最初に目にするページで、言わば「Webサイトの入り口」です。そこに印象的な画像や動画を表示することによって、なんとなくページを開いたようなユーザーでも、一気にWebサイトの世界観へと引き込むことができます。

例えばこちらのWebサイトをご覧ください。

ヒーローヘッダーに使用されている画像がとても特徴的で、そのインパクトが印象に強く残りそうな気がしませんか？また、何のサイトなんだろうと思ってページの続きを見てみたくなったのではないでしょうか？

このサイトはN.P.シンガポールという食材を扱う企業のコーポレートサイトです。この会社のビジョンには食を通じて人々を幸福にするということが掲げられており、ヒーローヘッダーに表示されている画像がまさにその世界観を演出していますよね。このように、ヒーローヘッダーを使用するとそのWebサイトの世界観を演出することがでいます。

シンプルな構成でも格好良く見せることができる

ヒーローヘッダー自体の実装は、画面いっぱいのサイズで背景画像を設定するだけです。特に難しい技術を必要としないためシンプルなデザイン手法ではありますが、ファーストビューに大きく表示される画像によって雰囲気のあるWebサイトに仕上げることができます。

ファーストビューのデザインはとても重要で、ここでユーザーを惹きつけることができなければすぐに離脱してしまうかもしれません。ヒーローヘッダーにWebサイトのイメージや目的に適した画像を表示しておけば、難しいコーディングを行わなくてもファーストビューのデザインを格好良く仕上げることができ、多くの人にページの中身を見てもらえることが期待できます。

レスポンシブデザインと相性が良い

ヒーローヘッダーは、レスポンシブデザインのWebサイトと非常に相性が良いです。CSSで画面いっぱいに画像を表示するように設定しておくことで、様々なデバイスでの表示に対応することができます。

最近「モバイルファースト」という言葉をよく耳にすると思いますが、これからはスマホで開いた時にどのように表示されるかというのが、これまで以上に重要となってきます。レスポンシブデザインと相性のいいヒーローヘッダーは、今後も多くのWebサイトで使われていくでしょう。

ヒーローヘッダーのデザインの参考にしたいサイト

ヒーローヘッダーを使ったWebサイトはたくさんありますが、その中でも効果的にヒーローヘッダーが使われていて、デザインの参考にしたいWebサイトをピックアップしてみました。

東京・日本橋

東京駅から徒歩5分の場所に位置する町「日本橋」の公式Webサイトです。ファーストビューがヒーローヘッダーで構成されていて、表示されている画像はスライドショー形式で切り替わるようになっています。

古き良き町である日本橋の伝統を感じる写真の下には、日本橋を渡っている人々がアニメーションで表示されていて、日本橋という町の趣を感じさせるデザインによってWebサイトの雰囲気がうまく演出されていますね。

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

東京の空と町並みが写った写真がヒーローヘッダーに表示されているWebサイトです。画面下部の左右に三角形のパーツが表示されていることによって、まるで丘の上から東京の空を見上げているような錯覚を覚えるデザインが素晴らしいと思いました。

シンプルな画像をヒーローヘッダーに設定することによって、Webサイト全体が落ち着いた雰囲気となりページ全体の雰囲気が柔らかくなっていて、ページ全体に散りばめられた赤色の配色が安心感や信頼感を与えてくれます。

monami

ヒーローヘッダーに表示するのは画像だけとは限りません。動画をヒーロヘッダーで再生することでよりキャッチーなWebサイトを作ることができます。

このサイトはmonamiというロボットに関するページですが、ページに訪れた人たちがまず目にするのはロボットが色々な動きを見せている姿です。初めてmonamiを見た人でもmonamiがどういったロボットなのか視覚的に理解でき、愛くるしく動く姿は親近感を感じさせます。

ヒーローヘッダーに効果的に動画を用いることで、アクセスした人に強く印象を残すようなデザインは最近多くのサイトで採用されていますね。

まとめ

ヒーローヘッダーという言葉を知っていても、しっかりとそのデザインについて考えたことは無かったという方も多いのではないでしょうか。

ヒーロヘッダーをデザインに取り入れるだけで、ある程度見栄えのいいデザインを作成することができます。しかし、そこに表示されるテキストやメニューなど、ヒーローヘッダーの周辺要素のデザインをどのように行うかが、デザイナーの腕が試されるポイントになります。

参考にしたいサイトとご紹介した日本橋のWebサイトや、TYOPRさんのサイトはヒーローヘッダーに添えられているデザインが洒落ていてWebサイトの雰囲気が演出されています。デザイナーであればこういうデザインは作ってみたいと思う人も多いですよね。

この記事がヒーローヘッダーについて改めて見直す機会となり、デザインの制作に役立てていただければ光栄です。

おすすめの記事