皆さん、質問です。
アナタ自身が周りの人からどう思われているのか、考えたことありますか。
きっと気になるはずです。
  

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

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

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

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

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

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

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

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

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

ヒーローの特徴

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

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

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

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

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

chocomobi.jpg

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

キャッチコピーがある

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

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

テーマが1秒でわかる

non.png

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

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