ヒートマップ分析のやり方｜3種類の見方と進め方5ステップ
目次
ヒートマップ分析は、読み手がページのどこで止まり、どこを押し、どこで帰ったのかを色で確かめる方法です。やり方の要点は、画面を眺めてから考えるのではなく、「どこで離脱しているはずか」という問いを先に立て、その答え合わせに使うことです。
見方の型がないと、赤や青に塗られた画面を眺めて「なんとなく分かった気がする」だけで終わってしまいます。3つの種類と見方、分析前の準備、見えたサインから打ち手を選ぶ判断表、よくある読み違いを押さえると、改善の打ち手まで一直線につながります。
01ヒートマップ分析とは
ヒートマップ分析は、ページ上での読み手の行動を色の濃淡で表し、どこがよく見られ、どこが見られていないかを把握する方法です。アクセス解析では「何人が来て、何人が申し込んだか」はわかっても、「ページのどこで気持ちが離れたか」まではわかりません。ヒートマップは、その間を埋める道具です。
LPは1ページで完結することが多いため、ページ内の行動を見るヒートマップと特に相性のよい分析対象です。
02ヒートマップの3つの種類と見方
ヒートマップには、主に次の3つの種類があります。ツールによって呼び方は違いますが、見ているものは共通です。
| 種類 | 何がわかるか | 主に答えてくれる問い |
|---|---|---|
| スクロールヒートマップ | ページのどこまで読まれたか | どのブロックで読み手が減っているか |
| クリックヒートマップ | どこが押されたか | ボタンは押されているか、押せない場所が押されていないか |
| 熟読（アテンション）ヒートマップ | どこで長く止まったか | どのブロックが関心を集め、どこが読み飛ばされているか |
スクロールヒートマップの見方：読み手が減った場所を探す
ページの上から下に向かって、読み手がどれだけ残っているかを示します。LPの改善では、最初に見るべきヒートマップです。
見るポイントは、読み手が「急に減っている場所」です。ゆるやかに減っていくのは自然なことですが、あるブロックの境目で大きく減っている場合は、そのブロックの手前で、読み手の疑問が解消されていないか、読む理由が途切れている可能性があります。
クリックヒートマップの見方：ボタンとリンクのない場所を確認する
ボタンやリンクがどれだけ押されたかに加え、リンクがない場所が押されている様子も見られます。
- 押してほしいボタンが押されていない：目立っていない、位置が悪い、押す理由が伝わっていない
- リンクがない画像や文字が押されている：読み手がそこに詳しい情報を求めている、またはボタンだと勘違いしている
リンクのない場所にクリックが集まっていたら、読み手が知りたがっている情報がそこにあると考えられます。詳細を開ける形にするか、ボタンと見た目を分けるかを検討する候補として控えておきましょう。
熟読ヒートマップの見方：関心を集めた場所を確かめる
読み手が画面のどの位置で長く止まっていたかを示します。長く見られている場所は、関心を集めている場所か、理解に時間がかかっている場所のどちらかです。どちらなのかは、そのあとのスクロールの減り方と合わせて判断します。
03分析を始める前の準備
1. 見る目的と問いを決める
「LPの何が悪いか探そう」と漠然と見始めると、気になる場所が次々に見つかり、どれから手をつければよいかわからなくなります。先に、アクセス解析や広告の数字から問いを立てます。
| 数字の状況 | 立てる問い |
|---|---|
| 広告のクリックは多いが、申し込みが少ない | LPのどこで読み手が離れているか |
| LPの最後まで読まれているのに、申し込みが少ない | ボタンやフォームで止まっていないか |
| 広告ごとに申し込み率に差がある | 広告によって、読まれ方に違いがあるか |
| スマホだけ申し込み率が低い | スマホで押しにくい、読みにくい場所はないか |
2. 期待する行動を書いておく
分析の前に、「理想の読み手は、ファーストビューを見て、悩みのブロックで共感し、事例で信じて、料金を見てボタンを押す」のように、期待する行動を書き出します。実際のヒートマップと比べて、期待とずれた場所が改善の候補になります。
3. データを分けて見る
スマートフォンとPCでは画面の大きさも読み方も違うため、必ず分けて見ます。広告の媒体や訴求ごとにLPのURLを分けている場合は、それぞれ分けて見ると、読み手の違いが見えます。
04ヒートマップ分析の進め方（5ステップ）
ステップ1. スクロールで「大きく減る場所」を見つける
まずスクロールヒートマップで、読み手が急に減っているブロックを探します。候補は2〜3か所に絞ります。
ステップ2. その手前のブロックの熟読とクリックを見る
減る場所の手前で、読み手が何をしていたかを確かめます。長く止まっているのにその後に減っているなら、内容が伝わりにくい可能性があります。ほとんど止まらずに減っているなら、読む理由がなくなっている可能性があります。
ステップ3. ボタンとフォームの周りを見る
申し込みボタンが押されているか、ボタンの近くで押されているほかの場所がないかを見ます。ツールにセッション録画（実際の操作の記録）の機能があれば、フォームで迷っている様子も確かめられます。
ステップ4. 仮説を1文で書く
見えたことを「〇〇のブロックで読み手が減っているのは、△△が伝わっていないからではないか」という1文の仮説にします。仮説が書けないうちは、改善案を作るのはまだ早い段階です。
ステップ5. 1つずつ直して、前後を比べる
仮説に沿って、1か所ずつ直します。一度に複数の場所を変えると、どの変更が効いたのかがわかりません。直したら、同じ見方で前後のヒートマップと申し込み率を比べます。
実際に回してみると、時間がかかるのは分析より反映です。修正にデザインや実装の担当が必要だと、仮説を立ててから公開まで間が空きます。その間に広告の訴求や配信先が変わると、前後の差がLPの修正によるものかどうかわからなくなります。他の業務と兼務している場合は、見る日を先に決め、1回に直す場所を1つに絞ると止まりにくくなります。
05見えたサインから打ち手を選ぶ判断表
ヒートマップで見えたサインと、考えられる原因、打ち手の例をまとめました。原因は1つとは限らないので、表の打ち手は検証の候補として使ってください。
| 見えたサイン | 考えられる原因 | 打ち手の例 |
|---|---|---|
| ファーストビューの直後で大きく減る | 広告の約束とファーストビューがずれている、何のページかわからない | 広告の言葉をコピーに反映する、対象者を明示する |
| 特定のブロックの境目で急に減る | 前のブロックで疑問が解消されていない、話が飛んでいる | ブロックの順番を入れ替える、つなぎの見出しを入れる |
| 長い説明のブロックで止まった後に減る | 内容が難しい、文章が長い | 図や表にする、要点を先に書く |
| リンクのない画像や文字が押されている | 詳しく知りたい情報がある、ボタンと勘違いしている | 詳細を開ける形にする、ボタンと見た目を分ける |
| ボタンが押されていない | 目立たない、押す理由が伝わらない、位置が遠い | ボタンの文言を具体的にする、気持ちが高まる位置に置く |
| 料金のブロックでよく止まり、その後に減る | 価格に納得できていない、比べる材料が足りない | 料金に含まれるものや、選び方の基準を添える |
| ページの最後まで読まれているのに申し込みが少ない | 最後のひと押しが足りない、フォームで止まっている | FAQで不安を解消する、フォームの項目を見直す |
| スマホだけで特定の場所が押されていない | ボタンが小さい、追従ボタンに隠れている | 実機で確認し、大きさや位置を見直す |
注意したいのは、表の1行目のように原因がLPの外にある場合です。ファーストビューの直後で減っているとき、LPを磨いても、広告が別の期待を持たせたまま人を連れてきていれば結果は変わりません。広告ごとの読まれ方を比べ、直す先が広告の言葉なのか、LPの冒頭なのかを見極めてから手を動かします。
06ヒートマップ分析でよくある読み違い
ヒートマップは直感的に読める分、読み違いも起きやすい道具です。
| 読み違い | 実際に起きていること | 避け方 |
|---|---|---|
| 赤いところは「良いところ」 | 長く止まっているのは、わかりにくいからかもしれない | スクロールの減り方と合わせて判断する |
| 下まで読まれていない＝LPが長すぎる | 長さではなく、途中で読む理由が途切れている | 減っている場所の手前の内容を見る |
| PCとスマホを合わせて見ている | 画面の違いで読まれ方が混ざっている | 端末ごとに分けて見る |
| 少ないデータで判断した | 一部の人の偶然の動きを傾向と思い込む | 一定の訪問が集まってから判断する |
| ヒートマップだけで結論を出した | 申し込み率など、成果の数字と結びついていない | 改善の前後で成果の数字も比べる |
07無料で始められるツールと導入時の注意
ヒートマップツールは有料・無料さまざまあります。まず試してみたい場合は、Microsoftが提供する「Microsoft Clarity」が選択肢になります。公式サイトでは無料で利用でき、トラフィックの制限もないと案内されており、ヒートマップのほか、実際の操作を記録するセッション録画の機能もあります。
有料のツールは、ABテストの機能や、細かい条件での絞り込み、サポートの手厚さなどが特徴です。まずは無料のツールで「ヒートマップを見て、仮説を立て、直す」流れを回してみて、物足りなさを感じてから有料のツールを検討しても遅くありません。LPが1本で、文章の修正を社内でできるなら、無料のツールと自社の作業で十分に回せることも多いです。広告の訴求ごとにLPが分かれていると、見る組み合わせと修正の量が増えるので、担当者の時間と合わせて考えましょう。
導入するときに確認したいこと
- 計測タグの設置：LPの全ページ（サンクスページを含む）に、正しくタグが入っているか
- プライバシーへの配慮：行動データを取得することを、プライバシーポリシーに記載しているか
- 入力内容の扱い：フォームに入力された個人情報が記録されない設定になっているか
- 表示速度への影響：タグを追加したことで、ページが重くなっていないか
フォームの入力内容が録画に映り込まないかどうかは、導入時に必ず確認しておきたい点です。多くのツールには、入力内容を隠す設定があります。
08よくある質問
Q. どのくらいの訪問数があれば分析できますか
明確な基準はありませんが、訪問が少ないうちは、一部の人の動きに結果が大きく左右されます。毎日の数字を細かく追うより、ある程度の期間でまとめて傾向を見るほうが安全です。特に、端末や広告ごとに分けて見る場合は、それぞれの訪問数が少なくなりすぎていないかに注意してください。
Q. ヒートマップとABテストはどう使い分けますか
ヒートマップは「どこに問題がありそうか」を見つける道具、ABテストは「直した案が本当に良いか」を確かめる道具です。ヒートマップで仮説を立て、ABテストで確かめる、という順番で組み合わせると、改善の精度が上がります。
Q. 広告のクリエイティブの改善にも使えますか
ヒートマップが見るのはLPの上の行動なので、広告そのものを直接分析するものではありません。ただし、広告ごとにLPの読まれ方が違う場合、その広告がどんな期待を持たせているかのヒントになります。ファーストビューの直後で離脱が多い広告は、LPとの約束がずれている可能性があります。
09まとめ
- ヒートマップは、アクセス解析ではわからない「ページのどこで気持ちが離れたか」を見る道具
- スクロールで減る場所を見つけ、熟読とクリックでその理由を探る
- 眺める前に、数字から問いと期待する行動を書き出しておく
- サインから原因を仮説にし、1か所ずつ直して前後を比べる
- 赤い場所＝良い場所とは限らない。端末を分け、成果の数字と合わせて判断する
- 無料のツールから始められるが、プライバシーと入力内容の扱いは導入時に確認する
ヒートマップは、広告の数字とLPの中の行動の間をつなぐ、身近で頼れる道具です。Lic.では、この2つを続けて見ることで、どこを直すべきかを判断しています。
広告のクリックはあるのに、申し込みが増えない？
広告運用を前提に、離脱防止の設計までふくめたLPや、配信用の広告クリエイティブを制作します。公開後も、配信データをもとに改善を続けます。
- 離脱防止まで考えたLP制作
- 配信用の広告クリエイティブ制作
- 配信データをもとにした継続的な改善
まだ具体的に決まっていない段階のご相談も歓迎です。
参考
- Microsoft Clarity 公式サイト https://clarity.microsoft.com/
