ヒートマップは、入れただけではサイトは良くなりません。役に立つのは「このページのここで読者がつまずいているのでは」という仮説を確かめ、直した結果をもう一度確かめる道具として使ったときです。この記事では、WordPress へのヒートマップツールの入れ方（プラグインと子テーマの2通り）、自分のアクセスを除外する方法、ヒートマップの読み方、改善から検証までの進め方を、Microsoft Clarity を例に説明します。
ヒートマップでわかること・わからないこと
ヒートマップツールの多くは、次のような機能を持っています。
- クリックヒートマップ：ページのどこがクリック（タップ）されたかを色の濃さで示す
- スクロールヒートマップ：ページのどの位置まで、どれくらいの割合の訪問者が読み進めたかを示す
- セッション録画：個々の訪問者の画面操作を、個人を特定しない形で再生する
- 操作の兆候の検出：同じ場所を何度も素早くクリックする、反応しない場所をクリックする、といった行動を拾い出す
一方で、ヒートマップは「なぜそうしたか」までは教えてくれません。クリックが少ないボタンは、見つけにくいのか、そもそも必要とされていないのかで、直し方が正反対になります。数字を見たら、GA4 などのアクセス解析や、実際にページを操作した印象と合わせて解釈することが大切です。
ツールを選ぶ観点
WordPress でよく使われるヒートマップツールには、Microsoft Clarity や Hotjar などがあります。料金体系や機能の範囲はサービスごとに異なり、変わることもあるため、導入前に公式サイトで確認してください。選ぶときは次の点を比べると判断しやすくなります。
- 計測できるページビューやセッション録画の上限
- データの保存期間
- 入力欄や個人情報の自動マスキングの有無と設定方法
- GA4 など、ほかの解析ツールとの連携
- 管理画面の言語や、チームでの共有のしやすさ
この記事では、WordPress 用の公式プラグインがあり、仕組みを確認しやすい Microsoft Clarity を例に進めます。内容は執筆時点（2026年10月現在）の情報で、画面や機能の名称は変わることがあります。
導入方法1：公式プラグインを使う
Clarity には、Microsoft が提供する WordPress プラグインがあります。プラグインの新規追加画面で「Microsoft Clarity」を検索し、提供元が Microsoft であることを確認してから入れてください。有効化後、プラグインの画面から Clarity のアカウントに接続し、プロジェクトを作成または選択すると、計測用のタグがサイトに出力されます。
プラグインを使う利点は、コードを触らずに済むことと、テーマを変更してもタグが消えないことです。ただし、ログイン中の管理者を計測から外す機能があるかどうかはバージョンによって異なるため、次の方法と比べて選んでください。
導入方法2：子テーマでタグを出力する
管理者や編集者のアクセスを計測から外したい場合は、子テーマの functions.php でタグを出力する方法が管理しやすくなります。親テーマの functions.php に書くと、テーマの更新で消えてしまうため、子テーマを使います。編集前には functions.php のバックアップを取ってください。
<?php
// 子テーマの functions.php
add_action( 'wp_head', function () {
// 投稿を編集できるユーザー（管理者・編集者・投稿者など）は計測しない
if ( current_user_can( 'edit_posts' ) ) {
return;
}
$project_id = 'your-project-id'; // Clarity の設定画面に表示されるプロジェクトID
?>
<script>
(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", <?php echo wp_json_encode( $project_id ); ?>);
<?php if ( is_singular() ) : ?>
clarity("set", "post_type", <?php echo wp_json_encode( get_post_type() ); ?>);
<?php endif; ?>
</script>
<?php
} );タグの中身は、Clarity の管理画面で表示されるインストール用コードと見比べ、違いがあれば管理画面のコードに合わせてください。最後の clarity("set", ...) は、カスタムタグという機能で投稿タイプを記録する例です。記事ページと固定ページを分けて分析したいときに使えます。
プラグインと子テーマの両方でタグを出すと二重計測になるため、どちらか一方にします。また、Google タグマネージャーを使っている場合は、そちらに追加する方法もあります。
設置後は、ログアウトした状態でページを開き、開発者ツールの Network パネルで clarity.ms への通信が発生していることを確認します。管理画面に最初のデータが表示されるまでには、しばらく時間がかかることがあります。
プライバシーと表示速度への配慮
セッション録画は、訪問者の操作をかなり詳しく記録します。Clarity は入力欄などの内容を初期設定でマスクする仕組みを持っていますが、マスクの範囲は設定で変えられるため、問い合わせフォームや会員ページで個人情報が映り込まないかを確認してください。特定の要素を記録から外す設定も用意されています。
あわせて、プライバシーポリシーに解析ツールの利用と送信される情報を記載します。日本では、事業の形態によって電気通信事業法の外部送信規律への対応が求められる場合があり、海外の訪問者が多いサイトでは同意の取得が必要になる地域もあります。
表示速度への影響も確認します。タグは非同期で読み込まれますが、外部スクリプトが増えることに変わりはありません。導入前後で PageSpeed Insights や Search Console のウェブに関する主な指標を比べ、INP などが悪化していないかを見ておくと安心です。
ヒートマップの読み方と改善の進め方
対象ページを決める
すべてのページを眺めても改善にはつながりません。GA4 でアクセスが多いのに次のページへ進まれにくいページ、問い合わせや購入の直前にあるページなど、改善の効果が大きいページから選びます。
パソコンとスマートフォンを分けて見る
画面の幅が違えばレイアウトも変わるため、デバイスを混ぜたヒートマップは解釈を誤らせます。まずはアクセスの多いデバイスから見ていきます。
よくあるパターンと打ち手
- スクロールが早い段階で大きく落ちる：冒頭で結論や記事の全体像が伝わっていない可能性があります。導入文を短くし、読者が知りたい答えを上に移します
- リンクではない画像や太字がよくクリックされる：読者がそこをリンクだと思っています。実際にリンクにするか、リンクに見えない装飾に変えます
- 目立たせたいボタンがほとんどクリックされない：位置が深すぎる、文言がわかりにくい、周りの要素に埋もれている、などを疑います
- 同じ場所の連続クリックや、反応しない場所のクリックが多い：表示の崩れや、JavaScript のエラーで操作できなくなっている可能性があります。セッション録画で実際の操作を確認します
直した後に検証する
改善を公開したら、変更日を記録し、同じ条件（同じページ、同じデバイス、同程度の期間）でヒートマップと GA4 の数値を比べます。季節やキャンペーンの影響で数字が動くこともあるため、前後比較だけで判断しにくい場合は、A/Bテストで2つの案を同時に比べる方法が向いています。
データ量が少ないうちは、色の濃淡が偶然のばらつきに左右されます。アクセスの少ないページでは、期間を長めにとってから判断してください。
まとめ
- ヒートマップは仮説を確かめる道具。GA4 などの数値と合わせて「なぜそうなったか」を考える
- WordPress への導入は、公式プラグインか子テーマの functions.php のどちらか一方で行う
- 管理者や編集者のアクセスを計測から外すと、データの質が上がる
- セッション録画のマスキング設定とプライバシーポリシーを確認し、表示速度への影響も測る
- パソコンとスマートフォンを分けて見て、改善後は同じ条件で比べて効果を検証する