はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

「Microsoft Clarity って、スクロールマップはあるけどアテンションマップないんだよね……」と常々思っていましたが、2025年1月、ついにアテンションマップが搭載されました！！待ってた！待ってたよ！！

「（なんか盛り上がってるけど）アテンションマップって何？」「便利そうなのはわかったけど、どうやって活用したらいいの？」と思う方向けに解説した記事です。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

Microsoft Clarity のアテンションマップとは？

Microsoft Clarity は無料で使えるユーザー行動分析ツールで、ヒートマップ機能やレコーディング機能などが強みのサービスですが、ついにアテンションマップまで搭載されるようになりました。

アテンションマップを簡単にいうと「ページを見ている人が、画面上のどこを注視しているかを推定できるツール」です。これまでもクリックやスクロールなどのヒートマップはありましたが、どこに注目が集まっているかを手軽にチェックできるのがアテンションマップです。違いもあとで説明しますね。

アテンションマップでわかること

Microsoft Clarity のヒートマップ機能から「注意」を選ぶと確認できます。和訳ｪ……

• 重要なコンテンツが注目されているか
  「ここはスクロールを止めてほしい！」という推しポイントが赤い（注視度が高い部分）かどうかを確認できます。
• （逆に）注目が集まっていない部分はどこか
  青いエリア（注視度が低い）は「画面が止まっていない」だけなので、その理由を考えましょう。スムーズに読めている証拠ともいえます、が……？
• ボタンやバナーが見られているのにクリックされない要素
  スクロールマップやクリックマップと掛け合わせると、根拠や分析に深みが出ます。現実的な問題に向き合うことになります。

スクロールマップとアテンションマップの違い

Clarity にはもともとスクロールマップの機能があり、「ページのどこまでユーザーがスクロールしているか」がわかりました。ただし、スクロール率が高いからと言って「本当にそのコンテンツを読んでくれているかどうか」は不明だったんですよね。

スクロールマップは「移動の情報」、アテンションマップは「視線の情報」と捉えるとわかりやすいです。Clarity のヒートマップとしてもうひとつあるクリックマップは「クリックの情報」です。これはそのままですね。ヒートマップの活用に関してはこちらもどうぞ。

アテンションマップで見落としがちな注意点

ということで、アテンションマップを利用する際の注意点です。特に以下の3つは活用のポイントにもなりますので、押さえておきましょう。

注視しているとは限らない

アテンションマップは「ユーザーが該当箇所でブラウザを止めていた時間」をベースにしています。そのため、他タブで作業している間に画面が放置されている場合でも赤く表示されることがあり、実際に読んでいない可能性を含む点に留意が必要です。

クリックマップも合わせ、ヒートマップでわかることをコンビニに例えると、以下のような違いがあります。

アテンションマップを「コンビニの店内で立ち止まっている」と考えたら、商品を見ずにスマホを見ていることもありますよね。実際の画面でも、似たようなことが起きていますから、ユーザーの意図を捉えましょう。

赤くないエリアを見逃さない

赤いエリア（注目度が高い部分）にばかり目を奪われがちですが、実は青色や緑色の注目されていないエリアこそ重要かもしれません。「これは読んでほしい情報なのに読まれていない」「配置やデザインに問題があるかも」といった発見につながります。

行動データ（クリックやスクロール）との関連を確認

アテンションマップはあくまで「見ているかもしれない」だけであり、実際にクリックや購入、問い合わせといった行動につながっているかどうかは別問題です。アテンションマップ上で赤くなっているのにクリック率が低い部分や、逆に注目度が低くても成果を上げている要素がないかを合わせて検証しましょう。

アテンションマップの目的別活用チェックポイント

アテンションマップを活用しやすい目的ごとの活用パターンをご紹介します。単赤い部分を探すだけのツールではなく、「なぜそこが注目されている（されていない）のか」を、他の指標と合わせて考えることで得られるものが大きいのですよね。

ページの離脱率を下げたい

「このページでサイトを去ってしまうのをなんとかしたい」と思うことは多いです。サンクスページでの離脱はともかく、重要なページの離脱率が高いのは悩ましいですよね。スクロールマップを見て「ファーストビューを見ただけで帰ってしまう」「中盤で急に離脱が増える原因が知りたい」といった声も、サイト運営者あるあるではないでしょうか。特に、広告使ってファーストビューで離脱しているのを見るのは、叫びたくなるやつ……

スクロールマップもアテンションマップもファーストビューに集中しているなら、ユーザーの期待とのズレが大きいことがほとんどです。こういった現実を突きつけられるのも、Microsoft Clarity の良さであり痛さであり……

CTA（ボタン）のクリック率を上げたい

「ボタンを置いているのに、クリックしてもらえない」という悩みもあるあるです。「購入はこちら」「お問い合わせ」などがスルーされているのは、悲しいですよね……。

ウェブサイト上に「お問い合わせ」などざっくりしたコンバージョンポイントしかない場合は、「メルマガ登録」「友だち登録（LINE）」「SNSをフォロー」「資料請求」など、もっと手前のステップを新たにつくることが効果的な場合もあります。ユーザーの熱量の見極めも大切ですね。

コンテンツの配置を最適化して、読みやすさを向上させたい

私のように、つい情報量が多くなりがちなサイト運営者は、「本当に読まれているかな……というか、途中で疲れ果てていないかな……」と気になることがあります。渾身のネタを入れても「スベってないかな……」と気になるのも人の常。

人は「見たいものだけ見る」生き物なので、情報量は多いに越したことはありません。ただ、多すぎて到達できない要素があるなら、改善の余地がありますよね。自分の事例を参考情報として出しているものでも、「自分語り」と判断されて読み飛ばされることも少なくない……です……

その他の改善ヒント

フォームの離脱率を下げたい

フォームでアテンションマップを活用できるケースはありますが、項目が混んでいることが多いため、そこまで具体的なヒントは得られない事が多いのではないかと思います。

むしろ、エリアマップでフォームの項目ごとにエリアを調整して、クリックやタップの状況を見極めるほうが参考になるのではないでしょうか。

ユーザーの混乱や不満ポイントを発見したい

Clarity では「使いにくさ」でいうとイライラしたクリックやデッドクリックが挙げられるのですが、これはクリックマップでわかることがほとんどです。レコーディングと合わせて確認するのがオススメです。

大切なのは、データだけを見て決めつけるのではなく、関係者（デザイナーやカスタマーサービス担当など）とのコミュニケーションに基づいて改善していきましょう。

Microsoft Clarity のアテンションマップに関するよくある質問

あなたはアクセス解析のヒートマップデータから、ビジネス上の課題を見極めて改善アドバイスをするプロです。
添付した Microsoft Clarity のヒートマップデータから、この＊＊＊＊＊（例：トップページ、サービス概要）ページの問題点と改善案をアドバイスしてください。

Microsoft Clarity のヒートマップを活かすのは、人。

アテンションヒートマップそのものは、ヒートマップツールでは割と一般的な機能なので、やっとの印象も拭えないのですが、ウレシイことです。ページ分析がはかどりますね。

Microsoft Clarity で使えるヒートマップをまとめると、以下の3つです。

特にアテンションマップは、サイト運営者の推しポイントと、実際にユーザーが見ている部分とのギャップを埋めるのに役立ちます。「見られているのに行動されない」「注目されていないから行動もない」という事実が露わになることも多く、特に制作側にとっては胃の痛い話ですが、「ホームランを打てるのはプロでも3割だから、とにかくバッターボックスに立つ」というスタンスをクライアントと共有して、改善していきましょう。

はい、ごめんください。Microsoft Clarity（クラリティ）研究所のコスギです。

少しずつ広がりつつあるこの Clarity 、「無料でヒートマップが使えて、訪問者の行動がわかる！」という価値を期待して導入した方も多いと思います。あの Windows の Microsoft 社のツールだと知ってビックリする方もいますね。

とはいえ、「うちのサイトはアクセスが少ないから、Clarity を使っても意味あるかな？」と疑問に思う方もいるでしょう。とりあえず入れた GA4 を見ても、月間セッションが100件とかね。その半分は自分のアクセスだったりすると、切ないですね。

この記事では、アクセスが少なくても Clarity を有効活用できるのか、Clarity を使っても意味がないならどうすれば良いのかをまとめました。

ついでに、集客改善の相談に乗ってくれる GPT もつくってみたので、参考にどぞー

アクセス解析のデータが少ないと、何が起きる？

Clarity に限らず、アクセス解析のデータが少ないデメリットは、以下のようなことが挙げられます。

• 一部ユーザーの行動が全体傾向に見えてしまう（データの偏り）
• 分析したいページにユーザーが来ておらず、分析できない
• レコーディング機能で確認できるセッションが極端に少ないため、一般化しづらい
• 季節性やトレンド変動の判別が難しい（外部要因に左右される）
• 問題発見から対策立案までのリードタイムが長くなる（データがたまるまで時間がかかる）

デメリットというより、もはや解析以前の問題です。無い袖は触れません。このように改善効果検証が難しい環境では、アクセス解析を行うのは危険です。

データが少ないと仮説の精度が落ちる

Microsoft Clarity のヒートマップで考えてみましょう。ページ内のクリックやスクロール動向から改善ポイントを見つけるために効果的な機能なので、これが無料で使えることにワクワクした私のような方も少なくないはず。

以下は弊社サイトの中でも、商品の購入導線として重要なページを3日間（22PV、22タップ）と30日間（249PV、203タップ）で単純比較したものです。10倍以上の差がありますね。

上記はデータ量を日数で調整しているだけなので、そもそも別の問題が起きていることもあるでしょうが、得られるデータが少ないために偶然性が高く、仮説が異なっています。これって、結構怖くないですか？

では、どれくらいのデータがあれば良いの？

たとえば、A/Bテストで「コンバージョン率が0.5ポイント程度で変化するとして、それを90〜95%の信頼度で検出したい」となると、一般的には数千〜数万のセッションが必要です。要するに、こういうこと。

• 小さな差異を検出したいほど、必要なデータ量は増える。
• 信頼度を高めたいほど、必要なサンプル数は増える。

事業規模が大きければ数％の変化によって得られるインパクトが大きいため、この2つの重要性は高まりますが、小規模サイトでは「正直、数万のセッションはちょっと……」と感じるでしょう。

あくまで目安として、サイト全体の傾向を把握するなら、数％の差異を見込んで1,000〜5,000セッション以上が妥当だと考えます。あとは信頼度の問題です。競合サイトが気になるところですが、どの市場でどのくらいのシェアを見込んでいるかによります。ニッチな市場なら、そもそも母数が少ないですからね。

そして、Clarity のようにページ単位での行動傾向を把握するなら、せめて数百PVは欲しいところ。これより低い場合、偶然性の方が高くパターンが見いだせません。つまり、集客施策に力を入れたほうが良いフェーズですね。

しっかり解析するなら、この10倍以上が必要になると考えておくとわかりやすいでしょう。また、十分なデータ量が貯まる期間で解析サイクルも変わります。

「見たいページを見る」のではなく「なんのために解析するのか」に立ち戻ると、やるべきことが見えてくるのではないでしょうか。

アクセスが少ないサイトに共通する課題を洗い出す

とはいえ「アクセスが少ないのはわかってる。だから集客が課題だと思ってるけど、どうすればいいのかわからないYO！」という方も少なくないですよね。おつかれさまです。

そもそも、アクセスが少ない原因は、以下の4つに集約できます。

たとえば、紹介で継続的に回っているスモールビジネスの場合など、④のように無理にアクセスを増やす必要がなく、そもそもアクセス解析の必要がないケースもあります。自分のビジネスに注力したほうが良いでしょう。

とはいえ、「将来のためにアクセスはあったほうがいいし……」と考えるなら、いつ、どのようにするために、どこまで目指すのか、具体的に計画して取り組まないことには始まりません。

④を選ばないのであれば、①〜③の問題に取り組む必要があります。ひとりで考えるのがしんどければ、相談してくださいね。まあ、今なら ChatGPT に教えてもらえば、かなり整理されるんじゃないでしょうか。

上記の思考プロセスに基づいて集客課題の改善相談に乗ってくれるGPTをつくってみたので、「もっとアクセスを伸ばしたいんだけどな……！」と思っている方は使ってみてください。

少ないアクセスでもできる Clarity の活用法

明らかに集客改善が最優先の場合を除けば、アクセスが少ない場合でもできることはあります。広く分析できるほどのデータ量に頼れない分、特定の行動やページをじっくり観察することでインサイトを得られるのが Clarity のよいところ。

期間を長めに設定して傾向を把握する

短い期間では、たまたま来訪したユーザー数名の行動が全体を決定づけてしまいがちです。上記の「データが少ないと仮説の精度が落ちる」でも説明している状況ですね。

Clarity の解析対象期間はデフォルトが「過去3日間」になっています。クリックヒートマップを見て「全然クリックされてない！」と判断するのは早計ですが、お金をかけて追加したものだと余計に焦ってしまいますよね。これは制作側も冷や汗かきます。

Clarity の期間を「過去7日間」や「過去30日間」に設定してみると、いかがでしょうか。日ごとのアクセス変動に惑わされず、ユーザーの行動を把握しやすくなります。

特定のページや行動にフォーカスする

全体的にアクセスが少ないウェブサイトでは、トップページから順に分析してみても、薄い情報しか得られません（そりゃそうだよね、くらいのものしかわからない）。

そこで、ビジネス上重要なページ（お問い合わせ、商品詳細、サービス説明など、コンバージョンやコンバージョンの一歩手前のページ）や、特定の行動（必要な項目へのスクロール、CTAボタンのクリックなど）について深めてみると、少ないデータからでも改善のヒントが見つけやすいです。
※コンバージョン：ウェブサイトの目的を達成すること / CTA：コンバージョンに直結する行動を喚起すること

たとえば、「ある特定のランディングページ」がコンバージョンの入口となっているなら、そのページのヒートマップやレコーディングを継続的に確認してみましょう。似たようなランディングページをほかにも作っているなら、共通点も見えてくるかもしれません。

また、「資料請求ボタン」のクリックがあれば、その行動をしているユーザーがどのエリアで滞留しているか、どの要素に注目しているかが見えてくることもあります。

ページやボタンの意図がはっきりしているほど、Clarity の分析はラクになります。

たとえば、以下は弊社の主要コンテンツを一覧できるページで、どのカテゴリが人気なのかがわかります。

また、全体的にモバイルのユーザーが多い（6割以上）ですが、ショップページにアクセスしたユーザーに絞り込んで使用デバイスを確認してみると、以下のとおり。とはいえ購入したのはモバイルユーザーなので、PCでは情報収集に留まっている印象もあります。ここは伸びしろですね〜

改善施策後の行動比較で効果検証する

少ないデータであっても、何らかの改善施策を行った前後で比較すれば「クリックが増えた」「必要なエリアまでスクロールされた」といった小さな変化を捉えられます。データがたまれば、信頼度も高くなりますよね。

たとえば、ボタンのテキストを「こちらをクリック」「リンクはこちら」「もっと見る」などを「無料で相談する」「次：◎◎のデメリット3つ」などに変更するところからでも大丈夫です。汎用的な文言になっているボタンのテキストは比較的簡単に変更できて反応も変わるのでオススメです。

また、お問い合わせフォームの上に厳選したよくある質問を追加したら、そちらをクリックされただけでなく、同様の問い合わせが減ったなど、ビジネスインパクトがあるとウレシイですよね。こういった改善はユーザーのインサイトに共感しながら動線をなぞると見えてくることもあります。

変更前と変更後の2つの期間を Clarity で比較したい場合は多いと思います。ヒートマップなら比較機能がありますがダッシュボードにはないので、今のところ、タブを並べて確認するのが便利です。変化を実感すると、やる気も出ますよね。

以下は、弊社の主要コンテンツ一覧のビフォーアフター施策とその結果（施策前 5/1〜5/31、施策後 7/1〜7/31）です。

Before

After

クリックマップは上記のような感じ。明らかにファーストビューでのクリック箇所が増えています。ハンバーガーメニューに進んでしまっていたことも軽減されました。

これですね、スクロール量を減らして回遊を効率化したため、基本的な定量データとしてはさほどインパクトのある結果にはなっていません。しいてあげるとしたら、以下の2点です。10ポイント以上の改善は大きいですよね。

• 過剰なスクロールが 0.11%（12セッション）→ 0.01%以下（1セッション）
• 一覧から詳細ページへの遷移が 53.65% → 63.89%（10.24ポイント増）

これが7月以降も続いているため、改善効果としては高かったのではないかと思います。

Clarity は SEO と CRO の両方に目を向けられるツール

結局、アクセス解析は改善ポイントがわかる魔法でもなんでもなく、結果を示すものでしかありません。やったことが表れるだけなので、問題発見以上に目的検証のために使うほうが効果的なのですよね。

ですから、提供するコンテンツの価値やマーケティング戦略が欠けていれば、どんなに行動データを可視化しても明確な改善方向は得られません。「なにかイイコトがわかるんじゃないか」と期待する気持ちはわかります（こんなブログを立てているからこそ、私自身が誰よりも期待してます）が、コンバージョンから目を背けているうちは「解析やってるつもり」でしかないんです。

以下はフィルターとセグメントを活用しようで説明している図ですが、4つの改善ポイントに目を向けられることが、Microsoft Clarity の良さでもあるかなと思っています。どこまで解析するのかなんてキリがないので、少なくともこの4つを押さえておけるといいですね。

全体的なアクセス数は、多ければ多いほど良いというものではないですが、改善のためにはある程度必要。それを見極めながら自分のビジネスと未来のカスタマーとをマッチングさせていきたいですね。Clarity でお酒が呑める方は X（@clarityLabo）でお声がけください。お待ちしています✧٩( ‘ω’ )و✧← ほとんど呑めない

ということで、WACA Advent Calendar 2024 の16日目の記事でした。もうウェブ解析士ではありませんが、こうやってお誘いいただけてうれしかったです

イチから始める Microsoft Clarity（クラリティ）入門記事！

アクセス解析ツールといえば Google 社の提供している「GA4（ジーエーフォー）」が有名ですよね。関連書籍も多いです。ですが、ほとんどの場合「GA4 を入れてはみたけど難しくて活用できてない……！」が担当者のホンネではないでしょうか。GA4むつかしいよNE！

• 「GA4よりわかりやすい Microsoft Clarity（クラリティ）というものがあるらしい」
• 「ヒートマップを無料で使えるらしい」
• 「訪問者の行動も無料でわかるらしい」
• 「GA4 とも連携できるらしい」
• 「Clarity を導入してみたいけど、注意点なども含めた全体像が知りたい」

と、興味を持っている初心者から GA4 経験者までを対象としてまとめましたので、目次から必要な箇所を参考にしてください。また、Microsoft Clarity を使う前にポイントをチェックできるリスト（PDF）も合わせてどうぞ。

思ったより難しい……という方には、Clarity の導入から活用までのサポートも行っています。必要な設定を代行し、導入後のレクチャーも可能です。オンラインで画面を見ながら一緒に進めていきましょう。

ようこそ Clarity 沼へ！

Microsoft Clarity を使う前に確認しておくべきこと

Clarity を導入する前に、そもそも本当に使って良いのか・導入できるのかどうかをあらかじめ確認しておきましょう。

特に注意が必要な3つのポイント（リスク）

1. AI を導入できていない企業は（ポリシー的に）Microsoft Clarity を使えない
   ＝ （解析ツールの導入を相談される）制作会社は把握して対応できる必要がある
2. ユーザー行動データは個人情報なのかどうかは人それぞれ
   ＝ だからプライバシーポリシーに個人情報の範囲を明記しておくべし
3. 氏名やメールアドレスなど明らかな個人情報はマスキングしておくべし

上記は、Microsoft Clarity（クラリティ）のデメリット（リスク）と対処法にも詳しくまとめています。ここは必ず押さえておきましょう。また、導入時に注意が必要なポイントは以下の3つです。

ログインは個人アカウントに紐づく

メールアドレスとパスワードで登録するのではなく、以下のように Google や Microsoft、Facebook のどれかの個人アカウントで登録します。また、メールアドレスが紐づいていないので、他のアカウントで登録しなおすと、別のユーザーになります。継続的に運用するなら、どれかひとつにしておいたほうが良いでしょうね。

あまりよろしくない慣習として、同じログイン情報を外部の方と共有することがあるのですが、それを前提に導入しようとすると「あれっ？」となります。まあ……無理やり新しい Gmail をつくってそれを共有するという手もありますが、そのアカウントを誰がどのように管理するのか明確にしておきましょうね。

導入を支援する立場の方は、こういったツールでクライアントのメールアドレスをオーナー登録することがあると思いますが、Clarity はあとから管理者ユーザーを追加できます。ご安心ください。

改正電気通信事業法に基づく対応

2023年6月から施行された改正電気通信事業法に基づき、個人情報を取得しかねないツールの導入は慎重にならざるを得ません。GA4も含め、アクセス解析ツールが無料だからといって、ほいほい入れて良いものではないのです。Web 担当者フォーラムの記事が一番わかりやすいので、一読しておきましょう。

正直なところ、ここまでやっているウェブサイトがどれだけあるのかという疑問はありますが、だからこそしっかりと対応していただきたいです。ちなみに Microsoft Clarity の公式ページにもサンプルがあり、弊社カエルコムニスのプライバシーポリシーにも記載しています。もし違和感があればご指摘ください。コピペしていいけど自己責任でね！

なお、Microsoft Clarity の利用規約もちゃんと存在します。英語で長いですが、こういったものこそ ChatGPT に解説してもらうことをオススメします。ポイントは、以下。

日本では特に、データ収集・個人情報・ユーザー通知の部分が大切ですね。Microsoft Clarity は無料とされていますが、利用規約には「変えることもあるよ」と書かれています。今後、有料プランの可能性はあるかもしれません。

サーバーの設定によっては使えない場合がある

小規模事業者向けの一般的なレンタルサーバーはたいてい問題ありませんが、狙われやすい中〜大規模の企業が使用するようなサーバーは、コンテンツセキュリティポリシー（CSP）が厳密に設定されている場合があります。

特に、上述の改正電気通信事業法によって、CSPを強化したサーバーも少なくないでしょう。その設定によっては、Clarity が使えません。

実際に Clarity を導入しても動かない場合、Chrome なら開発者用ツールから検証して「Content Security Policy」という文言がエラー文に入っていたらCSPが理由です。Microsoft の公式ページ（英語）は以下のとおり。

「What should I do to add Clarity to my CSP?（CSP に Clarity を追加するにはどうすればよいですか?）」の項で対応方法を説明されています。大企業のウェブサイトに Clarity を導入する際には、サーバー管理者の方に依頼する可能性を共有しておきましょう。Google のツールなら問題ないことが多いのですが、Clarity はまだマイナーなツールということでしょうね。

これらがクリアできたら、早速 Clarity に登録してみましょう。

Microsoft Clarity に登録する

Clarity には、「アカウント」と「プロジェクト」という概念があります。全体構造はこんなかんじ。

最初にアカウントを新規登録し、最初のプロジェクトを作成します。Clarity を導入したいウェブサイトが2つ以上ある場合は、プロジェクトを追加していきます。アカウントがあれば、他のプロジェクトにメンバーとして参加できます。

アカウント：Microsoft Clarity にユーザーとして登録

Microsoft Clarity のトップページ（日本語版）にアクセスして、Google、Microsoft、Facebook のどれかで Clarity に登録します。難しいものではないですが、Google アカウントを使った場合の流れの画像を入れてあるので参考にどうぞ。3ステップで終わります。

Google アカウントを使った場合の3ステップ（クリックで開きます）

Gmail にログインできているパソコンで進めることを推奨します。

STEP

Microsoft Clarity のトップページにアクセス

Microsoft Clarity のトップページ（日本語版）にアクセスして、［サインアップ］もしくは［使い始める］をクリック

STEP

好きなアカウントを選択

Microsoft、Facebook、Google のどれかをクリック（今回は Google を選びました）

STEP

使いたいアカウントを選択

ここに設定されている名前とメールアドレスが、Microsoft Clarity に登録されます。登録後は、Clarity 登録者の名前とメールアドレスを変更できません。

プロジェクト：Microsoft Clarity にウェブサイトを登録する

ユーザー登録が済んだら、そのまま最初の「プロジェクト」を新しく作成し、対象のウェブサイトを登録します。上記の流れでそのまま進んだ方もいると思いますが、日本語で使うには設定を変更する必要があります。画像つきで解説していますので参考にどうぞ。

プロジェクトを新しく作成する3ステップ（クリックで開きます）

STEP

サイト名とドメインを登録する

英語の画面になりますが、日本語で使えますので落ち着いて進めましょう。

• Name：ウェブサイト名
• Website URL：ウェブサイトのドメイン（https://を含めない）
• Website industry：ウェブサイトの業種（※）

• 「Financial Services & Insurance（金融サービスと保険）」もしくは「Health & Wellness（健康とウェルネス）」のどちらかを選択した場合、追加の利用規約への同意が必要です。

（参考）センシティブな情報（金融情報や医療情報など）を扱うサイト向けの追加規約

追加規約のポイントは、以下。これは Google が提唱する「YMYL（Your Money or Your Life）」にも関連していると考えられます。同様に Microsoft も慎重に扱っていますので、対応しておきましょう。

保証事項

• あなたのデータ処理がデータ保護法に準拠していることを保証すること。
• Microsoft Clarity を使用してセンシティブデータを処理しないことを保証すること。
• センシティブデータには、医療情報、健康情報、税情報、非公開個人情報などを含む。

センシティブデータの定義（以下に限定するものではない）

• 米国医療保険携行性と責任に関する法律（HIPAA）およびその規制で定義される保護医療情報
• ワシントン州「My Health, My Data」法や他の州法で定義される消費者健康データ
• カリフォルニア州医療情報機密性法（CMIA）や他の州法で定義される医療情報
• カリフォルニア消費者プライバシー法（CCPA）などで定義されるセンシティブ個人情報
• 米国国税法や他の州法で定義される納税者識別情報または納税者申告情報
• Gramm-Leach-Bliley法や他の州法で定義される非公開個人情報（金融関連情報）
• 公正信用報告法（FCRA）で定義される消費者報告情報または医療情報
• その他のデータ保護法でセンシティブとされる個人データ

補償

Microsoft Clarity を利用することで規約の違反に起因する請求や訴訟による損害が発生した場合、Microsoft や関係者にその損害を賠償すること。

入力したら［Add new project］をクリックして進みます。

STEP

アカウントの設定画面を表示する

英語のままなので、右上のアカウントのアイコンをクリックして、「Manage Account」をクリックします。設定を変更すると毎回この画面に戻るので、慣れるためと思ってポチポチしましょう。

STEP

基本設定を日本人向けに変更する

画面を少しスクロールすると「Preferenses（基本設定）」の項目が出てきます。変更するたび STEP2 の画面に戻りますが、赤枠の部分は設定しておくことをオススメします。

• Language（言語）：日本語
• Country（国）：Japan（日本）← 変更しなくてもOK
• Date Format（日付の形式）：yyyy/mm/dd ← 年/月/日
• Start of week（週の開始）：Sunday（日曜日）← お好みで

Language を日本語に変えたあとは、日本語で使いやすくなります。

実際に Clarity を動かすためには「トラッキングコード」というものを使います。これは、ウェブサイトに訪問したユーザーのデータを収集するためのもので、Clarity 導入のキモです。

それでは、トラッキングコードをウェブサイトにインストール（意訳：クラリティをホームページに導入）していきましょう。

Microsoft Clarity の導入方法は3つある

次は、ウェブサイトに訪問したユーザーのデータを Microsoft Clarity で取得するための設定です。

ウェブ制作の知識がある方ならサクッと導入できると思いますが、3つの方法があることを覚えておいてください。最適な方法を選べるといいですね。

1. 仕組みがあれば簡単：Clarity のプラグインを使う
2. 将来性高めのイチオシ：Google タグマネージャーの Clarity 公式タグを使う
3. ウェブ担当者に共有：Clarity のトラッキングコードを直接記述する

仕組みがあれば簡単：Clarity のプラグインを使う

WordPress（ワードプレス）や Wix（ウィックス）など、一般的によく使われているシステム（CMS）には Clarity のプラグインがあります。それを使うと、アカウントやプロジェクトを設定するだけで使えます。

以下では、WordPress の Microsoft Clarity プラグインを使った Clarity の導入方法を画像つきで解説しています。

Microsoft Clarity プラグインを WordPress で使う4ステップ（クリックで開きます）

STEP

WordPress のプラグイン新規追加画面で「Microsoft Clarity」を検索

管理画面で「プラグイン」→「新規追加」と進んだところにあります。見つけたら［インストール］ボタンをクリックしてしばらく待ったあと、［有効化］ボタンをクリックしてください。

STEP

［Setup Clarity（Clarity のセットアップ）］ をクリックして設定画面に進む

プラグインを正常にインストールできたら、設定画面に進みましょう。画面が変わって以下のような表示が出ますので、［Setup Clarity］をクリックして進みます。

STEP

プロジェクトを選択

Microsoft Clarity にログインしていれば、以下のようにプロジェクト選択画面が表示されます。プロジェクトを選んで［続ける］をクリックしましょう。

STEP

Microsoft Clarity の画面が表示されれば成功

「プロジェクト ○○ 正常に統合されました」といった表示のあとに、Clarity の画面が表示されれば完了です。WordPress の管理画面から、いつでも確認できますね！

導入できたら「Microsoft Clarity が正常に稼働しているか確認」に進んでください。

将来性高めのイチオシ：Google タグマネージャーの Clarity 公式タグを使う

すでに他のアクセス解析ツールを導入しているなら、Google タグマネージャー（GTM）などの管理ツールでトラッキングタグを管理しているのではないかと思います。

ということで、GTM を使える方なら説明不要だと思いますが、GTM の画面を開かなくてもインストールする方法が公式ページにまとまっていますので、こちらを合わせてどうぞ。トリガーは「All Pages」で本当にええんか？という素朴な疑問は残ります。

導入できたら Clarity の画面に戻り、「Microsoft Clarity が正常に稼働しているか確認」に進んでください。

ウェブ担当者に共有：Clarity のトラッキングコードを直接記述する

特にシステムを入れておらず、Google タグマネージャーも導入していない場合、トラッキングコードをそのまま HTML 内に記述する方法があります。個人的にオススメはしないので、制作の知識がある担当者と相談してください。

トラッキングコードを取得する3ステップ（クリックで開きます）

STEP

セットアップ画面を開く

「設定」→「セットアップ」に「手動でインストールする」の項目があります。ここの［追跡コードを取得する］をクリックして進みます。

STEP

Clarity コードをコピー

<script>〜</script>で書かれているトラッキングコードをコピーします。［クリップボードにコピー］ボタンをクリックするだけ。

STEP

ウェブサイトの <head>〜</head> 内にペースト

基本的に、位置はどこでも問題ありません。

トラッキングタグを記述したページのみ解析できるため、ウェブサイト内の動線を分析したい場合には、すべてのページに記述する必要があります。

これで、Microsoft Clarity の導入が済んだので、正常に稼働しているかどうかを確認しましょう。

Microsoft Clarity が正常に稼働しているか確認する

データを取得するまでは最大2時間くらいかかりますが、早ければ30分経たずに取得することが多いようです。データを取得して訪問者が現れると、こんなふうに（ほぼ）リアルタイムに表示されます。［すぐに観る］をクリックして進み、レコーディングデータを確認してみましょう。

ただし、数時間経っても自分のアクセスデータすら取得できない場合、以下のような要因が考えられます。Chrome なら開発者用ツールを使うと確認しやすいですよ。

GA4との連携

すでに GA4 を導入している方は、ここが気になるポイントかと思います。

GA4 と Clarity それぞれの得意分野

GA4 だけでなく、Google サーチコンソールなどとも合わせると、以下のように対応分野が分かれます。

上記の四象限をそれぞれ連携させると、効果的ですよね。

GA4とのシームレスな連携はできない

GA4 と Google サーチコンソールはシームレスに連携できますが、Microsoft Clarity とは同じような連携ができません。

• GA4 のキーイベントを Microsoft Clarity で取得してフィルタに使う → 使えません
• GA4 でつくったカスタムセグメントを Microsoft Clarity で使う → 使えません
• GA4 を使えるユーザーを Microsoft Clarity のチームに同期できる → できません
• GA4 からシームレスに Microsoft Clarity のヒートマップやレコーディングを見る → 見れません

じゃあ何ができるのかというと、GA4の一部のデータを Microsoft Clarity で確認できるだけです。Clarity のフィルタなども有効になりません。

時々、「Microsoft Clarity は GA4 と連携できる！」と伝えている記事もありますが、連携できているといえるかどうかは疑問が残ります。公式も（UA時代の）GA と連携できる（GA4 のセグメントはサポートしてないよ）と言っています。

• Currently, Clarity doesn’t support segments in GA4.
  （現在、Clarity は GA4 のセグメントをサポートしていません。）
• Clarity doesn’t send playback URL to GA4 as it cannot accept High Cardinality rows.
  （Clarity は高基数行を受け入れることができないため、再生 URL を GA4 に送信しません。）

Google Analytics4 Integration with Clarity | Microsoft Learnより

今後に期待。

GA4とどのように “連携” させるか

では、GA4 とどのように連携して考えれば良いかというと、「GA4 で得られたパターンを Clarity で深堀りする」のがシンプルかと思います（これをシームレスにできるといいんですけどね……）。これは、先日開催された a2i のセミナーで、JADEの村山さんも話されていました。

セミナー後半の村山氏のセッションでは、より踏み込んだ分析アプローチが提示されました。特に注目すべきは、定量分析（GA4など）と定性分析（Clarity）の組み合わせ方です。「仮説の精度を高める」という視点から、定量データで見つけたパターンをClarityで深掘りする手法が、実例を交えて解説されました。

【活動報告】オンラインセミナー「Microsoft Clarityで深める真のユーザー理解」｜2024/9/25(水) – 活動報告 – アナリティクス アソシエーション

私も、GA4 や Google サーチコンソールを Looker Studio で閲覧できるようにしておき、伸びしろのあるパターンが見えると Clarity で絞り込み、レコーディングを10件くらい観察して背景を確認し、施策に落とし込んでいます。

よく忘れがちになってしまうのは、コンバージョンから目を背けないこと。つまり、シームレスに連携できたとしても目的志向でツールを扱わなければ、わかった気になってしまうだけです。そういったことを念頭に置いて、まずは Microsoft Clarity を楽しんでみてください。

Microsoft Clarity を導入できたら次にやること

データが取れることを確認できたら、ダッシュボードを見てみましょう。このあとの活用は以下の記事にまとめていますので、ひとつずつ確認すれば Clarity の機能をひととおり把握できます。

思ったより難しい……という方には、Clarity の導入から活用までのサポートも行っています。必要な設定を代行し、導入後のレクチャーも可能です。オンラインで画面を見ながら一緒に進めていきましょう。

Microsoft Clarity に関してはよくつぶやいていますので、導入方法や活用について気になることがあれば https://x.com/clarityLabo へお声がけください。

よくある質問と回答

他にもわからない点がありましたら、X（Twitter）の @claritylabo へお気軽にご相談ください。

Microsoft Clarity を使う前に備えておきたいチェックリスト

上記の内容をふまえ、Microsoft Clarity を導入する前に全体像を知っておくためのポイントを1枚のPDFにまとめました。以下から、ダウンロードしてお使いください（登録不要です）。

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会。これまで初心者向けに解説してきましたが、第5回は Clarity 活用のキモといえる「フィルター」について深めました。以下のような内容です。

Clarity を効果的に活用するためには、お客様（カスタマー）の理解とウェブサイトの動線把握が重要となります。ここに向き合わないまま Clarity を活用しようとしても、「オモシロイ」以外の感想はなかなか出てきません。シンプルでカンタンだからこそ、顧客理解の有無で得られるものが変わります。要するに、

[ 何のために、誰の動きを見たいのか ]

Clarity の活用は、この一言に尽きます。正解はないからシンドくもあり、楽しくもあり。最近はAIにLP添削をしてもらうことも流行っているので、「このページは、誰のどんな目的で作られ、その人はこのサイトにどんなことを期待していると思いますか？」みたいにお願いしたら提案してくれるかもですね。

まずは、Microsoft Clarity のフィルター機能を知ることをメインに説明しています。これまでも使っているので、気になる箇所は Microsoft Clarity の使い方をまとめた過去の記事も参考にしてください。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

フィルターを使うための大前提

Microsoft Clarity は、ウェブサイトにおける「カスタマー（見込み客も含む）」の行動を分析し、つまずきを減らすためのツールです。

フィルターを使うための大前提は、行動を絞り込む相手、つまり、分析対象となるカスタマーを明確に定義することが重要です。Clarity でカスタマーにならないユーザーを観察しても時間が溶けるばかりですし、SEOにも直結するため、少なくともカスタマーのニーズくらいは想定しておきましょう。マーケティングにおける「誰に」ですから。

この図でいうところの、集客を担う［認知］→［訪問］の部分を改善するのがSEO、実際にウェブサイトの成果につながる［訪問］→［回遊］→［CV（コンバージョン）］を改善するのがCRO（Conversion Rate Optimization＝コンバージョン率最適化）です。

ただし、私（コスギ）としては、CRO＝Customer Relationship Optimization（顧客との関係性を最適化）と捉えています。この方が、ウェブサイトの改善を考えやすいのでオススメです。

例えば、ウェブサイトへの訪問数 10,000 件に対して申込数が 100 件であれば、100/10000＝0.001 で、1% のコンバージョン率になります。このコンバージョン率を 2% にするなら、以下のような2パターンが考えられます。

カスタマーにならないユーザーが多いようなら、集客対象のクエリやコンテンツの動線をカスタマーに最適化する（CRO）ことで、訪問数が減少しても申込数は次第に上がります。カスタマーに最適化されたサイトは、SEOにも効果を発揮し、訪問数も上がります。

ただしもちろん、カスタマーを見誤ってしまうとどちらも減って大爆死してしまうので、覚悟と勇気を持つ前に、しっかりとカスタマーを定義しておくことは必須です。徹底的に顧客理解を深めて実施した施策は、後悔ではなく経験が残ります。次につなげましょう。

Microsoft Clarity で使えるフィルター

ウェブサイト上でユーザーがつまずくポイントは、さまざまです。

ご自身でも、こういったことに少なからず「イラッ」としたことがあるのではないでしょうか。あなたの感じる「イラッ」は、誰かにとっても「イラッ」とします。使い慣れた自分のサイトは盲点になりやすいですが、初心に返って、実機で確認してみてください。このアンテナは、少なからず改善のヒントになります。

さて、Clarity にはたくさんのフィルターが用意されており、こういったつまづきを定量的・定性的にチェックすることができます。「イライラしたクリック」など、GA4では見たこともない、特徴的なフィルターは以下に紹介しています。合わせて参考にしてください。

ちなみに「この条件のユーザーは除外したいんだけどな〜！！」という場合には、一部のフィルターが使えます（すべてではないのですが）。カスタムフィルターは除外対象を設定できるので、使っていくうちに必要になったら思い出してください。「関係者除外」が一番わかりやすい例ではないでしょうか。

フィルターを保存してセグメントにしよう

Clarity では、設定したフィルターを保存したものを「セグメント」と呼びます。保存しておけばいつでも呼び出せるので、よく使うフィルターをセットしておくと良いですよね。

では、よく使うフィルターをどう見極めたら良いかという点で、STP分析を応用すると効果的です。

補足：STP分析とは

STP分析では、まず市場をいくつかのセグメントに分割します (セグメンテーション)。分割の方法でよくあるのが、性別や年令ですが、業種、規模、サービス内容など、ケースバイケースで検討する必要があります。

どのような軸で分割するかによって、求める顧客像が変わります。曖昧なまま進めると、違和感のある顧客しかいなかったり、市場が狭すぎて顧客がいなかったりが起こりますので、納得感のある軸を採用しましょう。

次に、分割したセグメントの中から、どのセグメントをターゲットとするかを決定します (ターゲティング)。

最後に、ターゲットとするセグメントにおいて、自社の立ち位置を明確化します (ポジショニング)。 同じセグメントには競合も存在するため、差別化や共創を図りながら、自社の強みを活かせるポジションを確立することが重要です。

UAV あなたが知らない あなたの会社だけの強み ― 顧客に選ばれ続ける「最強ブランド」のつくり方 #PR

STP分析では物足りないな……自社の強みをちゃんと出していきたい！という方は、UAV（ユニーク・アトラクティブ・バリュー）の思考プロセスを知れるこちらがオススメです。まだ市場ができていない場合は、VPC（バリュー・プロポジション・キャンバス）で考えてみるのもオススメ。PMFの全体像と合わせて、才流さんの記事も合わせてどうぞ。

https://sairu.co.jp/method/13700/

わかりやすい軸で考えてみましょう。たとえば、顧客単価と購入頻度の軸だと「高単価・リピーター」、「高単価・単発購入」、「低単価・リピーター」、「低単価・単発購入」の4つのセグメントに分けられます。すると、B（高単価・リピーター）のアップセルやクロスセルのために Clarity でフィルタリングして確認したり、A（高単価・単発購入）のリピートを促すためにBとの違いを Clarity で探索したり、などが考えられます。

フィルターは「なんとなく見たい切り口」でも使いやすいのですが、戦略に基づいたセグメントでフィルタリングしたほうが、得られるものは大きいのではないでしょうか。ただでさえ、時間が溶けるツールですから……

また、セグメントは、作成した後にウォッチリストに追加することも可能です（フィルターの設定とウォッチリストへの登録手順は動画でも説明しています）。ウォッチリストに追加しておけばいつでも確認できますし、すぐに絞り込むこともできます。期間の設定が含まれてしまうので、それだけちょっとややこしいんですけども。

フィルターの活用ケース

ダッシュボードから使うのが一番カンタンです。ぜひ知っておいてほしいのは、ダッシュボードの中でも「フィルター」と訳されている「ファネル機能」からのフィルタリング。物足りなくなったらカスタムフィルターもどうぞ。

ダッシュボードから使う（まずはここから）

「ダッシュボード」は、Clarity を開いてさまざまな数字が書かれている最初の画面のこと。「定性分析ツールじゃないんかーい！」とツッコみたくなるような、ウェブサイトのアクセス状況やユーザーの行動に関する様々なデータが表示されています。

問題のありそうなユーザー行動を絞り込んで分析したい場合、ダッシュボード上で該当する項目をクリックするだけで、簡単にフィルターを適用することができます。たとえば、デッドクリックが多い場合は、「デッドクリック」の項目をクリックすることで、デッドクリックが発生したセッションに絞り込むことができます。この辺は動画でも説明していますので、合わせてどうぞ。

さらに、Microsoft 社の AI である Copilot が搭載された「Clarity Chat」を使うことで、分析のヒントを得ることも可能です。カンタンな質問、たとえば、「過去7日間で、モバイルでタップの問題が起きているページを教えてください」と入力すると、Clarity Chat はデッドクリックが多いページを提案してくれます。また、「過去30日間のデータをもとに、トップページの改善ポイントを教えて」という依頼には、いくつかの指標から提案してくれます。コンサル的にアドバイスしてくれるというよりは、「ヒントはこの辺」と提示してくれる感じですね。

まだ回答精度は不安定ですが、たまに構ってあげると成長している印象はあります。

ファネル機能で使う（初級〜中級者向け）

（和訳では「フィルター」となっている）「ファネル機能」は、Microsoft Clarity のイチオシ機能です。

Clarity には、GA4の「キーイベント」のようにコンバージョンポイントを「設定」画面から設定すれば、それを追っていけるような仕様とはちょっと異なります。「スマートイベント」として設定することは可能ですが、ファネル機能でユーザーが目標達成までに通過するステップを定義し、各ステップにおけるユーザー数を可視化できると効率的に分析しやすいです。

ファネル機能はユーザーの直線的な動線分析に使いやすいです。ウェブサイトにフォームがあったら、ぜひ使ってみてください。動画では、弊社の公式サイトにあるショッピングカートでのファネルを確認し、レコーディング機能で何が起きているのかを確認して考察するまでを説明しています。

カスタムフィルターを使う（中級者以上向け）

Clarity には、デフォルトで用意されているフィルター以外にも、カスタムフィルターを作成することができます。カスタムフィルターは、デフォルトのフィルターでは取得できないデータを分析したい場合に役立ちます。だんだん物足りなくなってくるんですよ。

カスタムフィルターには、汎用的に使えるカスタムタグ以外にも、ログインユーザーを分析しやすいカスタムユーザーID、カスタムセッションID、カスタムページIDのセットがあります。カスタムラベルもありますが、レコーディングの判別に使用するものなので、大別すると2種類のカスタムフィルターが使えます。

カスタムタグは、Googleタグマネージャー (GTM) を使用することで、簡単に設定することができます。取得したいデータを変数に設定すれば、Microsoft Clarity 公式タグの Custom Options に設定するだけ。

上記で設定しているカスタムタグの変数は、以下のページで説明していますので参考にどうぞ。

GA4と自動的に連携できているわけではないので、GA4用に設定した変数があれば Clarity にも使えますね(/･ω･)/

Microsoft Clarity のフィルターに関するよくある質問

ダッシュボードの右上と枠内に「フィルター」があるのですが？

「フィルター」は「絞り込み」の意味ですが、下記のような違いがあります。

英語版なら「Filters」「Funnels」になっているのですが、和訳がわかりにくいだけです……

コンバージョンページのURLが変わるのですが、Microsoft Clarity で取得する方法は？

正規表現を使って対応できます。

正規表現がわからない場合は、ChatGPT などに教えてもらいましょう。

「ページサイズを変更しました」というフィルターはどう使えば？

重要度は高くないため、参考程度で問題ありません。

「ページサイズを変更しました」という指標で絞り込んでみると、モバイルの割合が高いことがわかります。これにより、ユーザーが画面を（指で）拡大するような動きの可能性が考えられます。ユーザーにとってはコンテンツが小さいのかもしれませんね。スマホの縦横を変えたことが示唆されていますが、個人的には疑問が残ります。

ただし、Clarity の指標は定義が曖昧なものが多く、レコーディングを見て問題なければ気にする必要はありません。テキストを選択しながら読んでいる行動がデッドクリックとして見なされるのと同じようなものと考えておいても良いのではないでしょうか。

あまりに多いなら、表示されている文字が小さい可能性があります。また、画像を拡大しようとしたりする行動が見られるなら、視認性を改善する余地があるかもしれません。

クリックヒートマップで、デッドクリックのみを絞り込む方法は？

フィルターの一覧ではなく、クリックヒートマップ → クリックの種類から選択します。

ヒートマップを表示して、クリックの種類のドロップダウンメニューを開くと、「すべて」「停止（デッドクリック）」「激怒（イライラしたクリック）」「エラー」「最初（ファーストクリック）」「前回（ラストクリック）」などから選べます。

クリックの種類や意味は、以下の記事からどうぞ。

https://clarity.kosgis.com/blog/microsoft-clarity-seminar-03/#index_id6

カスタムタグを設定するには？

カスタムタグの設定には、Googleタグマネージャー（GTM）の使用が推奨されています。

Clarity 公式が提供しているGTM用のタグを設定することで、簡単にカスタムタグを取得できます。上記のカスタムフィルターの設定も合わせてご確認ください。変数でKPIを取れるといいですよね。

Microsoft Clarity のカスタムタグは、GA4 の連携できない？

Clarity と GA4 の連携は限定的です。

Clarity 上で GA4 のデータを見れるタブはありますが、フィルターやキーイベントの連携はなく、基本的な指標が見えるだけとなっています。当然、カスタムタグも GA4 とは連携できません。

2024年12月現在、Microsoft Clarity 公式ドキュメントGA4 Integration でも以下のように記載されています。高基数は「データがめっちゃ多いから (other) としてまとめとくわ」みたいな処理をされるほど値が多いこと（意訳）を指します。つまり、再生URLが膨大になると (not set) になってしまって意味がなくなるので、やめたそうなんですよね。

• Currently, Clarity doesn’t support segments in GA4.
  （現在、Clarity は GA4 のセグメントをサポートしていません。）
• Clarity doesn’t send playback URL to GA4 as it cannot accept High Cardinality rows.
  （Clarity は高基数の行を受け入れることができないため、再生 URL を GA4 に送信しません。）

「カスタム」がついている「カスタムイベント」はどうやって使うのですか？

スマートイベントで利用できます。

スマートイベントはコードを書かなくても使えますが、イベントAPIを使用することで自由にカスタマイズして設定できます。これが、「カスタムイベント」。

個人的に、カスタムイベントはウェブサイトよりもモバイルアプリでの活用シーンが多いんじゃないかと考えています。

Microsoft Clarity 勉強会の今後の予定

これで一連の Microsoft Clarity に関するノウハウはまとまったので、定期的な勉強会は一旦終わります。これまでの勉強会の内容は、以下をご参照ください。

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

Clarity を導入後、大切な初期設定のひとつとして、自分や担当者を解析のデータに含めないために関係者除外があります。すぐにできる簡単な方法と、しっかりとした方法と、ひねり出した折衷案をまとめました。

結論からいうと、①接続しているIPをブロックするか、②ログインしている管理者を判別して Clarity を実行させないか、③Cookie とカスタムタグで関係者を判別するか、④utmパラメータを使うかのどれかです。どれも一長一短があります。

接続しているIPをブロックする

Clarity 側で用意されている機能です。シンプルでカンタンですが……メリットとデメリットはこんなかんじ。

STEP

Clarity の設定 → IP ブロックに進む

「設定」画面の左にあるメニューから「IP ブロック」に進むと、除外したいIPが設定されてなければ以下のような画面が表示されます。

ここで、［＋ IP アドレスをブロックする］をクリックします。

STEP

除外したいIPアドレスを設定する

以下のような画面が開き、名前（日本語でもOK）を入力して「現在の IP をブロックする」にチェックを入れると、自動的にIPアドレスが入力されるため、［追加］ボタンで完了させます。

はい、めちゃくちゃカンタンですね。

ただし、中規模以上の企業などグローバルIPアドレスを取得していないケースのほうがほとんどだと思うので、いつの間にかIPアドレスが変わっていることはありえます。実際、この記事を書いている時点で自宅のIPアドレスが変わっていましたし。

ちゃんと関係者を除外したデータを取得したいなら、Google タグマネージャーを使うのが一番です。

そもそも Google タグマネージャーの使い方がまったくわからない場合や、アクセス解析ツールの導入や設定について不安が残る場合、お話を伺ったり代行設置したりすることも可能です。「わからないことがわからない」状態でも問題ありません。ツールの導入の必要性も含めてお伺いできますので、どうぞご一報ください。

ログインしている管理者を判別して Clarity を実行させない

Clarity は一度実行されると必ずデータを取得するため、Google タグマネージャーで Clarity を制御して、管理者は Clarity を実行させないようにするのが、この方法です。

今回は、WordPress のようなCMSにログインしているケースを想定しています。

この方法は Google タグマネージャーで Microsoft Clarity を導入していることが前提です。HTMLとして直接トラッキングコードを入れていたり、プラグインなどで導入済みの場合は、Google タグマネージャーの Microsoft Clarity（Official）タグのみにしておいてください。

ログインしているユーザー全員を関係者として除外するには、WordPress なら#wpadminbar の有無で判別できます。これを Google タグマネージャー（以下、GTM）で取得し、例外トリガーとして利用できます。

WordPress でなくても、管理画面にログインしていることが取得できれば応用できます。

STEP

カスタム JavaScript で変数を新規追加

管理バーのID #wpadminbar の有無を JavaScript で取得し、ユーザー定義変数 is_user_logged_in を追加します。

function() {
    return document.querySelector('#wpadminbar') !== null;
}

返り値は true / false のシンプルな boolean 型です。

もし、ログインユーザー全員ではなく、管理者や編集者など一部の権限を除外したい場合は、JavaScript とトリガーの条件を調整してください。

STEP

トリガーを新規追加

STEP1で設定したユーザー定義変数 is_user_logged_in ＝ true の条件をトリガーとして新規追加します。

STEP

Microsoft Clarity 公式タグで例外を設定

Microsoft Clarity は、この Official（公式）タグを使用することでインストールできます。配信トリガーに「All Pages」を設定することが一般的（GTMをインストールしたすべてのページで実行させる）なので、ここに「例外」として、STEP2で作成したトリガー「WordPress ログイン中なら」を追加します。

これによって、ログインしている管理者ユーザーのアクセスは取得しません。

スマートフォンからもログインしておけば除外されるようになりますし、他のアクセス解析ツールでも使える方法なので、変数を調整してトリガーをつくっておくと便利です。

上記はそもそも取得しない方法ですが、以下はあえて取得してから判別する方法です。

Cookie とカスタムタグで関係者を判別する

関係者を Cookie で判別して、Clarity のカスタムタグでフィルタリングして除外するのが、この方法です。

この方法は何らかの方法ですでに Microsoft Clarity を導入していれば使えます。Cookie の取得とカスタムタグを JavaScript で送信すれば良いので、GTMを使うと効率的ですが、最悪なくても使えます。

GTMを使う前提での設計ポイントは、以下の3つ。

1. 同じドメイン内で Cookie を発行するPHPを置く
2. GTMで、Cookie の情報を取得する変数を作成
3. GTMで、取得した Cookie の情報をカスタムタグとして Clarity に送る

Clarity でカスタムデータを取得する際にはカスタムタグを使用する方法がベストです。

当初、カスタムセッションIDで判別しようと考えましたが、カスタムユーザーIDに紐づくために見送りました。カスタムユーザーIDは、ユーザーが個別に持つ場合（会員IDやメールアドレスなど）を使います。今回はそこまで具体的でなくても良いので、カスタムタグを使用します。

STEP

同じドメインで Cookie を発行する

Cookie を発行するPHPファイルをFTPでアップロードして、アクセスすると、ファーストパーティ Cookie が発行されます。

Cookie 発行用のPHPコード

ChatGPT に作ってもらったものなので、著作権はありません。適宜変更して使ってください。なお、mogmog が関係者の判別用として Clarity に送信されるため、必要に応じて適切な名前を設定してください。

<?php
// Cookie の有効期限を1年間に設定（60秒 * 60分 * 24時間 * 365日 = 1年）
$expiryTime = time() + (60 * 60 * 24 * 365);

// Cookieを設定（名前: cookie_monster, 値: ユーザーの初回訪問日時）
setcookie('cookie_monster', 'mogmog', $expiryTime, "/");

// Cookieが存在するか確認し、メッセージを表示
if(isset($_COOKIE['cookie_monster'])) {
    echo "Looks like you've met the Cookie Monster before! 🍪";
} else {
    echo "First time meeting the Cookie Monster, huh? 🍪 Welcome!";
}

STEP

ファーストパーティ Cookie を取得する変数を新規作成

Cookie が発行されたら、その情報をGTMで取得します。STEP1 で作成したファーストパーティ Cookie を取得する変数で「cookie_monster」を新規に作成しましょう。

STEP

Clarity に Cookie の情報を送信するタグを新規作成

STEP2 で取得した情報をカスタムタグ「stakeholders」として Clarity に送るため、GTMのカスタムHTMLタグを作成します。トリガーは「All Pages」にしてあります。

<script>
  window.clarity("set", "stakeholders", "{{cookie_monster}}");
</script>

GTM で Microsoft Clarity (official) を使っているなら

以下のように、カスタムタグをサクッと送信することができます。

ページタイトルとコンテンツグループも、変数で設定しておけばこのとおり。

STEP

GTMのプレビューで確認

以下のように、プレビューの変数でファーストパーティ Cookie の中身が確認できれば準備完了です。

STEP

Cookie を発行したブラウザからサイトにアクセス後、Clarity のライブレコーディングを確認

PCやスマホから Cookie を発行するページにアクセスし、Cookie が発行できていれば stakeholders に値が入っていることを確認できます。

Clarity のフィルターで選べるようになれば、抽出も除外もできるようになります。

Cookie を発行したりカスタムタグを入れたりと忙しいですが、柔軟性が高いので一番オススメです。成果を見越してしっかり解析するなら、GA4 と Clarity を組み合わせて使う必要があるため、GTMの導入は必須になります。最低限、このくらいの知識は必要です。Cookie の発行はともかく、複雑なことはしていないのでがんばりましょう(/･ω･)/

残る方法は、難しくはないけれど（正直）メンドクサイです。GTMを使えるようになったほうが、将来性ありますよ。

utm パラメータをつけて判別する

「どこから来たのか」の情報によってフィルタリングして除外する方法です。広告を GA4 で効果測定している方なら、「utm パラメータ」にピンと来る方もいらっしゃるかもしれません。

Clarity のトラフィックカテゴリーには、「選択範囲を除外する」として一部のデータを除外できるフィルターが多いです。ここにある「ソース」は utm_source（utm パラメータのキャンペーンソース）が使えるため、社内向けメディアのウェブサイトや社員向けのお気に入りURLなどを設定して、除外設定を活かそうという考え方です。

もし、すでに不要なトラフィックソースが判明しているなら、それ除外するだけである程度の関係者を除外（もしくは抽出）できます。たとえば、トラフィックソースに gtm-msr.appspot.com とあれば、それはGTMのプレビューによるアクセスだとわかります。

今回は、「自社のウェブサイトにお知らせを掲載し、営業部の写真向けに Microsoft Teams で共有したい場合」を想定します。「あれ？関係者を除外したいんだけど？？」と思った方、設定は同じなので以下に進んでみてください。

STEP

営業部の社員向けにURLを共有する際のパラメータを定義しておく

すでに広告を使用している場合などは、utm パラメータが競合しないようにご注意ください。

今回は、以下のようにしました。utm_campaign も使えるので、部署ごとに設定するなどして使うことができます。今回は営業部向けにしてあります。

• utm_source（ソース）：Teams（Slack とか Discord などもイケます ）
• utm_medium（メディア）：referral（referral 固定）
• utm_campaign（キャンペーン名）：for_sales（なんでもOK）

STEP

共有するURLにパラメータを付与して利用する

たとえば https://example.com/archive/96631073/ を共有したい場合は、以下のようなURLにして使用します。

https://example.com/archive/96631073/?utm_source=teams&utm_medium=refferal&utm_campaign=for_sales

長くてわかりにくくて間違えそう！と思いますよね。Campaing URL Buider を使うと便利です。英語ですが難しいことはないので慣れましょう。

STEP

パラメータ付のURLによるアクセスを確認する

URLを共有できたら、次の日に確認してみましょう。フィルターからソースを選んだ際に、設定したソース名が入っていればOKです。抽出も除外も思いのままです。

ウェブサイトにおける社員アクセスの行動分析は可能ですが、一般ユーザーよりも匿名性が下がるため、個人情報には特に注意してください。今回はお知らせの告知を例に上げていますが、社員がログインして使うようなサイトはマスクをして匿名性を厳守していることを周知しましょう。

＊弊社サイトを例に試してみた

以下のURLをSlack に貼り付けて、スマホから4Gでアクセスしてみました。

• URL：https://coaching.kosgis.com/column/category/strengthsfinders-talent/
• utm_source（ソース）：Slack
• utm_medium（メディア）：referral
• utm_campaign（キャンペーン名）：family

https://coaching.kosgis.com/column/category/strengthsfinders-talent/?utm_source=slack&utm_medium=refferal&utm_campaign=family

次の日にフィルターを確認したところ、しっかり取得できていました！

以上が utm パラメータをつけた除外方法です。自分がアクセスする際には、パラメータをつけたURLをお気に入りに入れておくと使いやすいかもしれません。ただし、パラメータに左右されるため、使用する際には定義して管理しておきましょう。

関係者除外方法のまとめ

長くなったので、簡単にまとめるとこうなります。

帯に短しなんとやら……ですが、カスタムタグを使う方法が一番おすすめです。横文字に慣れてしまえば作業そのものはシンプルですし、今後のアクセス解析に欠かせないので、この機会に挑戦してみてください。

また、関係者の除外は不要なデータを含めないことが目的なので、関係者のアクセスが少ないのなら、こだわりすぎなくても問題ありません。ただし、コンバージョンのテストなどは気をつけてください。

関係者除外に関するQ&A

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第4回は「レコーディング」の機能を詳しく扱いました。まとめると、以下のような内容です。

レコーディング機能はユーザーの行動が録画されているものなので、実際に動いている画面を見ないことには「どういうこと……？」とわかりにくいかもしれません。勉強会でも動画で説明している部分が多いので、ヒートマップ同様、デモやご自身の Clarity の画面を実際に動かしてみてください。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

「レコーディング」機能で知っておきたいこと

実は、“録画” しているわけではない

動画として録画すると膨大なデータ量になってしまうため、ページとアクションの情報を記録して再現しているだけです。エコですね。ただしその分、時々情報が足りなくて読み込みがおかしかったり、コケることがあります。

Clarity session recordings aren’t video streams of users interacting with your site. Instead, this is how they work: Clarity records all the page information a user sees (the DOM content) and the actions they take as they browse your site. A session recording is an animation that captures all user actions across devices, such as mouse movements, clicks, scrolls, and more.

（意訳）Clarity のセッション録画は、ユーザーがサイトとやり取りしているビデオストリームではありません。その代わり、このように動作します：Clarityは、ユーザーがサイトを閲覧する際に表示するすべてのページ情報（DOMコンテンツ）とユーザーのアクションを記録します。セッション録画は、マウスの動き、クリック、スクロールなど、デバイスを介したすべてのユーザーアクションをキャプチャするアニメーションです。

via. Frequently asked questions | Microsoft Learn

だからこそ、一部の情報をマスク（秘匿）することができるのですよね。ほら、動画形式だとボカシとかモザイクになっちゃうじゃないですか。

データのマスク設定は最初にやっておくべし

Clarity には、個人情報などのデータを保護するマスク設定（データを秘匿する機能）があります。このマスク設定は、設定した時点から有効になるため、マスクしていなかったデータをあとからマスクすることはできないことに注意が必要です。マスクされていない情報は Microsoft に送信されることを認識しておきましょう。

フォームのデータはデフォルトでマスクされるため、最低限の個人情報保護はできています。しかし、確認画面でマスクされないことは少なくありません。特に、独自開発したツールなどは Clarity 側で自動対応できない場合が多いです。サイト内でフォームを使っている箇所は洗い出しておきましょう。

Q&Aでも言及していますが、一度取得したデータは最長13ヶ月は削除されないことも大きいです。

レコーディングの画面でできること

レコーディングのデータは簡単に時間を溶かしてしまうので、分析を効率化できる方法を知っておきましょう。

レコーディングの要約

Clarity のレコーディング機能は、特定のデータや上位10個までのデータを要約表示できます。長時間のデータや特定のセグメントをまとめて分析したい場合に役立ちます。

私（コスギ）は長時間のデータ（10分以上など）はセッション分析と合わせていますし、フィルタリングしたセグメントの精度が高ければまとめて要約してもらうこともあります。ただ、コンテンツと合わせて観察しているので「倍速で見たほうが結果的に早い」ということは少なくありません。

セッションリストの確認

レコーディングデータの一覧であるセッションリストでは、データの表示順を、日付の新しい順、ページ閲覧数、クリック数、セッション発生日時など、様々な条件で並べ替えることができます。これにより、特定のページを多く閲覧したセッションや、特定期間に集中したセッションなどを抽出できます。

また、セッションリストには、「ライブユーザー」として、現在サイトを閲覧中のユーザー情報もリアルタイムで確認できます。ライブユーザー情報では、直近5分間のデータが表示され、ユーザーID、地域、デバイスなどの情報が含まれます。

セッション情報とイベントタイムライン（詳細）

セッション情報では、選択したセッションのデバイス情報、行動データ（クリック数、ページビュー数など）、訪問経路（エントリーページ、離脱ページ、参照元）などの定量的なデータを確認できます。イベントタイムラインでは、ユーザーの行動を時系列で可視化し、各イベント（クリック、スクロール、ページ遷移など）がタイムライン上に表示されます。イベントの詳細情報として、イベント発生時間や対象要素などを確認でき、カスタムタグを設定している場合は、イベントタイムライン上で該当イベントを確認することができます。

レコーディングの再生（インラインプレイヤー）

選択したセッションのユーザー行動を動画として再生できます。再生速度の変更や任意の時点への移動、ヒートマップの表示などができます。これにより、スクロール速度や特定要素への滞在時間、マウスの動きなどを視覚的に把握できます。再生中には、デッドクリックや非表示ページへの遷移など、イベントの詳細情報が表示され、クリックすると該当イベント発生時点へジャンプできます。ヒートマップでは、再生中のセッションにおけるクリックの集中箇所を可視化します。

……なんて、画像で説明はしていますが、YouTube 動画の 8:18 頃から見たほうがわかりやすいです。

レコーディングを活用するコツ

機能そのものは、直感的にわかりやすくて理解しやすいですよね。ただ、活用するには「コンテンツの理解」と「ユーザーの理解」の両方が必要です。

レコーディングはセッションとユーザー単位で活用する

Clarity のレコーディングは、セッションとユーザー単位で分析することが重要です。ヒートマップはページ単位なので、補完関係にありますね。以下のようなポイントで使うことが多いです。

ユーザーがサイトに訪れてから離脱するまでの行動を時系列で追うことで、ページ単位での分析では見落とされる可能性のある、ユーザー体験上の問題を特定できるのが、このレコーディング分析の醍醐味。

たとえば、フォーム入力時の離脱や、CTAボタンのわかりにくさ、エラー発生時の行動などを、その前後の行動と関連づけて分析することで、改善策のヒントを得られます。よくA/Bテストをしているなら、使わない手はないでしょう。

レコーディングのデータを分析する流れ（コスギの例）

Clarity は問題発見ツールではなく、すでにある問題に対して解決策を探るツールです。つまり、定期的に観察するよりもアドホックな利用に適しています。そのため、最初は解決すべき問題の設定が重要です。

ページのスクショと気づいた点をメモして生成AIに分析を依頼してみても、得られる事があるかもしれません。

気づいた点をまとめて施策にし、優先順位を定める

YouTube 動画ではレコーディングを見ながらウンウンカンヌン言っているのをざっとお見せしてますが、気づいた点をまとめたものが以下です（クラリティ3分クッキング）

これを「すぐできる」「やるべき」の2軸に並べるとこうなりました。なお、の項目はすでに終わっています。

緊急度と重要度にまとめても良いですが、個人的にはそこにこだわってもしょうがないので、このくらいざっくりとしています。

「すぐ終わるなら、やらないよりやったほうが良い施策」は、拍子抜けするほど数字には表れません。道端の小石を拾うような作業なので、固執せずに粛々と進めましょう。

だからこそ、やるべき課題を見つけたら、KPIを設定してプロジェクトとして進めることが大切です。これは道を整備するようなものなので、しっかりと取り組みましょう。私の例でいえばコンテンツの追加なので、回遊ページが増えて滞在時間が伸びる、もしくはリピーターが増えることが想定されます。

公式のケーススタディも参考にしてください。すべて英語ですが、ページごと Google 翻訳にかければすぐに読めます。レコーディングを活用した事例は多いですよ。

Microsoft Clarity のレコーディングに関するよくある質問

ヒートマップの使い方とも重複するため、Microsoft Clarity のヒートマップに関するよくある質問も合わせてご参照ください。

Microsoft Clarity 勉強会の今後の予定

次回は Microsoft Clarity 活用のキモ、フィルターとセグメントを扱います。日本語環境だと「フィルター」は「絞り込み」と「ファネル機能」の2つがあるのですが、両方取り上げる予定です。

お申し込みは以下からどうぞ

7回目以降の勉強会、どうしようかな……？アーカイブなしの、ざっくばらんな質問雑談会にしましょうか。

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第3回は「ヒートマップ」の機能について詳しく説明しています。まとめると、以下のような内容です。

動画では実際に動いている画面を紹介していますが、文章だけでは説明しにくい（特に機能説明の箇所は動画のほうがわかりやすい）ため、ご自身の Clarity の画面を実際に動かしてみてください。理解してから手を動かすより、手を動かしながらのほうが理解しやすいです。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

ヒートマップとは

Clarity における「ヒートマップ」とは

ウェブサイト上のユーザーの行動、特にクリックやスクロールの状況を、色や濃淡を用いた視覚的な表現方法です。 天気図のように、多くのデータを含む情報をわかりやすく表示するために用いられます。

Clarity では、主に3種類のヒートマップが提供されています。

• クリックマップ
  ユーザーがページ上のどの要素をクリックしたかを視覚化します。クリックの種類ごとに絞り込むことも可能です。
• スクロールマップ
  ユーザーがページをどの程度スクロールしたかを視覚化します。どの部分が読まれずに離脱されているかなどを分析できます。
• エリアマップ
  選択したエリア内での合計クリック数を視覚化します。特定のエリアにおけるクリック数を数値で把握できます。

Clarity のヒートマップならではの機能

クリック種類の絞り込み

通常のクリックだけでなく、「イライラしたクリック」「デッドクリック」「エラークリック」「最初のクリック」「最後のクリック」など、クリックの種類に基づいて絞り込み表示が可能です。 これにより、ユーザーの行動をより深く理解し、ウェブサイトの改善に役立てることができます。

ヒートマップの比較

異なるセグメント（例：1ページしか閲覧していないユーザーと複数ページ閲覧したユーザー）のヒートマップを比較することで、ユーザー行動の違いを分析できます。

スクリーンショットの変更

ヒートマップを表示する際のスクリーンショットを、過去の異なる時点のものに変更できます。 図のように、メニューが表示されてコンテンツが隠れているままだと（スクロールマップはともかくクリックマップで）分析しにくいため、この画面を変更することができます。

Copilot による要約 (Heatmaps Insights)

Microsoft の AI である Copilot（コパイロット）が、クリックマップとスクロールマップの両方の情報を分析し、ユーザー行動の要約と改善提案を提供します。

以上が基本機能ですが、大事なのはこれをどう活用するか、ですよね。

ヒートマップを活用するコツ

ヒートマップを活用するための最重要事項は、明確なCTAを定めておくことです。

CTAとは「Call to Action」の略で、直訳すると「行動喚起」を意味します。ウェブサイトやマーケティングにおいて、ユーザーに特定の行動を促すための要素のことを指しますが、簡単にいうと「そのページにアクセスしたからには、確実にクリックしてほしいリンク（ボタン）」のこと。

「今すぐ購入」「無料で試す」「詳細を見る」といったボタンやリンクを見たことはあると思いますが、これらが一般的なCTAです。これらは、ユーザーに次の行動を明確に示し、サイトの目的（商品の購入、会員登録、資料のダウンロードなど）に向けて誘導する役割を果たします。

ビジネスで Clarity を使うのであれば、成果につながる重要な要素としてCTAの定義は絶対です。一般的な文言で効果が出なければ、ユーザーとのマッチングを徹底的に考えてみましょう。

ヒートマップを活用できる、7つのポイント

ヒートマップは「閲覧ページ」単位で、以下の項目が基本です。資料請求フォームへ遷移するボタンや購入を促すボタンなど、「成果につながるボタン（リンク）のあるページ」のヒートマップを開いて確認してみてください。

ヒートマップを活用する際の注意点

ただ「面白い」だけでなく、「成果につながる」こと、そして「改善施策を実施する」ことが肝心です。好奇心のまま見ているだけではわかった気になるだけで、何の成果も得られません。当たり前のことですが、意外と盲点なんです……

ヒートマップの機能別・主な活用シーン

①クリックマップ：クリック率が低い要因を考える

Clarity のクリックマップで最優先で確認したいのは、CTAがクリックされているかどうかです。クリックしてほしいのにクリックされていない場合、ページ内のリンクの量と重要性、前後の文脈を見直しましょう。

ページを読んでくれたユーザーに対して、つい、アレもコレもとリンク先を増やしがちになってしまいますが、リンクの重要性が不明確な場合、ユーザーを混乱させてしまい、結果的にクリックされない可能性が高まってしまいます。次にどこに行けば良いのかがわかるよう、エスコートするくらいがちょうどいいのですよ。

また、周囲のコンテンツと関連性の低いリンクやボタン、特に、バナー画像のように作り込んでいると浮いてしまい、広告と見なされて無意識のままスルーされます。コンテンツの文脈に合わせて、自然なテキストリンクにしたほうがクリックされやすいことも少なくありません。

大きな変更でなくても効果が大きいので、小さくチャレンジしてみたいですね。

②スクロールマップ：スクロールされない要因を考える

ユーザーがページを訪れても、そのページの下まで読まれることは、そんなに多くはありません。

次のページへ遷移（回遊）したのか、ページを完全に離脱したのかで考え方が変わりますが、まずは Clarity のスクロールマップでCTAまでスクロールされているのか、されていないならどこでスクロール率が大幅に落ちているのかを確認しましょう。色が急に変わっている箇所がポイントです。わかりにくければ数値も合わせて確認しましょう。

特に、モバイル環境での最適化は、意外と見落としやすいです。バイアスに注意して、実機で確認しながら印象を確かめましょう（ほろ酔いくらいの思考力で見てみるくらいがちょうど良いかもしれません）。パソコンで見ているだけでは見落としてしまいがちなことも多いです。

スクロールされないコンテンツには、ページ内リンクも有効です。ブログの記事などには多く見かけるようになった、「目次」がその役割を果たしているといえるでしょう。

スクロールされないコンテンツは、ユーザーの導線として適切な場所にない可能性もあります。そのコンテンツがユーザーのどのフェーズで必要になるのか、考え直して配置換えするだけで、効果が出る可能性は十分にありますよ。

③エリアマップ：人気の項目からインサイトを考察

クリックマップを見てもわかりにくな、と思ったときに使っていただきたいのですが、「とはいえ、どうやって使えばよいのかわからない」という方は少なくない、このエリアマップ。ページ内の並列の要素それぞれの人気度を視覚的に把握するのに役立ちます。

エリアマップで重要なのは、要素の価値が並列であり、位置や文言が影響を与えにくいこと。Microsoft の公式では、Clarity のログイン方法として Microsoft アカウント・Google アカウント・Facebook アカウントの3つがあり、そのどれがクリックされているかをエリアマップで確認できる事例があります。

クリック率の高い要素と低い要素を比較することで、それらを選んだユーザーの背景から、コンテンツの改善に活かしましょう。コンテンツの提供者であれば「それが選ばれた意味」がわかるはずです。

④イライラしたクリック：クリック時の挙動を確認

イライラしたクリック（Rage Clicks）は、連続でカチカチしたクリックのことを指します。

イライラしたクリックのみに絞り込んで状況を確認してみると、問題があるかないか、すぐにわかります。何を当たり前のことをと思われたかもしれませんが、解析で「わかりやすく問題が見つかる」のはあまりないんですよ。

問題が起きている場合、文字どおりユーザーが「あれ？」という混乱と共にフラストレーションを高めています。

• ボタン（リンク）が反応しない
• 画像が拡大されない
• コンテンツの表示が遅い
• ポップアップ画面を閉じにくい
• スライダーやカルーセルが機能しない
• フォームの送信ボタンが機能しない
• 「もっと見る」ボタンが機能しない
• 「検索する」を押しても画面が変わったように見えない
• ドロップダウンメニューが正しく開かない
• フォームの入力欄にフォーカスしにくい

……一部、ずいぶん具体的なものもありますが、そういうことです。「イライラしたクリック」を観察することで、比較的カンタンにページの問題点を洗い出せますので、初心者さんはまずここから試してみてください。

なお、上記の画像にもあるとおり、文章を選択したり画面の端をカチカチしたりしながらコンテンツを読む方は一定数存在します。そのような場合は問題ではありません。ただ、問題ないことが多いと問題を見逃してしまうことには注意しましょう。

⑤デッドクリック：ユーザーの期待を考察

デッドクリック（Dead Clicks）は、リンクではないテキストなど、何も反応しないところのクリックのことを指します。テキストを選択されるときもデッドクリックと見なされやすいですが、そもそも反応を意図していないため、問題ないことも多いです。

では、どんなときに勘違いされて問題になりやすいかというと、以下のようなケースがあります。

• アクションを促されるのにクリックしても変わらない画像（「詳しくはこちら」などが入っている）
• 下線が入っていて、リンクのように見えるテキスト（何も起きない）
• サイトのヘッダーにあるロゴが、トップページへのリンクになっていない
• パンくずリストがリンクになっていない
• アイコンがクリック可能に見えるが、機能していない（白抜きになっているなど）
• 画像がクリックで拡大できそうに見えるが、拡大できない
• SNSのアイコンがクリックできず、ただのデザインになっている
• 製品名がクリック可能に見えるが、詳細ページへのリンクになっていない

……これも、ずいぶん具体的なものもありますが、そういうことです。デッドクリックに関しては、デザイン時には意図していなかったユーザーの行動に直面することがよくあります。レコーディング（録画）のデータも合わせ、めげずに改善していきましょう。

⑥最初のクリック：最初の興味関心ポイントを考察

「最初のクリック（First Click）」は、そのページに訪れた際に最初に興味を持ったポイントを直接的に示しています。

ユーザーがどのような情報に最も関心を持っているのか、具体的に把握することができます。例えば、多くのユーザーが最初に特定の製品カテゴリーをクリックしているのであれば、その製品への高い関心を寄せている可能性があるわけです。それが意図どおりのものでなければ、改善する糸口になりそうですね。

なお、この「最初」はあくまで訪問時なので、新規ユーザーと再訪ユーザー（リピーター）が存在していることに注意してください。

さらに、新規ユーザーとリピーターの行動を比較してみると、最初のクリックの位置が異なることがあります。

新規ユーザーは、ページの上から順に確認していく傾向があり、メニューや目次などの要素を最初にクリックする可能性が高いです。一方、再訪ユーザーは（以前の内容を覚えていて）特定の目的を持って訪れることが多いため、直接目的のコンテンツに向かう傾向にあります。

つまり、新規ユーザーには全体的な概要や導入情報をより目立つ位置に配置し、再訪ユーザーにはアクセスしやすいショートカットを提供するなどの施策が考えられます。他にも、新規ユーザーがアクセスするページ、再訪ユーザーがアクセスするページのそれぞれから、特定のページ内の需要の高い項目にリンクしておくこともできますね。

⑦最後のクリック：そのページの目的を果たせたかを考察

「最後のクリック（Last Clicks）」は、ユーザーがそのページでの目的を達成したか、あるいは別のページに移動する必要性を感じたかを示す重要な指標です。

例えば、特定の箇所に最後のクリックが集中している場合、その箇所がユーザーにとってページの「終点」と認識されている可能性があります。これが外部へのリンクではなく、CTAであってほしいところ。

ページの構成によりますが、最後のクリックがCTAではなく、他の要素に集まっているようなら、動線に改善の余地ありです。直接CTAにアクセスさせなくても良いのなら、そのための動線を確保しておきましょう。

また、最後のクリックが「関連商品」など、他の情報を知りたがっているようなら、その箇所のボリュームを増やすことで回遊を促せます。モバイルなら横スクロールで選べるようにしてもいいですよね。

サイト内での滞在時間を伸ばすことは、そのサイトの影響力を高めることになります。とはいえ、ムダにページを分けてもストレスを与えてしまうため、サイトマップをつくって適切な動線を設計しましょう。

公式のケーススタディも参考にしてください。すべて英語ですが、ページごと Google 翻訳にかければすぐに読めます。

Microsoft Clarity のヒートマップに関するよくある質問

<script>
if (!sessionStorage.getItem('landing_page_url')) {
  sessionStorage.setItem('landing_page_url', window.location.pathname);
  clarity("set", "landing_page_url", window.location.pathname);
}
</script>

Microsoft Clarity 勉強会の今後の予定

次回はレコーディング（録画）機能について解説しつつ、活用のポイントを見ていきましょう。

お申し込みは以下からどうぞ

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第2回は「ダッシュボード」がテーマでした。「ダッシュボード」とは、複数のデータをひとつの画面にまとめて表示する機能のこと。まとめると、以下のような内容です。

ダッシュボードには Microsoft Clarity で使用している指標の（カスタムタグは除いた）すべてが入っているので、クラリティの機能を網羅できますよ。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

Microsoft Clarity の主要な指標と意味

基本的なパフォーマンス指標は、画面の上部にあります。

• セッション数
  ユーザーがウェブサイトに訪問した回数です。Microsoft Clarity では、ボットによるアクセスは除外されます。Google アナリティクス（GA4）とは数値が異なる場合があるので、どちらを基準にするかを決めておくことが重要です。私はクラリティの数値を見ています。
• セッション別のページ数（平均値）
  ユーザーが1回の訪問で閲覧したページ数の平均値です。「会社概要を見に来ただけ」「調べ物をしたらたどり着いた」「スマホで見つけたからあとでパソコンでじっくり読みたい」など、ユーザーの背景（インサイト）によって、訪問時に閲覧するページ数が大きく異なる場合があることを想定しておきましょう。
• スクロールの奥行き（平均値）
  ユーザーがページをどれだけスクロールしたかの平均値（％）です。 この数値が30%を下回る場合、画面の上部で次のページに遷移しているか、離脱しているかしているので、理由を調べてコンテンツを改善する必要があるかもしれません。
• アクティブに費やした時間（平均値）
  ユーザーが実際にページを閲覧していた時間の平均値です。 別のタブを開いている間などは閲覧時間としてカウントされません。 これはクラリティ独自の指標です。

これらの指標は、ユーザーがウェブサイトに訪問し、滞在したり回遊したりする際に重要な指標とされています。ただ、平均値は中央値とは限らないことには注意しましょう。アクティブに費やした時間の平均値が1分でも、数秒見ていたユーザーと、30分見ていたユーザーとに分かれていることも少なくありません。指標はひとつのみではなく、複数組み合わせて考えましょう。

Microsoft が公開しているベンチマークも合わせてどうぞ。あくまで参考として、「ここまではイケるんだな」くらいに思っておくのがオススメです。

Microsoft Clarity の各ウィジェットでわかること

ユーザー関連情報

1. ライブユーザー
   過去10分以内にウェブサイトにアクセスしたユーザーの数です。多少タイムラグはあるものの、リアルタイムで変化します。Microsoft Clarity を開いているときにアクセスがあると、お知らせもしてくれます。
2. 新規ユーザーとリピーター
   ウェブサイトへのアクセスが初めての新規ユーザーと、2回目以降のリピーターの比率です。新規ユーザーとリピーターは、アクセスに利用したデバイスが変わると、同一人物でも別人としてカウントされることがあります。理想的な比率は、ウェブサイトの目的や業種によって異なります。
3. 上位ユーザー
   セッション数が多い、つまりウェブサイトに何度も訪問している（ウェブサイトに興味や関心を持っていると考えられる）ユーザーです。上位ユーザーの行動を分析するには、ユーザーIDカードのようなアイコンをクリックしてみてください。いつ何回アクセスしているのかがわかります。

この「上位ユーザー」に関係者や自分自身が表示されないよう、事前に「設定」から関係者の除外設定を行っておきましょう。

インサイト機能

これは Microsoft Clarity 独自の機能なので過去にも説明していますが、とてもわかりやすく使いやすい指標です。

1. イライラしたクリック
   ユーザーが短い間に同じ場所を連続で「カチカチカチカチ」とクリック（タップ）している状態です。これは、ページの反応が遅い、リンク切れ、期待する動作をしないなどの問題を示している可能性があります。
2. デッドクリック
   ユーザーがリンク以外の場所をクリックしている状態です。ユーザーがテキストを選択してコピーする行動も含まれますので、デッドクリックの発生率は他の指標と比べて高めです。
3. 過剰なスクロール
   ユーザーがページを一気に最下部までスクロールしている状態です。 これは、ページが短すぎる、表示エラーが発生している、またはユーザーが目的の情報を見つけられずにスクロールを続けているなどの問題が起きていることに気づきやすいです。
4. クイックバック
   いわゆる「直帰」、つまりユーザーがページを開いた直後に前のページに戻ってしまう状態です。 これは、ユーザーがページを間違えたか、またはページの内容が期待と異なっていたことが原因として考えられます。

上記の項目から録画を確認することで、緊急性が高く対処もしやすい改善点を見つけやすいです。たとえば、「イライラしたクリック」の録画から、リンクがうまく動作していなかったことに気づいたり、「過剰なスクロール」の録画から、エラーページが表示されていたりなどがわかります。

トラフィック分析

このあたりは、GA4で馴染み深いかもしれません。

1. 参照元
   ユーザーがウェブサイトにアクセスする直前に閲覧していたウェブサイトのURLが表示されます。例えば、”https://www.example.com” のリンクをクリックしてウェブサイトにアクセスした場合、参照元は “www.example.com” となります。ウェブサイト内での回遊の場合は、自ドメインが表示されます。
2. チャネル
   参照元をいくつかのカテゴリに分類したものです。代表的なチャネルは以下の通りです。
   • Organic Search
     Google、Yahoo、Bingなどの検索エンジンからのアクセス。
   • Direct
     ブラウザに直接URLを入力してアクセスした場合や、ブックマークからのアクセス、メールやチャットツールなどのリンクからのアクセスなど、参照元が明確でないアクセス。
   • Referral
     X（Twitter）、FacebookなどのSNSや、他のウェブサイトからのリンクからのアクセス。
   • Other
     上記以外の参照元からアクセスがあった場合。
3. キャンペーン
   広告などの特定のキャンペーン経由でウェブサイトにアクセスした場合に、そのキャンペーン名がこの指標に表示されます。 Google 広告やYahoo! 広告などの広告キャンペーンを設定している場合に特に役立ちます。
4. ソース
   キャンペーンを設定していない場合は、参照元と同じ情報が表示されます。キャンペーンを設定している場合は、キャンペーンのソースに関する詳細情報（例えば、特定の広告グループやキーワードなど）が表示されます。

これらの指標を分析することで、どのチャネルから集客できているか、どのキャンペーンが最も効果的かなどを把握することができます。

Microsoft Clarity では、各チャネルや参照元ごとにヒートマップや録画を分析できるのが大きなメリット。たとえば、X（Twitter）から流入したユーザーを閲覧ページビュー数などで更に分類し、ウェブサイト内でどのような行動を取っているのかを具体的に把握することができます。

ユーザー環境分析

安定した運営を続けていれば、大きく変わることは（ほとんど）ありません。ユーザーの環境と提供側の環境とのギャップがあるか、ユーザーの環境で問題ないかを確認しておきましょう。

1. ブラウザー
   ユーザーがウェブサイトを閲覧する際に使用しているブラウザーの種類が表示されます。例えば、Google Chrome、Microsoft Edge、Apple Safari などです。制作者（提供者）は、自分たちが普段使用しているブラウザーとユーザーの使用ブラウザーが違う場合、ユーザーの使いにくさに意識が向きにくいことがあります。チェックしておくに越したことはありません。
2. デバイス
   ユーザーがウェブサイトにアクセスした際に使用しているデバイスの種類が表示されます。例えば、スマートフォン、パソコン、タブレットなどです。この3つの環境で見比べた際、大幅に低い指標を見つけたら、早めに改善しておきましょう。
3. オペレーティングシステム
   ユーザーが使用しているデバイスのオペレーティングシステム（OS）が表示されます。例えば、iOS、Android、Windows、macOSなどです。たいていの場合は気にしなくても問題ありませんが、エラーが発生した場合などに絞り込み条件として活用すると便利です。

人気コンテンツ分析

1. 人気上昇中のページ
   ページビュー数の多い順にページが表示されます。これにより、ウェブサイトの中で最もユーザーの注目を集めているページを簡単に把握することができます。ページの並び替えを逆にすることで、アクセス数の少ないページを把握することも可能です。
2. 人気の商品
   ECサイト内にある商品の、ページビュー数の多い順に表示されます。 ECサイト以外では、あまり利用する機会がない指標と言えるでしょう。

クラリティには基本的なパフォーマンス指標にページビュー数は含まれていませんが、サイト全体のページビュー数より、ページごとのページビュー数のほうが有益だと判断されているのでしょう。実際、ほとんど見られていないページには他のページからの動線がないことも想定されますので、閲覧を増やしたいページには動線を確保しましょう。

なお、「人気の商品」を表示させるには、商品スニペットの構造化データを追加することで対応できますが、Eコマース用のシステムに実装されている場合がほとんどです。Eコマース機能があるのに表示されないときは、以下の Google のドキュメントを参照してください。

パフォーマンス分析

ユーザーがウェブページを快適に表示できるかを把握できる「コアウェブバイタル（Core Web Vitals：CWV）」の指標を元に、ウェブサイト全体や個々のページのパフォーマンスを把握することができます。

1. パフォーマンスの概要
   Google の PageSpeed Insights (PSI) と同様の機能で、コアウェブバイタルの指標として、ウェブサイト全体のパフォーマンスを100点満点のスコアで確認できます。
   スコアは、「良い」「改善が必要」「良くない」の3段階で評価され、スコアをクリックすると、改善点に関する詳細情報が表示されます。
2. URLのパフォーマンス
   ページごとの PSI 結果をスコアで確認でき、スコアが低い順に並べ替えることができます。これにより、パフォーマンスの低いページを特定し、改善すべきポイントを絞り込むことができます。

これらの指標を分析することで、ユーザーが快適にウェブサイトを閲覧できるよう、パフォーマンスの改善に役立てることができます。Google がコアウェブバイタルを提唱したのが2021年の6月で、2024年3月以降、「FID」は「INP」に置き換わっていますが、クラリティでは「FID」が使われています。

「パフォーマンスを向上させる方法の詳細情報」から詳細を確認しようとしても英語のページなので、より深めたい方は、コアウェブバイタルそのものを確認することをオススメします。

JavaScript エラー

このウィジェットでは、ウェブサイトで発生している JavaScript エラーを確認できます。「クリックエラーのみを表示する」をオンにすると、ユーザー体験に悪影響を与えている可能性のあるエラーに絞り込むことができます。

エラーが発生した時のユーザーの行動は、録画で確認できます。エラー発生時にユーザーがデッドクリックなどをしている場合は、早急に修正する必要があります。また、パソコンでは問題なく表示されていても、スマートフォンでは読み込みが遅くなったり、表示が崩れていたりすることにも気づきやすいです。

とはいえ、JavaScript エラーは環境やタイミングによって再現しにくい場合が少なくありません。致命的なエラーが発生している場合を除き、JavaScript のエラー修正に固執するよりも、ウェブサイトの本質的な改善を優先する方が良いでしょう。

ダッシュボードで特殊なウィジェットを表示させるには

クラリティのダッシュボードには、デフォルトで用意されているウィジェット以外にも特殊なウィジェットがあります。

コンテンツウィジェット

コンテンツウィジェットは、ブログ記事などのコンテンツ（本文）に対するユーザーの行動を詳細に分析できる機能です。data-clarity-region="article" で囲まれた箇所が対象になり、対応しているCMSもあります。

1. 閲覧者の種類
   一度のセッションで何ページ閲覧したかによって、ユーザーを「一度で完了」「カジュアル」「重度」の3つの種類に分類します。
   • 一度で完了：1ページのみ閲覧
   • カジュアル：2〜3ページ閲覧
   • 重度：4ページ以上閲覧
2. 閲覧動作
   記事を最後まで読んだのか、途中で離脱したのかを「関与」「ヘッドラインで破棄」の2種類に分類します。
   • 関与：記事を最後まで読み終えた
   • ヘッドラインで破棄：ほぼ直帰（見出しを表示しただけ）

たとえば「カジュアル」で絞り込むと、3ページくらいは読んでいるのにコンバージョンに進まない、などのもどかしいユーザーのインサイトを探ることができます。ユーザーの行動を見ると、何度か来てくれていることがわかったりもするんですが。

なお、別タブで記事を開いているなど、アクセスしているのにアクティブになっていない場合は、「ヘッドラインで破棄」と判定されるのではないかなという印象はあります。公式ドキュメントは以下に。

ECウィジェット

Shopifyと連携し、ユーザーの購買行動を分析（ECサイト向け）できるウィジェットです。購入割合の指標は Shopify の Clarity プロジェクトにのみ対応しており、一般的なECサイトでは使用できません。また、Shopify Plus サイトの Clarity プロジェクトなら、購入完了前に離脱したユーザーを支払いステップごとに細かく絞り込むことができます。公式ドキュメントは以下に。

Shopify ユーザーなら使ってみる価値はありますが、個人的にはファネル機能（日本語では「フィルター」と表示されている機能）を設定することで似たようなウィジェットを作れると思います。以下も参考にどうぞ。

その他にも、レシピサイト向けのウィジェットや Hubspot との連携など、かゆいところに手が届くような改善が進んでいるので、今後もどんな機能が出てくるか楽しみですね。

おまけ：Clarity Copilot も始まっています

私の環境ではプライベートプレビューにアクセスできたので、Clarity Copilot の機能も使えています。

たとえば「過去7日間の、イライラしたクリックが一番高いページの具体的な改善例を教えて」と、時期を指定して具体的な回答を依頼すると、以下のような回答が返ってきます。録画やヒートマップを確認しやすくなりますが、もうちょっと、ページのコンテンツに合わせたアドバイスが欲しいところですかね。

過去7日間でイライラしたクリックが一番高いページは、こちらのページで、合計52回のイライラしたクリックが発生しています。以下に具体的な改善例をいくつか挙げます。

改善例

1. ページの読み込み速度を改善する:
   • 画像や動画の最適化
   • 不要なスクリプトの削除
   • キャッシュの利用
2. ユーザーインターフェースの改善:
   • ボタンやリンクの配置を見直し、クリックしやすい位置に配置する
   • フォームの入力フィールドを簡潔にし、必要最低限の情報を求める
3. コンテンツの明確化:
   • 重要な情報を目立たせるために、見出しや箇条書きを使用する
   • 誤解を招く表現を避け、ユーザーが求める情報を迅速に提供する
4. フィードバックの提供:
   • ユーザーがクリックした際に、即座にフィードバックを提供する（例：ロード中のインジケーターを表示する）
   • エラーメッセージをわかりやすく表示し、次に取るべき行動を示す

これらの改善を行うことで、ユーザーのイライラを軽減し、より良いユーザー体験を提供することができます。

公式ドキュメントは以下。

Microsoft Clarity のダッシュボードに関するよくある質問

Microsoft Clarity 勉強会の今後の予定

次回はヒートマップを徹底的に活用する予定です。

お申し込みは以下からどうぞ

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。先日開催した、第1回 Microsoft Clarity 勉強会を記事化しました。内容は以下のとおりです。

実際の画面を触ってみたデモも動画にありますので、合わせて参考にしてください。Microsoft Clarity を知りたいのなら、実際にデモ画面を触ってみるのが一番です。登録なども不要ですし。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

Microsoft Clarity の基本：できること・注意点

Microsoft Clarity（クラリティ）は無料で利用できるユーザー行動分析ツールです。ホームページに訪れたユーザーの行動を詳細に把握し、改善に役立てるための機能が充実しています。

主な機能と活用方法

1. クリックヒートマップ
   ページ内のどこがクリックされたかを視覚的に表示します。 グローバルナビゲーションのクリック率や、ページ内の特定要素への関心の度合いを把握できます。
2. スクロールヒートマップ
   訪問者がページのどこまでスクロールしたかを色分けして表示します。 ユーザーが離脱しやすいポイントを把握し、重要な情報が適切な位置に配置されているかを確認できます。
3. エリアヒートマップ
   ページ内の特定エリアへのクリック率を分析できます。 クリックヒートマップでは散らばってしまうクリックデータを集約し、ボタンやバナーなどの要素に対する反応を正確に把握できます。 ただし、使いどころが難しい側面もあります。
4. レコーディング機能
   訪問者の実際の行動を動画で再現できます。 マウスの動き、クリック、スクロールなど、ユーザーがサイト上でどのように行動したかを詳細に把握できます。 レイジクリック（怒りのクリック）などの問題行動を発見し、改善につなげられます。
5. 多様なフィルター機能
   ユーザーの行動を様々な条件で絞り込み、分析できます。 レイジクリック、デッドクリック（無効なエリアへのクリック）、過剰なスクロール、クイックバック（短時間でのページ離脱）など、特定の行動パターンに絞り込んで分析できます。
6. AIによる自動要約
   MicrosoftのAI「コパイロット」が、ヒートマップやレコーディングデータの概要を自動でまとめてくれます。 ユーザー行動の概要把握、改善のアドバイスなどを提供します。 すべての分析結果が正確とは限りませんが、分析時間の短縮に役立ちます。

Clarity を導入する前の注意点は、以下の記事を参考にしてください。

Clarity と他ツールとの比較：GA4、サーチコンソールとの違い

Clarity と Google Analytics 4（GA4）、Google サーチコンソールとの違いを比較します。

定量データと定性データを、自社サイトの内外で評価しましょう。ユーザーインタビューやアンケートも大切なので、Microsoft Clarity を使う際には他のツールも合わせて使いましょう。視野が狭くなりかねません。

Clarity のインストールと設定：登録方法と設定項目

Microsoft Clarity の導入手順と設定項目について解説します。

アカウントを登録

Microsoft アカウント、Facebook アカウント、Google アカウントのいずれかを使用して登録します（Google アカウントでの登録が人気のようです）。

メールアドレス＋パスワードでの登録はできませんので、上記3つのどれかのアカウントが必要です。

インストール方法

アカウントを登録できれば、自社サイトに導入するのはそれほど難しくありません。ただ、ウェブサイトの管理権限がない場合は担当者（ウェブサイトの管理業者）にしてください。

WordPress ユーザーなら、Microsoft Clarity のプラグインをインストールするだけです。JavaScript でタグを設定することもできますが、管理画面で Clarity のデータも確認できるのでプラグインを使うのが間違いありません。

中級者以上なら、Google タグマネージャーを利用するのがオススメです。なお、タグマネージャーのテンプレートギャラリーには Clarity 用の非公式タグも存在しており、カスタムタグを使う際にちょっと便利です。以下の記事も参考にしてください。

設定を確認しておく

Clarity の「設定」で、以下をチェックしておくのがオススメです。

• Google アナリティクスとの連携
  GA4 のデータで絞り込めるまでには至っていませんが、基本的な指標を確認できるので設定しておきましょう。
• マスク設定
  フォームの入力内容は自動的にマスクされますが、確認画面やサンクスページなどで個人情報が含まれる可能性のある要素には、必ずマスク設定を行いましょう。
• IPブロック
  関係者のアクセスデータを除外するために、IPアドレスをブロックします。IPアドレス以外のブロック方法を検討する余地もあるんですけどね。
• Chromeアドオン「Clarity Live」
  Clarity の動作確認や簡易的な分析に役立ちます。入れておいて損はないかな、くらい。

Microsoft Clarity に関するよくある質問

Microsoft Clarity 勉強会の今後の予定

当初は、勉強内の内容をそのまま YouTube に掲載できれば良いなと思っていたのですが、想像以上にパソコンが追いつかないことがわかったことで、動画は撮り直しています。同様の方法で続けるのは再考の余地がありますが、テーマとしては以下の内容で行っていく予定です。

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

クラリティを使っていると、「コレが取れたらいいのにな〜……」と思うこともありますよね。そんなときは「カスタムタグ」を使って、デフォルト指標にはないデータを取得しましょう。

ということで今回は Google タグマネージャー（GTM）を扱える、中級以上の方向けです。

まあ……サクッとデータレイヤーに設定するだけで終わるので、すでにGTMでインストール済みでカスタムタグを使いたいだけなら、カスタムHTMLでデータレイヤーを直接ｺﾞﾆｮｺﾞﾆｮするのが地味に早いかもしれません。

クラリティをGTMで導入しているなら、公式が提供しているタグを利用している方が多いと思いますが、APIを簡単に参照できるタグがあります。公式ブログでカスタムフィルターを簡単に活用するために紹介されていた、非公式のものなんですけど（こういうノリ、MSさんにしてはオープンソースっぽさある）。APIに関する公式ドキュメントは以下なので、だいたいコレを扱えると思っておくと良きですね。

Luratic Microsoft Clarity でカスタムタグを設定しよう

では、早速カスタムタグを設定！……と言いたいところですが、まずはカスタムするための中身を用意してから設定しましょう。鍋があっても素材がなければ、料理できませんからね。

STEP

使いたい変数をつくっておく

今回はカスタムタグに「ページのタイトル」を使いたいのですが、GTMの組み込み変数にはありません。

そこで、ユーザー定義変数「Page Title」をつくっておきます。「Javascript 変数」を選んで、document.titleって入れておくだけ。

こうしておくと、{{Page Title}}と設定するだけでページのタイトルを取得できます。

GTMの組み込み変数には色々あるので、先に眺めておくといいですよ。

STEP

Microsoft Clarity のタグ（luratic）を設定する

Google タグマネージャーのタグを追加する際に、テンプレートギャラリーから「Microsoft Clarity」と検索すると、2つ表示されます。

Official がついておらず、提供元が luratic になっているものを選びましょう。一瞬、こっちが公式だと思っちゃうくらいの存在感。

3つの権限を求められるので、進めていきます。

STEP

カスタムタグにページタイトルを設定する

タグの設定を完了させましょう。クラリティの Project Id を入れるだけでも動きますが、Add Custom Tags に以下を追加します。

• key：pageTitle（クラリティで使います）
• value：{{Page Title}}（さっき作った変数）

※トリガーを All Pages にしておけば、ページが読み込まれるたびにクラリティのタグが発火します。私自身のデータは取りたくないため、WordPress にログインしている場合のページビューは例外としています。

設定し終えたら、［プレビュー］で確認しておきましょう。当然、自分を除外しているとデータは取れないことを加味しておいていただきたいのと、プレビューでも Microsoft Clarity はデータを取得するので、参照元に gtm-msr.appspot.com というドメインが含まれることを把握しておいてください。知らないと不審なドメインからアクセス来てる！？ってビックリするでしょうから。

この一連の流れで、カスタムタグの設定は完了です。説明はちょっと長いですが、やっていることは単純なのですぐ使えますよ。

その他のカスタムタグの実装例

汎用的にオススメできるカスタムタグをご紹介します。

Microsoft Clarity の最大の特長は、ユーザーの行動をさまざまな角度からフィルタリングできること。とはいえ、ただでさえ時間が溶けるツールですし、下手すればストーキングになりかねません。だからこそ、適切な理由をもって顧客理解を深める一助として考えてください。

CTAのクリック

まずはわかりやすいところから。CTA（Call To Action：コンバージョンに直結するボタンやリンクのこと）のクリックを取得して、「とりあえず興味は持ったらしい」ユーザーを絞り込むためのカスタムタグをつくってみましょう。CTAをクリックしているということは、「お店で商品を手に取ったけれど、カゴに入れるかどうかは別」みたいな心理状態です。

公式記事を参考に、カスタムタグに設定してみましょう。私のサイトはCTAに .cta-coaching という class を設定してあるので、これがクリックされたかどうかを取得するだけで済みます。

• 「CTAがクリックされやすいページはどれか」を知りたい場合は、GA4側でCTAクリック数も測定しておき、PVで割ってCTAのクリック率を Looker Studio に渡して確認すると考えやすいです。クラリティはあくまで定性分析。

特定の項目の表示

Microsoft Clarity にはアテンションヒートマップがないため、ページ中の項目がどれだけ見られているかどうかはハッキリわかりません。それを、GTMにある「Percent Visible」や「On-Screen Duration」で確認するものです。「施策としてコレを追加したから、どれだけ見られているのか確認したい」という場合にも使えます。

今回は、上記のCTAボタンがそもそも表示されているのかを「ボタンがすべて（100％）表示されているならtrue」としました。個人的には、Microsoft Clarity で分析するなら「何％見えているか」を確認するより「見てるのか・見てないのか」を確認したほうがユーザーの意図を検証しやすいと考えています。

動画の再生割合

プロモーションや使い方などの目的はさまざまですが、ページに埋め込まれた動画を見てくれた人の興味関心度は、相当高いと思われます。そんなユーザーの行動、気にならないわけがないですよNE！

「動画を再生割合」なら、動画の長さに限らずどれくらい再生されたかを取得できます。動画用の組み込み変数「Video Percent」を利用すれば、難しくありません。実際に再生した割合ではなく進捗割合なので、飛ばし飛ばしで80％ということもあります。それでも、ある程度は参考になるのでは。

YouTube 動画そのものは YouTube アナリティクスのほうが詳細に分析できますので、Microsoft Clarity ではあくまでユーザーの行動にフォーカスして分析します。

コンテンツグループ

ウェブサイトに存在するページには、それぞれ役割があるはず。それらをコンテンツグループとして取得し、活用することもできます。これはカスタム変数でデータレイヤーを取得するためのプログラムが必要になります。

最初からそこまで考えていないなら、ブログやお知らせのように記事のカテゴリを取得するところからやってみましょう。そうすると、「特定のコンテンツグループに興味を持っている人の行動」から見えてくるものがあります。

• 「どのコンテンツグループが〇〇しやすいか」を知りたい場合は、GA4側でコンテンツカテゴリのカスタムディメンションを設定しておくと使いやすいです。絶対数や割合から考えたい場合は、定量分析のほうが得意です。

カスタムタグを設定したら

GTMの［プレビュー］でウェブサイトを操作しながら「Data layer」でデータを取得できていることを確認できたら、バージョンを公開して完了です。

GTMで設定できていれば、クラリティ側でやることは何もありません。30分〜2時間くらいで取得され、カスタムフィルターで使えるようになります。適切にカスタムタグを実装しておくと、ファネルにも活用できます。

他にも、ログインユーザーの性別や年齢、ネットワークドメインなどをデータレイヤーに入れて取得することもできますが、個人的には、こういった属性情報で絞り込んで Microsoft Clarity を見ても、得られるものはないと考えています。やるなら Microsoft Clarity ではなく、別途安全な環境で顧客情報の分析を行ったほうが良いですし、「取得できるデータ」と「活用できるデータ」は異なることを認識しておくことを強くオススメします。

素敵なカスタムライフを(/･ω･)/