はい、ごめんください。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 に掲載できれば良いなと思っていたのですが、想像以上にパソコンが追いつかないことがわかったことで、動画は撮り直しています。同様の方法で続けるのは再考の余地がありますが、テーマとしては以下の内容で行っていく予定です。

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

去る2024年5月17日の19時より、ウェブ解析士協会 近畿支部さま主催のセミナーに登壇いたしました。金曜日とはいえ、平日にも関わらず60名以上のお申込みをいただき、中でもオフライン参加は25名と多く、そのまま懇親会へと流れる大盛況っぷり。ウェブ解析士の資格を持っていない一般の方も参加され、とても熱量が高かったことを付記しておきます。

今回はそのセミナーについての反響と、いただいた質問に対する回答をいたします。

ちなみに、会場に来られた方々は全員懇親会まで参加されるほどの熱量でした！

今回の Microsoft Clarity セミナーで大切にしていたこと

Microsoft Clarity の基本的な情報はお伝えしたので、手段と目的を履き違えないことにさえ気をつければ使いやすいツールです。そのため、なまじツールをいじっている人よりも、事業やユーザーのことしか見ていないお客様のほうが、活用しやすいツールかもしれませんね。

施策検証に使うことはもちろん、「ユーザー動線の交通整理ができているかどうかを確認しましょう」とお伝えしました。（だからイラストは交通誘導マンにしてあるんですが……私の誘導マンの認識が甘すぎる気がする……）

私自身、昔はとにかく様々なセミナーに参加して知見を得ることが多かったのですが、今ではAIに聞けば何でも教えてくれますし、わかりにくいところも噛み砕いて説明してくれますので、情報を得られるだけのセミナーに参加することはなくなりました。ですから、私がセミナーに登壇する際には、一方的な知識の共有という形式はしていません。それをしていたら、AIに替えられるためです。

つまり、私が登壇する際にはワークやディスカッションを必ず取り入れています。オフラインのほうが間違いなく目の前に人がいるので考えやすいですし、オンラインでもチャットで考えを共有していただけるようにしています。特に今回、大阪会場では全員ペアをつくれたために、ディスカッションタイムではオンラインでチャット参加している方にフォーカスするように意識していました。

知るのとやるのとでは天地の差があるのだから、考えることを放棄しているレベルでは話になりません。なぜなら、技術課題よりも適応課題のほうが多いためです。以下は参考として共有したスライドですが、これは問題や課題に対して持っておくべき大前提だと、私は思っています。

ですから、隣の人と話したことや、チャットに入力したことは全部知識のアップデートをするための土台になります。正解はないからこそ、考えて行動して経験していかないと判断できないんですよね。早速、導入して分析して知見を得た方もいます。Microsoft Clarity を導入できるのなら、まずは楽しんでみてください。

アンケート結果（n=41）

解析系のセミナーはいつも男性が多いイメージですが、女性が半数近いのは意外でした。感性に合うツールなのかもしれませんね。

40代以上が80％以上を占めるのは高齢化の波を感じますが、セミナーで持ち帰ったものを企業に展開できるのもこの年代ならではなのかなとも思います。

企業：個人＝６：４くらいの割合でした。今回は企業としても個人として考えることもできる内容でしたが、個人のほうがフットワーク軽く使えるのではないかと思います。

「一般は参加できないんですよね？」という反応も聞いていたのですが、1割以上の参加をいただきましたが……SNSマネージャーの皆さん説ある。

弊社カエルコムニスのセミナーは、及第点（平均値）を4点としています。今回はどれも4.5点（5点満点）を上回る評価をいただくことができました。そして「あなたにとって、全体的にいかがでしたか？（10点満点）」の有意義だったかどうかを問う設問は平均値 8.6点（中央値 10点）をいただき、参加者の皆さんそれぞれで得られたものはあったかと思います。

以下、いただいたご感想。

今回は Zoom をつなぎながら大阪会場で行ったものの、どちらから参加されたのかを伺う設問がなかったのは致命的でした……オフライン（会場）の方々のほうが盛り上がるのは当然なので、ディスカッションタイムは意図的に Zoom チャットの方々にフィードバックしていたんですが、どうだったかな。今度は項目忘れません……！

いただいた質問と回答

質問を6ついただいたので、お答えします。

まとめとゆるぼ

今回の Microsoft Clarity のセミナーでは、「初めて知ったのでこれから使ってみたい」「とりあえず入れていたけど理解が深まった」といった方が大半でした。無料で便利なツールだからこそ、リスクも把握したうえで使っていただきたいと願っています。リスクは以下でまとめていますので、参考にどうぞ。

企業でワークショップをしませんか？

「Microsoft Clarity を導入したけれど、どうやって使えばいいのかわからない」という組織の方向けに、ユーザー行動から30個くらいの改善課題を洗い出すワークショップ型研修をご提供できます。正式な内容は50万円以上を想定していますが、5名程度のチームを対象に5時間程度・15万円（＋税・旅費交通費）で実施いたします。モニターとして先着2社のみ限定とさせていただきますので、興味を持たれた方はカジュアルにご相談ください。

はい、ごめんください。
クラリティが好きすぎて非公式エバンジェリストを名乗り始めたコスギです。

先日の2024年2月23・24日に開催された WordCamp Kansai 2024 で、「ユーザー行動の分析からサイトの改善ポイントを探ろう」というタイトルで登壇してきましたので、その振り返りと補足記事です。サブタイトルは「Microsoft Clarity なら、初心者もニッコリ」なのですが、とても便利なツールだからこそメリットとリスクはちゃんと知っておきましょうねという話。

スライドは以下です。動画ももう公開されています。はやっ！！（マイクが近くて声がデカイので音量注意）

文字ばかりのスライドなので補足

視覚的にわかりやすいヒートマップ

ブログやページに目次を入れることが一般的になりましたが、目次のどこがクリックされているのかなどもわかりますね。こういったヒートマップの全体像をAI（Copilot）がまとめてくれる機能もあります。

ただ個人的には、目的ありきの検証前提でツールを使っているので、Copilot のまとめを読んでも「まあ、それは見ればわかるんだけどさ」「改善施策はそっちじゃないんだよなあ……」という感想になることがほとんどなので、たまーにしか使いません。とはいえ人間の盲点があるので、参考にならないとまでは言わないです。

ユーザー行動を追体験できるレコーディング機能

個人情報を取得しない状態での録画機能です。録画は長さがまちまちなので、10分を超えるような場合は Copilot を使うことが多いです。右上の［レコーディングを要約する］から複数のセッションを選択することもできるので、ここは使いやすくなってきた印象です。

以下のようにクリック数でソートすると、とんでもない量のクリック数の録画が出てくることがありますが、動きを見ると「文章を選択したり画面をカチカチしながら読むクセのあるユーザー」ということがわかるのですよね。こういう方は Know クエリで入って来た後にじっくりと読み進めるため、熱量の高いユーザー（ファン）になりやすいです。

Microsoft Clarity のライブデモを見てみる

Microsoft Clarity の公式サイトに、［ライブデモを見る］ボタンがあるので、そこからすぐに確認できます。言語設定もできますが、英語でもそんなに難しくないですよ。日本語訳がビミョーで違和感が拭いきれなければ、英語で使うのもオススメです。「る」だけ改行しているとか、ちょっとね……

クエリの種類を調べてみる

ここは Know クエリと Buy クエリの話として、Google Search Console（サーチコンソール）を見ていただきたいところ。検索パフォーマンス → 検索結果の画面をスクロールすると、自分のサイトが検索結果としてどのように扱われているのかを確認できます。私は表示回数でソートし、クエリの検索順位とクリック数を確認しています。毎回確認するのがメンドクサイので Google Looker Studio（ルッカースタジオ）を使っているのですが。

実際に行った施策の検証事例

実際に解析をすると30分くらいタラタラタラタラ喋っちゃったので、1.5倍速にしました。余計に何を喋ってるかわからないと思うので、要所要所で飛ばしながら見ていただけたら。気力があったら改善後の解析に差し替えます。

そして「こうすれば回遊が上がりそうだな」と、登壇2日前（2月22日）に回遊動線のリンクを1ページのみ設定してみた結果。

2023年2月18日〜21日（施策前4日間）のセッション別のページ数

直前の期間だけに絞ると、30日間の平均より値が高めだな……と一抹の不安を覚えつつ……

2023年2月22日〜24日（施策後4日間）のセッション別のページ数

減っとるやん／(^o^)＼／(^o^)＼／(^o^)＼

脳内で盛大なツッコミをして、データがイイカンジになるところを見せたい衝動に駆られましたが、現実を受け止めることにします。とはいえ、セッション（＝母数）が減ればそれ以外の指標の差異は大きくなりやすいので、定性的な情報も見てみましょう。

施策箇所をヒートマップで検証

ということで、設置したリンクがクリックされたかどうかを、クリックヒートマップで検証したところ……

1ページのみの施策でも行動としての動作を確認でき、その録画でも閲覧者自身に関わるページを閲覧する（当初想定していた）動作も確認できたので、この施策を全ページに展開してから再度検証を行うことにします。

そもそも4日間という誤差の大きい期間ということや、ページ下部でスクロールが必要な箇所の改善ということもあり、定量的には劇的に変化が見られるものではないと判断できるものの、定性的には効果がありそうと判断できるのが Microsoft Clarity のオモシロイところですね。だから大好きなんですよー

質疑応答の回答

登壇中にいただいたご質問をまとめました。たっぷり聞いてくれてええんやで。

①どれくらいのタイムスパンで解析を行えば良いですか？

身も蓋もない言い方ですが、解析頻度は目的によります。毎日変動する数値を見ていくなら、毎日見たほうが良いですよね。施策が月1回なら、施策してから毎日14日間、週間、月間で変化を見る、などになるかなって。

目標に達するまでは毎日〜3日に1回など確認することを継続したほうが良いのですが、毎回レポーティングしているとメンｄ……大変なので、Looker Studio などで定点観測できるようにしておくことをオススメします。ちなみに、私はほとんど文章の入ったレポートを作成しなくなりました。誰も読まないですから。

ココだけ見ておけばいいよね、というKPI（うまくいっているかどうかを判断するための重要な指標）をあらかじめ設定しておくほうがずっと大切です。重要な指標が上がらなければ原因を探って改善する、とかのほうが動きやすいんですよ。それを毎日見ておけば「あれ？上がってこないな……」と気づけるじゃないですか。

②異常値をどのように考えたら良いですか？（追記あり）

異常値のほとんどはスパムです。まずはその前提から考えます。

1. 参照元が Direct などで不明？ → ほぼスパム（クラリティで bot アクセスを確認）
2. 参照元が知らない企業？ → リファラースパムの可能性大（検索して調べてみる）
3. 参照元が Social などのSNS？ → Yes の場合はサイト外でバズっている
4. 参照元がビジネスツール系？ → 企業内部で話題になっている

ということで、ほとんどがbot（スパム）アクセスと判断できると思いましたが、後ほど詳しい話をお伺いできたので、考え方として重要なところだけ共有します。

ということで「異常値があっても実際に売れているから、どう考えたら良いのかわからない」というご質問でした。つまり「おそらくSNSでバズっているのに、再現性がなくもどかしい」という話。なにこのうれしい悲鳴。

これはダークソーシャルがらみですね。LINEグループなど、解析ツールでは把握できないSNS上のコミュニティがあります。そこで拡散されると、異常値になることがあります。今回はそのタイプだろうなって。「ダークソーシャル」で検索すると色々と出てきますが、参考までに以下をどうぞ。

それこそ、このタイミングで購入した方向けに、（スライドの4象限で示した）アンケートなどのユーザーインタビューを使って検証するのもオススメです。ただアンケートを送るのではなく、ダークソーシャル内の検証を考えたものにすれば、再現性も見えてくるのでは。業種によってはダークソーシャルでのシェアがかなり多いこともありますしね。

もちろん、なぜ「ダーク」なのかを想定した検証が大切です。彼らにとって心理的安心感のあるところに企業都合の光を照らすことは、ブランド毀損にもなりかねないので注意が必要です。

③個人情報を個別にマスクする方法はありますか？

あります！以下の記事の「あやしい箇所は手動でマスク設定しておく」から紹介しています。

逆に、マスクしない方法もあります。たとえば、「この記事、いつ更新したんだっけ？そうそう更新日を確認すれば……マスクされてるー！／(^o^)＼」ってときに活用できます。タイトルなど、個人情報が関わらない箇所で更新が想定されるような場合は、マスクを解除しておくと分析しやすいですね。

ご参加いただいた方の声

ポストありがとうございましたー！！
実際の業務に取り入れたいなと思った時、導入してあるんだけどうすれば？と行き詰まった時に、いつでもお声がけください(/･ω･)/（ウェブのお仕事もちゃんとやっていますYO）

登壇にあたっての余談

WordCamp に登壇できるのは、審査があるためかなり貴重なのですが、このような機会をいただけてウレシかったです。そして何より、「やっぱり目的大事だよね」というフィードバックが多かったことに感動しました。今もじんわりと心があったかくなるくらい。

数年前に東京で登壇した際に「目的や戦略はいいから解析の手法が見たかった」というフィードバックをいくつかいただいたんです。それがずっと胸にチクチクと刺さり続けていて、「WordPress 界隈の方々、手段が目的化しているのはもったいないなあ……」「でも、求められるのは手法の方なんだろうなあ……」とモヤモヤした思いを抱えていたんですよね。またこのフィードバックが来るかと思うと、正直、怖かったんです。

それでも、Microsoft Clarity は個人情報が隣り合わせのツールでもあるため、私も自戒を重ねていたからこそ、今回はちゃんと伝えておかなければならないと考えました。これでも「目的は別にいらんから手法を詳しく」と言われたとしても「そんな状態でユーザー行動分析できるとお思いか？あなたはともかく、訪問者の個人情報に興味がないまま、今後やっていくおつもりか？」と前のめりのスタンスになりました。

これはスライド作成にあたって、リスクに関する記事を書けたことが大きいです。登壇は人を成長させますね。とはいえ、まだ私も十分理解していませんから、私より危機感がないのはマズイんじゃないかって。だから「Microsoft Clarity は便利で面白そうだけど怖い」という感覚を持っていただけたのなら、役割を果たせたかなと思います。

それと、私は「GA4は嫌い」を連呼しています。面倒くさいし、難しいし。世の中には必要性もわからずに「嫌いだから使いたくない」と言えない人のほうが多い印象なので、私のように「嫌い」って言えたらいいんじゃないかと思っていて。解析は役に立つけれど、戦略や目的がハッキリしておらず、検証の必要性がないなら解析ツールなんて不要なんですよ。訪問者の情報を持っているのなんて、リスクでしょ。

私は、必要だから使っています。定性分析するにしても、定量分析でわかることはたくさんありますし。ただ、極力触りたくないので Looker Studio を使っています。GA4を見る必要があるときは、得意な人に相談します。嫌いでも、やらなきゃならないときはやります。オトナなので。

あとは自分のサービスに関する事例を提供できるようになったことは、東京のときよりも大きく変わったなって。事例ですから、具体的なサービス内容はわからなくても、「自分たちだったら、ここをどう考えようかな」と思考プロセスから理解しやすくなったのではないかと思います。

動いているところをお見せできなかったのは心苦しいですが、公式サイトにはデモが用意されているので、興味がなくても触るだけ触ってみることをオススメします。嫌いでも、やらなきゃならないときはやらなきゃね。Microsoft Clarity の魅力に関しては一晩中語れるので、社内セミナーや勉強会があれば呼んでくだされ。