クリックヒートマップの見方｜押されないCTAと、押せない場所へのクリックを調べる

クリックヒートマップでCTAが青くても、すぐにボタンの色を変える必要はありません。

そもそもその場所まで届いていないのか、届いたうえで押していないのか、押した後に動作が止まっているのかで、直す場所が変わるからです。

反対に、赤くなっている画像が、利用者の期待どおりに動かない場所である可能性もあります。

クリックヒートマップは、人気の場所を眺めるだけでなく、操作の問題を切り分けるために使います。

この記事では、Microsoft Clarityの公式資料を例に、ページの条件をそろえ、気になる要素から録画を開き、修正後の成果まで確かめる手順を解説します。

最後には、そのままチームで使える「クリックの問題を分ける点検表」も用意しました。

機能の説明は2026年10月5日に確認した公式資料に基づき、記入例のサイトや数値は説明用の架空例です。

クリックヒートマップで数えるもの

クリック数と利用者数を分ける

クリックヒートマップは、ページ上のどの要素がクリックされたかを、色や順位で確認する仕組みです。

Clarityではリンク以外の場所も対象になり、PCではクリック、スマートフォンやタブレットではタップを扱います（参考：Microsoftのクリックマップ解説）。

ここで分けたいのが、「押された回数」と「押した人の数」です。

同じ人が一つの画像を続けて押すと、クリックは複数回になります。

画像のクリックが多いという結果だけでは、多くの人に好まれているとは言い切れません。

例えば、反応しない画像を1人が何度も押した場合と、複数の人が一度ずつ押した場合では、考える修正案が違います。

前者なら画像の見た目や反応を点検し、後者なら画像の先に求められている情報を調べる、といった分け方ができます。

まずは数字の横に、クリック回数、ページビュー、ユーザー、セッションのどれが表示されているかを書き留めましょう。

集計するもの	確認できること	そのまま言えないこと
クリック回数	操作が何回発生したか	押した人数
クリックしたセッション	操作が起きた訪問の数	別端末も含む実人数
対象ページのPV	ページが表示された回数	CTAが画面内に見えた回数
申込完了数	定義した成果の発生	どの見た目が成果を生んだか

この整理は、異なるツールの数字を比べるときにも役立ちます。

同じ「クリック率」という名前でも分母が違えば、数値を横並びにはできません。

色の濃さだけで評価しない

赤い場所は調査の入口であって、改善の成功を示す印ではありません。

クリックが集中している理由には、便利な導線、押したくなる画像、反応の遅さ、操作ミスなど複数の候補があります。

地図の色を見たら、先にその場所の役割を確認してください。

申込ボタンなら次の画面へ進めたか、説明タブなら内容を切り替えられたか、ただの見出しならリンクに見えていないかを調べます。

同時に、対象期間、URL、端末、PV、ページの版をメモします。

「先週のスマートフォン版LPで、申込ボタン周辺にクリックが集中した」という記録なら、あとで同じ条件を開き直せます。

「赤かった」だけでは、担当者が変わったときに確認を再現できません。

Clarityのクリックマップにあるクリックの割合は、利用者の何割が押したかという意味とは区別して読む必要があります（参考：クリック数と割合の表示）。

スクリーンショットを共有するときも、色だけを切り抜かず、集計条件を文章で添えると誤解を減らせます。

最初の問いは「どの色が濃いか」より、「この要素で利用者に何をしてほしいか」です。

クリックヒートマップの対象をそろえる

ページと端末を分ける

最初に調べるのは、成果につながる一つのページに絞りましょう。

例えば、サービス紹介ページの下部にある「相談する」ボタンを対象にします。

別サービスのページや、配置の異なるLPをまとめると、どのレイアウトを直すべきか分かりにくくなります。

Clarityで確認する場合は、次の順で対象を固定します。

1. 対象のプロジェクトを開き、Heatmapsへ進む
2. 調べるURLと期間を選ぶ
3. PC・Tablet・Mobileのうち、一つの表示を選ぶ
4. クリックマップを開き、対象ボタンと周辺の要素を確認する
5. 適用した条件とページの版を点検表に残す

公式画面ではURL、期間、端末などで表示を切り替えられます（参考：クリックマップの上部パネル）。

URLを完全一致で指定したつもりでも、末尾のスラッシュやクエリ付きURLなど、実際に含まれる対象を確認してください。

Clarityの複数ページ集計では条件の指定方法によって対象が変わるため、最初から広いURL条件にするより、一つのページで結果を確かめる方が整理しやすくなります（参考：複数ページのヒートマップ）。

スマートフォンだけでボタンが押されないなら、PCの配置を変える前に、スマートフォンの固定バーやメニューとの重なりを調べましょう。

流入元でも分けたい場合は、まず端末を固定し、その中で広告と検索などの条件を比較します。

最初から細かく分けすぎて各グループが数件になるなら、比較を急がず、確認する条件を減らします。

計測期間中の変更を確認する

同じURLでも、ボタンの位置や文言が変われば別の画面として考える必要があります。

広告用のコピー変更、バナー追加、固定CTAの導入などは、クリックの意味を変えるためです。

点検前に、公開日時と変更内容を担当者へ確認してください。

日付が分かるなら変更の前後で期間を分け、分からないなら比較の条件がそろっていないことを記録します。

古い画面へのクリックを新しい画面に重ねて見ていないかも確認が必要です。

ClarityはCSSの要素情報と再生画面を利用してヒートマップを表示し、画面の状態によって見え方が変わると説明しています（参考：ヒートマップの制約）。

例えば、スクリーンショットにない要素のクリックが一覧にある場合、見えていないことを「クリックが間違っている」と即断しないでください。

対象時期の画面、表示条件、録画の順で確かめます。

開閉メニューなど動的な箇所には表示上の制約もあるため、マップに見えないことを操作ゼロの根拠にはしません。

確認項目	点検表に残す内容
URL	調査対象と除外したページ
端末	PCまたはスマートフォンなど
期間	開始日・終了日・タイムゾーン
画面の版	公開日時と変更した要素
表示条件	ログイン状態・開閉状態・出し分け

不明な欄を埋めるために数字を推測する必要はありません。

「変更日未確認」と書くだけでも、その比較を確定した結論として扱うことを防げます。

CTAが押されない原因を調べる

CTAまで届いているか見る

CTAが押されないときは、ボタン自体より先に、その場所まで届いているかを調べます。

ページ上部だけを見て離れた訪問と、料金や注意事項まで確認した訪問では、同じ「クリックなし」でも状態が違います。

スクロールマップを開き、CTAのある位置に到達した割合を確認しましょう。

Clarityのスクロールマップでは、ページの各位置への到達状況を確認できます（参考：Microsoftのスクロールマップ解説）。

到達は、本文を読み終えたことやボタンを認識したことの証明ではありません。

それでも、ボタンより手前で多くの訪問が終わっているかを調べる材料になります。

調査の結果は、次のように分けておくと修正案につながります。

観察したこと	次に調べる候補
CTAの位置まで届いていない	上部の説明、情報の順序、長い余白
位置には届くが操作が少ない	ボタンの役割、費用や条件の説明
CTAを押している	遷移先の表示、入力開始、完了
固定CTAを繰り返し押している	反応の遅延、重なり、操作範囲

これは原因を自動判定する表ではなく、次の確認先を決める表です。

例えば、料金まで進んだ録画を見てから、近くにある申込条件や契約期間の説明が分かりやすいかを点検します。

CTAが届かない位置にあると分かっても、情報をすべて上へ詰め込む必要はありません。

読者が判断するための情報を残しつつ、相談できる場所を途中に置くなど、一つの変更案を作ります。

押した後の動作を確認する

ボタンは押されているのに申込が増えない場合、問題はクリックの先にあるかもしれません。

リンク先が開かない、別タブが分かりにくい、フォームでエラーが出る、といった可能性を確認します。

担当者自身のテストでは、対象の端末条件でボタンを押し、目的のページへ進めるかを確かめてください。

実際の送信や注文が発生するテストは、利用してよい環境とデータを決めてから行います。

録画を見る場合は、クリックした瞬間だけで止めず、その直前と直後を続けて再生します。

Clarityではクリックした要素からView recordingsを選び、その要素が操作された録画へ進めます（参考：クリックした要素から録画を開く）。

ここで開くのは「その要素を押した記録」なので、押さなかった人の理由までは分かりません。

また、GA4の拡張計測にある離脱クリックは、主に外部サイトへのリンクを対象とし、サイト内のCTAすべてを自動で集計する機能ではありません（参考：GA4の拡張計測イベント）。

GA4の数字と比べるときは、対象のCTAイベントが実際に設定されているかを確認しましょう。

「ボタンを押した」「フォームが開いた」「受付が完了した」を分けると、色を変えるべきか、不具合を直すべきかが見えやすくなります。

押せない場所へのクリックを調べる

画像や見出しの見た目を確認する

画像や見出しにクリックが集まっているときは、利用者が操作できる場所だと受け取っていないかを調べます。

例えば、商品カードの写真だけがリンクではない場合、写真を押した人は反応を得られないことがあります。

一方、説明のために文字を選択しようとした操作など、必ずしも不具合を意味しないクリックも考えられます。

まずは見た目と実際の動作を並べて確認してください。

対象	見た目の確認	動作の確認
商品画像	周囲のカードと一体に見えるか	画像から詳細へ進めるか
色付きの見出し	リンクと同じ装飾になっていないか	遷移させる設計か
矢印のアイコン	次へ進めるように見えるか	操作範囲に含まれるか
装飾のラベル	ボタンの形や影に似ていないか	押してほしい要素か

同じ見た目なのに押せる範囲が違うと、利用者は試すまで区別できません。

画像から詳細へ進める方が目的に合うならリンクを付け、装飾として使うなら操作部品と見分けられる表現にします。

すべての画像をリンク化するのではなく、そのページで果たす役割を決めてから変更してください。

修正案には「画像が悪い」ではなく、「カード全体が操作可能に見えるが、文字だけにリンクがある」と書きます。

この書き方なら、デザイナーと開発者が同じ現象を確認できます。

連打の前後を録画で見る

Dead clicksやRage clicksは、確認する録画を絞るための手掛かりです。

Clarityでは、反応がないクリックや、短い時間に狭い範囲で繰り返されたクリックを指標として扱います（参考：Microsoftの行動指標の定義）。

ただし、ラベルが付いていることだけで、利用者が怒っている、購入を諦めた、と断定することはできません。

録画を開いたら、次の順に記録を残しましょう。

1. 押す直前に、どの情報や画面を見ていたか
2. 押した場所は、リンク・ボタン・装飾のどれか
3. 操作後に、読み込みや表示変更があったか
4. その後、別の方法で先へ進めたか
5. 同じ現象が別の記録でも確認できるか

例えば、反応が遅いために繰り返し押しているなら、押せる範囲の拡大だけでは解決しません。

通信や処理の状態を確認し、処理中であることを伝える表示も検討します。

一方、同じ位置で何度も隣のリンクが開くなら、要素同士の間隔や重なりを調べます。

録画の見た目が実画面とずれている場合は、再現の不具合とサイト自体の不具合を分けてください。

原因が分からない記録は「要確認」とし、確認できた操作だけを担当者へ渡す方が修正の手戻りを減らせます。

クリックヒートマップから修正案を作る

操作可能な範囲を明確にする

修正では、色を目立たせることより、「どこを押すと何が起きるか」を明確にすることを優先します。

「詳しくはこちら」だけでは移動先が想像しにくいなら、「料金プランを見る」のように行き先が分かる文言を検討できます。

文言と遷移先の内容が一致していることも、変更後の確認に含めてください。

スマートフォンでは、文字が読めても操作範囲が狭い場合があります。

W3CのWCAG 2.2では、ターゲットサイズの最低基準として24×24 CSSピクセルを示し、間隔などの例外条件も定めています（参考：W3Cのターゲットサイズ解説）。

この値をすべてのボタンの最適サイズと考えるのではなく、隣の要素との距離や実際の操作も点検しましょう。

固定CTAを大きくする場合は、本文や別の操作部品を隠していないかも確認します。

キーボードで移動したときのフォーカスが、固定表示の要素で完全に隠れないことも重要です（参考：W3Cのフォーカス表示に関する解説）。

修正を依頼するときは、対象URL、要素、期待する動作、確認端末をセットにします。

例として「スマートフォンの商品カードで、画像と見出しの両方から同じ詳細ページへ移動できる状態にする」と書けば、完了条件も具体的になります。

必要なクリックを減らす

途中のクリックを減らすことは候補になりますが、操作数が少ないほど必ず良いわけではありません。

利用者が費用や条件を確認するためのページまで省くと、判断に必要な情報が失われることがあります。

減らしたいのは、目的が同じなのに何度も同じ場所を探す操作や、戻らないと進めない往復です。

架空の相談LPを例にすると、料金を読むたびにページ最下部まで戻って相談ボタンを探す状況が考えられます。

この場合は、料金の説明に近い場所から相談へ進める導線を用意する案を検討できます。

料金情報を消してすぐフォームへ送る案とは、目的も影響も異なります。

次の点検表は、観察と修正案を混ぜないための記入例です。

点検欄	架空の記入例
対象	スマートフォン版の相談LP
確認した操作	料金カードを押し、反応後も同じ場所を再度押した
まだ分からないこと	詳細情報を期待したのか、遅延を感じたのか
次の確認	同条件の録画と、実画面のクリック反応
修正候補	詳細への導線を明示し、操作範囲をそろえる
成功の確認	不要な連打、フォーム到達、受付完了
担当・期限	担当者と確認日を記入

一度に多数の文言や配置を変更すると、どの変更が関係したのか分けにくくなります。

まずは一つの問題に対し、優先して試す変更を決めましょう。

データを眺める時間より、直せる形に記録することが、この点検表の役割です。

クリックヒートマップで修正後を確認する

クリック率の分母を固定する

修正前後を比べる前に、何をクリック率と呼ぶかを決めます。

「CTAを1回以上押したセッション÷対象ページを見たセッション」とするなら、前後で同じ定義を使います。

これは比較用の定義例であり、Clarityのクリックマップに表示される割合をそのまま読み替えるものではありません。

CTAが画面内に表示された訪問だけを分母にしたい場合は、その表示をどう計測するかも別に設計する必要があります。

クリック総数を人数で割った値と、クリックした人の割合も分けてください。

同じ人が複数回押すことがあるため、前者は利用者の割合を表しません。

以下は、セッション単位で集計したと仮定する架空の計算例です。

期間	対象セッション	CTAを押したセッション	割合
修正前	500	50	10%
修正後	600	72	12%

この結果だけで、修正によって必ず改善したとは判断できません。

広告の内容、流入の比率、曜日、キャンペーン、計測設定が変わっていないかを併せて確認します。

件数が少ない場合は、割合が動いたという事実と、改善効果を判断できるかという問いを分けてください。

比較条件をそろえたうえで、必要ならA/Bテストなど、変更の影響を確かめる方法を検討します。

最終成果も確かめる

CTAのクリックが増えても、申込や購入が増えたとは限りません。

押した後の画面で迷いが増えていれば、クリックだけの改善で止まってしまいます。

先ほどの架空例で、受付完了が修正前10件、修正後9件だったとすると、対象セッションに対する完了率は2%から1.5%になります。

この場合、クリック率の上昇だけを成果として報告するのは適切ではありません。

フォームへ進んだ人数、入力開始、エラー、受付完了を順に調べ、どこで変化したかを確認します。

GA4のフォーム送信イベントも、業務上の受付成功を必ず保証するものとして扱わず、自社で定義した完了処理と照合してください（参考：フォーム操作を含む拡張計測）。

記録の共有は、必要な場面と権限に絞り、顧客情報などが映る可能性も確認してから行います。

最後に点検表へ「継続」「追加調査」「元に戻す」などの判断と、その理由を残しましょう。

クリックヒートマップは、ボタンを派手にするための採点表ではありません。

対象をそろえ、操作の前後を確かめ、成果までつながったかを見直すことで、次の修正を決める材料になります。

まずは一つのCTAを選び、到達・クリック・その後の動作を同じ条件で確認してみてください。

クリック以外も含めた調査の順番は、ユーザー行動分析の進め方で整理しています。

スマートフォンの操作範囲を詳しく点検したい場合は、スマホのヒートマップ分析も参考になります。

変更をテストで確かめる方法は、ヒートマップ分析をA/Bテストに使う方法で解説しています。