Microsoft Clarityの使い方とWordPressへの導入手順｜初期設定・ヒートマップの見方も解説

アナリティクスの数値だけを眺めていても、「なぜ記事が最後まで読まれないのか」「なぜクリックされないのか」という理由は分かりません。

無料分析ツール「Microsoft Clarity」を導入すると、読者の画面上の動きやクリック・スクロールの位置がそのまま可視化できます。

Clarityの登録からWordPressへの設置手順、レコーディングとヒートマップを駆使して改善ポイントを特定する方法を解説します。

この記事で分かること

Microsoft Clarityで確認できる読者の動き
トラッキングコードの設置方法
ヒートマップとレコーディングの基本的な見方

Microsoft Clarityの基本機能と無料分析で把握できる読者行動

Microsoft Clarityは、Microsoftが提供する無料のユーザー行動分析ツールです。

主な機能はレコーディングとヒートマップの2つです。

レコーディング分析｜読者のクリック・スクロール・マウス移動の再現

レコーディング機能では、読者のクリック、スクロール、マウスカーソルの動きを画面上で再生できます。

これはページの構造と操作ログを元に画面を再現する仕組みで、読者のパソコン画面を直接録画しているわけではありません。

レコーディングの仕組み

たとえばボタンを連続で押しているのに画面が切り替わらない場合、リンク切れや動作不良が発生している可能性があるので、実際にアクセスして確認します。

記録一覧はCSVファイルでダウンロード可能。動画ファイルそのものが保存されるわけではない点に注意しましょう。

レコーディングのダウンロード

ヒートマップ分析｜読者のタップ位置とスクロール到達率

ヒートマップは、複数の読者が見せた操作結果をページ上に重ねて視覚化する機能です。

表示種別	確認できる内容	改善への活用例
クリック	クリックされた位置や回数	ボタンが意図通り押されているか確認する
スクロール	ページの各位置まで到達した読者の割合	申込みリンクまで到達しているか確認する
注意	ページ各部で費やされた時間	読者が長く滞在した箇所を確認する

リンクが設定されていないテキストや画像のクリックも検出可能です。

ただし、スクロール到達率が高い場所でも、文章が実際に読まれたかまでは特定できません。

Microsoft Clarityの導入手順・計測確認と初期設定

導入は、プロジェクトを作成してからサイトにトラッキングコードの設置が必要です。

Microsoftは、18歳未満を対象とするサイトやアプリでのClarity使用を禁止しています。

設置前に対象サイトの利用層を確認しておきましょう。

導入の公式案内

アカウント登録と分析対象プロジェクトの作成

Microsoft Clarity公式ページにアクセスし、「サインアップ」ボタンをクリックします。

認証方法を選択し、画面の指示に従ってログインします。

プロジェクト一覧画面で「新しいプロジェクト」をクリックし、「名前」に管理用のサイト名、「WebサイトURL」にサイトURLを入力してください。

「新しいプロジェクトを追加する」を押すとプロジェクトが作成されます。

登録・プロジェクト作成の手順

WordPress公式プラグインを使ってトラッキングコードを設置

ClarityはWordPress公式プラグインを使って、かんたん連携も可能です。

WordPressの管理画面で「プラグイン」＞「新規プラグインを追加」を開き、「Microsoft Clarity」と検索します。

該当プラグインをインストールして有効化し、管理画面に追加されたClarityメニューから「サインイン」をクリックします。

既存のプロジェクトを選択して「次へ」を押すか、新規プロジェクトを作成して連携を完了させます。

WordPressプラグインの公式手順

functions.phpを編集してトラッキングコードを設置

以下のコードを子テーマのfunctions.phpに追加して、トラッキングコードを有効にできます。

青字の部分は自分のトラッキングコードに変更が必要です。

コードは「設定」＞「セットアップ」を選択し、手動でインストールの「追跡コードを取得する」から取得できます。

function add_clarity_code_head() {
    // ログインしている場合は、何もせず処理を終了する
    if ( is_user_logged_in() ) {
        return;
    }
    
    // ログインしていない時だけ出力する
    ?>
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "xxxxxxx");
</script>
    <?php
}
add_action('wp_head', 'add_clarity_code_head', 1);

functions.phpで導入する時の注意点

編集前にバックアップを取る
既存のPHPコードの最後に追記
公式プラグインを導入している場合はこちらの設置は不要（重複設置を避ける）
is_user_logged_in()で管理者を含むログインユーザーを計測対象しないように制御している

導入後の計測確認

コード設置後、次の方法で動作確認しましょう。

Clarityの対象プロジェクトを開き、「レコーディング」で「今日」を選択し、リアルタイム表示で操作が記録されているか確認します。

確認手順は次のとおりです。

WordPressからログアウトした状態で対象記事を開く（シークレットウィンドウで確認がおすすめ）。
シークレットウィンドウでスクロールやリンクのクリックを試す。
Clarity側で「レコーディング」を選択し「今日」を指定する。
ライブユーザーが表示されるか確認する。
記録が表示されない場合
プラグイン利用時は連携先のプロジェクト、手動設置時はコード内のプロジェクトIDを確認する。
functions.phpを修正した場合は、設置したトラッキングコード・ログイン状態・IP除外設定などを確認する。

自身や関係者のアクセスを除外するIPアドレスフィルタ設定

計測確認を終えてからIPアドレス除外設定します。先に除外設定すると、ライブユーザーに自分も表示できません。

前述のfunctions.phpのトラキングコードを使っていれば、ワードプレスのログインしている時はカウントされませんが、ログインしていない時の自分の動きも除外したい場合は、IPアドレスの除外設定を行います。

「設定」内の「IP ブロック」を開き、「IP アドレスをブロックする」をクリックします。

「名前」に判別用の名称を入力し、「現在のIPをブロックする」にチェックを入れて「IPアドレス」を入力して「追加」を押します。

設定が全体へ反映されるまで約15分かかります。

IPアドレス除外機能はIPv4のみ対応。IPv6には対応していません。
スマホ接続や動的IP回線ではIPアドレスが変わるため、完璧に除外はできません。

IPアドレス除外の公式手順

Googleアナリティクス（GA4）との連携設定と注意点

GA4と連携すると、Googleアナリティクスの分析データをClarityの画面上でまとめて確認できます。

ただし、Clarity単体で計測を開始するための必須設定ではありません。

コード設置後、「設定」内の「セットアップ」を開きます。

「Google アナリティクスの統合」項目の「開始する」をクリックしてください。

GA4を管理するGoogleアカウントでログインし、該当するプロパティを選択して保存します。

1つのClarityプロジェクトに連携できるWebプロパティは1つのみです。

Googleアナリティクス連携の手順

個人情報マスク設定と海外アクセス向けのCookie同意対応

マスク機能は、ページ内の個人情報や入力内容を非表示にし、Clarityへデータ送信させないための仕組みです。

マスク対象の内容は送信されず、ほかの操作データの収集されます。

「設定」の「マスク」メニューから変更できます。

モード名	マスクされる範囲
厳密	ページ内のテキスト・表示内容すべて
バランス	数字やメールアドレスなど機密性の高い内容
リラックス	一般的なテキストへのマスク制限を緩める

初期値は「バランス」です。

「リラックス」を選んだ場合でも、入力フォームやドロップダウンリストは保護のためにマスクされます。

会員名や住所が画面に表示されるページでは、該当箇所を個別でマスク指定しましょう。

設定変更は変更後に取得するデータから適用され、過去の記録には反映されません。

マスク設定の公式説明

Cookie同意については、マスク機能とは別に確認が必要です。

2025年10月31日以降、EEA（欧州経済領域）・英国・スイスからのアクセスがあるサイトでは、同意管理ツールやClarityのAPIなどを通じて、同意の状態をClarityへ伝える設定も確認してください。

Cookie同意の公式案内