【中級編】顧客の“見えない声”を読み解く―ヒートマップ分析から読み解くユーザー心理とWebサイト改善方法をご紹介

数字の裏にある「感情のステージ」を読む4つの視点
Ptengineでは、クリックヒートマップ※1やアテンションヒートマップ※2だけでないデータを取り扱うことで、より精度の高いユーザー心理の考察と施策の仮説立てがおこなえるようになります。ファーストビュー(FV)離脱率、重要情報の表示率、CTAクリック率(CTR)、コンバージョン率(CVR)など、ページ上の各アクションを定量的に追跡しながら、最終的なUIUXなどの判断をしていきます。
※1クリックヒートマップ…ページ内のクリック履歴がサーモグラフィーで可視化される機能。クリックが多いほど暖色に、少ないほど寒色に表示されるため、ページ内のユーザー行動が意図通りになされているかを分析することができる。
※2アテンションヒートマップ…ページ内の注視時間がサーモグラフィーで可視化される機能。注視時間が長いほど暖色に、短いほど寒色に表示され、ユーザーの関心度を読み解くことができる。
この数字は単なる「動き」ではなく、「感情の表れ」としても解釈できます。以下は、ヒートマップ分析から読み取れる顧客心理を4つのステージに分けて整理したものです。
➀「興味なし」ステージ…ユーザーのニーズを満たせていない
行動パターン |
FVでの離脱率が高い/ほとんどスクロールされていない |
想定される心理 |
|
改善策 |
|
➁「興味あり」ステージ…注目はあるが行動に至らない
行動パターン |
情報は読まれているが、CTAへのクリックが少ない |
想定される心理 |
|
改善策 |
|
③「行動あり」ステージ…アクションしているのにCVしない
行動パターン |
CTAクリックはあるが、CV(購入や申込)に至らない |
想定される心理 |
|
改善策 |
|
④成約ステージ…理想的な流れ
行動パターン |
高い注目→クリック→CVというスムーズな動線 |
活用方法 |
|
Ptengineを使った心理分析事例
実際に先ほどの心理分類に沿った見方で、ヒートマップを活用し、どのように改善していくかの実例を見ていきましょう。なお、以下に記載する事例①と事例②は、同一のWebサイトを分析・改善したものです。
事例①:広告流入からのランディングページでの離脱率改善
一つ目はランディングページの離脱で起きるケースとして最も多い、広告バナーとランディングページでの期待値のギャップの例です。
▸[課題]
広告から流入したECサイト商品詳細ページの離脱が高い。
▸[ヒートマップ分析]
スクロール到達率とFV離脱率の傾向を確認
スクロールの到達率はFV直下で69%(A)。さらに、FV離脱率データでは29.95%が最初のFVで離脱(B)となり、FV離脱率がやや高い傾向。
※一般的にFV離脱は30%以内に抑えることが重要とされる
(図1:【改善前】広告流入からランディングページでの離脱におけるPtengineの分析画面)
▸[想定される心理の仮説]
「興味なし」ステージ
広告経由で流入した後の着地先ページが商品詳細ページであったため、広告とランディングページの第一印象がユーザーの期待に応えられていない状態と判断される。
▸[施策]
広告の流入バナーに合わせる形で専用のファーストビューのランディングページを用意し最適化
「子どもの足の悩み解決」をFVのメッセージとした広告専用ランディングページを用意し最適化。広告とランディングページの訴求を統一することで、FV離脱率は大幅に改善し、16%にまで抑えられるとともに購入率も上昇。
(図2:【改善後】広告流入からランディングページでの離脱におけるPtengineの分析画面)
▸[結果]
・ファーストビュー離脱率30% → 16%に
・商品購入率0.27% → 0.55%に
事例②:ランディングページの説得力不足に解消による購入率向上
次に紹介する事例は、ページの情報構成がユーザーの説得には至っていないケースです。このケースの場合は、ファーストビュー離脱率ではなくCTAクリック率やコンバージョン率そのものに課題を抱えているケースが多いです。
▸[課題]
ランディングページのストーリー構成が弱いため、CTAがクリックされない。
▸[ヒートマップ分析]
スクロール到達率とCTAクリック率を確認
FV離脱率は5.89%と大幅に改善(A)。また、FV以降のスクロール到達率も80%となり、ある程度お客様の期待に答えられている状況といえる(B)。一方で、コンバージョン率は0.47%で改善余地あり(C)。
(図3:【改善前】ランディングページでの購入率向上におけるPtengineの分析画面)
▸[想定される心理の仮説]
「興味あり」ステージ
最初の印象は良く、関心を持たれているが、その後のコンテンツが購入にいたるまでの説得力に欠けている可能性が高い。ページの情報構成や比較検討ができる材料など、コンテンツを付け足すことでユーザーの購入意欲を後押しする必要あり。
▸[施策]
情報構成の順番を入れ替える-アテンションヒートマップ(注意力)を活用
CVしたユーザーのアテンションヒートマップから、着目されているコンテンツを明らかにし、ABテストを実施。ランディングページ上部の「子どもの明日の成長に必要な考え方」を訴求したコンテンツ(A)はスクロール到達率が81%あり、アテンションの反応度も良いものの、その直下から興味を失いやすくなっている。一方で、ページ中部の「足の成長をささえるための機能性について」を訴求したコンテンツはアテンションの反応度が高いことがわかるB))。この傾向から、そこで、機能性のコンテンツをページ上部に設置したABをおこなった結果、購入率が0.46%から0.56%にまで上昇。
(図4:CVしたユーザーのアテンションヒートマップ)
▸[結果]
・商品購入率0.46% → 0.56%に
ヒートマップからの改善意思決定とアクションのフロー
最後に、今までの方法や事例を踏まえて、ヒートマップの見方から改善までをおさらいしましょう。
[Step1]数値未達のページを診断
Ptengine等のヒートマップツールでユーザー行動を可視化する。
・FV離脱率が高いか
・意図通りに情報が見られているか
・CTAがクリックされているか
・CVに至っているか
※図5のようなベンチマーク指標を基準にすると診断しやすいです
(図5:Webサイト分析時のベンチマーク指標)
[Step2]顧客心理を仮説として言語化
• 「興味なしステージ」:最初の印象が期待と大きく違う
• 「興味ありステージ」:印象は良いが、説得力にかけるのでアクションできない
• 「行動ありステージ」:カートやフォームなどのプロセスに問題があり
• 「理想状態」:問題ないので予算増加や成功例の横展開をおこなう
[Step3]心理状態に応じてヒートマップの活用の仕方と改善策を変える
• 「興味なしステージ」:流入手前の状態と着地先のページのファーストビューのギャップを解消
• 「興味ありステージ」:セグメント別(特にコンバージョン)のヒートマップで説得される情報を把握
• 「行動ありステージ」:カートやフォームなどのプロセスを自分で体験して、違和感を言語化
• 「理想状態」:他の商材などに横展開できるのであればフォーマット化して展開する
ヒートマップは「ユーザーの気持ちを見える化するレンズ」
ヒートマップは、ただの行動データではありません。
ユーザーの期待・興味・迷い・不安といった“感情”を定量的に読み解く手段といえます。
マーケターは「数字を見るプロ」であるだけでなく、「数字の裏にある心を読むプロ」でもあるべきです。ヒートマップの活用を通して「ユーザーの気持ち」を読み解くことで、改善の精度を高め、施策成果を創出していきましょう。
コンバージョン率やUI/UXの改善で、具体的にどのようにページ改修したら良いかお悩みがある場合は、お気軽にお問合せいただければ幸いです。
この記事の著者
伊東 陽平
出版業界で編集者・ライターを経て、広告代理店でWEBディレクターに転身。LP、比較サイト、オウンドメディア、ホームページなどの制作をおこない、マネージャーとなる。アイレップ入社後、クリエイティブの戦略設計やUXデザインなどキャリアを広げ、全社組織PJTや案件統括などにもコミット。
出版業界で編集者・ライターを経て、広告代理店でWEBディレク...