何のための道具か
GA4 が「どのページか」を教えてくれます。ヒートマップは「そのページのどこで迷うか」を見ます。
ヒートマップは、ページの上のクリック・スクロール・注目の度合いを、色の濃さで重ねた図です。Google の道具ではありません。中小企業では Microsoft Clarity(無料)や、Hotjar、Ptengine などが使われます。道具の名前より、見るページと仮説が先です。
GA4 との分担
| 比べる点 | GA4 | ヒートマップ |
|---|---|---|
| 分かること | どの入口の、どのページが、成果まで届かないか | その画面で、どこが押され、どこまで読まれるか |
| 向く問い | チャネルと着地の成績 | ボタンが下すぎないか。押せないものばかり押されていないか |
| 向かない問い | ページの中の迷い | 検索語、費用対効果、月次の KGI |
順番は必ず、GA4(か広告)でページを1つ選ぶ → 仮説を書く → ヒートマップ、です。全部のページをいつも眺めると、色のきれいさに時間を使います。
見る図の種類
Clarity では、クリック マップ、スクロール マップ、エリア マップ、コンバージョン マップ、アテンション マップが使えます。
- クリック マップ:どこが押されたか。リンクでない写真や見出しが赤くなるのは、期待と作りのずれ
- スクロール マップ:何%の人が、画面のどこまで来たか。主な CTA が、大半が止まる位置より下なら、そこが摩擦
- アテンション マップ:どこが長く見られたか
- 録画(レコーディング):1人の操作の再生。ヒートマップの「なぜ」を確かめる補助。毎週の KPI にしない
よく出るサインと一手
Clarity は、同じ場所の連打(レイジ クリック)、押しても反応しない要素(デッド クリック)、必要以上に多いスクロールを、自動で印にします。
| 見え方 | 仮説 | 先に試すこと |
|---|---|---|
| 画像や文字がよく押されるが、リンクが無い | そこが次の一歩だと思われている | リンクにするか、すぐ下に同じ意味のボタンを置く |
| 同じ場所の連打 | 反応しない、重い、押せそうで押せない | 実機でその位置をタップ。チャットやスライダーを疑う |
| 反応しない要素が押される | 見た目がボタン | 飾りを弱めるか、本当の CTA に寄せる |
| 最初の画面で大半が去る | 自分ごとになっていない。表示が遅い | 見出しをお客さんの状況の言葉に。PageSpeed Insights で重さを見る |
| CTA まで来る人がとても少ない | 途中が長い。不安が残る | 事例と「向かない人」を上へ。CTA を途中にも1つ |
| フォームを始めるが、完了しない(録画) | 項目が多い。エラーが見えない | 項目を減らす。エラーの文をその場に出す |
入れてよいとき/まだ早いとき
- よい:LP やトップに、週ごとにまとまった訪問がある。GA4 でキーイベントが弱い。改修の前後で1つだけ見る
- まだ早い:月の訪問がごく少ない。ページが毎日変わるテストの最中。まず誰向けかが書けていない
Clarity は少ない訪問でも図を作れます。それでも、母数が小さいと、1人のくせが図の全体の色になります。そのときは録画を2〜3本見るか、営業に「この画面のどこで止まるか」を聞くほうが早いです。
2週間の型
- GA4 で、着地は多いが成果が弱いページを1つ選ぶ
- 仮説を1行書く(例:相談のボタンが、スマホで折りたたみの下にある)
- スマホとパソコンを分けて見る。中小企業の本番はスマホが多い
- 直すのは1か所。見出しか、CTA の位置か、押し間違いか
- GA4 のキーイベントで、直したあとを見る。色がきれいになったことは成果ではない
入力欄(氏名・電話・メール・カード)は録らない。Clarity は、入力欄の中身をいつも隠し、ほかの機密に見える内容も最初から隠す設定です。それでも、隠す範囲を自分で確かめます。録画を社外に雑に渡さない。同意の仕組みがあるサイトでは、それを無視して「全部録る」にしない。ヒートマップは改善の補助で、監視が目的ではありません。
社長への見せ方
色の画面を並べません。「このページは来ている。押したい場所がリンクになっていない。ボタンをここに移す。2週間後に有効な問い合わせを見る」までが報告です(5-5)。
ヒートマップは、受け皿の摩擦を見つける道具です。集客が増えない理由を、ここで探しません。入口は GA4 と Search Console、ページの中はヒートマップ、電話はビジネスプロフィール、です。