ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方

まずはこちらをご覧いただきたい。
ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方

お気づきになりましたか?右の画像は女性の視線が左を向いています。
この時、人間の心理はどのようになっているのだろうか、ヒートマップを見てみるとわかりやすいです。
ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方

このように右の画像は女性の視線に沿って商品にもつながって動いていることがわかるのはないでしょうか。
出典:Get real focus from your customers – try something different from focus groups

もう1つ同じような事例を取り上げます。
もともと女性が視線をずらしていたものがありましたが、それを誇張したり、感情を露わにしたらどうCVRが変わるかというテストが行われました。
ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方

この結果、下記のように笑顔や驚きの表情をした方が数値が向上しています。
ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方

画像を変えるだけで大きく数値改善できることが、わかるのではないでしょうか。
出典:Eye Tracking studies can KILL conversions if you focus on the wrong things for your landing page optimization tests! – Landing Page Optimization Blog

ヒーローショッット7つのポイント

さて、ヒーローショットです。
元々は映画やドラマなどシリーズ物のなかで、ベストの画像やシリーズを表現する画像のことを意味します。
作成する際に気をつけるポイントとしては下記の7点があります。

  • 1. Keyword Relevance
  • 2. Purpose Clarity
  • 3. Design Support
  • 4. Authenticity
  • 5. Added Value
  • 6. Desired Emotion
  • 7. Customer “Hero”

さきほどの事例は、3点目のデザインサポートに当たります。
このデザインサポートは意識すると簡単に取り入れやすいものなので、今回はこちらを取り上げます。

視線・導線を意識したデザインサポート

画像と言えば、サイトのトップページでは多くのサイトが大きくメインビジュアルを設置ですが
よく使われるのは、スライダーと呼ばれる動きを付けて何枚も画像を見せる手法。
このABテスト事例がいくつかありますので、2つ取り上げてみます。

スズキ

ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方
ここではスライダーのものと4つの静的画像でクリック数を比較しました。
その結果、静的画像の方が28%もクリック数が多くなりました。
出典:Results for: Static Images vs. a Slider – Which Increased Suzuki’s Homepage Engagement?

IBM

ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方
こちらでもスライダーを使うより、画像を8つグリッド上に並べる方が20%もクリック数を向上させることができています。
さらにRVP(revenue per visitor)についても5.47%向上したとのことです。

トッページでは、いかにかっこよくヒーローを見せるかに注力しがちですが、ヒーローが1人だと閲覧者が本当に会いたかったヒーローに会えないかもしれません。
戦隊物でも赤だけでなく、黄色が好きな人もいることでしょう.
導線の確保や視線を邪魔しないことを意識して、ヒーローショットを作成しましょう。

design > ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方