コラム

多くのマーケティング担当者が常に意識していることの一つに、WEBサイトやLPのファーストビューの改善があります。
ファーストビューは最も多くのユーザーが最初に目にする、言わばそのサイトの「顔」の部分になるため、トレンドや広告の訴求内容などに合わせて常にアップデートしていく必要があります。

その中でも、特に気をつけるポイントとして、

• いかにユーザーの興味を惹きつけれられるか
• サービスの特徴を端的にわかりやすく伝えられるか
• 安心感を与えることができるか

などが挙げられると思います。

今回はそんなファーストビューの改善事例をご紹介致します。
事前にヒートマップを用いて課題を発見した事例でもありますので、ぜひ今後のWEB改善の参考にしていただければと思います。

A/Bテスト改善を行った背景

今回ご紹介するのは、よくCMで見かけるとある保険のWEBサイトの改善事例です。
この施策をきっかけに、その後の連続したファーストビュー改善の実施に繋がりました。

業種：保険
サイトの形式：WEBサイト
KGI：申込完了ページ遷移率
KPI：見積完了ページ遷移率、CTAボタンタップ率
検証期間：15日間

サイトについて

• 中高年に支持されている保険のWEBサイトがレスポンシブ化され、スマートフォン用ページのデザインが大幅にリニューアルされた。
• サイト流入の9割以上のユーザーがトップページにランディング。
• トップページ内にはCTAボタンが8個あり、メインはFV下にある
  （トップページCTAボタンクリック数を合算した内の9割）

＜課題＞

リニューアルされたページにてヒートマップ分析とヒューリスティック分析を実施、課題を抽出しました。

【ヒートマップから得られた気づき】
・KV下にあるボタンではない3つの特徴画像部分にタップが発生していることが判明
・特徴画像アイコンや記載されている訴求文言は、このサービスにとって何なのかわからない
・特徴画像に記載されている訴求文言の色が、背景色やKVと同系色で読みにくい
・ターゲットユーザーの年齢層、スマートフォン用ページで何かをしながら閲覧されるということを考慮すると、特徴画像上のテキストが小さ過ぎる

KV下の画像にタップが発生しているのは、誤タップと捉えることもできますが、今回はユーザーが興味を持ってタップしたものと推測しました。
しかし、どのような情報なのか読み取りづらく、サービス理解の妨げになっている可能性があると考えました。

＜仮説＞

KV下の特徴画像の内容が見にくく、特徴として認識しにくいのではないか。
KV下の特徴画像のデザインを変えることで、サービスの特徴理解を促し、CVRを改善できるのではないか。

施策内容

• KV下にテキストを追加し、他サービスとの違い、特徴であることを強調
• KV下デザイン変更

結果

テストパターン2　勝ち

KGI　改善率100.19％、有意差51％
KPI　改善率102.83%、有意差80%
メインCTAボタンタップ率　改善率103.12％、有意差84％
メインCTAボタンタップからの見積完了率　改善率104.10％、有意差85％

KV下訴求画像3ついずれかタップ率　
パターン1：改善率116.62%、有意差96％
パターン2：改善率100.29％、有意差51％
パターン3：改善率100.16%、有意差50％

残念ながらKGIでの結果に差異は出ませんでしたが、主要なKPIにおいて、比較的高い有意性（VWOが統計学的に判断）が出ているため、テストパターン2を勝ちと判断しました。

考察

まず、事前のヒートマップからわかった訴求画像へのタップですが、パターン1では減るどころか増えてしまっています。
これは、追加したテキストによってボタン感が出てしまい、ユーザーがより興味を持った結果と推測します。
しかし、KGIは唯一低下してしまい、他主要KPIも低下傾向でした。
ユーザーの期待とのギャップ、つまり誤タップを発生させてしまった可能性が高いと思われます。
一方で、他のパターンでは特徴画像へのタップ率において特に差異は出ていないので、まだボタンと思ってしまっているユーザーはいるかもしれませんが、他の変更要素によってフォローできているのかもしれません。

次に、サービスの特徴理解を促すことはできたでしょうか。
パターン2ではトップページのメインCTAボタンのタップ率が上昇し、タップしたユーザーの見積完了ページ遷移率が上昇していることから、ユーザーに対し興味喚起をすることはできたと思われます。

一方でパターン3もKPIの見積完了ページ遷移率はパターン2とほとんど変わらない結果だったのですが、メインのCTAボタンクリック率を見ると差異が出ておらず、タップしたユーザーの見積完了ページ遷移率も差異が出ていなかったので、今回はパターン2を勝ちと判断しました。
パターン2とパターン3ではほとんど違いのない施策ですが、追加したテキストと特徴画像を枠で囲ったことによりアテンションが高まったのかもしれません。

以上のように、今回はヒートマップによる気付き、ヒューリスティックにページ分析したところからの事例でした。
今回の施策で主要KPIは改善できたかもしれませんが、まだ訴求画像にタップが発生していて、テキストとしては読みにくいので状態なので、次テストではこの部分の改善に取り組むことにしました。
続きは次回のブログにてご紹介します。

　次回ブログはこちら：【ABテスト事例】ファーストビューのデザインを見やすく変更して申込率114％改善！

ヒートマップツールを導入しているけれども「分析の仕方がわからない」「ページ内での課題が何なのかわからない」「今回どうやってヒューリスティック分析をしたのか教えてほしい」などございましたら、ぜひお問い合わせください。

関連記事

【ABテスト事例】キービジュアルの影響力は絶大！画像内テキストとデザイン変更でCVR上昇！
【ABテスト事例】サービス申込率114％改善！スマホファーストビューの訴求内容変更テスト

ご質問やお問合せに関して