WordPressに無料ヒートマップ「Microsoft Clarity」を導入する手順｜最短で可視化まで

サイト改善を進めたいと思っても、「どこが読まれているのか」「どこで離脱しているのか」「CTAが押されているのか」が分からないままだと、判断が勘になります。そこで役に立つのがヒートマップです。

今回は、完全無料で使えるMicrosoft Clarityを、WordPressに導入して可視化を始めるまでを、実際の手順に沿ってまとめます。

Microsoft Clarityとは

Microsoft Clarityは、サイト訪問者の行動を可視化できるツールです。具体的には以下が分かります。

• クリックされている場所（クリックヒートマップ）
• どこまでスクロールされたか（スクロール到達）
• 実際の操作の録画（レコーディング）
• イライラクリック、デッドクリックなどの“迷い”の検知

特に便利なのが、録画（Recordings）で実際の操作を見られる点です。数値だけでは気づけない「迷いの瞬間」が見えるようになります。

なぜClarityを選ぶのか（無料ヒートマップの中で強い理由）

無料のヒートマップはいくつかありますが、Clarityは次の理由で導入しやすいです。

• 無料で使える範囲が広い（小規模サイトの実務用途に十分）
• ヒートマップに加えて録画が標準で使える
• 設置がシンプル（1つのスクリプトを貼るだけ）
• WordPressでも問題なく動く

「まず入れて、改善の材料を集める」目的に向いています。

導入前に用意するもの

必要なのはこれだけです。

• Clarityにログインするアカウント（GoogleアカウントでOK）
• 設置したいWebサイトのURL
• WordPress管理画面に入れる権限

手順1：Microsoft Clarityにサインアップする（GoogleアカウントでOK）

Clarityのページにアクセスし、Googleアカウントでサインアップします。
自社サイトの場合は、普段のWeb運用（GA4やSearch Console）と同じGoogleアカウントに揃えると管理が楽になります。

手順2：プロジェクト（サイト）を作成する

ログイン後はサイト追加（プロジェクト作成）の画面が出ます。

• Project name：サイト名（例：自社ドメイン）
• Website URL：計測したいURL（https://〜）
• Category：近いカテゴリでOK

入力したら作成します。

手順3：インストール方法は「手動でインストール」を選ぶ

プロジェクト作成後、「あと少しで完了です」という画面でインストール方法が選べます。通常は以下の3つが出ます。

• Google Tag Manager を使用してインストール
• 手動でインストールする
• NPMを使用してインストールする

WordPressでの導入は、基本的に 「手動でインストールする」一択です。

• GTM：すでにGTMを本格運用している人向け
• NPM：開発者向け（WordPressには不要）
• 手動：計測タグを貼るだけで最短・確実

手順4：追跡コード（計測タグ）をコピーする

「手動でインストールする」を選び、「追跡コードを取得する」を押すと、<script>...</script> の形で計測タグが表示されます。

このコードは 改変せずそのままコピーします。

手順5：WordPressに計測タグを貼り付ける

STORK19は、head にコードを入れるための導線があります。基本は カスタマイズ画面から挿入します。

代表的な導入ルート

WordPress管理画面 → 外観 → カスタマイズ →（解析コード／headタグ／アクセス解析 などの項目）

そこにある 「head内に出力するコード」（または同等の入力欄）に、先ほどコピーしたClarityの<script>を貼り付けて保存します。

貼る場所は headが最優先です。フッター欄にしか貼れない場合でも動くことはありますが、計測の安定性のためにhead推奨です。

手順6：動作確認（必ずやる）

設置後は、次の順で確認すると早いです。

1. 自分でサイトを1〜2ページ閲覧する（別タブでOK）
2. Clarity管理画面に戻る
3. Recordings を確認する

反映はすぐの場合もあれば、初回は少し時間がかかる場合もあります。
数分〜最大で1〜2時間程度待つと、録画が表示され始めます。

うまく計測されない時に疑うポイント

導入直後にデータが来ない場合、よくある原因は以下です。

キャッシュ・最適化でJavaScriptが遅延されている

キャッシュ系や最適化系プラグイン（JS遅延、結合、圧縮）が入っていると、Clarityのタグが遅延されることがあります。
この場合は、Clarityのスクリプトを「遅延除外」に入れると改善することが多いです。

貼り付け場所がテキスト扱いになっている

「HTMLを無効化する欄」「ウィジェットのテキスト欄」などに貼ると、スクリプトとして動かないことがあります。
必ず「headに出力するコード」系の欄へ貼ります。

導入できたら、最初に見るべきポイント

Clarityは機能が多いですが、導入直後はここだけで十分です。

• 上位のページ：まず見られているページを把握する
• Heatmaps：クリックされている場所、読まれている範囲を確認する
• Recordings：迷い・停止・離脱の瞬間を短時間で掴む（10本だけ見る）

特に、イライラクリックやデッドクリックが多いページは、ユーザーが「押せると思って押している」可能性が高く、改善余地が見つかりやすいです。

まとめ：無料でも“改善の根拠”が手に入る

Clarityを入れるだけで、「なんとなく」ではなく根拠のある改善ができるようになります。

• どこが読まれているか
• どこで止まるか
• どこで迷うか
• どこで離脱するか

この4つが見えるだけで、ページ改善の精度が上がります。まずは導入し、主力ページ（サービスページや問い合わせ導線）から確認していくのがおすすめです。

中小企業関連記事