Microsoft Clarityの使い方｜GTMでの設定・ヒートマップ分析を画像で解説

こんにちは、中都です。

サイトにアクセスは来ているのに、問い合わせにつながらない。そんなときは、Clarityで「どこが押され、どこまでスクロールされ、途中で何が起きたか」を調べると、改善の候補を具体的にできます。GTMを使った導入から、ヒートマップ・録画・AI要約の読み方まで、一緒に見ていきましょう。

こんなことで困っていませんか？Clarityで分かること

• GA4でアクセス数は見ているけれど、ページのどこを直せばよいか分からない。
• 申し込みボタンが押されない。文言が悪いのか、そもそも見られていないのか判断できない。
• ユーザーの動きを調べたいけれど、ヒートマップに予算をかけにくい。

この記事では、Clarityを自社サイトへ導入し、1ページのヒートマップと録画から、最初に試す改善案を1つ作るところまで進めます。「クリックされていない」で終わらず、ボタンの位置や直前の説明など、次に確かめる場所を見つけましょう。

GA4の数字と、Clarityの行動を合わせて見る

GA4は、どこから来た人が、どのページを見て、どれだけ成果につながったかを数字で調べるのに向いています。Clarityでは、ページの中で起きているクリックやスクロール、操作の流れを見ます。

たとえば、GA4で問い合わせの少ないページを見つけたら、Clarityで「ボタンまで届いているか」「押す前に何を見ているか」を調べます。ただし、クリックや滞在だけでユーザーの気持ちまでは分かりません。改善の仮説を作り、変更後の成果と合わせて判断します。

Clarityは、公式の料金案内でも無料とされています。これだけの行動データを無料で見られるのは、やっぱりすごいですよね。

Clarityを導入する前に準備するもの

ここでは、GTMがすでに設置されている自社サイトにClarityを追加します。次の3つを用意してください。

• Clarityへのサインインに使うアカウント
• 計測するサイトのURL
• 対象のGTMコンテナを公開できるGoogleアカウント

GTMがまだ入っていなければ、先に設置するか、Clarityのセットアップ画面にあるWordPressなどの連携方法を使ってください。サイトの管理会社がタグを運用している場合は、対象コンテナと公開する変更を合わせておきましょう。このあと行う「作成と発行」は、タグの公開を伴います。

また、Clarityの公式案内では、18歳未満を対象にしたサイト・アプリでの利用を避けるよう案内されています。会員情報などが表示されるページは、計測前にマスク設定も確認してください。利用開始の公式ガイドを確認してから進めます。

GTMでClarityを設定する手順

以下の実演画像は、元動画の公開時点の画面です。表示名や配置が変わっている場合は、併記した英語名と公式ガイドを手がかりに進めてください。

1. サインインして新しいプロジェクトを作る

Clarity公式サイトを開き、「サインアップ」を押します。画面に表示されるサインイン方法を選び、認証を終えるとプロジェクト一覧が開きます。

「新しいプロジェクト」を押し、プロジェクト名と計測するWebサイトのURLを入力します。「プロジェクトを追加」を押して、セットアップ画面へ進めたら作成完了です。プロジェクト名は、自分が対象サイトを見分けられる名前にしましょう。

2. Googleタグマネージャーを接続する

Clarityの「設定」→「セットアップ」で、Googleタグマネージャーの「セットアップの開始」を選びます。英語表示ではSettings → Setup → Google Tag Managerです。

接続のボタンを押し、GTMを管理しているGoogleアカウントで認証します。Clarityが求めるGTMの権限を確認して許可し、戻った画面で対象のGTMアカウントとコンテナを選びます。

複数サイトを扱っている場合は、今回のURLに設置したコンテナかを確かめてください。

3. タグを発行し、データが届くところまで確認する

対象が正しいことを確かめてから「作成と発行（Create and publish）」を押します。Clarityのセットアップ画面に接続済みの状態が出たら、GTM側でもMicrosoft Clarityのタグと公開されたバージョンを確認します。公式のGTM導入手順にも、この発行操作が含まれます。

GTMが入っていれば、コードを自分で書かずにここまで設定できます。もう、めちゃめちゃ楽ですよね。

設定がつながっただけで終わらず、自分で対象サイトを開き、ページ移動やクリックをしてからClarityのデータを確認しましょう。対象サイトのセッションが記録され、録画を開ければ、計測できていることを確かめられます。データの反映には時間がかかる場合があります。

データが出ないときは、GTMの公開状態、設置したサイトとコンテナの組み合わせ、ブラウザの計測ブロック、同意設定を順に確認します。EEA・英国・スイスからの訪問については、有効な同意シグナルがないと録画やヒートマップが制限される場合があります。該当するサイトはMicrosoftの同意設定の案内も確認してください。

最初にマスクとフィルターを設定する

個人情報が表示されるページはマスクする

購入完了ページやマイページに名前などが表示されるサイトでは、「設定」→「マスク（Masking）」を開きます。標準のBalancedは数字やメールアドレスなどを対象にしますが、名前を含むすべての情報を必ず隠せるとは限りません。テキスト全体を隠すStrictや、特定の要素を指定するマスクを検討します。

公式仕様では、入力欄とドロップダウンはどのモードでもマスクされます。設定変更は新しい録画に適用され、過去の録画にはさかのぼりません。変更後の録画で、隠したい部分が隠れていることまで確かめましょう。詳しくはマスクの公式ガイドを参照してください。

期間・URL・デバイスを絞る

分析では、最初からサイト全体を眺めるよりも、「このページのスマートフォンでの使われ方を知りたい」と対象を決めると進めやすいです。上部のフィルターで期間と訪問URLを指定し、デバイスをモバイルなどに絞ります。

PCとスマートフォンではレイアウトが違うので、分けて見ます。毎回使う条件は「セグメント」として保存しておくと、次回も同じ条件で比較できます。以下の録画とヒートマップの操作例には、Clarity公式のデモプロジェクトを使っています。

レコーディングで、1人の操作をたどる

「レコーディング」を開き、条件を絞った一覧から1件選んで再生します。スマートフォンならタップとスクロール、PCならマウスの動きなどをたどれます。これは、計測した操作を再現するもので、訪問者のカメラ映像や視線を録画するものではありません。

僕が面白いと感じるのは、「ここを押すんだ」「この辺りを行ったり来たりするんだ」という動きが見えるところです。ページ全体の傾向というより、1人の行動を深掘りする使い方に向いています。

たとえば、同じ場所を何度も押している録画があっても、それだけでボタンの故障とは断定できません。押していた場所と実際のサイトの動作を照らし合わせ、別の録画でも同じ動きがあるかを見ます。「観察した操作」と「考えられる理由」を分けてメモすると、修正の判断に使えます。

ヒートマップで、ページ全体の改善候補を探す

「ヒートマップ」を開き、調べたいURLを選びます。期間とデバイスを合わせたら、まずクリック、次にスクロール、最後にアテンションを切り替えてみてください。僕がよく使うのは、クリックとアテンションです。録画が1人の流れを見る機能なのに対し、ヒートマップでは条件に合う複数の訪問をまとめて見ます。

クリック：押されている要素を知る

クリックのヒートマップでは、押された位置が色で示され、左側で要素ごとのクリックを確認できます。申し込みボタンだけでなく、メニューや目次なども見てみましょう。

僕がよくやるのは、クリックされているメニューや記事の見出しを、ページの上の方へ持ってくることです。探している人が多そうな情報へ、早くたどり着けるようにするためです。

ただ、クリックが多い理由は「興味がある」だけとは限りません。リンクに見えるのに反応しない場所が押されていることもあります。色の濃さだけで結論を出さず、実際の要素と録画を見ます。

スクロール：必要な情報まで届いているかを知る

スクロールの表示へ切り替えると、ページのどの位置まで到達しているかを確認できます。申し込みボタンや料金説明が下の方にあるなら、そこまで届く人がどれくらいいるかを見てください。

ボタンが押されないとき、文言を変える前に「そもそもボタンの位置まで届いていない」という可能性を調べられます。上まで移動する、途中にも導線を置くといった候補を考え、変更後に同じ条件で見直します。

アテンション：時間を使っている場所を知る

アテンションマップでは、ページの各部分に費やした時間を色で確認できます。比較表やサービス説明など、時間をかけて見られていそうな場所を探してみましょう。

アテンションは視線計測ではありません。赤いから文章を理解した、緑だから読んでいない、とまでは言えません。Microsoftの公式説明でも、各部分での滞在時間を示す機能とされています。クリックや録画と合わせて、見せる順番や説明を変える候補にします。

AI要約を使い、確認する録画を絞る

録画を1件ずつ見るのは、数が増えると大変です。Clarityには、複数の録画をまとめるAI機能があります。「レコーディング」の右上にある「レコーディングを要約する（Summarize Recordings）」を選び、対象を指定して要約を作ります。

現在の公式手順では、一覧の上位10件をまとめる方法と、自分で録画を選ぶ方法があります。先にURLやデバイスで絞ると、調べたいページの動きをまとめやすくなります。

うまくいった操作と次に確認したい点までまとめてくれるのは、めちゃめちゃいいです。

ただし、AIは行動を誤って解釈することもあります。気になる指摘は、要約内の参照先から元の録画を開いて確かめてください。要約を読んだだけでサイトを修正するのではなく、見るべき録画を選ぶために使うのがおすすめです。

このあと、観察した内容から改善案を1つに絞ります。調べるページ選びやGA4の集計もAIに任せたい方は、末尾のSynapse MCPの使い方も参考にしてください。

まず1ページで、改善仮説を1つ作ってみる

最初は、成果につながってほしいページを1つ選べば十分です。スマートフォンに絞ってヒートマップを見て、気になる場所の録画を開き、「何を変えて、何で判断するか」を1つ決めます。

たとえば、申し込みボタンの位置まで届く人が少なければ、途中へのボタン追加が候補になります。ボタンまでは届いているのに押されないなら、直前の説明やボタンの文言を見直す候補が出ます。どちらも仮説なので、変更後はGA4の成果指標とClarityの行動を合わせて確かめましょう。

Clarityで自分が見た内容を、AIに整理してもらうこともできます。次の例では、観察したことを自分で書き込みます。媒体への接続は不要です。

このページについて、Clarityで観察した内容を整理してください。
対象ページ：［URL］
期間・デバイス：［対象期間／モバイルなど］
クリック・スクロールで気づいた点：［観察したこと］
録画で確かめた操作：［観察したこと］

観察事実と推測を分け、改善案を1つ提案してください。
その案が正しいか判断する指標と、追加で確認したいことも挙げてください。
分からないユーザー心理や成果は、推測で埋めないでください。

僕は、ユーザーが実際にどう動いているかを見ながら改善案を考えられるところに、Clarityの面白さを感じています。最初から全部の機能を使おうとせず、1ページを見て、1つ試すところから始めてみてください。

GA4の集計も、Synapse MCPならAIに自然な言葉で聞けます

ここまで、Clarityでページ内の行動を調べる方法を紹介しました。一方で、「そもそも、どの記事を調べるべきか」「先月よりアクセスが増えたか」を知るには、GA4の数字も使いたくなります。

毎回レポートの項目を選び直したり、CSVを添付し直したりするのが大変なら、私たちが提供するSynapse MCPも使ってみてください。GA4をClaudeやChatGPTにつなぐことで、探索レポートの作り方を知らなくても、PVの比較やページ別集計を自然な言葉で頼めます。

たとえば、こんなことを聞けます

GA4とAIの接続を済ませたら、普段の言葉で尋ねてみてください。たとえば、こんな集計から始められます。

そのまま試すなら、次のように期間や出力形式を添えると、返ってきた数字を確かめやすくなります。以下は質問例です。

先月のPVと今月のPVを比較して。
今月1日から昨日までと、先月1日から同じ日数分を比べてください。
そろえられる日数で比較し、採用した開始日・終了日を明記してください。
それぞれのPV、増減数、1日あたりのPVを表にしてください。

記事だけを比べるときは、質問例の［ ］を、自分のサイトの記事URLに共通する部分へ置き換えます。

先月、よく読まれた記事を教えて。
記事のURL範囲は［自分のサイトの記事URLの共通部分］です。
取得できた記事をPVの多い順に、記事名・URL・PVの表にしてください。
対象期間と取得できた範囲も示してください。
全記事のデータがそろわない場合は、全体の順位として扱わないでください。

ここでの「人気」はPVの多さです。問い合わせへの貢献とは分けて考えます。AIの回答でも、実際にどの期間・どの記事を取得したかを見ておきましょう。

数字が返ってきたら、「日別のグラフにして」「どのページからClarityで見ていけばよさそう？」と、同じ会話で続けられます。GA4で調べるページを選び、Clarityでそのページの使われ方を見る流れです。

この実演では、数値の取得に続けて「GA4のデータをグラフ化して」と頼んでいます。表を別のツールへ貼り直さず、会話を続けてグラフまで作れるわけです。毎回CSVを用意せず、そのまま追加の質問もできる。控えめに言って、便利でしかないです。

具体的な使い方は、GA4データの取得・グラフ化・レポート作成の実演記事でも紹介しています。

Clarityの集計も同じAIで扱いたい場合は、Clarityの接続・初回取得ガイドも使えます。Synapse MCPで取得するのは集計指標です。録画やヒートマップを見るときは、引き続きClarityの画面を使います。

まず、自分のサイトの数字を1つ聞いてみましょう

対象サイトのGA4を閲覧できるGoogleアカウントを用意し、次の順で進めます。画面を見ながら設定したい方は、画像付きのGA4接続ガイドを開いてください。

1. Synapse MCPに登録・ログインし、接続管理でGA4を追加します。Google認証を行い、分析したいサイトのGA4プロパティを選びます。
2. MCPリンクを発行して、ClaudeまたはChatGPTの接続設定へ登録・認証します。
3. 会話で接続を有効にして、「昨日までの7日間のPVを日別に教えて」と聞きます。表示されたサイト・期間・数値を、同じ条件のGA4と照合します。

自分のサイトの数字が返ってきたら、月別比較や人気ページの質問へ進めます。まずは、この最初の表を1つ作ってみてください。

GA4をつないで、自分のサイトのPVをAIに聞く →

Clarity自体は無料です。Synapse MCPのフリーは、新規登録から14日間、3サービス・各媒体1アカウントで試せる別のサービスで、自動課金はありません。無料期間・接続上限・料金と、利用するAI側の接続条件を確認してください。