第一印象でユーザーをファンにする！ヒーロー画像を設置するときに気をつけたい5つのこと

更新日: 2018年01月31日

CMS・サイト制作

人が他人を第一印象で大きく評価してしまうのと同様に、ホームページに関しても、来訪したユーザーはホームページの見た目から何かしらの反応を示します。
肯定的であっても否定的であっても、その反応は最初に何を見たかに大きく左右されます。

視覚は人間の五感の中でも最も強力なセンサーなので、ホームページの冒頭に設置する大きなアイキャッチ画像であるヒーロー画像を使うのが、ユーザーの注目を集める一番の近道です(ヒーローは「主役」の意味)。
大胆で、美しく、意図の伝わりやすい画像ほど、ユーザーの心を惹くものです。

もはや、ヒーロー画像は単なる写真ではありません。
最も強力なコミュニケーションツールです。

今回は、第一印象でユーザーをファンにするヒーロー画像を設置するときに気をつけたい5つのことをご紹介いたします。
紙にラフスケッチを描いたり、プロトタイピングツールや描画ソフトを開く前に、どのようなヒーロー画像が効果的かを考えてみましょう。

ヒーロー画像を設置するときに気をつけたい5つのこと

1. サービスに関連する画像を使う

例えば、人に初めて会ったらまずは顔を合わせて自己紹介を行うように、ヒーロー画像も、初めて訪問してくれたユーザーに行うような自己紹介の役割をしていると考えてみましょう。
というのも、ヒーロー画像の主な目的というのは、来訪したユーザーに、このホームページはどんなサイトで、どんなことを伝えたいかをユーザーに一番初めに迅速に語りかける役割があるからです。

逆の場合を考えてみると、どうでしょうか。
ヒーロー画像がホームページの内容を正確に反映できてなければ、ユーザーにどういう行動を取って欲しいのかが明確ではなくなります。
その意味では画面上方のスペースを無駄に使っていることになり、ユーザーに混乱を招いてしまいます。

写真を使う場合には、どのような写真がいいかを選定する必要があります。
テーマに合う写真であることはもちろん、最終的にユーザーにどのような行動を取って欲しいのか(つまりはコンバージョンに帰結する行動要請＝CTA)をイメージできる画像のほうがよいでしょう。

ファッションブランドのようなイメージ先行型のプロダクトを販売している場合は、ブランドを代表するような写真であるべきです。
そのブランドのプロダクトを身につけることでこのようなイメージに浸れるのだとユーザーに感じさせることが大切です。

HomeAwayのホームページのように、人気の滞在場所をヒーロー画像にするのも、ユーザーのサービス利用イメージを喚起するので効果的です。

デジタルプロダクトの場合は、実際のプロダクトを使っている様子を実演してみるのも、ユーザーの利用イメージを喚起できるのでよく使われます。
Slackのプロダクトページでは、スラックでのコミュニケーションの様子を「Watch the tour」というボタンを押すことで見ることができます。

具体例もいくつかご紹介しましたが、もちろん、ヒーロー画像をデザインしたり、そもそもどの画像を使うのかを選定したりするのは意外と難しいものです。
カナダのマーケティングエージェンシーTHREE DEEPでは、ヒーロー画像で取り入れたい7つのポイントを紹介しています。

● i. キーワードとの関連性

ヒーロー画像はターゲットキーワードと関連したものになっているか？

● ii. 目的の明確化

ヒーロー画像はホームページ全体の目的と合致しているか？

● iii. デザインとの統合

ヒーロー画像のデザインはCTAにつながる流れとシームレスにつながっているか？

● iv. 権威性 (オーセンティシティ)

ヒーロー画像は信頼のおける形でブランドを表現しているだろうか？

● v. 付加価値

ヒーロー画像には利益が書かれているか？

● vi. 感情への訴求

ヒーロー画像にはユーザーの動機につながる感情への訴求要素が含まれているか？

● vii. ヒーローとしてのカスタマー

ヒーロー画像に登場するプロダクトをユーザーが身につけたら、自分自身が主役だと想像できるか？

以上のチェック項目を考慮に入れてヒーロー画像を作成してみるのもよいでしょう。

2. 感情に訴求する画像を選ぶ

▲ 日清紡では犬を使ったプロモーションヒーロー動画を採用しています

先ほどご紹介した7つのポイントにもありましたが、感情に訴求するのはヒーロー画像の常套手段とも言えます。
第一印象で気に入ってもらうためには心理的に大きな印象を与えることが重要で、ホームページを通して与えたい感情を強化する必要があります。

最終的には、どんなロジックよりも、感情を突き動かしたほうがユーザーは動くものです(ダイエットなど、人々のマイナス感情に訴求するものが最も効果が高いと言われています)。

3. 「主役」を中心に据える

ヒーロー画像はホームページのメインメッセージを伝える上で非常に重要な役割を果たします。
そのため、ヒーロー画像をもっと目立たせて注目を集めたいと思うデザイナーはたくさんいるでしょう。

しかし、あまりにも派手すぎたり、がちゃがちゃとしたイメージを与えてしまうと、ユーザーがホームページを訪問するたびにいらいらしてしまうので、訪問回数が減ってしまう可能性もあります。

ヒーロー画像を使って必要なメッセージは伝えるべきですが、ヒーロー画像で全てのメッセージを伝えきるのは難しいです。
だからこそ、画像の「主役」を中心において印象に残るようなイメージをユーザーに与えつつ、スクロールダウンして補足情報を与えていけばよいのです。

4. 読み込み速度とクオリティの両方を担保する

ヒーロー画像はページの構成要素の中では最も重要な役割を担っているので、素早く読み込まれる必要があります。
通常、ヒーロー画像は画面全体を表示する役割を担っているので、他の画像に比べてどうしても読み込み速度が遅くなってしまうことがあります。
また、JavaScriptやスタイルシートの読み込みに時間がかかることでも、ヒーロー画像の読み込み時間に遅延が発生してしまいます。

読み込み速度を重視するということは画像を軽量化することだ、という着眼点から画像を圧縮して表示する場合がありますが、極端な画像の圧縮は画像の劣化の原因になります。

▲ 解像度が高いとぼやけてしまう場合もあります