Clarityのヒートマップの見方|クリック・スクロールから確認する順番

公開 更新 11 分で読了
Clarityのヒートマップの見方|クリック・スクロールから確認する順番

Clarityのヒートマップの見方を、対象URL・期間・端末の選び方から解説。クリックの割合と人数の違い、スクロールの読み方、録画との照合、比較と共有の注意点を具体的な手順で整理します。

Clarityのヒートマップを開いたものの、赤い場所を見て「ここを直せばいいのだろうか」と迷っていませんか。

最初に確認するのは、色ではなく、どのページを、いつ、どの端末で見た記録なのかです。

条件が違えば、同じボタンでもクリックの集まり方は変わります。

この記事では、対象ページを選び、クリックとスクロールを読み、気になる場所の録画を確認する順番を紹介します。

最後には、社内やクライアントと共有できる改善メモのひな型も用意しました。

Clarity自体の機能や導入方法から知りたい場合は、Microsoft Clarityの入門記事をご覧ください。

Clarityのヒートマップで対象ページを選ぶ

最初に条件をそろえる、URL、期間、端末

まず、調べたいページを一つ決めましょう。

「サイト全体の問題を探す」より、「広告から来た人が料金ページで迷っていないか」のように目的を絞ると、見る条件を決めやすくなります。

ここからの操作名は、2026年10月4日に確認したClarityの公式デモの日本語画面と公式資料を基にしています。

URL条件を確認する

プロジェクトの「ヒートマップ」を開き、「閲覧済みURL」の欄で調べたいページを指定します。

1ページを調べるなら、最初は「完全一致」で、そのページのURLを選ぶと対象を整理しやすくなります。

公式資料でも、ヒートマップのURL条件は完全一致が初期設定とされています。

「含む」などの条件を選ぶと、共通の文字列を持つ複数ページが対象になり得ます。

たとえば料金ページと料金の解説記事が同じ文字列を含んでいると、想定より広い範囲を見てしまう可能性があります。

HTTPとHTTPSも別のURLとして扱われるため、ブラウザで開いている実際のURLと照合してください。

URL条件の使い分けは、ClarityのURLフィルターの説明で確認できます。

期間と端末を指定する

ページを選んだら、日付の範囲と「PC」「タブレット」「モバイル」を確認します。

広告の配信開始日やページを変更した日がある場合は、その日付をまたいで集計するか、分けるかを先に決めてください。

最初の分析では、変更後の期間にそろえ、アクセスの多い端末から見ると対象を絞れます。

PCとモバイルでは、同じ情報でも表示位置や折り返しが違います。

PCでよく押されているボタンが、モバイルでは画面のかなり下にあるかもしれません。

流入経路も絞る場合は「フィルター」を使い、広告のソース・メディア・キャンペーンなどを確認します。

使える条件の定義は、公式のフィルター一覧を参照してください。

Clarityのクリックヒートマップを見る

クリックを読む、押された場所、件数と割合

対象の条件が決まったら、「クリック」を選んで押された場所を確認します。

赤い部分を探すだけでなく、左側のランキング、件数、割合を合わせて読みましょう。

押された要素と件数を確認する

公式デモの日本語画面では、左側に「クリック数の多い順にランキング」と表示されていました。

そこから要素を選ぶと、ページ上のどの場所に対応するかを確認できます。

ここで表示されるクリックの割合は、訪問者のうち何割が押したかを、そのまま表しているわけではありません。

公式資料では、クリック数と、クリック全体に占める割合が示されると説明されています。

たとえば対象範囲に100回のクリックがあり、そのうち20回が料金ボタンなら、クリックの構成比は20%です。

これは説明用の架空の例であり、100人中20人が押したという意味にはなりません。

同じ人が複数回押す場合もあるため、人数を知りたいときは、クリック数から人数を推定しないでください。

表示の定義とクリックの種類は、Clarityのクリックマップの公式資料にまとまっています。

意図しないクリックを探す

クリックが多い場所に、リンクやボタンではない見出し、画像、説明文が含まれていないか見てみましょう。

ただし、「リンクではない場所が押された」という観察だけで、操作上の不具合とは決められません。

Clarityのデッドクリックは、クリック後に適切な時間内の反応やフィードバックがないといった条件で検出される指標です。

単に「リンクではない場所へのクリック」と同じ意味で扱わないことが大切です。

短い間に狭い範囲で繰り返されるレイジクリックも、困っている可能性を調べる手がかりとして使います。

どちらも原因の確定には使わず、実際の表示と録画を確認しましょう。

各指標の意味は、Clarityの行動指標の定義で確認できます。

Clarityのスクロールヒートマップを見る

スクロールを読む、到達した位置、読了とは別

次は「スクロール」に切り替え、必要な情報がある位置まで訪問者が到達しているかを確認します。

クリックが少ないボタンでも、そもそも多くの訪問者がその位置まで来ていないなら、文言だけを変えても原因に合わないかもしれません。

重要な情報への到達を確認する

スクロールマップでは、ページの深さごとの到達状況を確認できます。

料金、利用条件、実績、申込ボタンなど、判断に必要な情報の位置を先に書き出しておきましょう。

その位置にカーソルを合わせ、どこまで到達した訪問者がいるのかを確認します。

画面に表示される平均的な折り目の目安は、スクロールする前に見える領域を考えるときに使えます。

ただし、すべての訪問者が同じ高さの画面で見ているわけではありません。

自分のスマートフォンだけで位置を判断せず、選んだ端末条件と合わせて確認してください。

読み方は、Clarityのスクロールマップの公式資料を参照できます。

読了したと断定しない

ページの下まで到達していても、本文を読んで理解したとは限りません。

一気にスクロールした人や、目的のボタンを探して下へ移動した人も含まれます。

報告では「料金欄まで到達した」と書き、「料金の説明を読んだ」とは言い切らないようにしましょう。

次の表のように、表示された事実と、その後に確かめることを分けると整理できます。

ヒートマップで分かったこと まだ分からないこと 次に確認すること
料金欄より上で到達者が減っている 料金が不要なのか、長さが原因なのか 直前の録画と、同じ流入の行動
申込ボタンの位置まで到達している 申込条件を理解したか ボタン周辺の録画とクリック
画像が繰り返し押されている 拡大を期待したのか、別の操作なのか クリック後の表示と録画

この表は分析の考え方を示したもので、特定サイトでの計測結果ではありません。

Clarityのヒートマップの条件をそろえる

比較の条件をそろえる、変更前、変更後

改善前後を比べるときは、見た目が似ている2枚の画像だけで判断しないでください。

期間、端末、URL条件、ページの構成が違えば、色の変化にも別の理由が考えられます。

レイアウト変更の影響を確認する

「比較」を使うと、別のページや期間などを並べて確認できます。

たとえばボタンを上へ移した前後を見るなら、変更前の期間と変更後の期間を左右に分け、端末や流入条件をそろえます。

曜日の構成や広告内容も一緒に記録すると、ページ以外に変わった条件を後で振り返れます。

比較画面の具体的な操作は、公式のヒートマップ比較ガイドを参照してください。

また、「スクリーンショットを変更する」は、集計期間を切り替える操作とは別です。

公式資料によると、表示するスクリーンショットを変えると、クリックマップなどは選んだ画面の要素に応じて更新されますが、スクロールのデータは変わりません。

新しい画面に切り替えたからといって、変更後だけのデータになったと思わないようにしましょう。

この違いは、スクリーンショット変更の説明で確認できます。

固定要素とポップアップを分ける

画面下に固定した申込ボタンや、途中で開くポップアップは、通常の本文とは表示条件が違います。

スクリーンショットに表示されていない状態の操作を、一枚のヒートマップだけで判断するのは避けましょう。

Clarityの公式資料でも、開いたメニューのような動的な状態は、ヒートマップで十分に捉えられない場合があると説明されています。

また、ページ全体ではなく、ページ内の小さな枠だけをスクロールする構成も、通常のスクロールマップと同じようには読めません。

対象が固定ボタン、ポップアップ、内部スクロールのどれなのかをメモし、実際のページ操作や録画で補ってください。

制限は、ヒートマップ機能と制約の公式説明で確認できます。

Clarityのヒートマップと録画を照合する

気になる場所は録画で、クリック前、クリック後

ヒートマップで気になる場所が見つかったら、録画で操作の順番を確認します。

「どこが押されたか」から、「その前後に何が起きたか」へ調べる範囲を進めるためです。

気になる位置の前後を見る

クリックマップで対象の要素を選び、「レコーディングを表示」から、その要素がクリックされた録画へ進みます。

公式デモでも、要素ごとに録画へ移動する操作を確認できました。

この操作は、スクロールの色から自動で「その文章を読んだ人」を選ぶ機能とは異なります。

録画では、対象のクリックだけでなく、直前にどの情報を見ていたか、クリック後に期待する画面が出たかを確認しましょう。

たとえば料金画像が押されているなら、拡大表示を期待した可能性を考え、実際に画像が拡大できるかを自分でも試します。

その結果を「画像を押した後、表示の変化がなかった」のように観察した内容として記録してください。

複数の訪問で確かめる

一つの録画で迷う様子が見えたとしても、それが多くの訪問者に共通するとは限りません。

同じ端末や流入条件で、似た行動が繰り返されているかを追加で確認します。

逆に、迷わず申込まで進んだ録画があれば、どこが違うのかを見ることも役立ちます。

「この録画の人は迷ったように見える」という解釈と、「同じ位置を何度も押した」という観察は、別の欄に書いておきましょう。

改善候補の優先順位は、影響する範囲、申込への近さ、修正のしやすさを合わせて決めます。

LP全体で何から直すか迷う場合は、LPOの改善順序も参考にしてください。

Clarityのヒートマップを共有する

改善メモにまとめる、観察、仮説、次の確認

共有する画像には、何を対象にした結果かを必ず添えましょう。

赤い場所に印を付けるだけでは、後から見た人が同じ条件を再現できません。

対象条件を添える

ClarityはヒートマップをPNGやCSVでダウンロードできます。

比較モードではダウンロードできないため、必要に応じて通常の表示に戻して保存します。

保存方法と対象データは、ヒートマップのダウンロード手順で確認できます。

共有リンクを使う場合は、チーム内への共有と、リンクを知る人への共有で閲覧範囲が違うことにも注意してください。

外部へ渡す前に、共有対象と有効期限を公式の共有方法で確かめましょう。

次のひな型を、画像と一緒に残すと振り返りやすくなります。

記録する項目 記入内容
対象 ページ名、URL、完全一致などのURL条件
集計条件 開始日・終了日、端末、流入フィルター
ページの状態 構成を変更した日、固定ボタンやポップアップの有無
観察 押された要素、件数、到達した位置、録画で見えた操作
仮説 訪問者が期待した操作や、迷いの原因として考えたこと
次の確認 変更する場所、確認する指標、再確認する時期

改善案を一つに絞る

最初の改善案は、観察した問題と直接つながるものを一つ選びましょう。

「料金画像を押しても拡大されない」という観察なら、「拡大操作を用意する」「小さな文字を本文でも読めるようにする」といった案が考えられます。

この段階で、ボタンの色、料金、見出し、画像をすべて変えると、どの変更が影響したのかを振り返りにくくなります。

変更後は同じ条件のヒートマップだけでなく、目的とする申込や購入の状況も確認してください。

クリック数が増えても、申込が増えたとは限らないためです。

成果の計算条件をそろえる方法は、コンバージョン率の計算と分析で解説しています。

Clarityのヒートマップは、色から答えを当てる道具ではなく、確かめる場所を絞るために使うと改善につなげやすくなります。

よくある質問

Q. Clarityのクリックの割合は、クリックした人の割合ですか?
クリック全体に占める割合が示されるため、そのまま訪問者の人数の割合としては読めません。
Q. スクロールの到達率で読了率は分かりますか?
その位置に到達した状況は分かりますが、文章を読んで理解したかまでは断定できません。
Q. スクリーンショットを変えると集計期間も変わりますか?
スクリーンショットの変更と期間の変更は別の操作であり、スクリーンショットを変えてもスクロールデータは変わりません。
Q. クリックした人の録画へ移動できますか?
クリックマップで対象の要素を選び、レコーディングを表示する操作から確認できます。
Q. ヒートマップをダウンロードできますか?
PNGやCSVで保存できますが、比較モードではダウンロードできないため、通常表示へ戻して操作します。

出典・参考データ

  1. [1] ClarityのURLフィルターの説明 (Microsoft Learn) — 取得 2026-10-04
  2. [2] 公式のフィルター一覧 (Microsoft Learn) — 取得 2026-10-04
  3. [3] Clarityのクリックマップの公式資料 (Microsoft Learn) — 取得 2026-10-04
  4. [4] Clarityの行動指標の定義 (Microsoft Learn) — 取得 2026-10-04
  5. [5] Clarityのスクロールマップの公式資料 (Microsoft Learn) — 取得 2026-10-04
  6. [6] 公式のヒートマップ比較ガイド (Microsoft Learn) — 取得 2026-10-04
  7. [7] スクリーンショット変更の説明 (Microsoft Learn) — 取得 2026-10-04
  8. [8] ヒートマップ機能と制約の公式説明 (Microsoft Learn) — 取得 2026-10-04
  9. [9] ヒートマップのダウンロード手順 (Microsoft Learn) — 取得 2026-10-04
  10. [10] 公式の共有方法 (Microsoft Learn) — 取得 2026-10-04

この記事を書いた人

水島 翔吾

株式会社kairos 代表取締役 / AgentSignal 開発者

AI クローラー・AI 流入計測と AIO 診断ツール AgentSignal を開発。実測データを元に AI 検索時代の計測と対策を書いています。

関連記事