ブログ

ヒートマップ分析とは?LP の改善点を見つける使い方と注意点

アクセス解析の数字を見ても、LP のどこに問題があるかは分かりにくいものです。ヒートマップは、訪問者がページのどこを見て、どこを押し、どこで離れたかを色で可視化します。この記事では、ヒートマップの種類と見方、離脱が多い場所の見つけ方、改善案につなげる手順、導入時の注意点を説明します。LP 全体の改善は LP の改善の記事も参考にしてください。

ヒートマップとは

ヒートマップは、ページ上での訪問者の行動を、色の濃淡で表示する分析手法です。多くの場合、赤や橙が反応の多い場所、青や緑が少ない場所を示します。数字の一覧では見えにくい「ページ内の位置」ごとの傾向が、一目で分かります。

何ができるか

アクセス解析は「ページ単位」の数字、ヒートマップは「ページの中身」の数字を示します。たとえば、ページ全体の離脱率が高いと分かっても、どの部分で離れているかは別の情報が必要です。ヒートマップを使えば、スクロールが急に減る位置を特定できます。

何ができないか

ヒートマップは、「なぜその行動をしたか」までは教えてくれません。表示された傾向から仮説を立て、改善案を試すことで、初めて原因に近づきます。また、訪問数が少ないページでは、傾向が安定しません。

3 種類のヒートマップ

多くのツールが提供する基本の 3 種類は、次のとおりです。

種類 示すもの 主な用途
クリック どこがクリック・タップされたか ボタンやリンクの反応、誤クリックの発見
スクロール どの位置まで読まれたか 離脱位置、重要な情報の置き場所の判断
注目度(熟読) どの位置に長く留まったか 読まれている部分、読み飛ばされている部分の把握

クリックヒートマップの見方

申込ボタンに反応が集まっていれば、意図どおりに機能しています。一方で、リンクではない画像や見出しがクリックされている場合、訪問者がそこを押せると期待している可能性があります。その場所にリンクを付けるか、見た目を変えて誤解を防ぎます。

また、ボタンへのクリックが少ない場合は、ボタンが目立たない、文言が弱い、押す理由が伝わっていない、といった原因が考えられます。

スクロールヒートマップの見方

スクロールヒートマップは、ページの上から下にかけて色が変わり、読まれた割合を示します。最初の画面から次の画面に進むところで急に色が薄くなる場合は、最初の画面で興味を引けていません。ファーストビューの見直しが優先事項になります。

申込ボタンの位置まで届いている訪問者が少ない場合は、ボタンをより上に置く、または途中にも設置します。

注目度ヒートマップの見方

注目度は、訪問者が画面のどの範囲で長く止まったかを示します。止まっている場所が読まれており、素早く通過した場所が読まれていない、という目安になります。重要な訴求が読み飛ばされる位置にある場合、順番を変えます。

ツールによる違い

ツールによっては、「マウスの動き」や「離脱位置」を別の種類として提供しています。名称や集計方法は製品ごとに違うため、使うツールの説明で定義を確認してください。

離脱が多い場所の見つけ方

手順

  1. スマートフォンと PC のヒートマップを分けて見る
  2. スクロールヒートマップで、読まれる割合が急に下がる位置を探す
  3. その位置の前後の内容を確認する
  4. クリックヒートマップで、ボタンや画像への反応を確認する
  5. 流入元別に見て、傾向が違わないかを確かめる

端末を分ける理由

スマートフォンは画面が縦長で、同じ内容でもスクロール量が多くなります。PC で問題なさそうでも、スマートフォンでは別の場所で離れている場合があります。SNS からの訪問ではスマートフォンが多いため、まずスマートフォンのヒートマップを確認してください。

離脱の原因の例

見え方 考えられる原因
最初の画面で色が急に薄くなる 内容が伝わらない、読み込みが遅い
画像や長い文章の直後で薄くなる 読む負担が大きい、関連が薄い
フォームの手前で薄くなる 入力への不安、項目が多い
特定の見出しを過ぎると薄くなる その見出しに魅力がない

離脱の指標の意味は離脱の記事で整理しています。

流入元で分ける

同じページでも、検索から来た人と SNS から来た人では読み方が違います。流入元別にヒートマップを分けられるツールなら、その機能を使います。

改善案につなげる手順

ヒートマップの結果は、そのまま改善策にはなりません。仮説を立て、優先順位を付け、検証します。

4 つの手順

  1. 観察。色の偏りを見て、気になる場所を 3 つほど挙げる
  2. 仮説。なぜそうなったかを文章にする(例「ボタン直前の説明が長く、読み飛ばされている」)
  3. 改善案。仮説に対応する変更を決める(例「説明を 3 行に短縮する」)
  4. 検証。変更後の数字とヒートマップを比べる

検証のしかた

効果を確かめるには、A/B テストで変更前後を同じ期間に比べるのが確実です。変更して数字が上がっても、時期の影響かもしれないためです。複数の変更を一度に行うと、どの変更が効いたか分からなくなります。

優先順位

訪問者の多い位置、特にページ上部の問題を優先します。最初の画面で離れる人が多いのに、下部のデザインを直しても、効果は限られます。全体の進め方は CVR の改善の記事でも説明しています。

数字と併用する

ヒートマップは傾向を知るのに役立ちますが、効果の大きさは数字で確かめます。CVR や成果数、クリック率の変化を並べて見てください。

導入時の注意点

訪問数を確保する

訪問数が少ないと、色の偏りが偶然に左右されます。一般に数百から数千の訪問があって初めて傾向が安定します。必要な量はツールや目的で変わるため、使うツールの案内も確認してください。

表示速度への影響

多くのヒートマップツールは、ページにスクリプトを入れて動作を記録します。スクリプトが重いと、LP の表示速度に影響します。導入前後で表示速度を測り、悪化していないかを確認してください。LP の速度は LP の表示速度の記事で扱っています。

個人情報とプライバシー

入力フォームの内容や、個人を特定できる情報が記録されないよう、設定を確認します。パスワードなどの入力欄を除外する機能があるかも確認してください。サイトのプライバシーポリシーに、行動データを取得する旨を記載することも検討します。

ページの更新に注意

ページの内容を変更すると、変更前後のデータが混ざります。ヒートマップを見るときは、変更日以降の期間に絞ってください。

外部サービスの LP では使えない

アフィリエイト先など、他社のページには自分でスクリプトを入れられません。自分の LP から外部へ送るクリック数を、リンク側で計測するのが現実的な方法です。

まとめ

ヒートマップは、クリック、スクロール、注目度の 3 種類で、ページ内の行動を可視化します。スマートフォンを優先して見て、離脱が急に増える位置を探し、仮説を立てて小さく改善し、A/B テストで確かめる流れが基本です。訪問数が少ないうちは傾向が不安定なので、数字との併用と、プライバシーへの配慮を忘れないでください。

自分の LP に流れる訪問を増やしつつ、どのリンクから来たかも把握するには、リンクごとの計測が役立ちます。Boostlink は短縮 URL ごとにクリック分析ができ、LP も作成できます。Boostlink で流入の元を分けて見てみてください。

運用実績のある SNS アカウントを引き継いで、LP への集客を早く始めたい方は、アカウントの購入・M&A を扱う Boostshop も参考になります。