はい、ごめんください。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 ではなく、別途安全な環境で顧客情報の分析を行ったほうが良いですし、「取得できるデータ」と「活用できるデータ」は異なることを認識しておくことを強くオススメします。

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

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

Microsoft Clarity は、ユーザーの行動動線をさまざまな切り口で観察できるツールなのですが、ここにファネル機能が追加されました！（2024年6月4日現在、日本語だと「フィルター」になってるんですが……）

公式ページは以下。ちなみにセッションベースなので、サイトを離れたユーザー行動（AIDMAなど）ではなく、カートのカゴ落ちやユーザー登録時のエラーなど、一連の流れをドロップアウトしていないかどうかを観察するのに適しています。

実際に Microsoft Clarity のファネルを設定してみよう

クラリティでファネルに設定できるのは、スマートイベントとURLの指定です。すでにスマートイベントを設定している方は話が早いと思うので、初めての方はURLの指定からやってみましょう。

確認画面を含んだフォーム（問い合わせ、資料請求、メルマガ登録、会員登録、カートなど）を実装しているウェブサイトで使いやすいです。本来ならスムーズに進んでもらいたいのに、どこのステップで落ちてしまっているかどうかを確認できます。

ファネルを追加する

ダッシュボードからでも進めますが、［設定］からいつでも行けます。

STEP

［設定］からファネルアイコンのメニューに進む

［新しいフィルター（New funnel）］から進みましょう

STEP

「ページのアクセス数」でURLを設定

「ページのアクセス数（Page visits）」から、ユーザー動線に必要なURLを選びましょう。

以下のように、URLの途中まで同じURLが混在していることもあるため、完全一致や前方一致を間違わないように設定する必要があります。正規表現も使えます。

STEP

ステップを最後まで追加

URLを追加すると右側に設定されるので、ステップ名を設定しておきましょう。このステップ名には日本語を使えます。

STEP

最後にファネル名を設定

このファネル名は英数字のみ（スペースは使える）なので、そこだけご注意ください。

ダッシュボードでドロップオフを確認

Microsoft Clarity のダッシュボードに戻ると、設定したファネルを確認できます。

• コンバージョン率（Conversion rate）
  ファネルを正常に完了したセッションの割合。一般的なCVRではなく、あくまでファネルベースです。
• 変換されたセッション（Sessions converted）
  ファネルを正常に完了したセッションの数。ファネルの完了をコンバージョンとしています。日本語ェ……
• 変換する時間の中央値（Median time to convert）
  ファネルを正常に完了するまでにかかった時間の中央値。Median なので平均値ではなく中央値です。

上記の画面は、30日間に2回のCVがあった（購入された）という弊社のデータです。

ECがメインのサイトではないため、（ECとして提供している）CV数は毎月これくらいで問題ないのですが、カートに入れたにも関わらず、購入手続きに進んだ人は4割しかいないのはちょっと意外でした。なお、購入完了はこの3分の2なので、まさに「カゴ落ち」が起きている状態です。

100％にすることはまず不可能とはいえ、原因を探ってできることはやっておきたいですよね。

ここからが、クラリティの本領発揮です( ･ω･ )و✧

Microsoft Clarity でファネル落ちを絞り込んで改善する

ダッシュボードのファネルには、それぞれ「◎％ この手順に到達しました／到達しませんでした」という項目があり、セッション数も記載されています。

この項目をクリックすれば、データのフィルタリングがなされたダッシュボードを見ることができますし、ここからレコーディングやヒートマップを確認することもできます。

つまり、どうしてカゴ落ちしたのかを探索できるんです！

実際にカゴ落ちしたレコーディングを見た洞察と対策

4セッション（3ユーザー）しかいないため、2倍速でレコーディングを見て思ったことの箇条書きです。結果的に、CV数は落ちるけれど、UX的に適切な動線の整備を対策として選びました。

ユーザー①

参照元がカートになっているので、一度切れたセッションで戻ってきてるのかもしれない。実際、ユーザーIDで絞り込んでみるとセッションが2件あった（今回絞り込んだ4件のうちの2件だった）。［購入手続きに進む］ボタンが押されているところで動画が切れているので、ツール側の問題は少なからずあるかもしれない。

• 【洞察】どうやら、1件しか買えない商品を複数購入したくてもできない状況に思えた。
• 【対策】複数購入したい場合は、公式サイトへの動線を設定しておくと良さそう。

ユーザー②

メリデメ記事からの流入なので、興味はあるけれどしっかり知っておきたいユーザーの様子。流れも丁寧に確認している様子が見て取れた。最終的に、公式サイトのほうで購入したような動作のように見える。

• 【洞察】流れのページはスマホだとスクロールが長すぎて読み飛ばしがち。中間にもCTAはあるものの、ユーザー②のようなニーズの相手には、一気にスクロールしたあとのラストのCTAとはニーズが異なってしまう。
• 【対策】ラストのCTAに、購入用の動線を追加しておく。また、流れをそれぞれアコーディオンにして、必要な部分だけクリックして表示できるようにしておくと、スクロールがエコになりそう。（ただし、ユーザー②はクリック後に開きっぱなしだったので完全とはいえない）

ユーザー③

価格更新のお知らせから記事からの流入で、その後も該当ページをよく読んでいたため、価格についてしっかり知っておきたいユーザーの様子。ユーザーIDで絞り込んでみたところ、次のセッションでは購入後の使い方のページに（検索から）流入していた。

• 【洞察】おそらく、カートに入れた際の価格を確認したあとに「安くならないなら、公式サイトで購入しよう」となったのではないかと思われる。
• 【対策】ショップページか商品ページに、追加費用はなにもないことを記載しても良いかもしれないけれど、自分の目で確認しないと気が済まないと思うので、キャンペーン時以外は気にしなくても良さそう。

ということで、実際におこなう施策案は以下のとおり。

流れのページはスマホ環境におけるUI/UX改善の余地がありそうだけれど、また別途行動分析して改善したほうが良いと判断しました。

それほど大きな影響はないどころか誤差程度のネタですが、一連の分析行動をなぞっておくのはオススメしますよ。楽しいYO！

他にもファネルを使えそうなパターン

以下のようなファネルで使えそうです。似たようなファネルもあると思うので、実際のウェブサイトの動線を洗い出してみてくださいね。

なお、上記は個人情報の入力にも関わる部分なので、レコーディングを確認するうちに、「個人情報が見えちゃってる！！」ってことを発見できるかもしれません。そんなときは、以下の記事を参考に、マスクを設定しておくことを強くオススメします。そんなに大したことはしていないけれど重要なので、知らなかったでは済まされないですよ。

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

アクセス解析界隈でも Cookie に関して賑やかになりつつあるのですが、そもそも Microsoft Clarity はどういう Cookie を取得しているのか、どんな情報を送っているのか、セッションはどれくらい保持しているのか、などを調べてみた備忘録です。「Cookie（クッキー）」がどのようなものかはわかるくらいのニッチな中級者向け。

考察はいらんという方は、公式サイトを見てください。

Microsoft Clarity が扱う Cookie

他にも、Chrome の拡張機能で確認する限りでは、ANON と NAP を確認できたサイトもありました。clarity.ms がドメインなので、サードパーティー Cookie でしょうか。

これらは Microsoft Clarity だけでなく、MS関連の Cookie のようなので、Microsoft のプライバシーに関する声明で確認できます。

MUID や ANON や NAP は、異なるドメイン（bing.com）でも同じ値を確認できています。有効期限はバラバラですが、1ヶ月以上先ですね。

つまり、_clck と _clsk はファーストパーティ Cookie、それ以外はサードパーティー Cookie と判断できます。Google はサードパーティー Cookie を段階的に廃止する予定というアナウンスしている（そして延期している）ようですが、Microsoft はどうなるか、今後まったりと追っていきます。サードパーティー Cookie の廃止でどんなことが想定されるのかは、Web担当者フォーラムの以下の記事がわかりやすいかも。

Microsoft Clarity におけるセッション保持の考え方

まず、用語が似ていてわかりにくい「セッション Cookie」は、有効期限を設定せずにブラウザが閉じられたら一緒に消滅する Cookie です。ですが、最近のブラウザは見ていた画面を復元する機能がついているので、一緒にセッション Cookie も復元されるんですってね。

ですが、Microsoft Clarity で使用している Cookie はどれも有効期限を確認できたので、「持続的 Cookie」といえます。

同一ユーザーかどうかを判断している _clck の有効期限は1年間。つまり、意図的に削除しなければ最短でも1年間は、再訪問しても同じユーザーだと判断されるわけですね。Microsoft Clarity 側では、ユーザー ID に絞り込んで追うことができます。ただ、録画データの保持期間は30日間であることは覚えておきたいところ。

そして、同じセッション（訪問）だと判断している _clsk の有効期限は24時間。つまり、何度サイトを離れても、24時間以内に（同じブラウザから）戻ってくれば一連の録画データとして確認できると考えられます。

このセッションの考え方は、Google アナリティクス（GA4）とは異なるかもしれません。UA時代は「セッションは30分」が一般的だったんですが、Microsoft Clarity の場合はそれより長いんですよね。一連のユーザーの行動にどこまで連続性を考えるのかツールによってスタンスが違うため、その特徴は押さえておきましょう。Microsoft Clarity に関しては「ユーザー行動分析ツール」と銘打っていますし。

あとはソースを見てみないとわからない部分ではあるのですが、「同一ユーザーがスマホで調べた後にパソコンでじっくり読む」みたいな行動は少なからずあるので、ここを Microsoft さんはどう考えているのか気になるところです。サードパーティー Cookie で、MSログインが有効なユーザーは追えるのかな。Chrome は Cookie を別デバイスで引き継ぎそうなものですが、このあたりは実際どうなんだろうとか。

大したオチはないですが、ユーザーは1年、セッションは1日って覚えておけば、ニーズに応えられそうでしょうか。

ごめんください。クラリティ大好きコスギです。

Microsoft Clarity（マイクロソフト クラリティ）は無料で使えるユーザー行動分析ツールですが、知っておかないとマズイ落とし穴があります。

クラリティ好きとしては、良いところも悪いところも知ったことで使っていただきたい。Microsoft Clarity に限らず、どのツールも必ずメリットとデメリットがあるので、ひとつのツールのデメリットを挙げて「これは使わないほうがいい」と判断するのはもったいないですから。

ただ、ツールには開発者の思想が入っているので、その思想が「好きになれない」という理由で検討するのもアリだと思っています。私も Google アナリティクス（GA4）は開発者向けみたいになっているのが、個人的には好きになれないですし。じゃあ MS さんはどうなのよって話。私は Apple 派なので MacBook Air と iPhone を使ってますけれど。

関連情報が多いので結論をまとめると、以下の3つです。前提は大丈夫だからリスクの対処法を知りたい方は「Clarity のマスク設定はバランス以上を推奨」からどうぞ。

Microsoft はAI推進派。つまり……

そもそも Microsoft 社は OpenAI 社にも出資している AI 推進派です。Microsoft Clarity で取得したデータも AI 活用されることが前提になっています。ですから、AI 反対派だったのに「無料だから」という理由で Microsoft Clarity を使うと、取得されたデータをAI活用されることに対して「聞いてない！」みたいなことは起こるかもしれません。

実際、すでに Microsoft Clarity には Copilot（コパイロット）として、AIによる要約機能が搭載されています。この時点で、すでにAIが学習しているということがわかります。以下の記事も参考にどうぞ。

ということで、「Teams は使えるけど、Copilot は使えない」という企業は、Clarity の導入も難しいでしょう。ですから、Microsoft Clarity の導入を相談された制作会社は、相手の企業がAI活用の一端を担うことになることに同意できるか確認しておく必要があります。「わかりやすい」「無料」だけでとびついちゃいけない。

むしろ私のように、「AIバンザイ！ChatGPTバンザイ！止まったら仕事できない／(^o^)＼」というAI推進派は、Clarity の進化をワクワクしながら見ていけるのではないでしょうか。

だからこそ、注意すべき点があります。

意図せず個人情報を取得してしまいやすい

そもそも、個人情報は定義されている？

Microsoft 社は、Windows や Office 製品などによって企業が保有するデータ（ファーストパーティーデータ）をたくさん持っており、そこには個人情報も含めた企業情報が入っています。そして Microsoft 社は、このファーストパーティーデータをAIに活用することを公言しています。

「改めて考えたらちょっと怖い」と思ったら、自分のお金を家ではなく、銀行に預けるようなものと考えてみてください。運用されるので預けたお金は数字になりますが、預けた人の情報は固く保護されています。ですから、データ保持は信用の世界なんですよね。

個人的には、世界的大企業である Microsoft 社が「一個人」なんてみているわけがなく、「こういうニーズの一部」という程度にしか扱われないことを信じて疑っていないために、別に怖くはありません。それに、ChatGPT に私を覚えさせることのほうが大変です。ChatGPT の企業向けプランが出ていることから、特定の業務に限ったニーズに応える姿勢はあるものの、個人情報を取得してどうこうしないようにしている印象はあります。Microsoft 社の本社がアメリカではなくヨーロッパにあったのなら、状況はもっと違っていたかもしれないんですけども。

しかし、自分はともかく顧客やユーザーの個人情報を Microsoft 社に渡してAI活用されるのは気持ち悪いし怖い、ということもあるでしょう。ただのチラシなど個人情報を取得しないサイトならともかく、お問い合わせや申し込み、購入フォームがあるのなら、Microsoft Clarity を「使わない」か「適切に設定して使用する」のどちらかになります。

もちろん「個人情報」をどこまでの範囲と捉えるのかにもよります。Microsoft Clarity で得られる録画データを個人情報といってしまえば、それはもう、そのとおりです。人それぞれだからこそ、企業はプライバシーポリシーなどで「（自社の考えている）個人情報の定義」を明記しているわけです。

これはもうスタンスを明確にしておくべき話なので「自分の情報が使われるのは嫌だけど、ユーザーの情報から得られるものがあるかも」と都合の良いことを考えているなら、Clarity は導入しないほうが良いです。何のためにデータを取得するのかを考えてからでないと、ユーザーの個人情報をリスクにさらしてしまいかねません。

ここは Clarity に限らず、広告ツールでも話題になっているクッキーのデータにも関わってくるので、アユダンテの寶さんの記事も合わせてどうぞ。「自分たちのビジネスがユーザーや顧客、社会とどう関係を築いていきたいのかを、倫理を含めた長期的な視点をもって意思決定する」ことの大切さが書かれています。

ちなみに、GA4では個人を識別できる情報を取得すること（＝Google アナリティクスによって Google に個人を識別できる情報を譲渡すること）は禁止されています。Clarity は明言していないぶん、透明性を確保することを推奨しています。個人を識別できる情報ではなく、一定の行動パターンを取得して、さらに保護したうえで使用するという認識です。以下のFAQがわかりやすいです。

一番の問題は「Microsoft Clarity を導入したサイトはユーザーが行動を把握され、拒否できない」（DNT設定ができない）というのは大きいかと思います。個人を識別できない行動データから恩恵を得られることも多いですが、「なんか気持ち悪い」という感情面はどうしてもあるでしょう。

ただし、このスタンスは Microsoft 社そのものなので、いまさら Clarity に限った話でもないのかなという印象はあります。FAQには “Clarity doesn’t currently respond to browser DNT signals.（クラリティは現在、ブラウザのDNTシグナルに応答しません）” とされているので、将来的には変わるかもしれません。

ちなみに、Cookie の同意に関する情報は公式にも記載されています。ファーストパーティ Cookie とサードパーティ Cookie の両方がありますが、どんなデータを扱っているのかは以下でまとめました。

Clarity のマスク設定はバランス以上を推奨

個人情報が見えちゃうパターン

「個人情報が見えちゃうって、どういうこと？」と不思議に思っている方向けに、実例をお見せします。私の別サイトで行っている診断系ツールを、私がやってみたものです。

ニックネームの名前欄はマスクされた

Microsoft Clarity の録画データとして、どこまで情報が秘匿されるのかを知りたかったため、マスク設定は（一時的に）「リラックス（Relax）」に設定してから確認したところ、テキストはまったくマスクされていませんでした。

そのため何を選択しているのかはバッチリわかりますが、ニックネームの入力欄はマスクされました。選択項目はマスクされず、入力欄はデフォルトでマスクされるのでしょう。マスクされた情報は Clarity に送られません。

ちなみにここで「コスギ」と入力していますが、●は5つなので、文字数もわかりにくい感じですね。

次のページで平文で表示されるとマスクされない

次のページでは、ユーザーの診断結果が表示される仕様になっていますが、ここで名前が表示されてしまっています。「リラックス（Relax）」モードで入力欄は自動的にマスクされていても、テキストはすべて表示されますね。

つまり、

• お問い合わせ内容の確認画面
• 相手のメールアドレスや名前を使って表示している完了画面

の場合は注意……というより、間違いなく対策が必要です。

設定したらすぐにマスクされた

モードを「バランス（Balance）」にし、名前の部分を<span data-clarity-mask="true"> 〜 </span>で囲んでもう一度試した結果、ちゃんとマスクされていることを確認できました。録画データは30日間で抹消されますが、過去のデータにさかのぼってマスク設定はできませんので、確認する場合は再度試す必要があります。

ついでに日付の部分までマスキングされていますが、マスク対象はdata-clarity-mask="true"を設定しておくとすぐに対応できます。

フォームの内容や確認画面など絶対にマスクしておきたい箇所は、CSSセレクターで設定することもできるので、form（formタグの中身全部を対象）としてClarity のマスク設定に入れておくのがオススメです。

確認画面の情報が form タグに入っていない場合や、完了画面に個人情報を使用している場合は、適切なCSSセレクターを設定しておきましょう。

こんなかんじで、簡単に個人情報が見えてしまう（＝意図せず Microsoft 社に個人情報を譲渡してしまう）ことは少なくないので、以下のように対策しておきましょう。

設定は「バランス（Balance）」か「厳密（Strict）」を選ぶ

マスクの設定は、一部をマスクする「バランス（Balance）」か、すべてをマスクする「厳密（Strict）」をオススメします。最初に Microsoft Clarity を導入した時点では「バランス（Balance）」になっています。

ただし、ECサイトなど大量の情報が頻繁に更新されたりソートや検索されたりしている場合は情報が見えている方がわかりやすいので、しっかりとマスク設定した上で「リラックス（Relax）」を選ぶのもアリだと思います。用意されているということは、使いみちがあると考えています。

フォーム送信を行ってみて、その流れを確認しておく

Microsoft Clarity にはスマートイベント機能ができたので、フォームを送信する行動は自動的にセグメント（特定の条件でデータをグループ化）されますが、シークレットモードのブラウザなどからアクセスして検証しておくほうが間違いありません。

あやしい箇所は手動でマスク設定しておく

HTMLの要素や構成についてある程度わかる方なら、公式ドキュメント（英語）を見ておくことをオススメします。CSSセレクタで簡単に設定もできますし。

ホームページを業者に作ってもらった方などは、制作業者に相談してください。そもそも、アクセス解析ツールは個人情報についての合意形成も必要なツールですから、サイトを成長させるパートナーとしてコミュニケーションが必要です。

私（コスギ）も解析や導入、レポーティングのお手伝いはしていますが、「Clarity の入れ方を教えてくれればそれでいいのに」という方は、他のサイトをご参照いただくか、辞めておいたほうが良いかもしれません。「Clarity の導入を機に好奇心対応から脱したい」という方は、ご相談ください。

Microsoft Clarity 以外に使えるツールはないの？

無料で選ぼうとすると「タダより高いものはない」のとおり、何かしらのリスクは大きいです。そのリスクを価格が担保してくれる有償ツールなら、いくつかあります。

そもそも、規模の大小に関わらず、検証するつもりがないサイトは解析ツールの導入は不要です。ユーザーの情報を取得するのは、プライバシーに関わることを表明しなければならないため、逆に手間がかかってしまいます。

「そうはいっても、自分のサイトがどれだけの人に見られているのか、知りたいと思ってもいいじゃない……」という方は、Google サーチコンソールを設定しておくだけで大丈夫。個人情報は取得されませんし、Google 検索における評価がわかります。導入方法もたくさん紹介されていますしね。

検証を必要とするなら、個人的なイチオシはウェブジョブズさんの「QA アナリティクス」です。WordPress サイトならすぐに導入できますし、何より日本製。開発者の丸山さんは神戸の方で、昔「ホームページの処方箋」という連載をされていたので、知っている方も多いかも……？広報支援のアドバイザーには運営堂の森野さんもいらっしゃるので、本質を突いた情報も発信されています。こういうのとか↓

「QA アナリティクス」は無料で使えますが、有料だと年額2万円弱。元々無料のツールを使っている方は、少し高いと思うかもしれません。ですが、「使ってみたいだけ」という方と「ちゃんと改善したい！」という方の、それぞれのモチベーションに応えられている印象は強いです。サイトのキャッシュポイントを改善すれば、年額2万円なんてペイできますから。

ちなみに、GA4 の有償版である Google アナリティクス 360 は、月間10億ヒットまで月額130万円（年額にして1,560万円）なので、QA アナリティクスの料金体系は、いかに中小零細企業に寄り添ったものなのかがわかるのではないでしょうか。Microsoft Clarity が（今のところ）永年無料を謳っているのは、データを得れば得るほどAI活用ができるからというメリットがあるからでしょう。

とはいえ、データの管理と保管には膨大な設備と費用が必要なので、数年後には有料になっているかもしれません。そのとき、今のデータを人質に取られるようなことをされたくなければ、多少投資をしてでも自社にデータを持っておくメリットも大きいのではないでしょうか。

ごめんください。クラリティ大好きコスギです。

Microsoft Clarity も3周年だそうです。デザインの一新以外にも、色々とありましたね。最近だと、ヒートマップにも Copilot が使えるようになりました……ヒートマップなら、自分で見たほうが良いかなって印象もあるのですが。もうちょっと使い込みたい。

今回は、Microsoft Clarity の「これは特徴的だし、オモシロイな」と思ったフィルターについてです。期間の設定など、よく使われる設定は省略しています。公式ドキュメントには全部載っているので、わからないところは合わせてチェックしてください。英語ですが、ページの翻訳一発でいけます。

Microsoft Clarity はもちろん、アクセス解析ツール全般に通じますが、フィルターを選んで使うのではなく、自分やクライアントのサイトに訪れるユーザーの行動の仮設を立ててから、データを見ましょう。そうすれば、自然に必要なフィルターを選ぶことができます（「この切り口が欲しいのに足りない……っ！」って思えてくると、カスタムタグに手を出せるようになります）。

ユーザー情報

曜日

Microsoft Clarity のタイムゾーンは UTC とのことなんですが、確認する限りでは日本時間になっているぽい（深夜1〜4時の録画データが日中よりも極端に少ない）のですよね……？もし違和感があれば調整の必要はありますが、日本時間になっていると考えられるなら、曜日によるフィルターは使いやすいです。

平日と休日でアクセスされやすいページの傾向が異なるようなら、平日は toB のニーズ、休日は toC のニーズが高いので、もし「toCのつもりでやっていたけど、平日のワークタイムにもアクセスが多い」のであれば、toB の展開もしやすくなります。

ここまではGA4などの数値ベースで見えるのですが、クラリティはユーザー行動分析ツールなので、ワークタイムに来るユーザーの仮説を立ててから録画の Copilot をさらってみると良いですね。

「対象とするユーザー像によっては使えるフィルター」なので、傾向がわかっているなら無理に使わなくても問題なし。

Clarity ユーザー ID

GAでいえば「ユーザーエクスプローラ」と同様のことができます。ユーザーを匿名化して、複数のセッションを横断して分析できる機能です。

たとえば、コンバージョンしたユーザーで絞り込むセグメントをつくり、Clarity ユーザーIDで絞り込むと、コンバージョンまでのユーザー行動がわかります。

母数にもよりますが、Copilot にも助けてもらいながら最低でも20件くらい行動を眺めていると、共通した動きが見えてきます。スムーズにコンバージョンしていないユーザーを見るのがポイントで、セッション数や閲覧ページ数が多いユーザーから見ていくと改善ポイントがわかりやすいです。

ユーザーによる処理

このセクションは、まさに Microsoft Clarity！ってフィルターが多いですね。クラリティは日本語で使えますが翻訳がわかりにくいため、英語表記を見ておくとわかりやすいです。

分析情報（Insights）

イライラしたクリック（Rage clicks）

ユーザーが同じところを何度もクリック／タップしたデータです。「一度クリックしたのに動かなくて、またクリックした」ような状況を確認できます。

たとえば「フォームのボタンを押したのに反応しない」といった問題を発見できます。時々、シングルクリックで良いところをダブルクリックする方もいるので、録画を見たときにダブルクリックがデフォルトの方なら気にしなくてOK。

デッドクリック（Dead clicks）

ユーザーがクリックしたものの、反応しなかったデータです。「クリックしたユーザーの期待に応えられていない」ような状況を確認できます。

たとえば「スマホで画像を拡大して見たかったのに、拡大されない」といった問題を発見できます。イライラしたクリックと一緒に出やすいことが多いです。ただ、デッドクリックの中でも、文字を選択しながら読む方は意外と少なくないため、その場合は気にしなくてOK。

過剰なスクロール（Excessive scrolling）

ユーザーが想定外の速度でページをスクロールしたデータです。「ファーストビューで迷子にさせてしまっている」ような状況を確認できます。

たとえば、検索結果からタイトルに惹かれてページを開いたものの、前置きが長かったり、お目当ての内容が見つからずにページを上下に高速スクロールしているような問題を発見できます。動画を確認したり Copilot に要約してもらったりして、問題がないかを確認しましょう（割とそこまで大きな問題ではないことが多い印象です）。

クイックバック（Quick backs）

ユーザーが新しいページに移動し、すぐに前のページに戻ったデータです。「ページを開いたけれど思ってたんと違う」ような状況を確認できます。

たとえば、ページ内のリンクをクリックして次のページを見たものの、すぐに前のページに戻ったり、次のページに移動してしまったりする問題を発見できます。ただしこれも、ステップを示したページではよくあることなので、よく読んでもらいたいページに絞ってクイックバックが起きているかどうかを調べましょう。

こういったユーザー行動を確認できますが、意外と問題ではないことも多いので、重要なページに絞り込んで確認するのがコツです。

操作（Actions）

カーソルの動き（Cursor movement）

ユーザーがマウスを移動したセッションのデータです。モバイルやタブレットでは、ユーザーがスワイプした場合が該当します。スクロールやクリックのような行動よりも前のユーザー行動と言えます。

個人的には、使ったことがありません。強いて使うとしたら、クリックが多すぎるようなデータと合わせて、マウスが迷っていないかどうかをチェックするようなときでしょうか。

入力されたテキスト（Entered text）

ユーザーがフォーム要素などに内容を入力したセッションのデータです。コピペしたときも該当しますが、違いはわかりません。何を入力したかはわからないため、入力動作があったデータに絞り込む場合に使います。

これとコンバージョン行動の除外を合わせると、「何らかの入力はした（エンゲージメントが高い）のに、コンバージョンしなかった」というデータを絞り込めます。

選択している文字列（Selected text）

ページ上でユーザーがテキストを選択したセッションのデータです。ユーザーが読んでいるコンテンツやコピーされているコンテンツを識別するのに役立ちます。

このような行動をするとデッドクリックも起きやすいのですが、コピペされやすいコンテンツやコピペを想定していないコンテンツを確認することができます。

ページサイズを変更しました（Resized page）

ユーザーがブラウザのウインドウのサイズを変更したり、スマートフォンで横向き/縦向きを切り替えたりするセッションのデータです。横にはみ出た状態になっているか、コンテンツが小さい／大きいと感じさせている参考になります。

別のウインドウで作業を促すようなページ（申込方法のステップなど）では、起こりやすい印象があります。個人的には、そこまで重視するフィルターでもないかな。

クリックしたテキスト

ユーザーが特定のテキストをクリックしたセッションのデータに絞り込めます。また、テキストを選択した場合も絞り込むことができますが、正規表現や部分一致ではなく、完全一致でしか使えません。

そのため、CTAなど特定のボタンをクリックしているかどうかを確認するのが現実的でしょう。

閲覧者の種類（Reader type）

コンテンツインサイト（Contents Insights）に対応できていると、有効になります。ブログなど、記事が多いサイトは設定しておくことをオススメします。

1回のセッションで閲覧しているページ数で分類できます。GAでいうところの「ページビュー数/セッション」ですね。

「Serious」は、しっかり読んでくれているユーザーですね。「重度」というより「真剣」では……。

アフィリエイトなど広告を見せたい方は「ページビュー数/セッション」はKPIになりえます。ブログは一見さんが多いので、動線をつくって「Casual」や「Serious」なユーザーの割合を増やせるような施策をおこなえるといいですね。

閲覧動作（Reading behavior）

ユーザーが記事を読む動作で分類できます。

ページへのアクセスには、ページの途中の見出しに直接アクセスすることもあるため、「ヘッドラインで破棄」は、表示したもののスクロールしていないという行動になります。

ページのタイトルが表示されて遷移したのであれば、あまりよろしくない直帰ですが、ページ内の特定の場所が表示されて目的のページに遷移することもあるため、良し悪しは仮説と実際のユーザー行動を見てみないと判断できませんね。

実際、目次によってSERPsのワンラインサイトリンクが出やすくなると、検索エンジンからのランディングがページの中央になることもあり、その下にボタンを置いているとそのまま遷移することは珍しくありません。SEO的な良し悪しとしては……検索エンジンから入ってくる動線ができているってことは、ユーザーの満足度につながっているのかなとは思います。

目標の設定

以前はUAの目標（コンバージョン）設定と連携できていたのですが、GA4の目標はまだ連携できないようなので、2023年12月現在ではカスタムタグで設定するしかないっぽいです。私だけ？

パス・トラフィック

アクセス解析ツールの一般的な設定項目なので省略。

パスの正規表現は、ChatGPTを使うと教えてくれるので便利ですが、基本は「含む」から絞り込んでいくといいですよね。

トラフィックの、ソース、キャンペーン、チャネルに関しては Campaign URL Builder と同じなのでわかると思いますが……「中型」はメディア（medium）のことです。翻訳班〜！

製品

Shopify でないと使えないフィルターが多いです。他のECでも使えるようになると良いんですけどもね。一般的なECサイトに導入した際にわかるのは、あくまで商品ページの閲覧行動。購入行動を分析するには、カスタムフィルターで対応は可能です。現状ではちょびっとメンドウなので、クラリティを使う理由がなければEC用の解析ツールを選ぶのも吉。

セッション・ページ

セッション・ページの継続時間

クラリティはページ遷移ではなく、10秒くらいの間隔でデータを送信しているため、ページの滞在時間がわかります。フィルターでは分単位の設定をするため、「1分30秒」なら「1.5」です。当然、セッションの滞在時間もわかります。ページ遷移で継続時間を得るツールよりも、実際の行動に近い数値を得られます。

最小値と最大値を設定できますから、（ランディングページのボリュームによって）30秒以下のセッションを絞り込んでみると、ユーザーが迷い込んだのか、目的を達成できなかったのか、などを調べることができます。

セッション・ページのクリック回数

1回のセッションにおけるクリック数や、1ページにおけるクリック数がわかります。

セッションのクリック回数なら、セッション別のページビュー数と合わせると「ページはたくさん見ているのにクリックが少なすぎる」「それほど多くのページは見ていないのに、クリックが多すぎる」なんてことが見えてきます。

ページのクリック回数なら、クリックが多いページのセッションを特定して、問題がないかを確認できます。デッドクリックが多い場合も含まれます。ユーザーのクセが原因になることは少なくないですが、クリックしても進まない場合は問題なので、確認しておきたいですね。

閲覧可能なページ／非表示ページ（Visible page / Hidden page）

これはどちらもページのセクションで使えるフィルターです。日本語だと意味がわかりませんが、「ユーザーがその画面を見ている／見ていない」時間で絞り込むことができます。翻訳班〜〜！！

たとえば、訪問したユーザーがブログ記事にアクセスしたとします。これが「閲覧可能なページ（Visible page）」の状態。まあ、問題ないでしょう。

そのブログ記事内で、参考ページなどの外部リンクを target=”_blank” で設定している場合、クリックすると別ウインドウや別タブが開きますよね。そうすると、ブログ記事は後ろで開かれたまま、ユーザーは参考ページを見ている状況になります。これが「非表示ページ（Hidden page）」の状態。

つまり、「閲覧可能なページ（Visible page）」より「非表示ページ（Hidden page）」の時間が長いのは（目的によりますがほとんどの場合は）大問題です。

ただ……個人的には、この指標は（ Hidden ÷ Visible ）の割合で使えばよいのでは……？と思ってしまうので、KPIにしている方がいたら、お話を聞いてみたいところです。MSさんにどんな意図で作ったのか聞いてみればいいのかー

あと、ページのサイズとか解像度とかはレスポンシブの不具合を知る手立てにはなるかもしれませんが、実機で確認するのが一番じゃないかと思っています。

カスタムフィルター

データレイヤーや Clarity API を設定して使うので玄人向けですが、KPIなら取っておきたいですよね。カスタムタグについては公式ページにもあるんですが、覚えておくのはwindows.clarity("set", "key", "value");だけです。

追記）もう少し簡単にカスタムタグを設定できるようになったので、以下の記事を参照してください。

オススメの Microsoft Clarity セグメントなど

以下の設定と合わせて、期間やデバイスの違いを見たり、Clarity ユーザー IDで絞ったユーザーの行動を観察してみてください。録画は30日間までしか見れないので、録画データによる分析が必要なら定点観測する仕組みをつくるのがオススメ。

なお、設定したフィルターは「セグメント」として保存しておくことができます。セグメントとして保存しておくと、「ウォッチリスト」としても使えるようになります。

GA4や Google サーチコンソールで集客状況を確認して仮説検証しながら改善しつつ、Microsoft Clarity でインサイトを確認して仮説検証しながら改善しましょう。どちらも大事です。数字の扱い方はツールによって変わるので、どのツールの数字をKPIにするのかは、最初に決めて相対的に検証するほうが迷いません。

コンバージョンしたセッション

過去30日間×サンクスページ閲覧

サンクスページはコンバージョン後のページを指します。以下のように設定すると絞り込めます。

これは定番ですね。コンバージョンしたセッションに絞り込み、デバイスごとにヒートマップや録画を確認します。Clarity ユーザー ID もわかるので、コンバージョンしたセッションだけでなく、その前後のセッションも確認できます。想定していた動きを検証しましょう。

コンバージョンしなかったセッション

過去30日間×フォームページ閲覧×サンクスページ閲覧除外×セッションページ数≧3

以下のように設定すると、それなりに熱量が高かったにもかかわらずコンバージョンしなかったセッションを確認できます。期間やセッションページ数のバランスを調整して、絞り込みましょう。

日本語で使っていると、ここでも迷うのですが……パスの一致条件は以下のようになっています。翻訳班〜〜〜！！！

前方一致や後方一致による除外はできませんが、部分一致か正規表現で対応できます。正規表現をテストする機能もありますが、難しいと感じたら https:// からサンクスページを部分一致で設定すればOKです。ただし、サンクスページの下層にもパスが続くようなページも含むため、該当ページのみが一致するように設定しましょう。なお、完全一致で除外しないのは、パラメーターを含む場合が多いためです。サイトの仕様に合わせて設定してください。

該当するのはセッションなので、ユーザーは別のセッションでCVしている可能性もあります。ユーザーの訪問回数はフィルターで設定できないので、Cookie を作成してカスタムタグを設定することもできますが……現状、デフォルトで得られないということは、Cookie を使うことによるリスクや、KPIとしてはそれほど重要ではないと考えても良いのかもしれません。ユーザーベース（おそらくIPとネットワーク情報）で見ることはできますしね。

解約しそうなセッション

過去30日間×該当ページ閲覧

解約や退会の方法を説明しているQ&Aなどのページを設定します。これまでの設定同様に、以下のように設定すると絞り込めます。

この条件で、録画データを（セッション別）ページ数で降順ソートすると、数字としては興味関心の高いユーザーとなりますが、実際の行動は、解約をするためにサイトを回遊していることになります。解約の理由はさまざまですから、無闇に引き止めるのではなく、インサイトを把握したうえでミスマッチをなくすための改善を行いたいですね。

コンバージョンしたセッションの応用で、解約後のサンクスページを閲覧したセッションに絞り込むと、解約前によく見るページを確認することもできます。同じページでもユーザーのニーズによって見るところが変わりますので、ヒートマップで比較してみると違いが見えるかもしれません。

熱量高めのセッション

セッションページ数≧3×関与（Engaged）

コンテンツを熱心に読んでくれているセッションを絞り込むものです。コンテンツフィルターの閲覧動作（Reading behavior）を使います。サイトのボリュームによって期間を調整してください。

単純にセッション別ページビュー数を見るだけでなく、コンテンツフィルターを使っているのでブログの動線ができているかどうかを確認できます。ちなみに、私の本家サイトは5ページ以上見てもらうことを想定しているコンテンツを用意しているため、最小値は5になります。絞り込んだ後、閲覧ページ数を降順でソートした録画を見て原因やニーズを調べます。

これを応用して「熱量が高まりきらないセッション」も見ることができますが、私の場合は、動線が確保できているはずなのに迷っているユーザーがいないかを確認するために上記を使っているので、熱量が高まりきらないセッションを見ても意味がないかなと思っています。その指標が目的達成のマイルストーンになっていて、その後の改善施策につながるかどうかを大切にしましょ。

色々と語りましたが、Microsoft Clarity は解析初心者でも扱えるツールです。ホームページの中でも「このページは一番重要なんだけど、ココに来ているユーザーは何をしているんだろう？」という問いから始めて、その重要なページに絞り込んだヒートマップや録画を見るところからやってみましょう。

オススメのカスタムタグ

以下はGTM（Google タグマネージャー）がすでに導入済みか、HTMLのことがわかる方向けの内容です。

カスタムタグは、設定後30分〜2時間程度でデータを取得するようになるそうなので、次の日まで待たなくて良いのは画期的かもしれません（データが取れているかの検証もしやすい）。

ページタイトルの設定

Microsoft Clarity にはページのタイトルで判別する方法がないため、pageTitleをつくっておくと便利です。該当ページの閲覧をすぐに絞り込めるのはもちろんですが、「404 Not found」のページを絞り込んだ改善が地味に使えます。URLでは判別しにくいですから。

GTMですでにクラリティを設定済みなら、以下のようにページタイトルを変数定義しておき、カスタムタグを設定するだけで使えます。

コンバージョンの設定

特にECサイトでは Shopify 以外のコンバージョンが取れないため、カスタムタグでコンバージョンを設定しておく必要があります。以下の2つの設定が考えられます。

1. 「すべてのコンバージョン」の代わりに、コンバージョンの有無を設定
2. コンバージョンの項目を設定

②のコンバージョンの項目は、ECなら「商品名」、企業サイトなら「資料請求」や「セミナー申込」などが考えられますが、分析するための軸となるため、戦略的に決めてから設定しましょう。他の指標と重複するようなものは設定する必要もないですしね。

①のコンバージョンの有無に関しては、以下のように「トリガー」で取得する条件を設定し、渡すデータはすべて「Yes」にしておきます。

特定のサンクスページ閲覧でコンバージョンを取得できるなら、「パス」セクションの設定と合わせるだけでコンバージョンの項目を指定できます。サンクスページ以外でも、GTMでトリガー設定すれば使えます。コンバージョンの項目もチャレンジしてみましょう。

その他はニーズに応じて

カスタムタグは個人情報を取得することもできてしまいますが、アクセス解析ツールに個人情報を含めるのは禁忌と思っておいてください。アカウントをBANされる可能性もあります。

それ以外で、考えられるのは以下のような項目です。

• コンテンツカテゴリー：サイトの規模が大きくて、さまざまなカテゴリーが含まれている場合に使えます。GAのコンテンツグループ機能のような感じ。
• 会員の属性情報：ログインしている会員のランクや年代などの属性情報をデータレイヤーに設定できます。会員IDは限りなく個人情報に近いため、含めないように。
• 特定のボタン押下：スマートフォン環境における通話用のボタンや、動画の再生、SNSのシェアボタン、チャットウインドウの開閉など、特定のボタンをタップ／クリックのアクション項目を設定するものです。メインのコンバージョンやマイクロコンバージョンになりますよね。アクションのあったページも合わせて確認したいところ。
• フォームの送信エラー：ちょっと開発が必要ですし送信件数が多い場合に限られますが、どこの入力項目でエラーが出るのかを絞り込めます。
• サイト内検索行動：サイト内の検索フォームに入力したセッションを絞り込むものです。エラーやコンバージョンなど、他の指標と合わせて使います。どんなクエリを入力したのかはGA4に任せましょう。

他にも、「ステップ数の多いフォームの遷移」や「モーダルウインドウ（ポップアップ）が表示された行動」、STP分析やRFM分析のための購買行動など、ユーザーの行動に紐づくチェックポイントはあります。サイトの目標に対して、ユーザーをどのようにエスコートするのが良いのかを見極めて設定しましょう。

その他にもありますので、具体的な設定方法とあわせて以下の記事もどうぞ。

まとめ

ユーザー行動を考えるためには、AISASやAIDMA、ULSSASやカスタマージャーニーマップ、（私が大好きな）コンセプトダイアグラムなど、さまざまなフレームワークがあります。まずはそのような「型」を使ってユーザーのフェーズが転換するポイント（＝コンバージョン）を把握し、検証しましょう。

Microsoft Clarity は解析初心者にもわかりやすいツールですし、これまで解析に興味がなかった企業にも導入しやすいのですが、簡単に時間が溶けます。解析のために工数を使ってしまうのは本末転倒なので、見るべきところを定めてから画面を開くようにするのが鉄則です。

どうやって活用したら良いのか悩ましい方は、お気軽にご相談ください。X（Twitter）でDMを送るくらいの気軽さでも大丈夫です。解決したらタリーズチケットくれたらウレシイ(/･ω･)/

ごめんください。クラリティだいすきコスギです。

Microsoft Clarityは、ユーザーの行動分析をできる解析ツールで、実際にユーザーが操作した録画や、どこをクリックしたのかがわかるヒートマップなどを確認できます。録画の保存期間は30日なんですけども。

そんな有益なデータをなんとなく見ていたら、すぐに時間が溶けます（経験者）。ですから、効果的にデータを活かすためには、目的を持ってデータを絞り込むことが大切ですよね。

じゃあどうやって絞り込めばいいのかな？ということで、今回は「中小企業サイトのよくあるケースからデータを絞り込む方法」をご紹介します。

仮説から効果的な行動分析を行うポイント

さっそく、データを見て絞り込もう！と浮足立ってしまいますが、いきなりデータを見るのはご法度です。

まずは事業課題の解像度を上げて、ユーザー行動の仮説を立ててください。仮説を立てることで効率よく分析できますし、この仮説を立てることに慣れると、検証を前提とした施策を行えるようになるので、改善スピードも向上します。一石二鳥ですね！

とはいえ、慣れないうちから深く詰めてしまうと、仮説を実証できるデータを取得してしまう（人間の性です）ので、「まあ、そういうことなら、たぶんこんな感じかな〜」くらいの気楽さで考えてから検証しましょう。

また、ただ脳内で考えるだけでなく、実際に使いながら違和感に気づくことも大切です。特にモバイル環境では「うわ、結構しんどいな……」と思うことがいくつも出てきます。最初は考えてつくられたウェブサイトも、しばらく更新が続いたことで当初とは異なる状態になってしまうことも少なくありません。

ということで、ポイントは3つです。

1. いきなりデータを見ない
2. 解決したい事業課題にフォーカスする
3. 行動に伴う感情を具体的に推測する

特に、事業課題のインパクトのあるところから分析すると効果的です。

なお、録画を見て観察するのはかなり時間がかかるため、Copilot と ChatGPT を使うとだいぶ短縮できます。本記事では絞り込みの軸を提案しているだけなので、「問題を洗い出す」「ユーザーの行動を観察する」という解析方法が出てきた場合には、「Microsoft Clarity の Copilot は、ChatGPT と併用して使うべし！」を参考にしてください。

事業課題の解決から仮説を立てる

問い合わせが来ない原因を調べたい

事業課題を解決する、つまりウェブサイトの目的として、お問い合わせをゴールにしているケースは多いと思います。ここを改善したいと思うのは自然なことですが、少し視点を変えてみましょう。

ご自身が問い合わせをしたいときは、どんな状況でしょうか。実は、問い合わせに至るまでにはいくつかの心理的ハードルがあります。

問い合わせを受ける側は「なんでも聞いてくれたら良いのに」と思っていることでしょう。しかし、相手は「効率的に判断したい」「営業されたら嫌だな」などと思っていることがほとんどです。「自分はそう思うけど、お客さんは違うでしょ」なんてことはありません。そう思いたい気持ちもわかりますが……

だからこそ、上記の3つを喚起するコンテンツ、つまり「問題を自覚してもらう」「安心してもらう」「言語化を促す」が必要です。たとえばQ&Aは、この3つを刺激するためにとても有効ですね。

コンテンツがなければ解析もできないため、問い合わせが来ないことをデータで調べる前に、そもそも必要なコンテンツがそろっているかどうかを確認しておきましょう（意外と盲点なんです）。

そのうえで、初めて問い合わせてくれたユーザーの行動について仮説を立ててみます。

このあたりの仮説を念頭に、ユーザーの行動を分析していきます。
余談ですが、こうやって考えていくと「サイトの情報では不十分だから、仕方なく問い合わせている」となるので、ウェブサイトの目的として、お問い合わせよりもふさわしいものがあるかもしれませんね。

ということで、初めて問い合わせるユーザーの行動データを絞り込むためのフィルターはこんな感じです。録画を活用するなら、10件くらいまで絞り込めると良いですね。

残念ながら、ユーザーが再訪問したかどうかを直接判断できる指標はありません。しかし行動を考えてみれば、1回の訪問で何ページも見ていることが多いと考えられます。すぐにお問い合わせするユーザーからは、それほどたくさんの改善案を得られませんので、「迷ったけれども問い合わせた」ユーザーが、何を考えていたのかを洗い出してみましょう。
深くやるならクロスデバイスとかまで考えたほうが良いんですが、まずはできる範囲の改善をするスタンスです。

ちなみに、Google アナリティクスと連携していると、問い合わせ完了ページではなく、目標達成セッションの録画やヒートマップを確認しやすくなります。目標達成プロセスも使えるので、まだ Google アナリティクスと連携していない方は、早めに連携しておくことをオススメします。

このデータを絞り込むと、アクセスの多いページもわかります。問い合わせたユーザーが（申し込みフォーム以外の）どのページをよく見ているのかを確認し、そのページを分析して動線を改善するのも効果的です。

フォームの途中で離脱していないかを調べたい

上のケースが「フォームを表示しているにも関わらず、そこから進まない場合」で、今回は「フォームは入力しているけど使いにくい場合」なので、状況が少し違います。入力中に離脱していないかを調査し、致命的な問題を改善しておきましょう。

それにしても「使いにくい」というのは、とても曖昧ですよね。しかも提供している側は問題ないと思いこんでいるので、その不便さに気づきにくいですし。こんなときには動画でユーザーの行動を分析できると、わかることがとても多いです。

そこで「フォームを表示しているのに、なぜ送信しないんだろう？」を考えてみましょう。まずは仮説から。

このような仮説を元に、データを絞り込んで検証します。フォームのどこでつまづいているのか、そもそも表示しただけの場合には、何を目的にしていそうなのかを観察してみましょう。

件数が多すぎると感じた場合、7日間を3日間にしたり、（必要に応じて）の項目を使ってください。ユーザーのクリックの動きで絞り込むことができ、以下のような行動を確認できます。

なお、基本的には特定のURLを除外することができないため、上記のフィルターのみでは、実際にフォームを送信したデータも含まれています。送信後のページURLを除外するためにカスタムページIDを設定し、使用することで対応できると思われます。未検証なのでこれからやってみますが、個人的にはフォーム送信した場合のデータと比較して、何が違うのか（流入元、訪問別ページビュー数、特定の記事を見ているなど）を検証してみることをオススメします。

更新した記事を読んでくれているかを調べたい

日常的に更新記事の解析をするのはオススメです。中小企業のサイトでも、お知らせやブログの記事を見てもらいたいなら、調べて改善したいですよね。

「ちゃんと読んでいる状態」を検証するために、量と質の2つから仮説を立てます。読まれていないという前提に立つと、改善点を考えやすくなりますよ。

質に関する仮説が多いって？当たり前じゃないですか！ユーザー行動という定性情報を分析するクラリティの記事なんですからー

このような仮説を元に、データを絞り込んで検証します。量に関しては Microsoft Clarity より、Google アナリティクスや Google サーチコンソールを使用するほうがオススメなので、Clarity では質を確認してみましょう。

今回はページに対して全体を把握したいので、主にスクロールヒートマップやクリックヒートマップを確認してみてください。そのため、絞り込み条件はシンプルです。

残念ながら、Clarity にはアテンションヒートマップがないため、ページの途中でどこをよく読んだのかはわからないのが欠点ですが、ページの最初に目次があると、クリックヒートマップで注目されているポイントを見つけることができます。

また、スクロールヒートマップで、どの辺りまで読まれているのかも確認しましょう。急に離脱しているポイントがあれば、改善のきっかけになります。そこで別のページに遷移していても、戻ってきているかどうかは録画（の Copiot ）を参考にしてください。

新しい記事へのアクセスを絞り込んでおくと、全体の指標も絞り込まれた状態で確認できます。定量的なマクロ視点は Google アナリティクスで確認するほうが良いです。Clarity はあくまでウェブサイトに入ってきてからの行動分析なので、そもそもの集客に関してはウェブサイト外の解析が必要になります。検索エンジンでの評価に関しては Google サーチコンソール（や、Bing ウェブマスターツール）を確認してみましょう。

スマホで見ている目的を調べたい

企業向けのサイトなど、主にパソコンで利用するウェブサイトはまだ多いです。Google アナリティクスでアクセス状況を見た際、平日に上がって土日に下がるような山がハッキリしているウェブサイトの場合、スマートフォンからのアクセスは少ないでしょう。それでも、スマートフォンからのアクセスはゼロではないはずです。

だからこそ、「うちのサイトをスマホで見ている人は、どんな目的で来ているんだろう？」を考えてみましょう。これは企業の活動が関わってくるので、リアルな動きを視野に入れて考えてください。

このような仮説を元に、データを絞り込んで検証します。最初は10件未満くらいまで絞り込んで、（ Copilot を活用しながら）録画データを確認してみてください。

レコーディングの量が多ければ、「過去3日間」に絞り込んでも良いですし、「企業情報が見られている」という仮説があるので、ページを絞り込んでも良いですね。なお、Clarity で確認する前に Google アナリティクスなどで推移を見ておくと、より精度の高い仮説も立てやすいです。

たとえば企業情報を見ているのなら、会社概要や営業資料をまとめたPDFをメールでダウンロードできるようなフォーム（モバイル完全対応）があれば、あとでパソコンで見てもらえるかもしれません。ページが長くてスマホでは読みきれないなら、「あとで読むためにシェア」などと、各種共有を促すのも一つの手です。

改善の答えはユーザーが持っています。どんな接点をつくれるか、背景をじっくり観察しましょう。

レイアウト更新後の評判を調べたい

変更した後の検証も必要ですね。そもそも、変更前に仮説があったはずなので、その仮説を検証すればOKです。

データを絞り込んで検証するのは変わりませんが、検証には Microsoft Clarity にある比較機能を使うのが良いですね。

大前提として、商品を扱うECなら、時期的な要因をふまえたうえで、購入数と購入率が向上したかどうかを分析することは必須です（レイアウトを変えるのはかなり影響が大きいので、季節要因の小さい時期を狙うのが一般的です）。社内でのユーザーテストはしていると思われますが、元々のレイアウトに慣れていたユーザーが戸惑う可能性も十分にあるため、1ヶ月くらいは様子を見ておきましょう。SNSなどで使用感に関する反響をチェックしておくことも忘れずに。

Microsoft Clarity の比較機能は、ヒートマップを選んでから右側にあります。

そして、日程をカスタムで選択し、URLも同じものを設定しましょう。クリックでも良いのですが、「領域」を選択すると、人気の変化がわかりやすいです。ただ、領域がどういう理由で分割されているのか不明（Clarityはオープンソースなので、調べようと思えば調べられるんですけど〜……）なので、参考程度に。

このようにレイアウト変更前後のデータを比較し、滞在時間や直帰などの行動指標を確認したり、ヒートマップを確認したりして、効果を検証します。モバイル環境に最適化した改善を行っているなら、デバイスを絞り込んだ比較もしておくべきですね。

まとめ

ユーザーの行動分析をするにあたっては、まず以下の点を押さえておきましょう(/･ω･)/

今回は本当に基本的なことしかご紹介していません。事例をベースにすると応用できるので、現在、事例となっていただける企業を募集しています。「うちのサイトを分析して欲しい！」という方はご確認ください。

なお、Microsoft Clarity のフィルターにおけるQ&Aはこちら（英語）です↓