Microsoft Clarityの導入と使い方｜ヒートマップで直す手順

Microsoft Clarity（マイクロソフト クラリティ）は、Microsoft が無料で提供しているアクセス解析ツールです。ページのどこがクリックされ、どこまでスクロールされたかをヒートマップで可視化し、実際の訪問者がどう操作したかをセッション録画として再生できます。

GA4 は「何人来て、どのページで離脱したか」までは教えてくれますが、「なぜ離脱したか」は教えてくれません。ボタンを見つけられていないのか、見つけたうえで押さなかったのか、押しているのに反応していないのか——数字だけを見ていると、この 3 つはどれも同じ「離脱」として集計されます。ヒートマップとセッション録画は、その内訳を目で確かめるための道具です。

この記事では、WordPress サイトに Clarity を入れて運用に乗せるまでを、設置 → 検証 → 解読の順で解説します。GTM 経由での設置手順、入れたあとに本当に計測できているかをブラウザの開発者ツールで確かめる方法、入力欄を守るマスキング設定、ダッシュボードの数値を改善につなげる読み方までを扱います。GA4 側をどう構成するかは GA4 直接埋め込みと GTM 経由の比較 をあわせて参照してください。

Microsoft Clarity とは — 無料で使えるヒートマップとセッション録画

Clarity は、サイトに 1 本のタグを入れるだけで、訪問者の操作を記録・可視化してくれるツールです。GA4 のように「イベントを設計してから計測する」のではなく、設置した時点でクリック・スクロール・マウス移動が自動で記録される点が最大の違いです。

Clarity で見られるもの

• ヒートマップ — ページ単位で、クリック位置・スクロール到達率・注目エリアを色で可視化する
• セッション録画（レコーディング） — 個々の訪問者の操作を動画のように再生する
• ダッシュボード — レイジクリック・デッドクリックなど「うまくいっていない操作」を自動で集計する
• セグメント／フィルタ — デバイス・流入元・訪問ページなどで絞り込んで比較する

GA4 が「何回起きたか」を数える道具だとすれば、Clarity は「どう起きたか」を見る道具です。両方を入れて、数字で異常を見つけ、録画で原因を確かめる、という使い方が基本になります。

料金と制限

Clarity は無料で提供されています。Microsoft の公式サイトには「永久に無料です。ビジネスの成長に合わせて構築します。トラフィックに制限はありません。」と明記されており、月間のページビュー数に応じた課金や、無料枠を超えると計測が止まるといった上限は設けられていません。個人ブログのような小規模サイトでも、機能を絞られることなく使えます。

記録の上限もあります。1 プロジェクトあたり 1 日 10 万セッションまで、ヒートマップは 1 枚あたり 10 万ページビューまでが上限です。計測そのものにサンプリングはかかりませんが、1 日 10 万セッションを超えると録画の保存側でサンプリングが発生します。個人サイトや中小規模のサイトで到達する数字ではありません。なお、18 歳未満を対象としたサイトでの利用は公式に禁止されています。

データが消えるまでの期間

無料である代わりに、データはあまり長く残りません。Microsoft の公式ドキュメントによると、保持期間は次のとおりです。

30 日を過ぎても残る録画は、お気に入りやラベルを付けたものと、自動的に抽出されるサンプル（全録画の 1% または 1 日 10 件のいずれか多いほう）に限られます。保持期間を過ぎたデータはバックアップを含めて削除され、復元できません。

ここから導かれる運用上の鉄則は 1 つです。気になる録画を見つけたら、その場でラベルを付けてください。「あとでまとめて見よう」と放置すると、翌月には消えています。一方でヒートマップは 9 か月残るので、施策の前後比較に使えるのはこちらです。

日本語で使えるか

公式サイトは日本語化されており、ブラウザの言語設定が日本語であれば日本語のページが表示されます。機能紹介やプライバシー関連の説明も日本語で読めるため、英語のドキュメントを読み解かないと導入できない、という状態にはなっていません。

ヒートマップで分かる 3 種類のデータ

「ヒートマップ」と一括りにされますが、Clarity が出すのは性質の違う 3 種類のマップです。それぞれ答えられる問いが違うので、見たいものに合わせて切り替えます。

最初に見るべきはスクロールマップです。クリックされていない原因の多くは「押されなかった」ではなく「そこまで到達していなかった」で、これはクリックマップだけを見ていても分かりません。

見る前に必要な母数の目安

ヒートマップは、母数が少ないと 1 人の動きが色として強く出てしまい、偶然を傾向と読み違えます。判断に使うなら、そのページ単体で数百セッションは溜めてから見るのが安全です。公開直後のページや流入の少ない下層ページは、まず母数が溜まるのを待ちます。

母数が溜まらないページを見たいときは、ヒートマップではなくセッション録画を数本見るほうが早く手がかりが得られます。統計として読むのではなく、1 人の詰まり方を観察する使い方に切り替えるということです。

GA4 との違いと使い分け — 「数」と「動き」を分担させる

Clarity は GA4 の代わりではありません。GA4 が異常を数字で見つけ、Clarity がその原因を目で確かめる、という役割分担で使うと噛み合います。片方だけで運用しようとすると、どちらも中途半端になります。

実務では「GA4 で離脱率の高いページを特定する → そのページを Clarity のヒートマップで開く → 怪しい箇所をセッション録画で確認する」という順番になります。GA4 側が正しく計測できているかどうかの確認手順は GA4 設置後の動作確認 にまとめています。

GA4 と連携させると何ができるか

Clarity には GA4 プロパティを接続する機能があります。接続すると、GA4 のデータ（オーディエンス概要・集客レポート・人気ページ・国別セッション・デバイス別セッション）がClarity 内の専用ダッシュボードに表示され、そこから該当するセッション録画やヒートマップへ直接ドリルダウンできるようになります。GA4 側にも「Clarity Playback URL」というカスタムディメンションが追加されます。

ただし制約もあります。GA4 で作ったセグメントは連携に対応しておらず、Clarity 内の GA ダッシュボードではフィルタやセグメントを適用できません。接続できるのは 1 プロジェクトにつき 1 プロパティまでです。「GA4 のセグメントをそのまま録画で見る」という使い方はできないと理解しておいてください。

設置方法を決める — GTM 経由・テーマ直接・プラグイン

Clarity の設置方法は 3 通りあります。どれを選んでも計測されるデータは同じなので、そのサイトで今後どれだけタグが増えるかで決めるのが妥当です。

すでに GA4 を GTM 経由で運用しているなら、迷わず GTM 経由にします。同じコンテナに載せておけば、あとで停止・除外条件の変更をするときにサイトへ触らずに済みます。2 方式のメリット・デメリットは GA4 直接埋め込み vs GTM 経由 で詳しく比較しています。

【手順】GTM 経由で Clarity を設置する

すでに GTM を導入しているサイトなら、コミュニティテンプレートを使って管理画面の操作だけで設置できます。サイトのコードには一切触りません。

1. Clarity にサインインし、対象サイトのプロジェクトを作成する。サイト URL と業種を登録すると、そのプロジェクト専用のプロジェクト IDが発行される
2. Clarity の設定画面でインストール方法として GTM を選び、発行されたプロジェクト ID を控える
3. GTM の管理画面で「タグ」→「新規」→ タグの設定 →「コミュニティ テンプレート ギャラリー」を開き、「Microsoft Clarity – Official」を追加する
4. タグの設定欄に、控えたプロジェクト ID を入力する
5. トリガーに「All Pages（全ページビュー）」を指定する
6. 「公開」を実行する。GTM は保存しただけでは本番に反映されない

手順 6 の公開忘れが最も多い失敗です。GTM のプレビューモードでは動いているのに本番で計測されない場合、ほぼこれが原因なので、まずワークスペースに未公開の変更が残っていないかを確認してください。

タグの読み込み順とパフォーマンス

Clarity のタグはページの表示をブロックしない形で読み込まれますが、GTM コンテナの中に何本タグが載っているかによって、体感の重さは変わります。コンテナ自体の設置位置とパフォーマンスの関係は GTM タグを head 上部に設置するべき理由 で整理しています。GA4 をこれから GTM 経由に寄せる場合は WordPress で GA4 を GTM 経由に移行する方法 の手順が使えます。

【手順】WordPress に直接入れる場合

GTM を使っていないサイトでは、公式プラグインを入れるか、テーマから直接スクリプトを出力します。

公式プラグインを使う

Microsoft が配布している WordPress 用プラグインを使うと、管理画面にプロジェクト ID を入力するだけで設置が完了します。コードを触らずに済むぶん、テーマを変更しても設定が残るのが利点です。プラグインのスラッグは microsoft-clarity で、WordPress.org の公開情報によると有効インストール数は 20 万件以上、最終更新は 2026 年 8 月 28 日と、現在も更新が続いています。

テーマから出力する

プラグインを増やしたくない場合は、wp_head フックでスクリプトを出力します。親テーマではなく子テーマに書いてください。親テーマに書くと、テーマ更新のときに消えます。

add_action( 'wp_head', function () {
    // 管理画面では出力しない
    if ( is_admin() ) {
        return;
    }
    // Clarity のインストール画面に表示されるスクリプトをそのまま貼る
    ?>
    <!-- Microsoft Clarity -->
    <script type="text/javascript">
        /* Clarity 管理画面からコピーしたトラッキングコード */
    </script>
    <?php
}, 1 );

トラッキングコード本体は Clarity 側の仕様変更で書き換わることがあるため、記事や他サイトからコピーせず、必ず自分の Clarity 管理画面に表示されているものを貼ってください。また、ログイン中の自分のアクセスまで記録すると録画がノイズだらけになるので、管理者ログイン時は出力しない条件を足しておくと運用が楽になります。

計測できているかを自分で確かめる

設置作業が終わったら、ダッシュボードにデータが出るのを待つ前に、ブラウザ側で送信を確認します。Clarity は記録がダッシュボードに反映されるまで時間差があるため、「まだ出ていない」だけの状態と「そもそも送れていない」状態を、待ち時間だけでは区別できないからです。開発者ツールを見れば、この 2 つはその場で切り分けられます。

開発者ツールで送信を確認する手順

1. 本番の公開ページを、シークレットウィンドウで開く（GTM のプレビューモードや管理画面ログイン状態では正しく判定できない）
2. キーボードの F12（macOS は Command + Option + I）で開発者ツールを開き、Network タブを選ぶ
3. フィルタ欄に clarity と入力する
4. ページをリロードし、数秒間ページをスクロールしたりリンクをホバーしたりする
5. 表示されたリクエストのホストとステータスコードを確認する

フィルタに入れる文字列を collect にしないでください。collect は GA4 の送信先パスでもあるため両者が混ざり、どちらのリクエストを見ているのか分からなくなります。逆に GA4 側を確認したいときも同じ問題が起きるので、その手順は GA4 設置後の動作確認 に分けて書いています。

合否の判定表

Network タブに何が出ているかで、状態は次の 4 つに分かれます。

送信先のホスト名は環境によって変わります。当サイトで実測したところ、r.clarity.ms/collect・j.clarity.ms/collect・n.clarity.ms/collect と、計測したタイミングごとに異なるサブドメインが使われていました。サブドメインを決め打ちで探すと「送られていない」と誤診するので、ホスト全体ではなく clarity という文字列で絞り込んでください。

読み込まれるファイルの実測値

パフォーマンスへの影響を見積もるために、当サイトに設置されている Clarity が実際に何を読み込んでいるかを計測しました（2026 年 9 月 2 日時点）。

本体は async 属性付きで挿入され、load イベント後に同期用リクエストが飛ぶ作りになっているため、初期表示を直接ブロックする構造にはなっていません。ただし転送量としては 73 KB 前後が上乗せされるので、低速回線を含めて速度を追い込んでいるサイトでは、この分を織り込んで判断してください。

データが来ないときの切り分け

前章の判定表で「❌ タグが出力されていない」になった場合、原因はほぼ次のどれかです。上から順に確認すると早く着地します。

ここまで潰しても送信が確認できない場合は、プロジェクト ID の取り違え（別サイトのプロジェクトに送っている）を疑ってください。ダッシュボードにデータが出ないのではなく、別のプロジェクトには出ているというケースがあります。

マスキングとプライバシーの設定

Clarity は画面の見た目を再現して録画するツールなので、設置したら真っ先にマスキングの設定を確認します。問い合わせフォームや会員登録フォームを持つサイトでは、これを飛ばすと入力内容が録画に残る恐れがあります。

マスキングのレベル

マスキングには Strict / Balanced / Relaxed の 3 モードがあり、初期値は Balanced です。どのモードを選んでも、入力欄とドロップダウンは常にマスクされ、これを解除することはできません。

注意すべき仕様が 2 つあります。1 つは、CSS や style タグの中身はマスク対象外であること。もう 1 つは、設定変更が過去のデータに遡って適用されないことです。反映まで最大 1 時間かかり、緩い設定のまま運用してしまった期間の録画は、あとから設定を厳しくしても隠せません。マスキングは、公開前・タグを入れた直後に決めるものだと考えてください。

要素単位で制御したい場合は、HTML の属性で指定します。ページ全体は標準設定のままにして、特に秘匿したい範囲だけを明示的にマスクするのが現実的な運用です。

<!-- この範囲を録画・ヒートマップ上でマスクする -->
<div data-clarity-mask="true">
  <p>会員番号: 12345678</p>
</div>

<!-- 逆に、マスクを解除して中身を見えるようにする -->
<div data-clarity-unmask="true">
  <p>公開情報なので確認したい範囲</p>
</div>

マスキングを変更したら、必ず自分でフォームにダミー値を入力し、その録画を再生して伏せられているかを目で確認してください。設定画面のチェックだけで済ませると、想定と違う範囲が見えていることに気づけません。

Cookie とプライバシーポリシー

Clarity は Cookie を使います。公式ドキュメントが挙げているのは 7 種類で、ファーストパーティの _clck（ユーザー ID と設定の保持）と _clsk（複数のページビューを 1 つの録画に結合する）に加え、CLID・MUID・MR・SM・ANONCHK というサードパーティ Cookie が含まれます。

Cookie を使わない運用も選べます。設定画面で Cookie を無効にすると、同意を受け取るまで Cookie を発行せず、ページビュー単位の一意な ID で動作します。同意管理ツールを併用するサイトは、この Consent Mode 側で制御します。

ここで 1 つ、実測して分かったことがあります。当サイトに設置されているタグの設定値を確認したところ、Cookie の設定配列に _clck だけでなく _uetmsclkid・_uetvid という名前が含まれていました。この 2 つは公式の Clarity Cookie 一覧（前述の 7 種類）には無い名前で、Microsoft Advertising（UET）側で使われるものです。Microsoft は UET タグから Clarity を有効化する統合も提供していますが、その場合に発行される Cookie を列挙した公式資料は見当たりません。

つまり、公式ドキュメントの一覧だけを見て「発行される Cookie はこの 7 種類」と決めつけないほうがよい、ということです。プライバシーポリシーに Cookie を列挙するのであれば、開発者ツールの Application タブ（Chrome の場合）で自分のサイトに実際に保存されている Cookie を確認し、その実測に基づいて書いてください。

自分のサイトのプライバシーポリシーを開いて、使っている解析ツールの名前がすべて書かれているかを確認してください。GA4 の記載だけがあり、あとから追加した Clarity の記載が抜けている、というのは実際によくある漏れです。

日本の「外部送信規律」で求められること

日本では、サイトが利用者の端末から外部へ情報を送信する場合に、電気通信事業法の外部送信規律（同法第 27 条の 12）が関わります。総務省によると、2022 年の法改正で導入され、2023 年 6 月 16 日に施行されました。タグや情報収集モジュールで利用者に関する情報を外部へ送信する場合に、利用者が確認できるようにするための規律です。

よく誤解されますが、この規律は同意の取得だけを求めているわけではありません。総務省の FAQによると、確認の機会の付与は「通知」「公表（利用者が容易に知り得る状態に置く）」「同意取得」「オプトアウト措置の提供」のいずれかを行えばよいとされています。つまり Cookie 同意バナーは 4 つの選択肢のうちの 1 つであり、法が一律に同意を要求しているわけではありません。プライバシーポリシーに列挙して公表する方法も、履行手段として認められています。

公表する場合、施行規則で定められている記載事項は次の 3 点です。

表示方法にも決まりがあり、外部送信を行うページか、そこから容易に到達できるページに、日本語で、専門用語を避け、拡大縮小しなくても読める大きさで示すことが求められます。プライバシーポリシーへの追記で対応するなら、フッターなど全ページから辿れる位置にリンクを置いておけば要件を満たしやすくなります。

なお、対象になるかどうかはサイト単位ではなくページ単位で判断されます。総務省が対象外の例として挙げているのは「自社商品等のオンライン販売」と「企業等のホームページ運営・個人ブログ」で、いずれも自己の情報発信のために運営している場合という限定が付きます。一方、各種情報のオンライン提供は対象とされています。その中間にあたる形態を名指しした記述は公開資料にありません。自分のサイトがどちらに当たるか判断に迷う場合は、総務省のパンフレット（2023 年 2 月）に掲載されているフローチャートで確認してください。

ダッシュボードの読み方 — 拾うべき 5 つのシグナル

Clarity のダッシュボードには多くの数値が並びますが、改善に直結するのは「うまくいっていない操作」を検出した指標です。まずは次の 5 つだけを見れば十分です。

この 5 つはどれも「読者が困った瞬間」を機械的に検出したものです。数値そのものを追うのではなく、該当するセッション録画に飛んで、その 1 人が何をしようとしていたかを見るところまでを 1 セットにしてください。

録画は全部見ない

セッション録画は溜まりますが、順番に見ていくと時間だけが消えます。必ず上の 5 つのシグナルか、特定のページ・流入元でフィルタしてから見ます。「レイジクリックが起きたセッションだけ」に絞れば、数本見るだけで原因の見当がつきます。

見えた症状を打ち手につなげる

ヒートマップとシグナルは、それ自体が答えではなく仮説の材料です。「症状 → 考えられる原因 → 試す打ち手」の 1 往復まで落として初めて改善になります。よく出る症状を対応表にまとめます。

打ち手は一度に 1 つだけ変えてください。同時に 3 箇所直すと、数値が動いたときにどれが効いたのか分からなくなり、次の判断に使えなくなります。改善施策の全体像は CRO とは？コンバージョン率を改善する手法と始め方、ファーストビューの直し方は ファーストビュー改善で CVR を上げる方法 にまとめています。

運用に乗せるコツ

Clarity は入れた直後がいちばん面白く、そのまま見なくなるツールの代表格です。見る対象と頻度をあらかじめ決めておくと続きます。

見るタイミングを決めておく

• ページを公開・改修した直後 — 想定どおりに操作されているかを録画で数本確認する
• GA4 で異常を見つけたとき — 離脱が増えたページをヒートマップで開く
• 月に一度 — レイジクリックとデッドクリックの上位ページだけを見る

毎日開く必要はありません。むしろ母数が溜まっていない状態で見ると誤読するので、見る間隔を空けるほうが判断の精度は上がります。

自分のアクセスを混ぜない

サイト運営者自身の操作が録画に混ざると、実際の訪問者の傾向が埋もれます。管理者としてログインしているときはタグを出力しない、あるいは Clarity 側で自分の IP を除外するなど、運営者を除外する設定を最初に入れておいてください。あとから除外しても、それまでに溜まったデータは戻りません。

まとめ

Microsoft Clarity を WordPress サイトで運用するための要点を整理します。

• Clarity は GA4 の代わりではない — GA4 で異常を見つけ、Clarity で原因を確かめる分担にする
• 設置方法は GTM 経由が第一候補 — すでに GTM を使っているならサイトのコードに触らずに済む
• 入れたら開発者ツールで送信を確認する — ダッシュボードを待つのは確認ではない
• フィルタは clarity で絞る — collect だと GA4 と混ざる
• マスキングは設置直後に決める — 設定は過去のデータに遡って適用されない
• 録画は 30 日で消える — 残したいセッションはその場でラベルを付ける
• 見るシグナルは 5 つに絞る — レイジ／デッド／過剰スクロール／クイックバック／JS エラー
• 打ち手は一度に 1 つ — 同時に直すと何が効いたか分からなくなる

ヒートマップで人の動きを確かめたら、次はページ自体の作りが検索エンジンと AI に正しく伝わっているかを見ておくと、改善の打ち手が揃います。SEO 診断ツールでページの状態をまとめて確認できます。

よくある質問

Q. Microsoft Clarity は本当に無料で使えますか？

無料です。Microsoft の公式ドキュメントによると、有料プランやアップグレードは用意されておらず、トラフィック量やサイト数の上限もありません。ただし記録側には上限があり、1 プロジェクトあたり 1 日 10 万セッションを超えると録画の保存にサンプリングがかかります。また、18 歳未満を対象としたサイトでの利用は禁止されています。無料である代わりにセッション録画の保持期間は 30 日と短いので、残したい録画にはその場でラベルを付けてください。

Q. GA4 を入れていれば Clarity は不要ですか？

役割が違うので、両方入れるのが基本です。GA4 は「どのページで、どれだけ落ちているか」を数える道具で、Clarity は「そのページで何が起きて落ちたか」を見る道具です。GA4 だけでは離脱の理由まで辿り着けず、Clarity だけでは全体の規模感が分かりません。

Q. 設置したのにデータが表示されません。故障でしょうか？

反映には時間差があるため、ダッシュボードが空でも異常とは限りません。判断はダッシュボードではなく、ブラウザの開発者ツールの Network タブで行ってください。フィルタに clarity と入力してリロードし、タグの読み込みと送信リクエストが出ていれば計測はできています。1 件も出ない場合は、GTM の公開忘れかキャッシュを最初に疑います。

Q. サイトの表示速度に影響はありますか？

当サイトで実測したところ、読み込まれるのは設定用のローダーが 728 バイト、記録処理の本体が約 73 KB でした。本体は非同期で読み込まれ、同期用のリクエストはページの読み込み完了後に発行されるため、初期表示を直接ブロックする構造にはなっていません。ただし転送量は増えるので、速度を追い込んでいるサイトではこの分を織り込んで判断してください。

Q. 入力フォームの中身が録画に残ることはありますか？

入力欄とドロップダウンは、どのマスキングモードでも常にマスクされ、これを解除することはできません。ただし、入力欄以外の表示内容がどこまで伏せられるかはモード設定によって変わります。設置したらまず自分でフォームにダミー値を入力し、その録画を再生して伏せられているかを目で確認してください。特に秘匿したい範囲は data-clarity-mask 属性で明示的に指定できます。設定画面の表示だけを見て済ませると、想定と違う範囲が見えていることに気づけません。

Q. プライバシーポリシーには何を書けばよいですか？

利用している解析ツールの名称と、Cookie を用いて利用状況の情報を取得していること、その目的、そして提供元の情報の扱いを確認できる導線を示すのが基本です。GA4 の記載だけが残っていて、あとから追加した Clarity の記載が抜けている状態は実際によく起きるので、ツールを追加したタイミングでポリシーも見直してください。

Q. ヒートマップはどれくらい溜まってから見るべきですか？

そのページ単体で数百セッションを目安にしてください。母数が少ないと 1 人の動きが色として強く出てしまい、偶然を傾向と読み違えます。母数が溜まらないページは、ヒートマップではなくセッション録画を数本見て、1 人の詰まり方を観察する使い方に切り替えるほうが早く手がかりが得られます。

関連記事

• GA4 直接埋め込み vs GTM 経由｜メリット・デメリット比較と判断基準
• WordPress で GA4 を GTM 経由に移行する方法
• GA4 設置後の動作確認｜計測が効いているか自分で確かめる手順
• CRO とは？コンバージョン率を改善する手法と始め方
• ファーストビュー改善で CVR を上げる方法