Microsoft Clarity のヒートマップ機能

　 　　

Microsoft Clarityのヒートマップは、特定のページにおけるユーザーの行動傾向（クリック箇所、スクロール到達度、熟読エリアなど）を色の濃淡で視覚的に表現する機能です。直感的にページの課題を把握し、UI/UX改善のヒントを得るのに役立ちます。

数あるヒートマップツールの中でも、Clarityは無料・無制限・5種類のヒートマップ全部入りという、有料ツールに引けを取らないスペックを備えています。本記事では、5種類それぞれの使い分け、読み方、改善への落とし込み、そして使う上での注意点までまとめて解説します。

なお、Clarityの導入そのものについてはClarityの導入方法、初期設定についてはClarityの設定方法のページをご覧ください。

>Microsoft Clarityの導入から使い方まで解説【TOP】

そもそもClarityのヒートマップとは？

ヒートマップという言葉自体は他ツールにもありますが、Clarityのヒートマップには次のような特徴があります。

• 完全無料で全機能が使える（PVやサイト数の上限なし）
• 5種類のヒートマップを切り替えて分析できる
• レコーディング（セッションリプレイ）と連動しており、気になる箇所からそのユーザーの動画にすぐ飛べる
• Copilot（生成AI）が要点を要約してくれる
• Google アナリティクスや Google 広告と連携してセグメント分析もできる

Google アナリティクス（GA4）とは何が違うのか

GA4はサイト全体の数値（PV、セッション、CV など）を俯瞰するのが得意です。一方Clarityのヒートマップは、特定の1ページの中で「どこまで読まれ、どこがクリックされ、どこで離脱したか」を視覚的に確認するのが得意です。

役割が違うので、両方使うのが基本です。GA4で課題ページを見つけ、Clarityのヒートマップで原因を探る、という流れが王道になります。

^{関連：ClarityとGA4・Google広告の連携}

5種類のヒートマップを徹底解説

Clarityのヒートマップは現在5種類です。以前は3種類でしたが、アテンションマップとコンバージョンマップが追加されました。

それぞれ何が見えて、どう改善に使えるのかを順に見ていきます。

クリックマップ（Click Map）

ユーザーがページ上のどこをクリック（タップ）したかを可視化するマップです。クリックが多い箇所ほど赤く、少ない箇所は青く表示されます。マウスを当てるとクリック率がパーセンテージで確認できます。

このマップで見るべきポイント

• CTAボタンはちゃんとクリックされているか？
• ナビゲーション項目のうち、よく押されているのはどれか？
• リンクではない箇所が誤ってクリックされていないか（後述のデッドクリックと併せて確認）
• 目次の各h2・h3のクリック率（記事コンテンツの場合）

特に記事コンテンツの場合、目次のクリック率は読者の関心が直接表れる指標として優秀です。クリック率の高いh2・h3は読者の知りたい中身そのものなので、本文の前半に動かすだけで読了率が改善することがあります。

スクロールマップ（Scroll Map）

ユーザーがページのどの深さまでスクロールしたかの到達率を可視化するマップです。到達率が高い（多くのユーザーが見ている）箇所ほど赤く、低い箇所は青く表示されます。到達率はパーセンテージでも確認できます。

このマップで見るべきポイント

• 重要なコンテンツやCTAまでユーザーは到達しているか
• 急に色が変わる場所はないか（＝離脱が集中しているポイント）
• ファーストビューより下のコンテンツは見られているか
• 記事の場合、まとめ・関連記事まで到達しているか

到達率が急落する箇所は、ほぼ間違いなくページの「悪い意味での見せ場」です。コンテンツの順番を変える、不要なセクションを削る、あるいはCTAを離脱前に置く、といった対応を検討します。

エリアクリックマップ（Area Map）

ページ内の指定した範囲（複数の要素を含む領域）における合計クリック数とその割合を可視化するマップです。クリックマップでは個々のクリックが分散してしまう場合に、特定のエリアに対するユーザーの関心を把握するのに役立ちます。^{※一時期、デフォルトでグレーアウトされる仕様に変更されていましたが、現時点では復活しています}

典型的な活用シーン

• グローバルナビゲーション全体のクリック分布を見る
• 商品リストやカードリストエリア内のクリック集中度を見る
• サイドバーのカテゴリーリンクの人気度比較

要素が密集していて点のクリックマップだとごちゃつくエリアで真価を発揮します。

アテンションマップ（Attention Map）

ユーザーがページのどの部分を熟読したか（マウスの動きや滞在時間から推測）を示すマップです。

この機能は有料のヒートマップツールでなければ見られないものでしたが、Clarityでも実装されたのは大きなトピックでした。

このマップで見るべきポイント

• 熟読されているエリアはどこか（ユーザーが知りたい中身が集中している）
• 逆に、スクロールマップでは赤いのにアテンションでは青い箇所はないか（＝通り過ぎられているだけ）
• 熟読エリアの近くにCTAやリンクがあるか

スクロールマップだけ見ていると、「読まれている」と「通り過ぎられた」の区別がつきません。アテンションマップを併用してはじめて、本当に注意を引いているコンテンツが見えてきます。熟読エリアを上部に動かす、その近くにCTAを置く、といった改善が定石です。

コンバージョンマップ（Conversion Map）

コンバージョンしたユーザーがページのどの部分をクリック（タップ）したかを示すマップです。執筆時点ではECサイト（Purchase イベントが発生しているプロジェクト）もしくは、GA4と連携済のアカウントで利用できます。

このマップで見るべきポイント

• コンバージョンに至ったユーザーが共通してクリックしている要素はあるか
• その要素は他のユーザーにとっても気付きやすい場所にあるか

CV経路に関わる要素が見つかったら、デザインを目立たせる、ファーストビューに引き上げる、といった施策に直結します。BtoBの問い合わせ系サイトでも、CVイベントを設定すれば似た分析ができるようになると期待しています。

ヒートマップを使いこなす！

操作・絞り込み機能

ヒートマップは「ただ表示する」だけでも十分役立ちますが、Clarityには絞り込み・比較・連携といった便利機能が揃っています。これらを組み合わせることで分析の解像度が一気に上がります。

デバイス切り替え（PC／タブレット／モバイル）

PC、タブレット、モバイルそれぞれの表示に対応したヒートマップを確認できます。

特にBtoCサイトはモバイル比率が高いことが多く、PCのヒートマップだけ見ていると判断を誤ります。記事コンテンツでも「PCではよくクリックされているCTAがモバイルでは反応薄い」というケースは珍しくありません。モバイル＞PC＞タブレットの順で重視するのが基本です。

クリックの種類で絞り込み（クリックマップ）

クリックマップでは、特定の種類のクリックに絞って表示できます。これが意外と強力です。

• すべて（All clicks）：全てのクリック
• 停止（Dead clicks）：リンクなどがない、クリックしても反応しない箇所へのクリック
• 激怒（Rage clicks）：短時間に同じ箇所を連続してクリックする行動
• エラー（Error clicks）：クリック後にJavaScriptエラーが発生したクリック
• 最初（First clicks）：そのページでユーザーが最初に行ったクリック
• 前回（Last clicks）：そのページでユーザーが最後に行ったクリック（離脱やページ遷移の直前）

使い分けの目安

デッドクリックを絞り込む

ユーザーが「ここはリンクだろう」と誤解している箇所が見つかります。画像や太字テキストに集中していたら、本物のリンクに変える価値ありです。

激怒（Rage clicks）を絞り込む

反応しないボタン、押しても遷移しないリンク、フォーム送信が効かない、といった致命的な不具合の発見につながります。出現頻度は低いですが、見つけたら最優先で直すべき項目です。

最初のクリックを絞り込む

ページに着いたユーザーが「最初に何に注目するか」が見えます。意図したCTAではなく別の場所が押されているなら、視線誘導の設計を見直す材料になります。

前回のクリックを絞り込む

ユーザーが離脱直前にどこを押したかが見えます。離脱を「逃した」ものなのか「次のページに送った」ものなのかの判別に役立ちます。

フィルターでセグメント別に見る

Clarityのフィルター機能（参照元、新規/リピーター、デバイス、カスタムタグなど）を適用し、特定のユーザーセグメントだけのヒートマップを確認できます。

たとえば「Google広告から流入したユーザーだけのスクロール到達率」「特定のキャンペーンタグ付きユーザーのクリック傾向」など、流入元別の行動の違いを把握する際に有効です。カスタムタグを仕込んでおくと、自由度がさらに広がります。

ヒートマップ比較（左右に並べて見る）

2つの異なるフィルター条件（セグメント）のヒートマップを左右に並べて比較できる機能です。

定番の比較パターン

• コンバージョンしたユーザー vs 非コンバージョンユーザー
• 新規ユーザー vs リピーター
• Google検索流入 vs SNS流入
• PCユーザー vs モバイルユーザー

特にCV／非CVの比較は、「CVに至るユーザーが何を見ていたか」が浮かび上がるため、ランディングページ改善には欠かせない見方です。

スクリーンショット変更

メニューの開閉やポップアップ表示など、ページの表示状態が変わる場合、ヒートマップを表示する基準となるスクリーンショットを Clarity が取得したものの中から選択・変更できます。

開閉式のメニュー、アコーディオン、モーダル、タブ切替など、動的コンテンツが多いページでは、複数のスクリーンショットを切り替えて分析する必要があります。

Copilot（生成AI）によるインサイト

表示しているヒートマップ（クリック・スクロール）の情報を基に、AIが注目すべき点や改善提案などを要約してくれる機能です。

万能ではありませんが、「どこから見れば良いか分からない」という状態を脱するには十分役立ちます。AIの指摘を鵜呑みにするのではなく、自分で見るべきポイントの当たりをつける道具として使うのがおすすめです。

レコーディングへの連携

ヒートマップ上で気になる箇所（クリックが集中している点など）をクリックすると、その箇所をクリックしたユーザーのレコーディング一覧が表示され、再生して具体的な行動を確認できます。

ヒートマップで「傾向」を掴み、レコーディングで「個別の事情」を確認する。この往復ができるのがClarityの強みです。

ヒートマップ活用の実践ステップ

ここまでの機能を踏まえ、実務でヒートマップ分析を進める流れを整理します。

1. 目的と対象ページを決める
   何を改善したいのかを明確にし、対象ページ（主要ランディングページ、フォームページ、商品ページ、離脱率の高い記事など）を絞り込みます。一度に複数ページを見ようとすると焦点がぼやけます。
2. クリック・スクロール・アテンションを順に確認
   まずモバイル、次にPCの順で確認します。スクロールマップで離脱ポイント、クリックマップでCTA・ナビの押され具合、アテンションマップで本当に読まれている箇所を把握します。
3. 絞り込みで仮説を立てる
   デッドクリック、レイジクリックで明らかな問題を拾い、CV／非CV比較で違いを観察します。ここで仮説を立てます。
4. レコーディングで裏取り
   仮説の根拠となるユーザー行動を、実際のレコーディングで数本確認します。「思ったより別の理由だった」というのもよくあります。
5. 改善施策を実行
   具体的な改善（コピー、ボタン位置、コンテンツ順、CTA文言）を1〜2個に絞って実施します。同時に複数変更すると、どれが効いたか分からなくなります。
6. 効果検証
   2〜4週間後に同条件のヒートマップを見直し、改善が反映されているかを確認します。アクセス数が十分ならA/Bテストを組むのも有効です。

ヒートマップから読み解く改善パターン集

実務で頻繁に遭遇する改善パターンをいくつかご紹介します。

CTAがほとんどクリックされていない

スクロールマップでCTAまで到達しているのにクリックマップで反応がない場合、原因は表示位置よりも「ボタンであることが伝わっていない」「文言に行動を起こす理由がない」のどちらかである場合が多いです。

打ち手としては、ボタンらしいデザインへの変更、矢印やアイコンの追加、文言を「お問い合わせ」→「無料で相談する」のようにベネフィットを含める形に変える、といったアプローチがあります。

特定の位置で一気に離脱している

スクロールマップで「ここから青く（到達率が低く）なる」というポイントは、ほぼ確実にコンテンツ上の問題箇所です。

具体的には、興味を引かないセクションが続いている、唐突な専門用語、長すぎる前置き、関係性の薄い情報のいずれかが原因のことが多いです。離脱前のコンテンツを削るか、もしくは「先に結論」型に書き換えることで改善することが多いです。

目次のクリック率に明確な偏りがある

記事コンテンツでは、目次のクリック率がほぼそのまま「読者の関心の濃さ」になります。

クリック率の高いh2・h3は本文の前半に動かす、低いh2・h3は思い切って削除または別記事に分割する、といった整理で記事全体の品質が一段階上がります。

リンクではない画像・テキストへのデッドクリック

太字や画像、特定のキーワードに対してデッドクリックが集中している場合、それは「ユーザーがリンクだと期待している」というサインです。

該当箇所を本物のリンク（関連記事や詳細ページへ）に変えるだけで、回遊率や滞在時間が伸びることがあります。

モバイルでだけ特定要素が押されない

PCでは押されているのにモバイルでは押されていない要素は、表示サイズが小さい・タップ領域が狭い・他の要素と近すぎてミスタップしている、といった原因が考えられます。

タップ領域の拡張、要素同士の余白確保、固定表示の見直しなど、モバイル特有の改善を行います。

アテンションが意外な箇所に集中

「想定していなかったセクションがめちゃくちゃ熟読されている」というケースもよくあります。

これは多くの場合、ユーザーの本当の関心がそこにあるサインです。そのコンテンツを上部へ引き上げる、関連する内部リンクをそこに置く、CTAを近くに配置する、といった対応で全体のCVRや回遊が伸びることがあります。

ヒートマップ利用上の注意点

便利なヒートマップですが、判断を誤らないために押さえておきたい注意点があります。

最低限のデータ量がないと傾向は読めない

ある程度のアクセス数がないと、ヒートマップの傾向は信頼できません。1人2人のクリックで赤くなっても、それは「傾向」ではなく「事故」です。

目安としては最低でも数百〜千セッション程度のデータが集まってから判断するのが無難です。

「クリックが多い＝良い」とは限らない

クリックされている＝ユーザーがその要素を気に入っている、ではありません。リンクだと誤解してクリックしている、別の要素だと思って押している、といったケースもあります。

クリック数だけ見て判断せず、必ず該当ユーザーのレコーディングで実際の行動を確認しましょう。

動的コンテンツの分析には限界がある

メニュー開閉、アコーディオン、タブ切り替えなどの動的コンテンツ部分は、スクリーンショット変更機能を使っても完全な分析は難しい場合があります。

特にモーダル内の細かい挙動は、レコーディング側で確認するのが現実的です。

個人情報の取り扱いに注意

Clarityの利用規約では、ヘルスケア・金融サービス・政府関連など、機密性の高いユーザー情報を含む可能性のあるサイトでは利用できないことが明記されています。^{参考：Clarity Terms of Service}

該当する業界のサイトは導入前に必ず確認してください。詳しくは利用規約・個人情報の取り扱いのページにまとめています。

Clarityヒートマップに関するよくある質問

本当に無料で使えるのですか？

はい、Clarity は完全無料で全機能を利用できます。PV数やサイト数の上限もありません。Microsoft社が提供する正式なサービスで、現状有料プランの設定もないため、安心して使えます。

アテンションマップやコンバージョンマップは無料ですか？

はい、両方とも無料で利用できます。アテンションマップは追加機能として全アカウントに展開されました。コンバージョンマップはECサイト（Purchase イベントを送信しているアカウント）で表示されます。

どのくらいのデータがあれば分析できますか？

最低でも数百〜千セッションが目安です。それ未満ではクリック1〜2件で見え方が大きく変わってしまうため、傾向を読むのは難しくなります。アクセスの少ないページは、しばらくデータを溜めてから分析するか、サイト全体で似たページをまとめて見ることをおすすめします。

モバイルとPC、どちらを優先して見るべきですか？

サイトの主要流入デバイスを優先するのが原則です。一般的にBtoCはモバイル、BtoBはPCの比率が高い傾向にあります。GA4などで現状のデバイス比率を確認した上で判断してください。

Copilotの分析結果はそのまま信じて良いですか？

参考にはなりますが、鵜呑みにはしないほうが無難です。Copilotはあくまで表示中のヒートマップを基にした要約・提案にとどまり、サイト全体の文脈やビジネス目標までは加味しません。「次に見るべきポイントの当たりをつける道具」として使うと、相性が良いです。

GA4と併用すべきですか？

併用が基本です。GA4でサイト全体の数値傾向と課題ページを把握し、Clarityのヒートマップで個別ページの問題を掘り下げる、という役割分担が最もうまく機能します。Clarity と GA4 / Google 広告との連携もあわせてご覧ください。

有料のヒートマップツールから Clarity に乗り換えるべきですか？

ケースバイケースです。改善PDCAを回す上で日本語サポートやコンサル支援が必須であれば、有料ツールの優位性は依然として大きいです。「とりあえずヒートマップで現状を把握したい」「自社で施策まで設計できる」のであれば、Clarity で完結することもじゅうぶん可能です。両方を併用しているサイトもあります。

まとめ

ヒートマップを起点にしたサイト改善

Microsoft Clarityのヒートマップは、無料とは思えないほど多機能で、サイト改善の出発点として頼れる存在です。本記事の内容をかいつまむと次のとおりです。

• 5種類のヒートマップ（クリック／スクロール／エリア／アテンション／コンバージョン）にはそれぞれ得意な分析がある
• 絞り込み・比較・レコーディング連携を組み合わせると、課題発見の解像度が一気に上がる
• 「クリックが多い＝良い」ではない。必ずレコーディングで裏取りする
• GA4は全体の俯瞰、Clarityは個別ページの観察。両方使ってこそ威力を発揮する
• 無料Clarityで現状把握 → 必要なら有料ツールやA/Bテストへ、というステップが現実的

ヒートマップは「見ること」自体が目的になりがちですが、実際にはその後の改善施策にどうつなげるかが本番。当社では、自社サイトはもちろん新規制作するサイトには必ずClarityを導入し、SEOやLPOの起点として活用しています。

「Clarityを入れたものの活かしきれていない」「ヒートマップは見ているけど改善に落とせない」という方は、ぜひお気軽にご相談ください。

【無料】Microsoft Clarity を活用したSEO/LPO
まずはお気軽にご相談ください！