1. ホーム
  2. 辞典
  3. R05

辞典 R05

ヒートマップ

このページで分かること:ヒートマップで見るページを1つ選び、仮説と、2週間で直す1か所を決める。

読む目安 15分 / 最終確認 2026-11-11 / 元の資料:再構成入門 16(Web基礎 10f)

何のための道具か

GA4 が「どのページか」を教えてくれます。ヒートマップは「そのページのどこで迷うか」を見ます。

ヒートマップは、ページの上のクリック・スクロール・注目の度合いを、色の濃さで重ねた図です。Google の道具ではありません。中小企業では Microsoft Clarity(無料)や、Hotjar、Ptengine などが使われます。道具の名前より、見るページと仮説が先です。

GA4 との分担

GA4 とヒートマップの分担
比べる点 GA4 ヒートマップ
分かること どの入口の、どのページが、成果まで届かないか その画面で、どこが押され、どこまで読まれるか
向く問い チャネルと着地の成績 ボタンが下すぎないか。押せないものばかり押されていないか
向かない問い ページの中の迷い 検索語、費用対効果、月次の KGI

順番は必ず、GA4(か広告)でページを1つ選ぶ → 仮説を書く → ヒートマップ、です。全部のページをいつも眺めると、色のきれいさに時間を使います。

見る図の種類

Clarity では、クリック マップ、スクロール マップ、エリア マップ、コンバージョン マップ、アテンション マップが使えます。

  • クリック マップ:どこが押されたか。リンクでない写真や見出しが赤くなるのは、期待と作りのずれ
  • スクロール マップ:何%の人が、画面のどこまで来たか。主な CTA が、大半が止まる位置より下なら、そこが摩擦
  • アテンション マップ:どこが長く見られたか
  • 録画(レコーディング):1人の操作の再生。ヒートマップの「なぜ」を確かめる補助。毎週の KPI にしない

よく出るサインと一手

Clarity は、同じ場所の連打(レイジ クリック)、押しても反応しない要素(デッド クリック)、必要以上に多いスクロールを、自動で印にします。

見え方と、先に試すこと
見え方 仮説 先に試すこと
画像や文字がよく押されるが、リンクが無い そこが次の一歩だと思われている リンクにするか、すぐ下に同じ意味のボタンを置く
同じ場所の連打 反応しない、重い、押せそうで押せない 実機でその位置をタップ。チャットやスライダーを疑う
反応しない要素が押される 見た目がボタン 飾りを弱めるか、本当の CTA に寄せる
最初の画面で大半が去る 自分ごとになっていない。表示が遅い 見出しをお客さんの状況の言葉に。PageSpeed Insights で重さを見る
CTA まで来る人がとても少ない 途中が長い。不安が残る 事例と「向かない人」を上へ。CTA を途中にも1つ
フォームを始めるが、完了しない(録画) 項目が多い。エラーが見えない 項目を減らす。エラーの文をその場に出す

入れてよいとき/まだ早いとき

  • よい:LP やトップに、週ごとにまとまった訪問がある。GA4 でキーイベントが弱い。改修の前後で1つだけ見る
  • まだ早い:月の訪問がごく少ない。ページが毎日変わるテストの最中。まず誰向けかが書けていない

Clarity は少ない訪問でも図を作れます。それでも、母数が小さいと、1人のくせが図の全体の色になります。そのときは録画を2〜3本見るか、営業に「この画面のどこで止まるか」を聞くほうが早いです。

2週間の型

  1. GA4 で、着地は多いが成果が弱いページを1つ選ぶ
  2. 仮説を1行書く(例:相談のボタンが、スマホで折りたたみの下にある)
  3. スマホとパソコンを分けて見る。中小企業の本番はスマホが多い
  4. 直すのは1か所。見出しか、CTA の位置か、押し間違いか
  5. GA4 のキーイベントで、直したあとを見る。色がきれいになったことは成果ではない
取り扱い

入力欄(氏名・電話・メール・カード)は録らない。Clarity は、入力欄の中身をいつも隠し、ほかの機密に見える内容も最初から隠す設定です。それでも、隠す範囲を自分で確かめます。録画を社外に雑に渡さない。同意の仕組みがあるサイトでは、それを無視して「全部録る」にしない。ヒートマップは改善の補助で、監視が目的ではありません。

社長への見せ方

色の画面を並べません。「このページは来ている。押したい場所がリンクになっていない。ボタンをここに移す。2週間後に有効な問い合わせを見る」までが報告です(5-5)。

現場での意味

ヒートマップは、受け皿の摩擦を見つける道具です。集客が増えない理由を、ここで探しません。入口は GA4 と Search Console、ページの中はヒートマップ、電話はビジネスプロフィール、です。

このページで使う道具 辞典:GA4 4-6 振り返り

このページのチェック

このページで起きやすい失敗

  • 全部のページのヒートマップを、毎週眺める
  • 訪問の少ないページの色で判断する
  • 録画を社外にそのまま渡す

ほかの領域の失敗は よくある失敗(領域別) にまとめています。

出典とこのページの扱い

  1. 本文:経営学まとめ「再構成入門 16. 測定の地図と、道具」(2026-08-21版)のヒートマップの節(Web基礎 10f と同じ)を移植。Clarity の図の種類と自動の印、隠す設定を、公式で確かめて足した。「ムーブ」は Clarity の図の名前(アテンション マップ)にした。「有効問い合わせ」は「有効な問い合わせ」にした
  2. Microsoft Learn「Heatmaps overview」 https://learn.microsoft.com/ja-jp/clarity/heatmaps/heatmaps-overview(確認日 2026-11-11)。図の種類と、図を作るのに最低の訪問数は無いこと
  3. Microsoft Learn「Semantic metrics」 https://learn.microsoft.com/ja-jp/clarity/insights/semantic-metrics(確認日 2026-11-11)
  4. Microsoft Learn「Recordings overview」 https://learn.microsoft.com/ja-jp/clarity/session-recordings/recordings-overview(確認日 2026-11-11)
  5. Microsoft Learn「Masking content」 https://learn.microsoft.com/ja-jp/clarity/setup-and-installation/clarity-masking(確認日 2026-11-11)。入力欄はどのモードでも隠れる
  6. Microsoft Learn「Frequently asked questions」 https://learn.microsoft.com/ja-jp/clarity/faq(確認日 2026-11-11)。無料
  7. 2週間の型、入れてよいとき:この資料の判断