この記事の目次Clarityを設置する前に決めること1．プロジェクトと設置経路を確認する2．公開前に同意とマスキングを設定する3．設置と受信を別々に確認する4．最初のヒートマップを作るAIへの依頼と完了条件

Clarityを設置する前に決めること

Microsoft Clarityはヒートマップやセッション録画で操作を確認するツールです。この記事は公式資料に基づく導入手順です。実アカウントの新規作成、設置、同意動作、録画の受信は今回未検証で、画面キャプチャーを装った画像は掲載していません。自分のサイトで下記の確認を終えるまで導入完了とは扱わないでください。

対象サイトを管理する権限、コードを配置できる担当、Clarityプロジェクトの管理者、同意管理の担当を用意します。対象URL、除外する画面、テスト環境、確認日時をLPO観測票へ記入します。Microsoftの設置資料では18歳未満を対象にしたサイト・アプリには使用しないよう案内されています。利用条件を設置前に確認してください。

1．プロジェクトと設置経路を確認する

  1. Clarityへ自分のアカウントでサインインし、対象サイトのプロジェクトを作成・選択します。既存プロジェクトがある場合は重複作成しません。
  2. Settings → Setupを開きます。サイト名と対象URLが合っているか確認します。
  3. 手動設置の場合はGet tracking codeから、そのプロジェクト固有のコードを取得します。
  4. テスト用のサイト共通headへ配置する変更を準備します。CMSプラグイン・GTM等からすでに入っていないか点検してください。

ここでは手動設置を基準に説明します。コードは公式画面から取得し、他人のプロジェクトIDを流用しません。GTM連携など別経路を選ぶ場合も、1つの設置経路にそろえて二重配信を防ぎます。公式の設置手順

2．公開前に同意とマスキングを設定する

本番へコードを配信する前に、対象地域と自社の方針に沿って同意を管理します。ClarityのConsent Modeをプロジェクト設定で有効にし、対応するCMPまたは公式Consent APIで利用者の選択を伝える構成を担当者と確認してください。拒否・承諾・撤回をそれぞれ試し、想定したCookieと送信の状態になるか確認します。Cookieの設定だけを見て全データ送信が止まったと判断しないでください。Consent ModeとConsent Management

Settings → Maskingでモードと対象要素を確認します。開始時に広く隠し、必要性と安全性を確認して調整する方針が扱いやすくなります。入力以外にも氏名の表示欄、購入履歴、会員用の案内、URLのトークンなどを点検します。マスキングを外して入力内容を観察する運用にはしません。

<section data-clarity-mask="true">
  <p>ここには会員ごとに変わる情報を表示する想定</p>
</section>

これは秘匿対象の指定例です。全体の同意・URL・CSS等の確認を置き換えません。マスキング変更は過去の録画には遡及しないため、収集前に確認します。公式のマスキング手順

3．設置と受信を別々に確認する

  1. テスト環境でコードを配置し、許可されたテスト操作を行います。本番プロジェクトへ試験データを混ぜない方針を決めてください。
  2. ブラウザーの開発者ツールのNetworkでClarity関連の読込・collect送信を確認します。コードがHTMLにあるだけでは受信成功とはしません。
  3. 対象プロジェクトのDashboard・Recordingsで、テストのURL・時刻・端末が対応する記録を探します。
  4. テスト用の値が意図どおり隠れているか、操作と表示が対応するかを確認します。実顧客データで秘匿の成否を試しません。
  5. 本番公開後も限定した操作で再確認し、公開日時と担当を記録します。

データが出なければ、対象プロジェクト→設置漏れ・重複→対象ホスト→同意→ブラウザーのブロックやCSP→管理画面の条件の順に点検します。ブロックを回避して利用者の選択を無効にするのではなく、欠測として扱います。ClarityとGA4の収集条件は異なるため、件数が必ず一致するとは考えません。

4．最初のヒートマップを作る

Heatmapsを開き、対象URLと期間・端末を指定します。クリックとスクロールを別に観測し、どの版の画面か、対象件数はいくつかを残します。録画では操作の前後を確認し、画面の外にある動機や満足度は推測と区別します。第三者iframeやCanvas等で観察できない領域もあるため、記録がないことを操作なしと扱いません。

架空の記録例：「モバイル・改訂後の料金LP・CTA付近の操作を確認。フォームの失敗理由は未確認」。読み方はヒートマップのまとめを参照します。

AIへの依頼と完了条件

対象サイトの構造、設置経路、同意の設計、マスキング対象、テスト記録を渡します。
設置・送信・受信・秘匿の確認を分け、不足したテストを示してください。
個人情報や認証情報を要求せず、未実施を完了とみなさないでください。

公式仕様と実際の設定を人が照合します。導入完了は、受信だけでなく同意と秘匿、対象・非対象環境、表示への影響を確認し、停止方法を引き継げた状態です。停止は設置経路のコード・タグ配信を止め、反映後の送信を確認します。改善効果の評価はLPO対策で別に行います。

AI支援で制作。資料確認日：2026年10月6日。次回確認予定：2027年1月6日。Clarityの実アカウント操作・設置・録画受信、ABテストと実サイトの改善効果測定、実務者監修、第三者再現は未実施です。記入例・数値例は架空の教材です。改善効果を保証するものではありません。