イチから始める Microsoft Clarity（クラリティ）入門記事！
アクセス解析ツールといえば Google 社の提供している「GA4（ジーエーフォー）」が有名ですよね。関連書籍も多いです。ですが、ほとんどの場合「GA4 を入れてはみたけど難しくて活用できてない……！」が担当者のホンネではないでしょうか。GA4むつかしいよNE！
- 「GA4よりわかりやすい Microsoft Clarity（クラリティ）というものがあるらしい」
- 「ヒートマップを無料で使えるらしい」
- 「訪問者の行動も無料でわかるらしい」
- 「GA4 とも連携できるらしい」
- 「Clarity を導入してみたいけど、注意点なども含めた全体像が知りたい」
と、興味を持っている初心者から GA4 経験者までを対象としてまとめましたので、目次から必要な箇所を参考にしてください。また、Microsoft Clarity を使う前にポイントをチェックできるリスト（PDF）も合わせてどうぞ。
ようこそ Clarity 沼へ！
Microsoft Clarity を使う前に確認しておくべきこと
Clarity を導入する前に、そもそも本当に使って良いのか・導入できるのかどうかをあらかじめ確認しておきましょう。
特に注意が必要な3つのポイント（リスク）
- AI を導入できていない企業は（ポリシー的に）Microsoft Clarity を使えない
＝ （解析ツールの導入を相談される）制作会社は把握して対応できる必要がある - ユーザー行動データは個人情報なのかどうかは人それぞれ
＝ だからプライバシーポリシーに個人情報の範囲を明記しておくべし - 氏名やメールアドレスなど明らかな個人情報はマスキングしておくべし
上記は、Microsoft Clarity（クラリティ）のデメリット（リスク）と対処法にも詳しくまとめています。ここは必ず押さえておきましょう。また、導入時に注意が必要なポイントは以下の3つです。
ログインは個人アカウントに紐づく
メールアドレスとパスワードで登録するのではなく、以下のように Google や Microsoft、Facebook のどれかの個人アカウントで登録します。また、メールアドレスが紐づいていないので、他のアカウントで登録しなおすと、別のユーザーになります。継続的に運用するなら、どれかひとつにしておいたほうが良いでしょうね。
あまりよろしくない慣習として、同じログイン情報を外部の方と共有することがあるのですが、それを前提に導入しようとすると「あれっ？」となります。まあ……無理やり新しい Gmail をつくってそれを共有するという手もありますが、そのアカウントを誰がどのように管理するのか明確にしておきましょうね。
導入を支援する立場の方は、こういったツールでクライアントのメールアドレスをオーナー登録することがあると思いますが、Clarity はあとから管理者ユーザーを追加できます。ご安心ください。
改正電気通信事業法に基づく対応
2023年6月から施行された改正電気通信事業法に基づき、個人情報を取得しかねないツールの導入は慎重にならざるを得ません。GA4も含め、アクセス解析ツールが無料だからといって、ほいほい入れて良いものではないのです。Web 担当者フォーラムの記事が一番わかりやすいので、一読しておきましょう。
正直なところ、ここまでやっているウェブサイトがどれだけあるのかという疑問はありますが、だからこそしっかりと対応していただきたいです。ちなみに Microsoft Clarity の公式ページにもサンプルがあり、弊社カエルコムニスのプライバシーポリシーにも記載しています。もし違和感があればご指摘ください。コピペしていいけど自己責任でね！
なお、Microsoft Clarity の利用規約もちゃんと存在します。英語で長いですが、こういったものこそ ChatGPT に解説してもらうことをオススメします。ポイントは、以下。
- データ収集の許可：Clarity がデータを収集し、解析に使用することに同意が必要です。
- 個人情報の取り扱い：個人を特定可能な情報を収集しない設定を確認してください。
- ユーザー通知：サイト訪問者に対して Cookie や追跡技術の使用を通知し、同意を得る必要があります。
- 法的遵守：GDPR や CCPA などの地域法を守る必要があります。
- 責任の範囲：Microsoft は間接的損害やデータ損失について責任を負いません。
日本では特に、データ収集・個人情報・ユーザー通知の部分が大切ですね。Microsoft Clarity は無料とされていますが、利用規約には「変えることもあるよ」と書かれています。今後、有料プランの可能性はあるかもしれません。
サーバーの設定によっては使えない場合がある
小規模事業者向けの一般的なレンタルサーバーはたいてい問題ありませんが、狙われやすい中〜大規模の企業が使用するようなサーバーは、コンテンツセキュリティポリシー（CSP）が厳密に設定されている場合があります。
特に、上述の改正電気通信事業法によって、CSPを強化したサーバーも少なくないでしょう。その設定によっては、Clarity が使えません。
実際に Clarity を導入しても動かない場合、Chrome なら開発者用ツールから検証して「Content Security Policy」という文言がエラー文に入っていたらCSPが理由です。Microsoft の公式ページ（英語）は以下のとおり。
「What should I do to add Clarity to my CSP?（CSP に Clarity を追加するにはどうすればよいですか?）」の項で対応方法を説明されています。大企業のウェブサイトに Clarity を導入する際には、サーバー管理者の方に依頼する可能性を共有しておきましょう。Google のツールなら問題ないことが多いのですが、Clarity はまだマイナーなツールということでしょうね。
これらがクリアできたら、早速 Clarity に登録してみましょう。
Microsoft Clarity に登録する
Clarity には、「アカウント」と「プロジェクト」という概念があります。全体構造はこんなかんじ。
上記の全体構造にある名称の説明（クリックで開きます）
- アカウント：原則として、人に紐づいているものです。プロジェクトの管理者だけでなく、別のプロジェクトに招待されてメンバーになることもできます。
- プロジェクト：データを集めて見れるものです。Clarity のメイン画面がコレです。
- ウェブサイト：解析対象となるホームページです。
- トラッキングコード：Clarity に訪問者のデータを送るためのプログラムです。
1つのウェブサイトにつき、1つのプロジェクトが対応します。
- Microsoft Clarity は、クロスドメイントラッキングには対応していません。
最初にアカウントを新規登録し、最初のプロジェクトを作成します。Clarity を導入したいウェブサイトが2つ以上ある場合は、プロジェクトを追加していきます。アカウントがあれば、他のプロジェクトにメンバーとして参加できます。
アカウント：Microsoft Clarity にユーザーとして登録
Microsoft Clarity のトップページ（日本語版）にアクセスして、Google、Microsoft、Facebook のどれかで Clarity に登録します。難しいものではないですが、Google アカウントを使った場合の流れの画像を入れてあるので参考にどうぞ。3ステップで終わります。
Google アカウントを使った場合の3ステップ（クリックで開きます）
Gmail にログインできているパソコンで進めることを推奨します。
好きなアカウントを選択
Microsoft、Facebook、Google のどれかをクリック（今回は Google を選びました）
使いたいアカウントを選択
ここに設定されている名前とメールアドレスが、Microsoft Clarity に登録されます。登録後は、Clarity 登録者の名前とメールアドレスを変更できません。
プロジェクト：Microsoft Clarity にウェブサイトを登録する
ユーザー登録が済んだら、そのまま最初の「プロジェクト」を新しく作成し、対象のウェブサイトを登録します。上記の流れでそのまま進んだ方もいると思いますが、日本語で使うには設定を変更する必要があります。画像つきで解説していますので参考にどうぞ。
プロジェクトを新しく作成する3ステップ（クリックで開きます）
サイト名とドメインを登録する
英語の画面になりますが、日本語で使えますので落ち着いて進めましょう。
- Name：ウェブサイト名
- Website URL：ウェブサイトのドメイン（https://を含めない）
- Website industry：ウェブサイトの業種（※）
- 「Financial Services & Insurance（金融サービスと保険）」もしくは「Health & Wellness（健康とウェルネス）」のどちらかを選択した場合、追加の利用規約への同意が必要です。
（参考）センシティブな情報（金融情報や医療情報など）を扱うサイト向けの追加規約
追加規約のポイントは、以下。これは Google が提唱する「YMYL（Your Money or Your Life）」にも関連していると考えられます。同様に Microsoft も慎重に扱っていますので、対応しておきましょう。
- 保証事項
-
- あなたのデータ処理がデータ保護法に準拠していることを保証すること。
- Microsoft Clarity を使用してセンシティブデータを処理しないことを保証すること。
- センシティブデータには、医療情報、健康情報、税情報、非公開個人情報などを含む。
- センシティブデータの定義（以下に限定するものではない）
-
- 米国医療保険携行性と責任に関する法律（HIPAA）およびその規制で定義される保護医療情報
- ワシントン州「My Health, My Data」法や他の州法で定義される消費者健康データ
- カリフォルニア州医療情報機密性法（CMIA）や他の州法で定義される医療情報
- カリフォルニア消費者プライバシー法（CCPA）などで定義されるセンシティブ個人情報
- 米国国税法や他の州法で定義される納税者識別情報または納税者申告情報
- Gramm-Leach-Bliley法や他の州法で定義される非公開個人情報（金融関連情報）
- 公正信用報告法（FCRA）で定義される消費者報告情報または医療情報
- その他のデータ保護法でセンシティブとされる個人データ
- 補償
-
Microsoft Clarity を利用することで規約の違反に起因する請求や訴訟による損害が発生した場合、Microsoft や関係者にその損害を賠償すること。
入力したら［Add new project］をクリックして進みます。
アカウントの設定画面を表示する
英語のままなので、右上のアカウントのアイコンをクリックして、「Manage Account」をクリックします。設定を変更すると毎回この画面に戻るので、慣れるためと思ってポチポチしましょう。
基本設定を日本人向けに変更する
画面を少しスクロールすると「Preferenses（基本設定）」の項目が出てきます。変更するたび STEP2 の画面に戻りますが、赤枠の部分は設定しておくことをオススメします。
- Language（言語）：日本語
- Country（国）：Japan（日本）← 変更しなくてもOK
- Date Format（日付の形式）：yyyy/mm/dd ← 年/月/日
- Start of week（週の開始）：Sunday（日曜日）← お好みで
Language を日本語に変えたあとは、日本語で使いやすくなります。
実際に Clarity を動かすためには「トラッキングコード」というものを使います。これは、ウェブサイトに訪問したユーザーのデータを収集するためのもので、Clarity 導入のキモです。
それでは、トラッキングコードをウェブサイトにインストール（意訳：クラリティをホームページに導入）していきましょう。
Microsoft Clarity の導入方法は3つある
次は、ウェブサイトに訪問したユーザーのデータを Microsoft Clarity で取得するための設定です。
ウェブ制作の知識がある方ならサクッと導入できると思いますが、3つの方法があることを覚えておいてください。最適な方法を選べるといいですね。
- 仕組みがあれば簡単：Clarity のプラグインを使う
- 将来性高めのイチオシ：Google タグマネージャーの Clarity 公式タグを使う
- ウェブ担当者に共有：Clarity のトラッキングコードを直接記述する
仕組みがあれば簡単：Clarity のプラグインを使う
WordPress（ワードプレス）や Wix（ウィックス）など、一般的によく使われているシステム（CMS）には Clarity のプラグインがあります。それを使うと、アカウントやプロジェクトを設定するだけで使えます。
メリット
- システムに対応できていれば一番カンタン
- Clarity のサイトを見に行かなくても管理画面でデータを確認できる
注意点
- CMS 内の機能と連携できるものではない
- プラグインを削除しても、Clarity のアカウントとプロジェクトは残ったまま（データは送られない）
以下では、WordPress の Microsoft Clarity プラグインを使った Clarity の導入方法を画像つきで解説しています。
Microsoft Clarity プラグインを WordPress で使う4ステップ（クリックで開きます）
WordPress のプラグイン新規追加画面で「Microsoft Clarity」を検索
管理画面で「プラグイン」→「新規追加」と進んだところにあります。見つけたら［インストール］ボタンをクリックしてしばらく待ったあと、［有効化］ボタンをクリックしてください。
［Setup Clarity（Clarity のセットアップ）］ をクリックして設定画面に進む
プラグインを正常にインストールできたら、設定画面に進みましょう。画面が変わって以下のような表示が出ますので、［Setup Clarity］をクリックして進みます。
プロジェクトを選択
Microsoft Clarity にログインしていれば、以下のようにプロジェクト選択画面が表示されます。プロジェクトを選んで［続ける］をクリックしましょう。
Microsoft Clarity の画面が表示されれば成功
「プロジェクト ○○ 正常に統合されました」といった表示のあとに、Clarity の画面が表示されれば完了です。WordPress の管理画面から、いつでも確認できますね！
導入できたら「Microsoft Clarity が正常に稼働しているか確認」に進んでください。
将来性高めのイチオシ：Google タグマネージャーの Clarity 公式タグを使う
すでに他のアクセス解析ツールを導入しているなら、Google タグマネージャー（GTM）などの管理ツールでトラッキングタグを管理しているのではないかと思います。
メリット
- すでにGTMを導入済みなら公式タグを入れるだけ
- KPIをカスタムタグとして設定しやすい
注意点
- ある程度専門的な知識が必要
- 変数などの命名ルールなどを整備しておく必要がある
ということで、GTM を使える方なら説明不要だと思いますが、GTM の画面を開かなくてもインストールする方法が公式ページにまとまっていますので、こちらを合わせてどうぞ。トリガーは「All Pages」で本当にええんか？という素朴な疑問は残ります。
導入できたら Clarity の画面に戻り、「Microsoft Clarity が正常に稼働しているか確認」に進んでください。
ウェブ担当者に共有：Clarity のトラッキングコードを直接記述する
特にシステムを入れておらず、Google タグマネージャーも導入していない場合、トラッキングコードをそのまま HTML 内に記述する方法があります。個人的にオススメはしないので、制作の知識がある担当者と相談してください。
メリット
- 柔軟性が高い
- 解析したいページにのみ導入できる
注意点
- ウェブ制作の知識が必要な最終手段
- 解析したいページが多いと工数がかかりかねない
トラッキングコードを取得する3ステップ（クリックで開きます）
セットアップ画面を開く
「設定」→「セットアップ」に「手動でインストールする」の項目があります。ここの［追跡コードを取得する］をクリックして進みます。
Clarity コードをコピー
<script>〜</script>で書かれているトラッキングコードをコピーします。［クリップボードにコピー］ボタンをクリックするだけ。
ウェブサイトの <head>〜</head> 内にペースト
基本的に、位置はどこでも問題ありません。
トラッキングタグを記述したページのみ解析できるため、ウェブサイト内の動線を分析したい場合には、すべてのページに記述する必要があります。
これで、Microsoft Clarity の導入が済んだので、正常に稼働しているかどうかを確認しましょう。
Microsoft Clarity が正常に稼働しているか確認する
データを取得するまでは最大2時間くらいかかりますが、早ければ30分経たずに取得することが多いようです。データを取得して訪問者が現れると、こんなふうに（ほぼ）リアルタイムに表示されます。［すぐに観る］をクリックして進み、レコーディングデータを確認してみましょう。
ただし、数時間経っても自分のアクセスデータすら取得できない場合、以下のような要因が考えられます。Chrome なら開発者用ツールを使うと確認しやすいですよ。
- コンテンツセキュリティポリシー（CSP）の問題
-
サーバー側の設定で Clarity のデータ送信が制限されている可能性があります。このCSPに伴うエラーの解決策は上述していますので、参考にしてください。
- トラッキングコードが正常に入っていない
-
HTMLで導入している場合に起こりやすいミスです。<head>〜</head> 内に <script>〜</script> を差し込みましょう。
- 異なるプロジェクトIDを設定してしまっている
-
複数プロジェクトを管理していると、まれによくあるミスがこれ。単純に、プロジェクトIDのコピペミスということもあります。なお、Clarity は URLにプロジェクトIDが入っているので、設定画面を見なくても確認できます。
GA4との連携
すでに GA4 を導入している方は、ここが気になるポイントかと思います。
GA4 と Clarity それぞれの得意分野
GA4 だけでなく、Google サーチコンソールなどとも合わせると、以下のように対応分野が分かれます。
- GA4
ウェブサイト内のデータを定量的に分析できる。アクセスしたユーザーがどのように行動しているのかの全体傾向を把握して、サイト改善施策の優先順位を決める際に便利。 - Google サーチコンソール
ウェブサイト外（検索結果画面）のデータを定量的に分析できる。どのように認知されているかの全体傾向を把握して、（検索からの）集客施策を検討する際に便利。 - Microsoft Clarity
ウェブサイト内のデータを定性的に分析できる。アクセスしたユーザーがどのように行動しているかの個別傾向を把握して、ページや導線改善施策の優先順位を決める際に便利。 - インタビューやアンケート
ウェブサイト外のデータを定性的に分析できる。アンケートの目的と設計によってさまざまな情報を得られる。
上記の四象限をそれぞれ連携させると、効果的ですよね。
GA4とのシームレスな連携はできない
GA4 と Google サーチコンソールはシームレスに連携できますが、Microsoft Clarity とは同じような連携ができません。
- GA4 のキーイベントを Microsoft Clarity で取得してフィルタに使う → 使えません
- GA4 でつくったカスタムセグメントを Microsoft Clarity で使う → 使えません
- GA4 を使えるユーザーを Microsoft Clarity のチームに同期できる → できません
- GA4 からシームレスに Microsoft Clarity のヒートマップやレコーディングを見る → 見れません
じゃあ何ができるのかというと、GA4の一部のデータを Microsoft Clarity で確認できるだけです。Clarity のフィルタなども有効になりません。
時々、「Microsoft Clarity は GA4 と連携できる！」と伝えている記事もありますが、連携できているといえるかどうかは疑問が残ります。公式も（UA時代の）GA と連携できる（GA4 のセグメントはサポートしてないよ）と言っています。
- Currently, Clarity doesn’t support segments in GA4.
（現在、Clarity は GA4 のセグメントをサポートしていません。）- Clarity doesn’t send playback URL to GA4 as it cannot accept High Cardinality rows.
（Clarity は高基数行を受け入れることができないため、再生 URL を GA4 に送信しません。）Google Analytics4 Integration with Clarity | Microsoft Learnより
今後に期待。
GA4とどのように “連携” させるか
では、GA4 とどのように連携して考えれば良いかというと、「GA4 で得られたパターンを Clarity で深堀りする」のがシンプルかと思います（これをシームレスにできるといいんですけどね……）。これは、先日開催された a2i のセミナーで、JADEの村山さんも話されていました。
セミナー後半の村山氏のセッションでは、より踏み込んだ分析アプローチが提示されました。特に注目すべきは、定量分析（GA4など）と定性分析（Clarity）の組み合わせ方です。「仮説の精度を高める」という視点から、定量データで見つけたパターンをClarityで深掘りする手法が、実例を交えて解説されました。
【活動報告】オンラインセミナー「Microsoft Clarityで深める真のユーザー理解」｜2024/9/25(水) – 活動報告 – アナリティクス アソシエーション
私も、GA4 や Google サーチコンソールを Looker Studio で閲覧できるようにしておき、伸びしろのあるパターンが見えると Clarity で絞り込み、レコーディングを10件くらい観察して背景を確認し、施策に落とし込んでいます。
よく忘れがちになってしまうのは、コンバージョンから目を背けないこと。つまり、シームレスに連携できたとしても目的志向でツールを扱わなければ、わかった気になってしまうだけです。そういったことを念頭に置いて、まずは Microsoft Clarity を楽しんでみてください。
Microsoft Clarity を導入できたら次にやること
データが取れることを確認できたら、ダッシュボードを見てみましょう。このあとの活用は以下の記事にまとめていますので、ひとつずつ確認すれば Clarity の機能をひととおり把握できます。
Microsoft Clarity に関してはよくつぶやいていますので、導入方法や活用について気になることがあれば https://x.com/clarityLabo へお声がけください。
よくある質問と回答
Microsoft Clarity（クラリティ）とは何ですか？
Microsoft Clarity（マイクロソフト クラリティ）は、ウェブサイトの訪問者がどのようにページを操作しているかを分析するための無料ツールです。
ユーザーがページをスクロールする様子や、どこをクリックしているかなどを視覚的に把握できます。これによって、あなたのサイトが使いやすいか、どの部分で改善が必要かがわかりやすくなります。
以下の記事で仮説検証のケースを紹介していますので、参考にどうぞ。
Microsoft Clarity でできることは？
Microsoft Clarityでは、主に以下のようなことができます。
- ヒートマップの確認
ユーザーがどの位置を多くクリックしたり、どこまでスクロールしたかが、色の濃淡でわかります。 - セッション録画の再生
実際のユーザーがあなたのサイト上で行った操作を録画して再生できます。これにより、ユーザーの行動パターンやつまずきポイントを客観的に把握できます。 - フィルター機能
特定のページやデバイスタイプ、参照元などで絞り込んで、ユーザー行動を分析できます。
Clarity 勉強会の第1回で概要をご紹介していますので、こちらもどうぞ。
Microsoft Clarity は有料ですか？
Clarity は基本的に無料で利用できます。初期費用も月額料金はかからず、誰でも自分のウェブサイトに導入して使うことが可能です。
その理由として、Microsoft 社がAI活用を前提にしていることが挙げられます。このスタンスは把握しておきましょう。
Microsoft Clarity を導入するメリット・デメリットは？
メリット
- 無料で使えるため、コストを気にせず導入できる。
- ヒートマップやセッション録画など、ユーザー行動を可視化できる機能が充実している。
- わかりやすいため改善ポイントが明確になり、UI/UXの向上に役立つ。
デメリット
- 他の高度な分析ツールと比べると、機能がシンプル。
- 個別にデータを削除することはできない。
- データを取得できない場合があり、その理由が不明。
Clarity はプライバシーに配慮し、個人を特定できる情報（パスワードやクレジットカード番号など）を記録しないように設計されています。ただし、完全ではないので油断なく確認しておいたほうが良いでしょう。
Microsoft Clarity の利用規約は？
利用規約は、Microsoft の公式サイトで公開されているこちらです。
Microsoft Clarity を削除するには？
Clarity を削除するには、トラッキングコードの削除 → プロジェクトの削除の順でおこないます。
- ウェブサイトに追加した Clarity 用のトラッキングコードを取り除く。
- Clarity の管理画面から、そのサイトのプロジェクトを削除する。
これにより、今後はウェブサイト上でユーザー行動データが収集されなくなります。削除後も念のため、しばらく動作を確認し、データが記録されていないことを確認してください。
Microsoft Clarity を使う前に備えておきたいチェックリスト
上記の内容をふまえ、Microsoft Clarity を導入する前に全体像を知っておくためのポイントを1枚のPDFにまとめました。以下から、ダウンロードしてお使いください（登録不要です）。
- 内容のバージョンアップにより、URLを事前事後の承諾なく更新する可能性があります。
- 共有する場合はPDFのURLではなく、本ページのURLでお願いします。
- 資料の更新状況は、このページでお知らせします。
