スクロールヒートマップの見方｜読まれない位置と、情報の置き場所を調べる

スクロールヒートマップは、ページのどの位置まで訪問者が到達したかを調べるために役立ちます。

ただし、下まで届いたことは、そこまでの文章をすべて読んだ証拠にはなりません。

改善で知りたいのは、ページ全体を長く読ませられたかよりも、判断に必要な情報へ届いているかです。

料金を知りたい人に料金が届き、申し込みたい人に申込先が見つかるかを確認します。

この記事では、Clarityを操作例に、条件のそろえ方、情報の位置の記録、変更後の評価までを説明します。

製品仕様は2026年10月5日時点の公式資料を参照し、数値を使う表は考え方を示す架空例として掲載しています。

スクロールヒートマップでわかること

まず、色が何の指標を表しているかを確認します。

到達と読了を分ける

Clarityのスクロールマップでは、ページの位置ごとに、そこへ到達した利用者の割合を確認できます（参考：Clarityのスクロールマップ）。

ここで分かるのは、画面のどこまで到達したかです。

速くスクロールして末尾へ進んだ人もいれば、目次から必要な見出しへ移動した人もいます。

ページの下部へ到達した人が、途中の文章を順番に読んだとは限りません。

「読了率」と呼ぶ場合も、実際に何を計測した値なのかを説明する必要があります。

また、同じ名称のヒートマップでも、製品によって色の意味が異なります。

SiTestのスクロールヒートマップは、位置ごとの滞在時間を色で表し、到達数や到達率も別の情報として扱います（参考：SiTestのスクロールヒートマップ）。

他社ツールの説明を、そのまま自分の画面へ当てはめないようにしてください。

確認した値	読み取れること	その値だけでは分からないこと
位置への到達	その高さまで届いた状況	文章を理解したか
位置ごとの滞在	その範囲で時間を使った状況	関心か迷いか
ボタンのクリック	押す操作が発生したこと	申し込みが完了したか
申込完了	定義した完了条件の成立	どの文章が決め手だったか

レポートには「赤いから読まれた」ではなく、「この条件で料金見出し付近への到達が少なかった」と書くと、観測と解釈が混ざりにくくなります。

ページ全体の長さを確認する

同じ50％の位置でも、短いLPと長い解説記事では、表示される情報が違います。

ページの長さを変えれば、同じ見出しがある割合も変わります。

そのため、スクロールの割合だけを記録しても、あとでどの内容を指していたかが分からなくなります。

分析を始めるときは、対象ページを開き、主な見出しとCTAの順番を書き出してください。

アコーディオン、遅延表示する画像、埋め込み動画など、ページの高さを変える要素も確認します。

Clarityのヒートマップには再現範囲があり、スクロールマップはページのbodyを対象とし、div内部だけのスクロールを表示するものではありません（参考：Clarityヒートマップの制限）。

画面の中の比較表だけを横や縦に動かす構成では、ページ全体のスクロールとは別に操作を見る必要があります。

最初に「どのページの、どの表示状態を見ているか」を確定させてください。

ページ改修の前後を比べる場合は、改修前の画面も、日付と表示条件を添えて残します。

スクロールヒートマップの比較条件

比較条件をそろえると、色の違いがページの変更によるものなのかを考えやすくなります。

端末と画面の高さを分ける

PCとスマートフォンでは、最初に見える情報の量が違います。

スマートフォン同士でも、画面の高さやブラウザーの表示領域によって、見出しの位置は変わります。

まずPCとスマートフォンを分けて確認し、必要なら録画で実際の表示を照合します。

Clarityでの基本操作は、次の順番です。

1. 対象プロジェクトの「Heatmaps」を開く
2. 調べるURLを選ぶ
3. 期間を設定する
4. PC・Tablet・Mobileの対象端末を選ぶ
5. スクロールマップへ切り替える
6. 料金やCTAがある位置の到達状況を確認する

「Average fold」は、訪問者がスクロールを始める前に見える範囲の平均的な境界を示します（参考：スクロールマップの表示項目）。

すべての人がその線まで見たことや、その範囲を読んだことを意味するわけではありません。

ヒーロー画像を大きくしたあとに、最初の説明が画面外へ移っていないかを調べる目安として使います。

端末を切り替えたら、スクリーンショットも対象のレイアウトになっているかを確認してください。

流入ごとの母数を残す

同じページでも、広告から来た人と、具体的な疑問を検索して来た人では、確認したい情報が違う場合があります。

全体のスクロールが浅くなっていても、広告の配信量が増えただけかもしれません。

分析時は、まず全体を把握し、そのあと流入条件を分けます。

広告を比較する場合は、キャンペーンの名前だけでなく、実際に記録されたURLやUTMの条件を確認してください。

Clarityでは、条件を組み合わせたフィルターをセグメントとして保存できます（参考：Clarityのセグメント）。

保存した条件には、端末、期間、URLの指定も含めて名前や記録に残します。

母数は、PV、訪問者、セッションのどれを使っているかを明記します。

ツールの表示がPVなのに、レポートで「人」と言い換えないようにしてください。

記録する条件	記入例
ページ	対象LPのURL
期間	比較する開始日と終了日
端末	スマートフォン
流入	対象キャンペーンの条件
母数	画面に表示された指標名と件数
ページの版	改修前、改修後など
特記事項	広告変更、障害、計測設定の変更

条件を細かく分けすぎて記録がほとんど残らない場合は、違いを断定せず、対象期間や調査目的を見直します。

重要な情報への到達を調べる

色が変わる位置を探す前に、訪問者が判断するために必要な情報を選びます。

料金・実績・CTAの位置を記録する

最初の分析では、料金、対応範囲、実績、申込ボタンなど、重要な要素を三つから五つ選びます。

それぞれの開始位置を決めて、ヒートマップ上の到達状況を記録します。

大きな料金表の場合は、「料金表の見出し」と「料金表の末尾」を分けると、どこを測ったかが明確になります。

同じ表の中で、見出し位置の到達と、表全体の表示を混ぜないようにします。

次は、同じ条件のページで情報の位置を整理するための架空例です。

要素	ページ内の位置	その位置への到達率	次に確かめること
対象者の説明	上部	82％	広告の訴求と一致するか
料金の見出し	中部	48％	料金を探して往復していないか
導入実績の見出し	下部	31％	上部から実績へ移動できるか
申込CTA	下部	24％	別の申込導線が使われているか

これらの数字は、実サイトの成果や業界の基準値ではありません。

CTAへの到達率が低い場合も、上部のボタンから申し込みが進んでいれば、下部の到達を増やすことが最優先とは限りません。

到達率の表は、悪い場所に順位を付けるものではなく、次に確認する場所を決めるために使います。

表には見出し名とスクリーンショットを添えると、制作担当者にも修正対象が伝わります。

大きく減る位置の前後を調べる

到達が大きく減る位置を見つけたら、その直前と直後の情報を確認します。

長い説明、余白、バナー、関連リンクなど、訪問者が次の行動を選ぶきっかけを探します。

ただし、その位置で記録が減る理由は一つではありません。

知りたい答えが見つかった、別ページへ進んだ、画面が止まったなど、異なる状況が考えられます。

たとえば、料金の前で到達が減った場合には、次の仮説を分けて調べます。

仮説	確認するもの	すぐに決めないこと
前の説明が長い	録画の通過や戻り	文章を全部削除する
別ページへ進んだ	リンクのクリックと遷移先	離脱をすべて失敗とする
ページの終わりに見える	実際の余白や背景	内容への関心が低いとする
表示が不安定	画像読込、画面のずれ	訪問者の迷いだけで説明する
答えを得た	次の行動と検索意図	滞在が短いほど悪いとする

録画を調べるときは、同じURL、端末、期間などの条件から対象を探します。

Clarityのヒートマップから「View recordings」でクリックに対応する録画を見る機能は、クリックマップに限られるため、スクロール位置から同じように開けると考えないようにします（参考：ヒートマップの録画表示）。

調査で分かった事実と、まだ推測の部分を分けて残してください。

スクロールヒートマップを誤読しない

到達率を上げること自体が、ページの目的ではありません。

短いページと長いページを分ける

短いページは、長いページより少ない操作で末尾へ到達できます。

そのため、末尾への到達率だけを並べても、内容のよさを比較したことにはなりません。

よくある誤りは、説明を削ってページを短くし、スクロール率が上がったことだけを成果にすることです。

必要な説明まで減らしていれば、問い合わせ前の不安が増える場合もあります。

まずは、料金、条件、根拠、次の行動が見つかるかを確認します。

GA4の標準のスクロールイベントも、本文を読み終えたことを判定する仕組みではありません。

拡張計測のscrollは、各ページで縦方向の90％の位置が初めて表示されたときに発生します（参考：GA4の拡張計測イベント）。

ページが短ければ、少ないスクロールで条件を満たす場合があります。

Clarityの到達率とGA4のイベント数を比べるときも、同じ定義の指標だと考えないでください。

GA4で段階ごとのスクロールを設計する方法は、GA4のスクロール率と追加計測で詳しく扱っています。

固定表示や追従CTAを別に扱う

画面下に固定された申込ボタンは、ページの下部まで移動しなくても表示されます。

そのボタンの閲覧機会を、本文中の同じ高さにある情報と同じ方法で判断することはできません。

追従CTAは、出現条件、隠れる条件、ほかの要素との重なりを確認します。

Cookieバナーやチャットボタンが重なる場合は、見えている面積と操作できる状態も調べてください。

必要であれば、スクロール位置とは別に、CTAの表示とクリックを計測します。

GTMの「要素の表示」トリガーでは、対象要素、表示割合、表示時間などを条件として設定できます（参考：GTMの要素の表示トリガー）。

たとえば、特定のCTAを対象にし、ページ内で一度だけ表示を記録する設計を検討できます。

これは設計例であり、設定しただけで人が内容を認識したことを証明するものではありません。

表示対象を広く指定しすぎると計測が増えるため、対象を特定し、プレビューで発火を確認します。

同じ名前のボタンが複数あるなら、上部、本文中、追従を区別できるようにしてください。

情報の順序を変更する案を作る

見られていない部分を削る前に、その情報がいつ必要なのかを考えます。

早く必要な説明を上へ置く

料金を知りたい訪問者が多いページなら、料金の目安や条件へ早く進めるようにする案があります。

一方、サービスを初めて知る人が多いページでは、対象者や提供内容の説明が先に必要かもしれません。

すべての情報を上へ詰め込むのではなく、最初に答える問いを選びます。

広告や検索結果で約束した内容が、ページ上部で見つかるかを確認してください。

次は、情報の配置を考えるための記入例です。

訪問者の問い	現在の状態	変更案	確かめる行動
自社でも使えるか	対応条件が下部	上部に対象者を短く示す	条件への到達、申込開始
いくらかかるか	料金表まで遠い	料金への案内を加える	料金への移動、離脱先
信頼できるか	根拠が見つけにくい	主張の近くに根拠を置く	根拠の確認、次の行動
どう始めるか	CTAの説明が曖昧	押したあとの手順を示す	申込開始と完了

変更案は、「上に置く」だけでなく、要約、目次、ページ内リンクなどから選べます。

本文の順序を大きく変える前に、必要な情報への入口を増やす方法もあります。

一度に料金、見出し、画像、CTAをすべて変えると、どの変更が結果に関係したかを整理しにくくなります。

最初の変更では、解決したい問いと確認する行動を一組にしておきます。

削除する前に録画を確認する

到達の少ない節にも、比較検討中の人に必要な情報が含まれる場合があります。

よくある質問、導入条件、制約事項は、全員が長く読む場所でなくても役割があります。

削除を判断する前に、その節へ来た人の操作を確認します。

目次から直接来た人、上へ戻って比較している人、別の説明へ進んだ人を分けて見てください。

録画で分かるのは操作の順序であり、訪問者の本心そのものではありません。

理由が必要なら、問い合わせ内容、ユーザビリティテスト、短い質問などの情報も合わせます。

同じ場所を往復している記録があった場合は、「説明が難しい」だけでなく、「比較に必要な情報が離れている」という仮説も考えられます。

その場合、文章を削るより、比較表や要約を近くに置く案が適しているかもしれません。

まず数件の記録から確認項目を作り、似た条件の別の記録でも同じ状況があるかを調べます。

少数の印象的な録画を、全訪問者の行動として報告しないようにしてください。

録画の選び方は、セッションリプレイを毎週確認する方法で整理しています。

スクロールヒートマップで変更後を評価する

変更後は、ページの同じ割合よりも、同じ情報へ届いたかを比べます。

同じ要素の到達を比べる

料金の説明を上へ移動した場合、以前の50％の位置と現在の50％の位置には、違う内容があるかもしれません。

比較するのは「50％まで来た割合」だけでなく、「料金見出しへ届いた割合」です。

ClarityのCompare機能では、二つのヒートマップを並べ、期間、端末、フィルターなどを変えて確認できます（参考：Clarityのヒートマップ比較）。

比較する左右の期間と条件を、自分で確認してから数値を読み取ってください。

背景に使われる画面が比較対象の版と合っているかも重要です。

改修前のデータへ改修後の画面を重ねたまま、要素の位置を説明しないようにします。

次は、同じ情報を追うための架空例です。

比較対象	変更前	変更後	判断の注意点
料金見出しの位置	ページ中部	ページ上部	移動した内容が同じか
料金位置への到達	48％	67％	条件と母数を併記する
申込開始	別途記録	別途記録	到達の増加と分けて見る
申込完了	別途記録	別途記録	計測定義が同じか

48％から67％への変化は、ここでは説明用の仮の数字です。

このような変化が実際に起きても、料金への到達が増えたことと、売上が増えたことは同じではありません。

ページの変更と同時に広告や流入構成が変わっていれば、その影響も記録します。

前後比較だけで効果を確定できない場合は、仮説を絞ってA/Bテストなどで確かめます。

読後の行動も確認する

ページの目的が申込獲得なら、到達率に加えて、申込開始と完了を確認します。

解説記事なら、関連する説明へ進んだか、必要な資料へ到達したかも評価対象になります。

目的に合わせて、主に評価する行動を一つ決め、補助の指標を添えます。

たとえば、料金への到達が増えても、申込完了が減っていれば、到達率だけで成功とは言えません。

反対に、短時間で必要な情報を得て申し込めるようになれば、スクロールが浅くなっても改善の可能性があります。

結果は、観測した変化、考えられる理由、次に確認することの順に書くと伝わります。

「料金の見出しへの到達は増えたが、申込完了の差はまだ判断できない」という報告でも、次の作業は決められます。

アクセスが少ない場合は、率の上下より、表示や操作に明らかな問題がないかを先に確認してください。

その進め方は、アクセスが少ないサイトのヒートマップ分析にまとめています。

まずは重要な情報を三つ選び、位置、到達状況、次の行動を一枚の表へ残してください。

それが、色の印象だけでページを直すことから、根拠を持って情報の順序を考えることへの第一歩になります。