ヒートマップ分析のやり方｜直す場所と順番の決め方

ヒートマップ分析は、GA4で離脱の多いページを選び、症状に合うヒートマップで原因の場所を探して、成果に近い場所から直す手順で進めます。迷う変更はA/Bテストで確かめ、直した前後を同じ条件で比べれば、改善が積み上がります。

この記事でわかること

先に結論

ヒートマップは、入れただけでは何も変わりません。「どのページの、どの症状を、どの順番で直すか」を決めて初めて成果につながります。

よくある失敗は、色の付いた画面を眺めて「赤いところが人気」で終わることです。分析の前にページとゴールを決め、症状から見る画面を選びます。

見つけた問題は、成果への近さと影響する人の数で並べ替えます。明らかな不具合はすぐ直し、意見が割れる変更はA/Bテストで確かめる。この順番を守るだけで、手戻りがぐっと減ります。

ヒートマップ分析とは｜GA4では見えないページの中を見る

ヒートマップ分析は、ページの中で訪問者がどこを読み、どこを押し、どこで離れたかを色で見る方法です。行動が多い場所は赤などの暖色、少ない場所は青などの寒色で表示されます。

GA4でわかるのは「どのページで離脱が多いか」までです。そのページの中の、どの段落で読むのをやめたのかは、数字だけでは見えません。ここを埋めるのがヒートマップの役割になります。

GA4とヒートマップの使い分け

道具	得意なこと	苦手なこと
GA4	サイト全体の流れ、ページごとの離脱、流入元の比較	ページの中のどこで離れたか
ヒートマップ	ページの中で読まれた場所・押された場所・離脱した位置	サイト全体の流れ、ページ間の比較

GA4で問題のあるページを見つけ、ヒートマップでそのページの中を調べる。この2段で使うのが基本の形です。GA4の見方はGA4の使い方 初心者向け完全ガイドにまとめました。

ヒートマップの3つの種類

ツールによって呼び名は少しずつ違いますが、見ているものは大きく3つに分かれます。

• スクロールヒートマップ: ページのどこまで読まれたか、どこで離脱したか
• クリック（タップ）ヒートマップ: どこが押されたか、押されていないボタンはどれか
• アテンション（熟読）ヒートマップ: どこで長く止まって読まれたか

ヒートマップの3つの種類と見つかる問題

• ページの中の行動を色で見る
• • スクロールどこまで読まれたか。急に人が減る位置が「離脱の壁」
  • クリック（タップ）押されないボタン、押せない場所が押されている誤解
  • アテンション（熟読）読ませたい情報が飛ばされていないか

図：3つの種類は、それぞれ見つかる問題が違う

分析を始める前に決めること

ヒートマップを開く前に決めておきたいのは、対象のページ・ゴール・期間の3点です。ここが曖昧なまま画面を見ると、気になる色を追いかけて時間だけが過ぎていきます。

対象のページは「離脱が多く、成果に近い」ものから

最初に見るページは、GA4で次の条件に当てはまるものが候補です。

アクセスがほとんど無いページは、色の濃淡が偶然で決まりやすくなります。まずは人が集まるページで練習するほうが、結果を読み違えません。

ゴールは1ページに1つ

「このページで読者に何をしてほしいか」を1つに絞ります。サービス紹介ページなら問い合わせボタンを押すこと、記事なら関連ページへ進むこと、といった具合です。

ゴールが決まると、見るべき場所も決まります。ゴールのボタンまで読者が届いているか、届いた人が押しているか。この2つを最初に確かめます。

期間は週単位で区切る

平日と週末では、来る人も読み方も変わります。データを集める期間は1週間単位で区切ると、曜日の偏りが混ざりません。

あわせて、PCとスマホは分けて見ます。画面の大きさが違えば、同じページでも読まれる位置が変わるからです。

ヒートマップの見方｜症状から開く画面を決める

ヒートマップは、GA4で見えた症状から逆算して開くと迷いません。全部の画面を順に眺めるより、症状に合う1枚を深く見るほうが早く原因にたどり着きます。

症状別に開くヒートマップ

GA4で見えた症状	開くヒートマップ	見る場所	よくある原因
滞在が短く、すぐ離脱される	スクロール	ファーストビューの直後	最初の画面で答えが見つからない
読まれているのに成果が出ない	アテンション	強み・料金・実績の段落	読ませたい情報が飛ばされている
ボタンまで届いているのに押されない	クリック	ボタンとその周り	ボタンに見えない、文言が弱い
フォームの途中で離脱が多い	クリック＋フォーム分析	入力項目ごと	項目が多い、入力でつまずく

スクロールヒートマップ：人が急に減る位置を探す

スクロールで見るのは、読者の数が急に減る位置です。下に行くほど人が減るのは自然なことなので、なだらかな減り方は気にしなくて構いません。

問題は、ある段落を境にがくっと減る場所です。その直前に、話の流れが切れる見出しや、読む気をなくす長い文章、大きすぎる画像がないかを確かめます。

ゴールのボタンが、その「急に減る位置」より下にある場合は要注意。ボタンを上に移すか、減る原因の段落を直すかを考えます。

クリックヒートマップ：押されない場所と、押せない場所

クリックでは2つの逆の問題を探します。1つは、押してほしいボタンが押されていないこと。もう1つは、リンクになっていない画像や文字が押されていることです。

後者は「ここを押せば詳しく見られる」と読者が期待している合図になります。リンクを付けるか、押せそうに見える装飾を外すかで、すぐに直せるケースが多い問題です。

アテンションヒートマップ：読ませたい段落が飛ばされていないか

アテンションでは、サービスの強み・料金・実績など、成果に効く段落で読者が止まっているかを見ます。逆に、成果に関係の薄い段落で長く止まっている場合は、読者がそこで迷っている可能性もあります。

「よく読まれている＝良い」とは限りません。理解しにくくて何度も読み返している場合もあるので、前後のスクロールの減り方と合わせて読みます。

直す場所の優先順位の決め方

分析すると、直したい場所はたいてい1つでは済みません。全部を一度に直すと、どれが効いたのかわからなくなります。直す順番は、成果までの距離・通る人の数・直す手間の3つで決めます。

優先順位を決める3つの物差し

物差し	高い（先に直す）	低い（後に回す）
成果までの距離	ボタン、料金、フォームの近く	ページ下部の補足、関連情報
通る人の数	ファーストビュー、上の方の段落	一部の人しか届かない下の段落
直す手間	文言・リンク・順番の入れ替え	デザインの作り直し、開発が要る変更

それぞれを3段階で付けて、合計の高い順に並べます。制作の現場では、この表を1枚作るだけで、社内やクライアントとの「どこから手を付けるか」の話し合いが短くなります。

例：サービス紹介ページで見つかった4つの問題

優先順位の付け方の例（3が高い・合計で並べる）

見つかった問題	成果までの距離	通る人の数	手間の軽さ	合計
料金表の画像が押されている（リンクなし）	3	2	3	8
問い合わせボタンの直前で読者が急に減る	3	2	2	7
ファーストビューの見出しで離脱が多い	2	3	2	7
下部の会社紹介がほとんど読まれていない	1	1	3	5

この例なら、最初に直すのは料金表の画像です。リンクを付けるだけで済み、成果のすぐ近くにあります。会社紹介が読まれないのは、成果への影響が小さいので後回しで構いません。

直接直すか、A/Bテストで確かめるか

優先順位が決まったら、次は直し方を選びます。答えがはっきりしている問題は直接直し、意見が割れる変更はA/Bテストで確かめます。

直接直す問題と、A/Bテストで確かめる問題

直接直す（答えがはっきりしている）

押せない場所が押されている

リンクを付ける、押せそうな装飾を外す

リンク切れ・表示崩れ

不具合なので、比べる必要がない

古い情報・誤った情報

正しい内容に差し替える

A/Bテストで確かめる（意見が割れる）

見出しやボタンの文言

どちらが良いかは読者の反応で決める

段落の順番・ボタンの位置

上に移すと逆効果になる場合もある

段落を削る

削ったほうが成果が上がることもある

図：不具合は直す。好みが分かれる変更は数字で決める

迷ったら「社内で意見が割れるかどうか」で分けると判断しやすくなります。誰が見ても直すべきものは直接直し、「こっちの方が良いと思う」が2人以上から出るものはテストに回します。

A/Bテストの判定でつまずきやすい点（サンプル数、同時に複数の要素を変える、季節の影響）は、CVR改善方法｜3層診断モデルの「A/Bテスト設計で避けたい5つの落とし穴」にまとめました。

気づきと結果は1行ずつ記録する

ヒートマップ分析は、1回で終わる作業ではありません。何を見つけ、何を考え、何をして、どうなったかを1行ずつ残すと、次の改善の出発点になります。

改善の記録表（1行1件）

日付	ページ	見つけたこと	仮説	やること	確かめ方	結果
例：11/4	料金ページ	料金表の画像が押されている	詳しい内訳を見たい人がいる	画像から内訳ページへリンク	2週間後に内訳ページへの移動数を比べる	（記入）

この表は、社内やクライアントへの報告にもそのまま使えます。「なぜその変更をしたのか」が残っていれば、担当者が替わっても改善が止まりません。

直した前後は同じ条件で比べる

変更の効果は、直す前と直した後を、同じ長さの期間・同じデバイスで比べて確かめます。直す前は1週間、直した後は3日、といった比べ方では差が出たのか偶然なのか判断できません。

季節やキャンペーンの影響も混ざります。セールの時期と重なった週の数字は、別に見るようにしてください。

ヒートマップ分析の流れ

• 分析は「直して、比べる」までが1周です
• 1ページとゴールを決めるGA4で離脱が多く、成果に近いページから
• 2症状に合うヒートマップを開く読まれない→スクロール、押されない→クリック
• 3直す順番を決める成果までの距離×通る人の数×直す手間
• 4直す／A/Bテストで確かめる不具合は直接、意見が割れる変更はテスト
• 5前後を同じ条件で比べる同じ長さの期間・同じデバイスで

結果を記録表に残し、次の1周につなげます

図：ページ選びから効果の確認までを1周として回す

ヒートマップ分析に使えるツール｜SiTestでできること

ここまでの手順を1つのツールで進めたい場合の選択肢として、SiTest（サイテスト）を紹介します。株式会社グラッドキューブが提供するツールで、公式サイトでは「CVRと顧客体験を高める CX改善プラットフォーム」と紹介されています。

特徴は、ヒートマップで見つけた問題を、同じ管理画面のA/Bテストやフォーム改善の機能でそのまま確かめられることです。分析と改善の道具が分かれていると、ツールをまたぐたびに手間が増えます。

この記事の手順とSiTestの機能の対応

手順	使う機能	公式サイトに書かれている内容
どこまで読まれたかを見る	スクロールヒートマップ、スクロールデータ	ページが表示されていた時間を色で表示。スクロール地点ごとの到達数・到達率・離脱数・離脱率・平均滞在時間を数値で確認
どこが押されたかを見る	クリック／タップヒートマップ、クリック（タップ）データ	クリック・タップの位置を表示。どの要素がどれだけ押されたかを数値で確認
スマホの操作を見る	タッチアクション	スワイプ・フリック・ピンチイン・ピンチアウトが起きた位置を表示
前後やデバイスで比べる	期間比較、セグメント比較	リニューアル前後や前月との比較、訪問者の属性・アクセス環境・テストパターンごとの比較
1人ずつの動きを見る	録画再生（セッションリプレイ、ゲイズプロット）	クリック・マウスの動き・スクロールを録画して再生。見た順番と時間も確認
意見が割れる変更を確かめる	A/Bテスト	管理画面でテストパターンを作成。HTML・CSSの知識なしで編集でき、デバイスや曜日などの条件で配信
フォームのつまずきを見る	EFO（フォームレポート）	項目ごとの入力開始率・中断率・完了率を表で確認

出典: SiTest公式サイト（トップ・ヒートマップ解析・録画再生・A/Bテスト・EFO）2026年10月29日確認

スクロールデータで「急に減る位置」を数字で見る

ヒートマップの色だけでは、どれくらい減ったのかがわかりにくいこともあるでしょう。SiTestのスクロールデータは、スクロール地点ごとの到達率と離脱率を数値とグラフで表示します。

色で当たりを付け、数字で確かめる。この2段で見ると、「急に減る位置」を見間違えにくくなります。

期間比較・セグメント比較で前後を確かめる

直した前後の比較に使うのは、期間比較の機能です。公式サイトでは、リニューアル前後や前月との比較が例に挙がっています。

セグメント比較では、アクセス環境やテストパターンごとに行動を分けて見られます。PCとスマホを分けて見る、A/Bテストのパターンごとにヒートマップを並べる、といった使い方も可能です。

料金プラン

SiTestの料金プラン（公式サイトの記載）

プラン	月額	主な条件
フリープラン	0円	月間3,000PV・1ドメイン。期間制限なし、契約期間の縛りなし、クレジットカード登録不要
エンタープライズプラン	個別見積もり	計測PV数・ドメイン数に応じて見積もり。最低利用期間は原則12ヶ月

公式サイトのトップでは、2週間すべての機能を無料で使えると案内されています。料金ページによると、トライアル中の計測可能PV数は30,000PVで、トライアルが終わった後も無料のまま使い続けられる仕組みです。

出典: SiTest 料金プラン・SiTest 公式サイト（2026年10月29日確認）。税込・税抜の表記と初期費用は料金ページに記載がないため、申し込み前に公式サイトで確認してください。

導入事例：読み飛ばされた段落を削ってCVR1.5倍

公式サイトの導入事例（2025年9月17日公開）では、記事LPの制作と広告運用を手がける株式会社みらいきれいの改善が紹介されています。

お花のサブスクサービスの記事LPで、読了率は高いのに、CVRが目標に届いていませんでした。ヒートマップで見ると、サービスの強みを伝える重要なコンテンツの滞在時間が極端に短く、読み飛ばされていたことがわかります。

読者の興味と内容がずれていると考え、その部分を削除。最終的にCVRは1.5倍に改善したと紹介されています。「大事な情報だから残す」ではなく、読者の動きを見て削る判断をした例です。

出典: SiTest 導入事例 株式会社みらいきれい（2026年10月29日確認）

SiTestが合う人・ほかの選択肢を考えたい人

ヒートマップを無料で試す方法としては、Microsoft Clarityもあります。公式サイトでは「無期限で無料」と案内されていて、ヒートマップとセッションの録画を使えます（Microsoft Clarity 公式サイト・2026年10月29日確認）。

まず画面の見方に慣れたい段階か、分析から改善までを1つの画面で回したい段階か。今の段階に合わせて選ぶと、入れたのに使わないツールが増えません。

ヒートマップ分析でよくある見間違い

ヒートマップは直感的に見える分、読み違いも起きやすい道具です。色の印象だけで結論を出さないことが、遠回りを防ぎます。

PCとスマホを混ぜて見る

PCとスマホでは、画面の幅もファーストビューの範囲も別物です。混ぜたまま見ると、どちらの問題なのかがわからなくなります。最初からデバイスを分けて見るのが基本です。

色の濃さを「多い・少ない」の絶対値として読む

ヒートマップの色は、そのページの中での相対的な多さを表しています。赤いから多い、とは限りません。ほかのページと比べるときは、色ではなく到達率やクリック数の数字を使ってください。

マウスの動きを視線と同じだと思い込む

PCのヒートマップの多くは、マウスの動きや画面に表示されていた時間から行動を推し量っています。読者がマウスを動かさずに読んでいる場合もあるので、1つの画面だけで決めつけず、スクロールやクリックと組み合わせて読むのが安全です。

入力内容や個人情報の扱いを確かめずに入れる

フォームのあるページにツールを入れるときは、入力内容が記録されるかどうかを確かめます。たとえばSiTestのFAQでは、「静的」トラッキングコードを設置した場合は訪問者の情報をサーバーに保存しないこと、個人情報に当たるHTML要素に指定のクラス属性を付けると表示をマスクできることが説明されています（SiTest よくある質問・2026年10月29日確認）。

Cookieの同意や外部送信の通知の考え方は、CVR改善方法の記事の「同意取得・個人情報の取扱い」で整理しました。

ヒートマップ分析のよくある質問

まとめ｜ヒートマップは「直して比べる」までが分析

ヒートマップ分析は、画面を見ることではなく、直す場所と順番を決めて、結果を確かめるところまでが1つの作業です。

最初の1周は、成果に一番近いページを1つだけ選んで始めてみてください。1つ直して前後を比べられれば、次に何を直すかは記録表が教えてくれます。