人の印象は「第一印象」でほとんどが決まると言われています。
もちろん、その第一印象を大事にするという概念は、ホームページでも同様です。

第一印象が悪ければ、ユーザーはホームページからすぐに離脱してしまいます。逆に、ホームページの第一印象がよいと離脱率が低く、リピートにもつながります。
それでは一体、ホームページの第一印象を良くするにはどうしたらよいのでしょうか。

ずばり、そのポイントは、ホームページのヘッダー部分にあります。

そこで今回は、こんにちのホームページの多くで取り入れられている、ヘッダー部分に画像や映像を使ってインパクトを与える「ヒーロー」について、5つのポイントを交えて紹介します。

ぜひホームページ制作時の参考としてください。

Webデザインにおける「ヒーロー」とは

udatsu.jpeg
▲ 株式会社ウダツのホームページ。会社のロゴを中央に置いたヒーロー画像が配置されています

「ヒーロー」 (Hero)とは、ホームページにおいて、ページのファーストビューで大胆に配置された画像や動画のことを指します。特に、画像を使ったヒーローのことを「ヒーロー画像イメージ」 (Hero Image)、動画を使ったヒーローのことを「ヒーロー動画ムービー」 (Hero Movie)ということがあります。

ヒーローは、ブログなどのテキスト中心のホームページでなければ、ほとんどのWebサイトで採用されています。コーポレートサイトをはじめとする、ブランドイメージやコンセプトをユーザーに伝えることを目的としたホームページの場合は、画像や映像を効果的に使うことで、エンゲージメント率を高め、ユーザーをファンにさせる役割を果たしています。
　　

ヒーローの特徴

ただ単に画像をヘッダーに敷き詰めただけでは、ヒーローとは呼べません。
それでは、どのような条件をクリアすればヒーローと呼ぶことができるのでしょうか。

ファーストビューにおける画像や映像の割合が大きい

choco.jpeg
▲ KOBE CHOCOのホームページのヒーローは、画面全体にチョコレートのイメージを敷いています

「ファーストビューでいかにインパクトを与えるか」
これがヒーローの存在意義といっても過言ではありません。

そのため、単に上の方に画像を置いただけでは、インパクトに乏しく、ヒーローとは言えません。

chocomobi.jpg

目安として、あらゆるデバイスで、少なくともファーストビューの3分の1はヒーロー部分がカバーしているのが好ましいでしょう。
デスクトップは横長、スマホなどのモバイル端末では縦長で表示することが多いですが、そのことも留意しつつデザインしていきましょう。
　　

キャッチコピーがある

ocha.jpeg
▲ 伊藤久右衛門のホームページでは、「人生に、お茶の時間を。」というキャッチコピーでイメージ喚起しやすくしています

必須であるというわけではありませんが、ほとんどのヒーローには「イメージ」と結びつける「言葉」(＝「キャッチコピー」)が存在しています。
ヒーロー画像やヒーロー動画に添えられたインパクトのある短いキャッチコピーやロゴなどは、イメージを想起させるためのトリガーの役割を果たします。
　　

テーマが1秒でわかる

non.png

ヒーローの画像や映像とキャッチコピーの整合性が合わなかったり、ヒーロー画像自体が見にくく印象的ではない場合は、ヒーローの役割を果たしていないことになります。
簡潔に言えば、テーマが1秒で分かるかどうかを意識する必要があります。

例えば、上に挙げたデタラメなヒーローは、画像自体もコントラストが低すぎて見ずらく、画像とキャッチコピーの整合性もありません。
これは極端な例かもしれませんが、できるだけイメージが湧きやすく印象に残りやすいイメージとキャッチコピーを使うべきです。