第一印象でユーザーをファンにする!ヒーロー画像を設置するときに気をつけたい5つのこと
人が他人を第一印象で大きく評価してしまうのと同様に、ホームページに関しても、来訪したユーザーはホームページの見た目から何かしらの反応を示します。
肯定的であっても否定的であっても、その反応は最初に何を見たかに大きく左右されます。
視覚は人間の五感の中でも最も強力なセンサーなので、ホームページの冒頭に設置する大きなアイキャッチ画像であるヒーロー画像を使うのが、ユーザーの注目を集める一番の近道です(ヒーローは「主役」の意味)。
大胆で、美しく、意図の伝わりやすい画像ほど、ユーザーの心を惹くものです。
もはや、ヒーロー画像は単なる写真ではありません。
最も強力なコミュニケーションツールです。
今回は、第一印象でユーザーをファンにするヒーロー画像を設置するときに気をつけたい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やスタイルシートの読み込みに時間がかかることでも、ヒーロー画像の読み込み時間に遅延が発生してしまいます。
読み込み速度を重視するということは画像を軽量化することだ、という着眼点から画像を圧縮して表示する場合がありますが、極端な画像の圧縮は画像の劣化の原因になります。
▲ 解像度が高いとぼやけてしまう場合もあります
画像がギザギザしたり、ぼやけていたりすると、意図が伝わらず、せっかくのヒーロー画像が台無しになってしまいます。
ヒーロー画像はポスターのような役割をするので、しっかりとクオリティも担保する必要があります。
最初に低解像度の写真を表示し、高解像度の画像のローディングが完了したら高解像度の画像に差し替えるなどして、工夫をしてみてください。
5. CTAを強調する
ヒーロー画像における「主役」が目立っていても、最終的な目標はコンバージョンにつなげることです。
従って、CTAボタンをはじめとしたコンバージョンに直結する要素をどのように配置するかは、ヒーロー部分の設計において極めて重要です。
ただし、CTAボタンをヒーロー画像と競合させてはいけません。
ヒーロー画像を見て、気になるひとがCTAボタンをクリックすればいいので、ヒーロー画像以上にCTAボタンを目立たせてはいけません。
▲ イメージとCTAボタンの両方が適切に配置されています
ただ、CTAボタンをフロントページ内に複数設置しているのであれば、ヒーロー画像に添えているCTAボタンは他よりも明るい色にするなど、ビジュアルヒエラルキーを意識したデザインにしたほうがクリック率は高まります。
まとめ
ヒーロー画像は、ホームページを訪れたユーザーを一瞬でファンにさせるほどに強力な要素とも言えます。
そのため、適切に作成・運用することがホームページ運営に置ける鍵になります。
単に大きめの画像をフロントページ上部に配置すればいい、という浅はかな考えがあると、もしかしたらヒーロー画像のよさを最大限に活かしきれていないのかもしれません。
また、初めて訪れるユーザーと、何度も訪問するユーザーのどちらのユーザー層に対しても、視線を集めるようなヒーロー画像になっているか、もう一度見直して見ましょう。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング