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

ヒーローは1人で良いのか!?CTRを28%向上させた効果的なヒーロショットの見せ方
よろしければこちらもご覧ください

まずはこちらをご覧いただきたい。
http://skan.in/wp-content/uploads/2015/05/howto-heroshot1.jpg

この画像では、右の画像は女性の視線が左を向いています。
この時、人間の心理はどのようになっているのだろうか、ヒートマップを見てみるとわかりやすいです。
http://skan.in/wp-content/uploads/2015/05/howto-heroshot2.jpg

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

もう1つ同じような事例を取り上げます。
もともと女性が視線をずらしていたものがありましたが、それを誇張したり、感情を露わにしたらどうCVRが変わるかというテストが行われました。
この結果、下記のように笑顔や驚きの表情をした方が数値が向上しています。
画像を変えるだけで大きく数値改善できることが、わかるのではないでしょうか。
出典: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点目のデザインサポートに当たります。
このデザインサポートは意識すると簡単に取り入れやすいものなので、今回はこちらを取り上げます。

続きは、下記で。
http://skan.in/2015/05/15/howto-heroshot-point1/

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

SSI
サーバー側で処理を行ってHTMLに反映させる仕組み。サーバーがSSIに対応してい ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

data-sprite-position-y="250" data-image-original-width="200" data-image-original-height="125">株式会社ブレインパッド株式会社サイバーエージェント株式会社フレームワークスソフトウェア
[SPONSOR]
株式会社キノトロープ株式会社アイレップユーザーグラム富士通株式会社Sitecore株式会社ミツエーリンクス