Microsoft Clarityとは
導入から使い方まで
アクセス数は分かっても、「ユーザーがページのどこを見て、どこで迷い、どこで離れたのか」までは、数値レポートだけでは見えてきません。Microsoft Clarity（マイクロソフト クラリティ）は、その行動の中身をヒートマップとセッションレコーディングで可視化する、Microsoft 製の無料ツールです。
本記事では、Clarity とは何かという基本から、導入方法・設定方法・ログイン、5種類のヒートマップの見方と使い方、Copilot（AI）の使いどころ、利用規約とプライバシー、そして「ヒートマップが表示されない・見れない」ときの確認点までを、 Microsoft Learn の公式ドキュメント に沿って一気通貫で解説します。
- Clarity は無料（セッション数の課金なし）で使える行動分析ツールです。トラッキングコードを設置すれば、ヒートマップ・レコーディング・行動指標がそのまま使えます。ただしレコーディングには1日あたりの保持上限があり、大規模サイトでは一部がサンプリングされます（詳細は本文）。
- 導入は、手動で
<head>に貼る／Googleタグマネージャー／CMSプラグインの3通りがあり、サイトの作りに合わせて選べます。 - アクセス数を測る GA4 とは役割が違い、Clarity は「どこを見て・どこで迷ったか」を見る側です。両方を併用すると、量と質の両面から改善点を絞り込めます。
01.結論：Clarityは無料で使える行動分析ツール
Microsoft Clarity は、 Microsoft が提供する無料のユーザー行動分析ツール です。サイトにトラッキングコードを1つ設置すると、訪問者のクリックやスクロールが自動で集計され、ヒートマップとして見られるようになります。さらに、個々の訪問の操作を動画のように再生できるセッションレコーディングも付いてきます。
最大の特徴は、これらをセッション数の課金なく無料で使える点です。有料プランやセッション数の従量課金がなく、トラフィックの最低条件もないので、まず入れてみるハードルが低いツールだと言えます。アカウント登録には Microsoft・Google・Facebook のいずれかのアカウント、またはメールアドレスが使えます。
料金やセッション数の上限はありませんが、セッションレコーディングの保持には上限があります。 Clarity のクライアントAPIリファレンス によると、Clarity が保持するレコーディングは1プロジェクトあたり1日10万件までで、これを超えるトラフィックでは、傾向に応じてレコーディングがサンプリング（間引き）されます。例えば1日20万セッションのサイトでは、1件おきに保持されるかたちです。大規模サイトで特定の操作を含む訪問を確実に残したい場合は、upgrade API で優先指定できます。なお、この上限はレコーディングの保持に関するもので、ヒートマップや行動指標の集計には影響しません。
02.Microsoft Clarityとは｜何が分かるのか
ヒートマップ・レコーディング・行動指標
Clarity でできることは、大きく3つに分けて捉えると分かりやすいです。いずれも、トラッキングコードを設置するだけで自動的に集まります。
| 機能 | 見えるもの | 主な使いどころ |
|---|---|---|
| ヒートマップ | ページ上でクリック・スクロールが集まった場所を色で可視化 | どのボタンが押され、どこまで読まれているかを面で把握する |
| セッションレコーディング | 個々の訪問の操作（マウス移動・クリック・スクロール）を再生 | 離脱や迷いが起きた具体的な動きを1件ずつ追う |
| 行動指標（ダッシュボード） | デッドクリック・レイジクリック・過剰スクロール・JSエラーなど | 不満や不具合が起きているページを数で見つける |
ダッシュボードの指標のうち、 公式FAQ でも説明されている代表的なものが2つあります。1つはレイジクリックで、短時間に同じ箇所を連打している状態を指し、反応しない要素へのいらだちのサインです。もう1つはデッドクリックで、クリックしても何も起きなかった操作を指し、壊れたボタンや誤解を招くデザインの手がかりになります。
GA4との違いと補完関係
「GA4 があるのに Clarity も要るのか」という疑問はよく出ます。両者は測る対象が違います。GA4 は量（訪問数・流入元・コンバージョン数）を測るのに向き、Clarity は質（ページ上でどう振る舞ったか）を見るのに向いています。どちらかで足りるものではなく、組み合わせて使うものです。
実際、Clarity には GA4 と連携する機能が用意されており、 GA4 プロパティを1つ紐づける と、GA4 のデータを見ながらそのままレコーディングやヒートマップへ進めます。GA4 で数字の異変に気づき、Clarity で原因の操作を見る、という流れが組めます。
03.導入方法：トラッキングコードの3つの入れ方
Clarity の導入は、サイトにトラッキングコードを設置するところから始まります。 公式の手動セットアップ手順 によると、入れ方は次の3通りで、サイトの作り方に合わせて選びます。
clarity.microsoft.com にログインし、サイト名とURLを登録してプロジェクトを作成する。
手動でheadに貼る／GTM／CMSプラグインの3通りから、サイトの構成に合う方法を選ぶ。
コード設置後、ダッシュボードに計測中のステータスが出れば導入完了。データは順次溜まる。
手動でheadに設置する
最も基本的な方法です。Clarity の設定画面で「Get tracking code」を選んでコードをコピーし、サイトの全ページの <head> 内に貼り付けます。HTMLを直接編集できるサイトや、共通ヘッダーのテンプレートを持つサイトに向いています。
Googleタグマネージャーで入れる
Googleタグマネージャー（GTM）を使っているサイトなら、コードをテンプレートに貼らずに導入できます。 公式の GTM 連携手順 によると、Clarity の設定画面で GTM 連携が自動検出され、アカウントとコンテナを選んで「Create and publish」すれば設置が完了します。手動で入れる場合も、GTM のカスタムHTMLタグにトラッキングコードを貼る形で対応できます。
タグの追加・公開まで含めて GTM をプログラムから操作したい場合は、Tag Manager API という選択肢もあります。GTM の変数・トリガー・タグをAPIで設定する方法は、 GoogleタグマネージャーをAPIで操作する記事 で扱っています。
WordPressなどCMSプラグインで入れる
WordPress・Shopify・Wix・Squarespace などの CMS を使っている場合は、公式プラグインや連携メニューから導入できます。WordPress なら公式の Microsoft Clarity プラグインを入れてプロジェクトIDを設定するだけで、テーマのコードに触れずに計測を始められます。コードを直接編集しない分、設定ミスが起きにくい入れ方です。
04.設定方法：ログイン・GA4連携・マスキング
ログインとプロジェクト作成
Clarity を始めるには、 clarity.microsoft.com にアクセスし、Microsoft・Google・Facebook のアカウントかメールアドレスでサインインします。ログイン後、新しいプロジェクトを作成し、サイト名とURLを登録します。1つのアカウントで複数サイトのプロジェクトを持てるので、運用するサイトごとに分けて作るのが分かりやすい形です。
Google Analytics（GA4）と連携する
プロジェクトの設定（Settings）から、GA4 との連携を有効にできます。 公式の GA4 連携手順 によると、連携を選んで GA4 のアカウント・プロパティを指定すると、Clarity 上で GA4 のデータを参照しながらレコーディングやヒートマップに進めるようになります。1つの Clarity プロジェクトに紐づけられる GA4 プロパティは1つです。
マスキングでPIIを守る
Clarity はレコーディングで実際の画面を再現するため、個人情報（PII）の扱いが重要になります。既定では Strict マスキング が有効で、入力値やテキストなど機微な情報を伏せた状態で記録します。サイトの内容に応じて Balanced などのモードを選んだり、特定の要素を個別にマスク・アンマスク指定したりして、保護と分析しやすさのバランスを取ります。
05.ヒートマップの使い方・見方
Clarity の ヒートマップ は、訪問者のクリックとスクロールを集計して、関与の濃い場所を色で示す機能です。公式の説明によると作成の待ち時間はほとんどなく、対象ページを開けば数秒で結果が返ります。デスクトップ・タブレット・モバイルの端末別に切り替えて見られるのも特徴です。
5種類のヒートマップ（クリック・スクロール・エリア・コンバージョン・アテンション）
Clarity のヒートマップは、 公式のヒートマップ概要 によると次の5種類があります。日常的に使うのはクリック・スクロール・エリアの3つで、コンバージョンマップ（EC向け）とアテンションマップ（滞在時間）は目的を絞って使い分けます。
| 種類 | 見えるもの | 読み取れること |
|---|---|---|
| クリックマップ | 最もクリック（タップ）された要素を色で表示 | 押されているボタン・リンクと、見られているのに押されない要素のギャップ |
| スクロールマップ | どこまでスクロールされたかの到達率を表示 | 重要なコンテンツやCTAが読まれる位置にあるか、ページの適切な長さ |
| エリアマップ | 選んだ範囲内の全要素のクリック数を合算して表示 | ナビやカード群など、まとまった領域単位での反応の大きさ |
| コンバージョンマップ | ECサイトで、どのクリックが購入につながったかを表示 | 売上に貢献している要素・価格帯と、成果につながりにくい箇所 |
| アテンションマップ | ページの各部分にユーザーが費やした滞在時間を表示 | 実際に読まれている（時間をかけられている）領域と読み飛ばされる領域 |
それぞれの詳細は公式ドキュメントの クリックマップ・スクロールマップ・エリアマップ・コンバージョンマップ・アテンションマップ にまとまっています。
色の読み方とフィルター
ヒートマップの色は関与の強さを表し、赤やオレンジなど暖色ほど操作が集中している場所、青など寒色ほど少ない場所を示します。見方のコツは、「想定したクリック位置」と「実際に色が濃い位置」のズレを探すことです。読まれてほしい見出しに色が乗らない、押せない画像が連打されている、といったズレが改善の起点になります。
さらに、端末（PC・スマホ・タブレット）や流入元などでフィルターをかけると、セグメントごとの違いが見えます。スマホではCTAまでスクロールが届いていない、といった端末固有の問題は、フィルターで分けて初めて気づけることが多いです。
06.Copilot（AI）でデータを読む
Clarity には、生成AIを使ってデータ分析を助ける Copilot が組み込まれています。公式ドキュメントによると、Copilot は大規模言語モデル（LLM）を用いて、ダッシュボードの数字やレコーディング、ヒートマップを平易な言葉で要約します。長いレコーディングの要点を短くまとめたり、指標の変化の背景を説明したりと、データを読む時間を短くするのが狙いです。
使い方の中心は チャット で、プロジェクトのデータについて質問すると、要約や関連するフィルターへのリンクを返してくれます。なお Copilot はトラッキングコードが設置されたサイトでのみ利用でき、設定からオン・オフを切り替えられます。データの保存先やAIを使ううえでの注意点は、本記事末尾のFAQで触れます。
07.利用規約・プライバシー・データの扱い
Clarity を業務で使うなら、利用規約とプライバシーの観点は最初に押さえておきたいところです。 公式FAQ では、利用規約とプライバシーポリシーへの参照が案内されています。Clarity はレコーディングで実際の操作を再現するため、何をどこまで記録するかの設計が、そのまま個人情報保護の責任に直結します。
押さえておきたいのは、マスキング設定は導入者の責任だという点です。Clarity 側に保護の仕組みは用意されていますが、何を隠すかを正しく設定し、Cookie 同意の取得やプライバシーポリシーへの記載まで含めて整えるのは利用者側の役割になります。
- ✓ マスキングのモード（既定はStrict）を確認し、機微な要素は確実に伏せる
- ✓ Cookie同意の仕組みを用意し、同意前は計測を動かさない
- ✓ プライバシーポリシーにClarity（行動分析・レコーディング）の利用を明記する
- ✓ フォームのカード番号・住所などは個別にマスク指定を追加する
08.ヒートマップが表示されない・見れないとき
「ヒートマップが表示されない」「見れない」という相談は、原因がいくつかに分かれます。 公式のトラブルシューティング も参照しつつ、上から順に切り分けると早いです。
| 症状 | 想定される原因 | 確認・対処 |
|---|---|---|
| そもそもデータが出ない | トラッキングコードの未設置・設置ミス | 全ページのheadにコードがあるか、計測中ステータスが出ているかを確認 |
| 新しいページだけ出ない | セッションがまだ溜まっていない | ヒートマップは実セッションから生成される。時間をおいて再確認する |
| 計測が動いていない | Cookie同意が未許可／広告ブロッカーで遮断 | 同意管理の設定と、検証用に同意した状態でのアクセスを確認 |
| 背景が裸のHTMLに崩れる | Strictマスキングがstylesheetのhrefを消している | stylesheetをアンマスクする（別記事で詳説） |
このうち、ヒートマップの背景だけがスタイル崩れして見えるケースは、データの問題ではなくマスキングの副作用です。原因の仕組みと、Cloudflare Workers での一括対処までは別記事で詳しく扱っています。
Microsoft Clarityのスクリーンショットが表示崩れする原因と対処
ヒートマップの背景が未スタイルに崩れるのは、StrictマスキングがstylesheetのhrefまでマスクしてClarityがCSSを読めなくなるためです。data-clarity-unmask="true" 付与での対処と、Vite / React Router が自動挿入するハッシュ付きCSSにも効かせるCloudflare Workers HTMLRewriterの実装をまとめています。
09.メリットとデメリット・他ツールとの違い
導入を判断するために、Clarity の強みと、押さえておきたい弱みを整理します。利点には理由を、弱みには対処の方向まで添えます。
| 観点 | Clarityの特徴 | 判断のポイント |
|---|---|---|
| 費用 | 無料。セッション数の従量課金や有料プランがない | Microsoftが提供する無料ツールなので、まず試して合うか確かめやすい |
| レコーディングの保持 | 保持には1日あたりの上限があり、超過分はサンプリングされる | 大規模サイトは全セッションが残らない。重要な操作はupgrade APIで優先指定する |
| 分かること | ヒートマップ・レコーディング・行動指標で「質」を見る | 訪問数や流入の「量」はGA4が担う。役割が違うので併用が前提 |
| GA4連携 | 1プロジェクトにつきGA4プロパティは1つ | 複数GA4プロパティをまたいだ分析は不可。プロジェクトを分けて運用する |
| データが出るまで | ヒートマップは実セッションが溜まってから生成される | 公開直後の新ページは即座に見えない。時間をおいて確認する |
| プライバシー | 既定でマスキングが効くが、設定責任は利用者側 | 同意取得・ポリシー整備まで含めて自社で設計する必要がある |
専用の有料ヒートマップツールと比べると、Clarity は無料でレコーディングとヒートマップとAI要約までまとまっているのが強みです。一方で、ファネルやゴールを細かく設計してコンバージョンを追い込むような分析は GA4 や専用ツールの領域で、Clarity 単体ですべてをまかなう設計にはなっていません。量はGA4、質はClarity、と役割で住み分けるのが扱いやすい形です。なお、表中のレコーディング保持上限（1プロジェクトあたり1日10万件）とサンプリングの仕様は、 公式のクライアントAPIリファレンス に記載があります。
10.よくある質問（FAQ）
Microsoft Clarityは本当に無料ですか？
はい。Microsoft Clarity は Microsoft が提供する無料の行動分析ツールで、有料プランやセッション数の従量課金はありません。アカウントを作って トラッキングコードを設置 すれば、そのまま全機能を使えます。ただし「無制限」は料金面の話で、セッションレコーディングの保持には上限があります。 公式のクライアントAPIリファレンス によると、保持されるレコーディングは1プロジェクトあたり1日10万件までで、これを超えるトラフィックでは一部がサンプリング（間引き）されます。
GA4を入れていてもClarityを導入する意味はありますか？
あります。GA4 は「何人が・どこから来て・どれだけ成果につながったか」という量を測るのが得意です。一方 Clarity は、ヒートマップやレコーディングで「ページ上でどう操作したか」という行動の中身を見るツールです。役割が違うので併用が前提で、Clarity 側で GA4 プロパティを連携 すると GA4 のデータを起点にレコーディングやヒートマップへ進めます。
ヒートマップが表示されない・見れないときは何を確認すればよいですか？
まず トラッキングコードが正しく設置 され、計測が始まっているかを確認します。次に、ヒートマップは実際のセッションが溜まってから描画されるため、設置直後やアクセスの少ないページではまだ表示されないことがあります。Cookie 同意が未許可だと計測自体が動かない点、広告ブロッカーで遮断される点も確認します。背景が裸のHTMLのように崩れて見える場合はマスキングが原因なので、Clarityのスクリーンショットが表示崩れする原因と対処の手順で対処します。
閲覧者の個人情報は記録されてしまいますか？
Clarity は既定で Strict マスキング が有効になっており、入力値やテキストなどの機微な情報を伏せた状態で記録します。ただしマスキングの設定は導入者の責任で、どこまで隠すかは Balanced / Strict などのモードで調整します。フォームのカード番号など確実に隠したい要素は個別にマスク指定を追加し、Cookie 同意やプライバシーポリシーの整備と合わせて運用します。
Copilot（AI）にデータを渡しても問題ありませんか？
Clarity の Copilot は、生成AI（大規模言語モデル）でダッシュボードやレコーディング、ヒートマップを平易な言葉で要約する機能です。公式ドキュメントによると、Microsoft の責任あるAIの原則に沿って開発され、データは Microsoft Azure のクラウドに保存されます。Copilot はトラッキングコードが設置されたサイトでのみ利用でき、設定からオフにもできます。生成AIの性質上、出力が誤ることもあるため、内容を確認したうえで使うのがおすすめです。学習利用の有無を含むデータの詳しい扱いは、導入前に 最新の利用規約とプライバシー で確認しておくと安心です。
11.まとめ
Microsoft Clarity は、ヒートマップとセッションレコーディングをセッション数の課金なく無料で使える行動分析ツールです。トラッキングコードを手動・GTM・CMSプラグインのいずれかで設置すれば導入でき、ログイン後のプロジェクト設定で GA4 連携やマスキングを整えられます。レコーディングには1日あたりの保持上限がある点だけ押さえておけば、大きな運用上の制約にはなりません。
使い方の中心は、クリック・スクロール・エリアを中心とした5種類のヒートマップで「見られている場所」と「想定とのズレ」を探すことです。Copilot を使えばデータの要約も任せられます。アクセス数を測る GA4 と役割を分け、量と質の両面からサイトを改善していく土台として、まずは1サイトに入れて手を動かしてみるところから始めましょう。
計測ツール導入・サイト改善のご相談はこちら
Microsoft Clarity・GA4・GTMなどの計測ツール導入から、ヒートマップ・レコーディングを使ったサイト改善、AIを活用したメディア運用の自動化までを支援しています。お気軽にお問い合わせください。
