Studioで作成したサイトにヒートマップを導入する方法｜Microsoft Clarityを使った実装ガイド
Studioで作ったWebサイトにMicrosoft Clarityを設置して、クリック・スクロールのヒートマップを確認する方法を紹介。ユーザー行動を"見える化"し、成果につながる改善施策に活かせます。
Webサイトを運営していると、「ユーザーがどこをクリックしているのか？」「どの部分までスクロールして読んでいるのか？」が気になりますよね。そんな時に役立つのがヒートマップツールです。今回は無料で使えるMicrosoft Clarityを利用して、Studioで作成したサイトにヒートマップを導入する方法を紹介します。
1. Microsoft Clarityとは？
Microsoft Clarityは、マイクロソフトが提供している無料のユーザー行動解析ツールです。
- クリックの多い場所を可視化（クリックヒートマップ）
- どこまでスクロールされたかが分かる（スクロールヒートマップ）
- ユーザーの操作を録画して確認（セッションリプレイ）
といった機能を備えており、サイト改善に大いに役立ちます。Google Analyticsと組み合わせて使うのもおすすめです。
2. Clarityアカウントを作成する
-
Microsoft Clarity公式サイトにアクセス
-
いずれかの方法（Microsoft、Google、Facebook）でサインアップ
Clarityのサインアップ画面（Microsoft/Facebook/Googleでサインイン） -
「新しいプロジェクトを追加」からサイト名・ドメインURL・サイトの業種を登録
新しいプロジェクトを追加するダイアログにサイト名とURLを入力した状態 -
インストール方法の中から「手動でインストールする」を選択
Clarityのインストール方法選択画面で「手動でインストールする」を選ぶ -
Clarity専用のトラッキングコードが発行されます。
3. Studioにトラッキングコードを埋め込む
Studioで作成したサイトにClarityのトラッキングコードを設置します。
手順※Studioの有料プランの契約が必要です。
- Studioにログイン
- 対象のサイトを選びデザインエディタから「設定」→「カスタムコード」へ移動
- Clarityから発行されたコードを
<head>内の末尾に追加
<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", "XXXXXXXXXX（あなたのトラッキングコード）");
</script>
※「XXXXXXXXXX」の部分は自分のClarityプロジェクトIDに置き換えます。保存後、サイトを公開すれば設定完了！
4. 正しく動作しているか確認する
Clarityの管理画面に戻り、サイトにアクセスしてみましょう。数時間〜1日程度で、クリックやスクロールのヒートマップが反映されます。
（※導入直後はデータが少ないため、一定のアクセスが集まってから確認すると見やすいです）
5. 活用方法のヒント
- ファーストビューのクリック分布 → CTAボタンが目立っているか確認
- スクロールヒートマップ → ユーザーがどこで離脱しているかを把握
- セッション録画 → ユーザーが迷っている箇所や操作を確認
これらをもとに、レイアウト変更・CTA配置改善・コンテンツ追加など、改善施策に活用できます。
まとめ
Studioで作成したサイトにMicrosoft Clarityを導入すれば、ユーザー行動を直感的に把握できるヒートマップが簡単に使えます。
- Clarityに登録
- トラッキングコードを取得
- Studioのカスタムコードに貼り付け
- サイト公開＆データ確認
というシンプルな流れなので、まだ導入していない方はぜひ試してみてください。