精読率が上がる!売れるメインビジュアルデザイン5選

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
design-tips-mainvisual

サイトのメインビジュアル(ファーストビュー)は、その商品やサービスの説明をユーザーが読み進めるか、それとも止めるかを判断する最初の関門だ。
メインビジュアルで興味喚起に成功すれば精読率が上がるし、端的に商品やサービスを説明できればその後の記事への理解度が格段に深まり、購入につながる。
今回はそれらをクリアした秀悦なメインビジュアルのデザインを紹介する。

購入判断に直結する情報をコンパクトに集約したメインビジュアル

ポイント

  1. 最上部に販売個数を掲載することで信頼感を与える。
  2. 大きなフォントサイズで「DHA」と表記し左に商品写真を載せることで、この商品が「何であるか」を瞬時に理解させる。
  3. 魚の写真でシズル感を演出し、興味喚起させる。
  4. 左下にアピールポイントを4つにまとめ、他商品との差別化を図る。

ss_2

ポイント

  1. 効果を「ポッコリ」「スッキリ」という直感的なコピーで表現し、お腹の写真を載せることで「何に効くか」をうまく連想させる。
  2. 販売実績数やアンケート調査結果など具体的な数字を用いることで信頼感を演出する。
  3. 右下には「送料無料」を打ち出すことで、eコマースでは特に関心が高いであろう送料について明確にし、お得感を出す。

ポイント

  1. アピールポイントを整然と表現し、論理的な話を好む男性ユーザーへの興味を促す。
  2. 数字や権威(◯◯認定、◯◯金賞など)を使ったアピールポイントで信頼感を出す。

地味な商品を別の要素で興味喚起させるメインビジュアル

ポイント

  1. パソコンのキャプチャ画面だけになりがちなところを、魅力的な人物写真を配置することで力強く興味喚起させる。
  2. 芸能人を起用することで信頼感・大手感を出す。
  3. このページのコンバージョンは無料登録完了。そのため気軽にコンバージョンさせるようメインビジュアルの直下に登録ボタンを配置する。

訴求をしぼり一点突破を試みるメインビジュアル

 

ポイント

  1. 栄養素の数を食材写真を用いて、訴求ポイントを判りやすく表現する。
  2. 短く、印象的なコピーを大きなフォントサイズで表現。細かな情報をあえて伝えず先に読み進ませることに特化させる。
  3. このように訴求ポイントをしぼったメインビジュアルは、他の訴求とABテストすることで、大きな成果や知見を得ることができる。

まとめ

いかがだろうか。
メインビジュアルの目的は、いかにして「その先を読み進めてもらうか」にある。情報をわかりやすく伝えるという基本を押さえつつ、商品やサービスの特性を活かしたメインビジュアルをデザインすることが、離脱を防ぎ精読率改善につながり、ひいては購入率アップまでつながる。

この最初の関門を乗り越えることがメインビジュアルの最大の役割だ。
今回紹介した秀悦なデザインを参考にして、ぜひ自社サイトのメインビジュアルを改善してみてほしい。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

無料eBook|ABテストツール比較ガイド[2016年版]

第三者の公平な視点でツール比較を行ないました


本資料は、クライアント企業と一緒にツールを選定する立場のスプリットエンジンが、第三者の公平な視点でツール比較を行なったものです。
実際に自社で使っている情報をベースに再編集し公開しました。
比較対象は国内トップ3大ツール(Optimizely、Kaizen Platform、VWO)です。

ダウンロードする

SNSでもご購読できます。