ヒートマップ分析とは?LP の改善点を見つける使い方と注意点
アクセス解析の数字を見ても、LP のどこに問題があるかは分かりにくいものです。ヒートマップは、訪問者がページのどこを見て、どこを押し、どこで離れたかを色で可視化します。この記事では、ヒートマップの種類と見方、離脱が多い場所の見つけ方、改善案につなげる手順、導入時の注意点を説明します。LP 全体の改善は LP の改善の記事も参考にしてください。
ヒートマップとは
ヒートマップは、ページ上での訪問者の行動を、色の濃淡で表示する分析手法です。多くの場合、赤や橙が反応の多い場所、青や緑が少ない場所を示します。数字の一覧では見えにくい「ページ内の位置」ごとの傾向が、一目で分かります。
何ができるか
アクセス解析は「ページ単位」の数字、ヒートマップは「ページの中身」の数字を示します。たとえば、ページ全体の離脱率が高いと分かっても、どの部分で離れているかは別の情報が必要です。ヒートマップを使えば、スクロールが急に減る位置を特定できます。
何ができないか
ヒートマップは、「なぜその行動をしたか」までは教えてくれません。表示された傾向から仮説を立て、改善案を試すことで、初めて原因に近づきます。また、訪問数が少ないページでは、傾向が安定しません。
3 種類のヒートマップ
多くのツールが提供する基本の 3 種類は、次のとおりです。
| 種類 | 示すもの | 主な用途 |
|---|---|---|
| クリック | どこがクリック・タップされたか | ボタンやリンクの反応、誤クリックの発見 |
| スクロール | どの位置まで読まれたか | 離脱位置、重要な情報の置き場所の判断 |
| 注目度(熟読) | どの位置に長く留まったか | 読まれている部分、読み飛ばされている部分の把握 |
クリックヒートマップの見方
申込ボタンに反応が集まっていれば、意図どおりに機能しています。一方で、リンクではない画像や見出しがクリックされている場合、訪問者がそこを押せると期待している可能性があります。その場所にリンクを付けるか、見た目を変えて誤解を防ぎます。
また、ボタンへのクリックが少ない場合は、ボタンが目立たない、文言が弱い、押す理由が伝わっていない、といった原因が考えられます。
スクロールヒートマップの見方
スクロールヒートマップは、ページの上から下にかけて色が変わり、読まれた割合を示します。最初の画面から次の画面に進むところで急に色が薄くなる場合は、最初の画面で興味を引けていません。ファーストビューの見直しが優先事項になります。
申込ボタンの位置まで届いている訪問者が少ない場合は、ボタンをより上に置く、または途中にも設置します。
注目度ヒートマップの見方
注目度は、訪問者が画面のどの範囲で長く止まったかを示します。止まっている場所が読まれており、素早く通過した場所が読まれていない、という目安になります。重要な訴求が読み飛ばされる位置にある場合、順番を変えます。
ツールによる違い
ツールによっては、「マウスの動き」や「離脱位置」を別の種類として提供しています。名称や集計方法は製品ごとに違うため、使うツールの説明で定義を確認してください。
離脱が多い場所の見つけ方
手順
- スマートフォンと PC のヒートマップを分けて見る
- スクロールヒートマップで、読まれる割合が急に下がる位置を探す
- その位置の前後の内容を確認する
- クリックヒートマップで、ボタンや画像への反応を確認する
- 流入元別に見て、傾向が違わないかを確かめる
端末を分ける理由
スマートフォンは画面が縦長で、同じ内容でもスクロール量が多くなります。PC で問題なさそうでも、スマートフォンでは別の場所で離れている場合があります。SNS からの訪問ではスマートフォンが多いため、まずスマートフォンのヒートマップを確認してください。
離脱の原因の例
| 見え方 | 考えられる原因 |
|---|---|
| 最初の画面で色が急に薄くなる | 内容が伝わらない、読み込みが遅い |
| 画像や長い文章の直後で薄くなる | 読む負担が大きい、関連が薄い |
| フォームの手前で薄くなる | 入力への不安、項目が多い |
| 特定の見出しを過ぎると薄くなる | その見出しに魅力がない |
離脱の指標の意味は離脱の記事で整理しています。
流入元で分ける
同じページでも、検索から来た人と SNS から来た人では読み方が違います。流入元別にヒートマップを分けられるツールなら、その機能を使います。
改善案につなげる手順
ヒートマップの結果は、そのまま改善策にはなりません。仮説を立て、優先順位を付け、検証します。
4 つの手順
- 観察。色の偏りを見て、気になる場所を 3 つほど挙げる
- 仮説。なぜそうなったかを文章にする(例「ボタン直前の説明が長く、読み飛ばされている」)
- 改善案。仮説に対応する変更を決める(例「説明を 3 行に短縮する」)
- 検証。変更後の数字とヒートマップを比べる
検証のしかた
効果を確かめるには、A/B テストで変更前後を同じ期間に比べるのが確実です。変更して数字が上がっても、時期の影響かもしれないためです。複数の変更を一度に行うと、どの変更が効いたか分からなくなります。
優先順位
訪問者の多い位置、特にページ上部の問題を優先します。最初の画面で離れる人が多いのに、下部のデザインを直しても、効果は限られます。全体の進め方は CVR の改善の記事でも説明しています。
数字と併用する
ヒートマップは傾向を知るのに役立ちますが、効果の大きさは数字で確かめます。CVR や成果数、クリック率の変化を並べて見てください。
導入時の注意点
訪問数を確保する
訪問数が少ないと、色の偏りが偶然に左右されます。一般に数百から数千の訪問があって初めて傾向が安定します。必要な量はツールや目的で変わるため、使うツールの案内も確認してください。
表示速度への影響
多くのヒートマップツールは、ページにスクリプトを入れて動作を記録します。スクリプトが重いと、LP の表示速度に影響します。導入前後で表示速度を測り、悪化していないかを確認してください。LP の速度は LP の表示速度の記事で扱っています。
個人情報とプライバシー
入力フォームの内容や、個人を特定できる情報が記録されないよう、設定を確認します。パスワードなどの入力欄を除外する機能があるかも確認してください。サイトのプライバシーポリシーに、行動データを取得する旨を記載することも検討します。
ページの更新に注意
ページの内容を変更すると、変更前後のデータが混ざります。ヒートマップを見るときは、変更日以降の期間に絞ってください。
外部サービスの LP では使えない
アフィリエイト先など、他社のページには自分でスクリプトを入れられません。自分の LP から外部へ送るクリック数を、リンク側で計測するのが現実的な方法です。
まとめ
ヒートマップは、クリック、スクロール、注目度の 3 種類で、ページ内の行動を可視化します。スマートフォンを優先して見て、離脱が急に増える位置を探し、仮説を立てて小さく改善し、A/B テストで確かめる流れが基本です。訪問数が少ないうちは傾向が不安定なので、数字との併用と、プライバシーへの配慮を忘れないでください。
自分の LP に流れる訪問を増やしつつ、どのリンクから来たかも把握するには、リンクごとの計測が役立ちます。Boostlink は短縮 URL ごとにクリック分析ができ、LP も作成できます。Boostlink で流入の元を分けて見てみてください。
運用実績のある SNS アカウントを引き継いで、LP への集客を早く始めたい方は、アカウントの購入・M&A を扱う Boostshop も参考になります。