ヒーローエリアとは？第一印象で差がつくWebデザインの最新動向【実例付き解説】

初めて会った人の印象は3秒で決まると言われています。第一印象がいいと、そのあとの関係も続きやすいですよね。

同じように、Webサイトでも第一印象はとても大切。一番最初に目に付くエリアは、Webサイトの中でも特に力を入れたい部分です。

Webサイトの中でも最初に人の目に留まる、トップページの一番最初に表示される部分を「ヒーローエリア」と呼びます。この記事では、ヒーローエリアを魅力的にするためのポイントを実例を踏まえながらご紹介します。

ヒーローエリアとは

▲出典：MIKIYA KOBAYASHI

Webサイトの中でも一番最初に目に付くエリアを「ヒーローエリア」と呼びます。

近年、海外のWeb制作でトレンドになっているのが、このヒーローエリア全体に画像や動画を配置し、その上にメッセージやメニューなどを配置するという、大胆なデザイン手法です。画像を大きく配置するデザインはこれまでもありましたが、画像を全画面に表示させることで、より迫力があって印象的なデザインに。このような構図は特に「ヒーローヘッダー」と呼ばれています。また、ヒーローエリア全体に表示する画像を「ヒーローイメージ」と呼びます。

例えば以下の『CRAZY』のWebサイト。

▲出典：CRAZY

画面全体に画像が配置され、その上にメッセージを配置していますね。ヒーローイメージはこのように、ユーザーがWebサイトを訪れた瞬間に会社や商品のイメージを印象づける効果があります。

次に、動画クリエイター・TAO TAJIMAさんのポートフォリオサイト。

▲出典：TAO TAJIMA

ヒーローエリア全体に動画作品が流れ続けるサイトです。ぜひサイトで動画を見てみてください。

このように全画面で動画を流すことで、作品の世界観を伝えています。

魅力的なヒーローヘッダーを作る5つのポイント

▲出典：BENSEN

Webサイトを訪れたときに、最初に目につくヒーローエリア。

そんなヒーローエリアを大胆に使った、魅力的なヒーローヘッダーを作るためのポイントを5つ紹介します。

ポイント1. 適切で魅力的なヒーローイメージ・動画の活用

ヒーローヘッダーのポイントは、魅力的なヒーローイメージを活用すること。

• 高解像度できれいなイメージ・動画
  
• ブランドの与えたい印象を一枚で伝えてくれる
  
• レスポンシブサイトにしたときに、重要な範囲が切れない

上記のようなヒーローイメージ・動画を選べば、印象に残るヒーローヘッダーになるはずです。

ポイント2. 余白を生かしたシンプルなデザイン

ヒーローヘッダーの主役は、ヒーローイメージです。使う画像や動画の邪魔をしないよう、シンプルなデザインを意識しましょう。

画像や動画の上に配置するメッセージやメニューも、必要最小限にとどめるのがおすすめです。

ポイント3. 見出しのタイトル・フォント

画像や動画が主役といっても、商品名や企業名などの見出しは欠かせません。見出しにはヒーローイメージの上に載せてもきちんと主張してくれるフォントを使ったり、文字を太字にしたりといった工夫が必要です。

一方、ナビゲーションメニューにはシンプルなフォントを使うのがおすすめ。線の細いフォントやシンプルな形状のフォントを使いましょう。

ポイント4. 文字が見やすいカラー

ヒーローイメージは、上に載せる見出し文字が見えるように、グラデーションを重ねるなどして色味を調整しましょう。

ポイント5. CTAボタンを強調する

サイトを見た人に押してほしい、CTA（Call to Action）ボタンのデザインも重要なポイントです。「購入する」「詳しく見る」「始める」など、特にしてほしいアクションがある場合は、ボタンを色を変えて目立たせるなどの工夫が必要です。

ヒーローイメージの上に載せても目立つCTAボタンを作りましょう。

ヒーローエリアを大胆に使ったWebサイト事例4選

ヒーローエリアに大胆に画像や動画を配置した、素敵なWebサイトを紹介します。

事例1. Kadir Inan

▲出典：Kadir Inan

UI/UXデザイナー・Kadir Inanのポートフォリオサイトです。手がけたプロジェクトのビジュアルとコンセプトが、画面いっぱいに次々と表示されるサイトデザインになっています。

プロジェクトのコンセプトが伝わりやすいよう、コンセプト以外のテキストメッセージは最小限にとどめています。

テキストのベースカラーに白、アクセントカラーにやわらかいオレンジを使い、メインビジュアルを目立たせるデザインに仕上がっています。

事例2. Bees&Honey

▲出典：Bees&Honey

ブランドデザインを手がける『Bees&Honey』のコーポレートサイト。

同じく手がけたプロジェクトを伝える構成ですが、コンセプトも小さくグレーで表記することでさらにシンプルに仕上げています。
テキストのカラーも全てグレーで統一しているため、ヒーローイメージに視線が集まるサイトデザインです。

事例3. FEEL KIYOMIZUDERA

▲出典：FEEL KIYOMIZUDERA

清水寺の「いま」をつかまえ、伝えようとする『FEEL KIYOMIZUDERA』プロジェクト。ヒーローイメージがゆったりと移り変わるのが、サイトデザインのポイントです。

さまざまな清水寺の瞬間をとらえながらも、落ち着いた印象のビジュアルを使うことでまとまりを出しています。色味の暗いヒーローイメージを使うことで、シンプルなテキストでも存在感がありますね。

事例4. SQUARESPACE

▲出典：SQUAREAPACE

デザイン性の高いWebサイトを簡単に作成できる、『SQUAREAPACE』のサービスページ。プロダクトの紹介サイトをどのようなデザインで作れるのか、一目で分かるのがポイントです。ヒーローイメージを切り取り、サイトのイメージ動画につなげる演出もおしゃれ。

こんな素敵なサイトが作れるなら、と思わず「GET STARTED」を押したくなるデザインです。

まとめ

画像や動画を全画面に配置するヒーローヘッダー。企業や商品のイメージを一目で伝えられる、印象に残りやすいデザインです。

サイトの用途に合わせて、素敵なヒーローエリアを作ってみてくださいね。

（執筆：mattun　編集：shochik）