サイト改善を進めたいと思っても、「どこが読まれているのか」「どこで離脱しているのか」「CTAが押されているのか」が分からないままだと、判断が勘になります。そこで役に立つのがヒートマップです。
今回は、無料で使える範囲が広いMicrosoft Clarityを、WordPressに導入して可視化を始めるまでを、実際の手順に沿ってまとめます。
ヒートマップを入れた後、どう改善すればよいか迷っている方へ
Microsoft Clarityを導入すると、クリックされている場所、スクロールされている範囲、迷っている動きなどを確認しやすくなります。
ただし、データを見るだけでは、どのページをどう直すべきか判断しにくい場合もあります。
アクセス解析やヒートマップを確認しながら、ホームページの導線やCTA、問い合わせまでの流れを整理することも可能です。
ホームページ改善・運営サポートについて相談する
ホームページ運営サポートを見る
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推奨です。
タグの貼り付けに不安がある場合
Clarityの計測タグは、貼る場所を間違えると正しく動かないことがあります。
また、キャッシュ系プラグインや最適化設定によって、計測が遅れたり、意図した通りに記録されない場合もあります。 WordPressのテーマ設定、GTM、キャッシュ設定などを確認しながら、無理のない形で導入することも可能です。
手順6：動作確認をする
設置後は、次の順で確認すると早いです。
- 自分でサイトを1〜2ページ閲覧する（別タブでOK）
- Clarity管理画面に戻る
- Recordings を確認する
反映はすぐの場合もあれば、初回は少し時間がかかる場合もあります。
数分〜最大で1〜2時間程度待つと、録画が表示され始めます。
うまく計測されない時に疑うポイント
導入直後にデータが来ない場合、よくある原因は以下です。
キャッシュ・最適化でJavaScriptが遅延されている
キャッシュ系や最適化系プラグイン（JS遅延、結合、圧縮）が入っていると、Clarityのタグが遅延されることがあります。
この場合は、Clarityのスクリプトを「遅延除外」に入れると改善することが多いです。
貼り付け場所がテキスト扱いになっている
「HTMLを無効化する欄」「ウィジェットのテキスト欄」などに貼ると、スクリプトとして動かないことがあります。
必ず「headに出力するコード」系の欄へ貼ります。
計測タグやアクセス解析の設定でつまずいた方へ
ClarityやGA4、GTMなどの計測タグは、設置できたように見えても、実際にはデータが取れていない場合があります。
キャッシュ、JavaScript遅延、タグの貼り付け位置、GTMとの重複など、確認すべき点が複数あります。 現在のWordPressや計測設定を確認しながら、どこで止まっているかを整理することも可能です。
計測タグ・アクセス解析について相談する
ホームページ運営サポートを見る
導入できたら、最初に見るべきポイント
Clarityは機能が多いですが、導入直後はまずはここから見ると分かりやすいです。
- 上位のページ：まず見られているページを把握する
- Heatmaps：クリックされている場所、読まれている範囲を確認する
- Recordings：迷い・停止・離脱の瞬間を短時間で掴む（10本だけ見る）
特に、イライラクリックやデッドクリックが多いページは、ユーザーが「押せると思って押している」可能性が高く、改善余地が見つかりやすいです。
データを見た後、どこを直すか整理したい方へ
Clarityでクリックやスクロール、レコーディングを確認できるようになると、ページ内の迷いどころや改善候補が見えやすくなります。
ただし、すべてを一度に直そうとすると、かえって作業が進みにくくなることがあります。
まずは、問い合わせボタン、料金ページへの導線、サービスページの見せ方、スマホでの読みやすさなど、優先順位を決めて改善していくことが大切です。
ホームページ改善・運営サポートを見る
ホームページリニューアルを見る
まとめ：Clarityは、ホームページ改善のきっかけになります
Microsoft Clarityを導入すると、どこが読まれているか、どこで止まっているか、どこで迷っているかを確認しやすくなります。
ただし、データを見るだけでは改善は進みません。問い合わせにつながる導線、CTAの位置、スマホでの読みやすさ、ページの見せ方など、何から直すかを整理することが大切です。
Clarityやアクセス解析を見ながら、今のホームページをどう改善するか、リニューアルすべきか、運営サポートで少しずつ整えるかを相談することも可能です。
ホームページ改善について相談する
ホームページ運営サポートを見る
ホームページリニューアルを見る
ホームページ改善に関連するページ
ホームページ運営サポートを見る
ホームページリニューアルを見る
自分に合う進め方を整理したい方はこちら
制作会社を変える前に確認したい方はこちら
Googleフォームの考え方を見る
フォーム悪用・謎のメールの対策を見る