ヒートマップ分析とは？見方と無料ツール（Clarityの例）

この記事の要点：

• ヒートマップ分析とは、ページのどこが押され、どこまでスクロールされ、どこが長く見られたかを色の濃さで表し、ページの直す場所を探す方法です。GA4の「どのページで」に対して、「ページのどこで」を答えます。
• 主なツールには、無料のMicrosoft Clarity、無料プランのあるContentsquare（旧Hotjar）・Ptengine・ミエルカヒートマップ、有料のUser Insightなどがあります。この記事では、無料で使えるClarityを例に、クリック・スクロール・注目度などの図の見方を説明します。
• 見る前に「どのページの、何を確かめたいか」を決めます。見る順番は、端末を分ける → スクロールで届いている範囲 → クリック → 録画で個別の動き、です。
• 導入では、タグを入れる場所を1つにし、入力内容の伏せ字（マスキング）と、地域によっては同意の扱いを確かめます。ヒートマップのデータの保存は最大9か月、録画は原則30日です。

ヒートマップ分析とは：GA4では分からないこと

ヒートマップ分析とは、ページ上での訪問者の行動を、よく押された場所やよく見られた範囲ほど濃い色で表す図（ヒートマップ）を使って調べる方法です。数字の表では見えにくい「ページのどこで止まり、どこで迷っているか」を、ページの画面に重ねて確かめられます。

GA4とは答える問いが違います。2つを組み合わせて使います。なお GA4 でも、ページの 90% までスクロールされたかどうかは拡張計測機能で記録できます（出典：アナリティクス ヘルプ：拡張計測機能イベント）。測り方と見方は「GA4のスクロール率」で説明しています。

使い方の順番は、GA4で「直すページ」を決め、ヒートマップで「ページのどこを直すか」を探す、です。直すページの決め方は「ランディングページ分析のやり方」で説明しています。

主なヒートマップツールと、選ぶときに確かめる点

ヒートマップ分析には専用のツールを使います。GA4には、ページの画面に色を重ねるヒートマップの機能は標準ではありません。主なツールを、公式サイトの説明の範囲で並べます。

表の「できること」と「無料で使える範囲」は、各ツールの公式サイトの説明を2026年10月に確かめたものです。料金の金額は変わりやすいため載せていません。無料の範囲や条件も変わることがあるため、使う前に公式サイトで確かめてください。並びはアルファベット順・五十音順で、評価や順位を表すものではありません。

選ぶときに確かめる点

この記事では、無料で使え、公式ドキュメントで仕様を確かめられるMicrosoft Clarityを例に、種類・導入・読み方を説明します。図の名前はツールごとに違っても、見る順番と考え方は同じです。

Microsoft Clarityとは：無料でできることと、入れる前に確かめること

Microsoft Clarity（クラリティ）とは、Microsoftが無料で提供する、ヒートマップ・セッションの録画・インサイトでサイト上の行動を見る分析の道具です。英単語の「clarity（明快さ）」とは別に、この製品名として検索されます。公式FAQでは、ずっと無料のサービスで、アクセス数の上限や有料版への切り替えを求められることは無いと説明しています（2026年10月14日に確認）。

GA4との違いは、GA4が「どのページに来て、成果につながったか」を数えるのに対し、Clarityは「ページのどこで止まり、迷ったか」を画面に重ねて見せる点です。

Clarityのヒートマップの種類と、それぞれで分かること

Microsoft Clarity は、Microsoft が提供する、ヒートマップとセッションの録画を見られる分析の道具です。公式ドキュメントでは、次の種類のヒートマップが説明されています。

クリックマップの絞り込み

クリックマップでは、すべてのクリックのほかに、反応の無いクリック（デッドクリック）、短い時間に同じ場所を何度も押すクリック（レイジクリック）、エラーが起きたクリック、最初のクリック、最後のクリックに絞って見られます。公式ドキュメントでは、クリックマップは画面の座標ではなくページの要素をもとに作られるため、画面の大きさが違っても位置がずれにくいと説明されています。

スクロールマップの読み方

スクロールマップでは、ページの深さごとに、届いた訪問者の数と、そこで離れた割合が一覧で表示されます。「平均のファーストビュー（average fold）」の線は、スクロールを始める前に平均して見えている範囲を表します。この線より下にある情報は、スクロールした人にしか見られません。

Clarityの導入手順と、最初に確かめる設定

Clarity を使うには、サイトに計測用のコード（タグ）を入れます。公式ドキュメントでは、主に次の方法が案内されています。

1. プロジェクトを作る：Clarity にサインインし、サイトのURLを登録します。
2. タグを入れる：次のどれか1つの方法で入れます。
   • 表示されたコードを、全ページの head 要素に貼る（手動）
   • Google タグ マネージャーを使う（Clarity の設定画面から連携するか、テンプレートの一覧の公式テンプレートを使う）
   • WordPress の公式プラグインを入れ、プロジェクトとつなぐ
3. 動いているかを確かめる：Clarity の画面で、今見ている人の数（ライブ）が出るかを見ます。またはブラウザの開発者ツールの「ネットワーク」で、clarity.ms/collect への送信があるかを確かめます。

タグは1つの方法で入れます。プラグインとタグ マネージャーの両方から入れると、二重に計測されるおそれがあります。当サイト（seoagent.jp）では、GA4の設定が2つのプラグインにあったため、1つ（測定IDも1つ）にまとめ、送信先が1つであることを確かめました。Clarity でも同じように、どこから入れたかを記録しておきます。

伏せ字（マスキング）と同意の設定

Clarity は画面の様子を記録するため、個人情報の扱いを先に確かめます。公式ドキュメントによると、伏せ字の設定には「Strict（すべて伏せる）」「Balanced（数字やメールアドレスなど機密性の高い内容を伏せる。初期設定）」「Relaxed（入力欄などを除き伏せない）」の3つがあり、入力欄の内容はどの設定でも伏せられます。

特定の要素だけ伏せたいときは、HTML に data-clarity-mask="True" を付けます。

また、公式ドキュメントでは、2025年10月31日から、欧州経済領域（EEA）・英国・スイスからの訪問について、同意の信号を求める運用を始めたと説明しています。これらの地域から訪問がある場合は、同意の管理の仕組みから Clarity に同意の状態を渡す設定（ConsentV2）を確かめます。プライバシーポリシーへの記載が必要かどうかは、自社の方針と法務の担当者に確かめます。

見る前に決めること：問い・ページ・期間・端末

ヒートマップは、目的を決めずに眺めると「色が付いている」以上のことが分かりません。見る前に、次の4つを決めます。

Clarity のヒートマップの画面では、URLやその一部を入れて対象のページを選びます。公式ドキュメントによると、URLの一致の条件は初期設定が「完全一致」で、「前方一致」「含む」「正規表現」なども選べます。

URLのパラメータ（「?」以降）を区別しない設定にすると、同じページの別の入口からの訪問をまとめて見られます。ページの変更日をまたぐ期間を選ぶと、古い配置と新しい配置の行動が混ざるため、期間は変更日で区切ります。

ヒートマップの読み方：よくある状態と次の手

ヒートマップで見つけた状態を、考えられることと確かめ方に分けて整理します。ここで挙げる「考えられること」は仮説です。録画やほかの数字で確かめてから直します。

パソコンとスマートフォンでは、画面の高さも押し方も違います。全端末をまとめた図は、どちらの行動も正しく表しません。まず端末を分けて見ます。Clarity では、2つのヒートマップを並べて比べる機能も案内されています。

直した後の確かめ方

ページを直したら、変更日を境に期間を分けて、変更前と変更後のヒートマップを並べます。例えば、案内のボタンを上に移したなら、スクロールマップでボタンの位置まで届いた割合と、クリックマップでボタンが押された様子を比べます。

図の変化に加えて、GA4で同じ期間の成果の件数も確かめます。押される回数が増えても、成果が増えていなければ、案内の先のページやフォームに次の問題があるかもしれません。案内のボタン（CTA）の置き方や、クリックと成果を分けて測る考え方は「CTAとは」で説明しています。

検索から来る人の問いとページの冒頭がずれていないかは、Search Console の検索語と見比べます。来た人が知りたいことの捉え方は「検索意図の考え方」で説明しています。

録画やGA4・Search Consoleと組み合わせる方法

録画で個別の動きを見る

ヒートマップは多くの訪問をまとめた図なので、「なぜそうなったか」までは分かりません。Clarity のセッションの録画（レコーディング）では、1回の訪問の画面の動きを再生できます。次の順で使うと、録画を見る時間を減らせます。

1. ヒートマップで、気になる場所（例：レイジクリックが集まる場所）を見つけます。
2. フィルタで、そのページを訪れ、レイジクリックやデッドクリックがあった録画に絞ります。
3. 数本の録画を見て、押す前と後に何が起きたか（表示が遅い、ボタンが隠れている、など）を確かめます。
4. 同じ原因が複数の録画で見られたら、直す候補として記録します。

公式ドキュメントでは、ダッシュボードの「インサイト」として、デッドクリック、レイジクリックのほか、通常より多くスクロールしているセッション（過度なスクロール）と、新しいページに移ってすぐ前のページに戻った動き（クイックバック）を見られると説明しています。

過度なスクロールは、目当ての情報が見つからず探し回っている状態の手掛かりになります。判定の細かな基準の数値は、公式ドキュメントでは示されていません。

GA4・Search Consoleとの使い分け

Clarity には Google アナリティクスとの連携の機能があり、設定画面の「Setup」から連携を始めます。公式ドキュメントによると、1つの Clarity のプロジェクトに連携できるのは1つのプロパティです。

連携すると、Clarity の画面の中で、GA のデータをもとに録画やヒートマップを見られる機能が案内されています。GA4に何が送られるかなど連携の細かな動きは変更されることがあるため、設定する時点の公式ドキュメントで確かめます。

ヒートマップ分析と関わる分析・効果測定の記事は「分析・効果測定の記事一覧」にまとめています。

注意点と、データの限界

• 保存期間：公式ドキュメントによると、ヒートマップのデータは最大9か月保存されます。録画は30日で、それより後は一部（録画の1%か1日10本の多い方）とお気に入りに入れた録画だけが最大9か月残ります。変更前の様子を残したいときは、期限の前に記録しておきます。
• 1つのヒートマップの上限：1つのヒートマップに含められるのは最大10万ページビューです。
• 写らない動き：マウスを重ねたときや押したときに開くメニューの中のクリックは、ヒートマップに出ないことがあります。高さが65,535ピクセルを超える長いページは、スクロールマップを表示できません。
• 少ないデータ：公式FAQでは、ヒートマップを作るのに最低限の訪問数は無いとされていますが、訪問が少ないと数人の行動が図全体を左右します。訪問が少ないページは、期間を長くとるか、録画を中心に見ます。
• 表示速度：計測のタグを増やすと、ページの読み込みに影響することがあります。当サイトでは、約180KBの Google タグがページの処理を0.46秒ほど止めていたため、タグ本体をページの読み込み後に読むように変えました。モバイルの Lighthouse の点数は92から96〜97になっています（ラボ値）。タグを足す前後で表示速度を確かめます。考え方は「コアウェブバイタルとは」で説明しています。

よくある質問

Clarity は本当に無料ですか？

Clarity の公式FAQでは、無料のサービスで、訪問数の上限や有料版への切り替えを求められることは無いと説明されています。ただし、1つのヒートマップの上限など、機能ごとの制限はあります。

ヒートマップを入れると、検索順位に影響しますか？

ヒートマップの道具を入れること自体が順位を上げたり下げたりするとは、Google の公式の説明では示されていません。ただし、タグでページの表示が遅くなると、読者の体験に影響します。入れる前後で表示速度を確かめます。

ヒートマップにデータが出ません。

まずタグが動いているかを、Clarity のライブの表示か、ブラウザの「ネットワーク」で確かめます。次に、入れたURLが正しいか、絞り込みの条件（端末、期間、URLの一致の条件）が厳しすぎないかを見直します。

どのページからヒートマップを見ればよいですか？

訪問が多く、成果に近いページから見ます。例えば、GA4で訪問は多いのにキーイベントが少ないサービス紹介のページや、問い合わせの前によく読まれる記事です。訪問の少ないページは、図が数人の行動に左右されるため後回しにします。

録画で個人の入力内容が見えてしまいませんか？

公式ドキュメントでは、入力欄の内容は伏せ字の設定にかかわらず伏せられると説明されています。表示される文章にも個人情報が含まれるページでは、伏せ字を「Strict」にするか、該当の要素に伏せ字の属性を付けます。

SEOAGENTでできること

SEOAGENTには、ヒートマップや録画の機能はありません。Search ConsoleとGA4を連携し、記事ごとにクリック、表示回数、検索語の推移と、「流入と成果」でGA4の自然検索からの訪問とキーイベントを確認できるため、ヒートマップで詳しく見るページを選ぶ段階に使えます。記事詳細の「次の一手」から、見直しの項目へ進めます。

• SEO分析・効果測定
• 記事改善・リライト

参考情報

• Microsoft Learn：Heatmaps overview（Clarity）
• Microsoft Learn：Click maps（Clarity）
• Microsoft Learn：Scroll maps（Clarity）
• Microsoft Learn：Masking content（Clarity）
• Microsoft Learn：Consent Management（Clarity）
• Microsoft Learn：Clarity Frequently asked questions