Microsoft Clarity とは?基本から導入までをデモを見ながら確認しよう

  • URLをコピーしました!

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

Microsoft Clarity の基本を知っておこう
Clarity をインストールして設定しよう

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

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

目次

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

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

主な機能と活用方法

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

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

あわせて読みたい
Microsoft Clarity(クラリティ)のデメリット(リスク)と対処法 ごめんください。クラリティ大好きコスギです。 Microsoft Clarity(マイクロソフト クラリティ)は無料で使えるユーザー行動分析ツールですが、知っておかないとマズイ...

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

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

項目ClarityGA4サーチコンソール
主な分析対象ユーザー行動アクセス状況、コンバージョンなど検索パフォーマンス
プライバシー対応要注意要注意検索データのみ
リアルタイム解析可能可能1日程度のラグあり
使いやすさ初心者向け中〜上級者向け中〜上級者向け
コスト無料無料(一部有料機能あり)無料
機能連携Microsoft関連サービスGoogle関連サービスGoogle関連サービス

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

Clarity、GA4、サーチコンソールの使い所

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

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

アカウントを登録

Microsoft Clarity のアカウント登録

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

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

インストール方法

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

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

WordPress で Microsoft Clarity のプラグインをインストールすると、管理画面から最小限のデータを確認できまs

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

Microsoft Clarity 研究所
Microsoft Clarity のカスタムタグの使い方とオススメ指標 | Microsoft Clarity 研究所 はい、ごめんください。Microsoft Clarity(クラリティ)大好きコスギです。 クラリティを使っていると、「コレが取れたらいいのにな〜……」と思うこともありますよね。そん...

設定を確認しておく

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

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

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

Microsoft Clarity は今後も無料で使えますか?

公式に、無料であると公言されています。 Microsoftは、収集したユーザー行動データを匿名化し、AIの開発やサービス改善に活用することで無料提供を実現しています。もちろん現時点なので、AI活用に目処が立ったなどの理由で、将来的に有料になる可能性は否定できません。

Microsoft は、ユーザーの行動に関する大量の匿名データを処理して、Microsoft の多くの製品とサービスを強化する分析情報を取得し、機械学習モデルを改善しています。Clarity は、Microsoft がこの重要なデータを収集する方法のうちの 1 つなので、無料で利用できるようになりました。

無料の理由 – 価格 – Clarity より

日本語で使えますか?

はい、ほとんどの機能が日本語化されています。 ただし、「ファネル」が「フィルター」に訳されているなど、翻訳が不自然な箇所もあるため、正確出ない場合があります。違和感があったら、英語表示に切り替えて確認することを推奨します。

初期設定でやってしまいがちなミスはありますか?

関係者のアクセスデータ除外とマスク設定は盲点になりやすいかもしれません。特にマスク設定は、どの要素をマスクするかを明確に設定する必要があります。

なお、初期設定とは異なりますが、成果を考えずにツールを使ってしまいがちな、手段が目的化している事に気づかないことは多いようです。

Microsoft Clarity を導入することで、ウェブサイトが重くなりませんか?

公式回答としては「いいえ」です。個人的に PageSpeed Insights で計測した際にも、大きな負荷をかけている様子はありませんでした。

No, not at all. Visitors to your site notice no change in site speed or performance. The Clarity JavaScript is asynchronous. It doesn’t affect how quickly a website loads.
訳:いいえ、まったく影響はありません。サイト訪問者はサイトの速度やパフォーマンスの変化に気づきません。Clarity JavaScript は非同期です。Web サイトの読み込み速度には影響しません。

Will Clarity reduce my site’s performance? – Frequently asked questions | Microsoft Learn

Microsoft Clarity で収集されたデータの保持期間は?

30日間とされています。アカウント数やトラフィック量などの上限はありません。ただし、お気に入りのレコーディングは最大13ヶ月保持されます。

The data is retained for the webmaster’s consumption up to 30 days from the time of recording.
訳:データは記録時から最大 30 日間、ウェブマスターが使用できるように保存されます。

How long can web admins access their Clarity data? – Frequently asked questions | Microsoft Learn

マスクされたデータはどのように扱われるのですか? GDPR、CCPAへの準拠は?

マスクされたデータは Microsoft に送信されませんが、Copilot がどのように扱うのかは検証の余地があると考えています。GDPR や CCPA には準拠しているとの記載はありますので、詳細は Microsoft 社のプライバシーポリシーを参照してください。

Is Clarity GDPR compliant?
Clarity is GDPR-compliant as a data controller. For more information, see the Microsoft Privacy Statement.

How does Clarity comply with California Consumer Privacy Act (CCPA)?
Clarity processes data in compliance with the CCPA. For more information, see Microsoft Privacy Statement.

Privacy – Frequently asked questions | Microsoft Learn

クリックヒートマップでモバイル表示に切り替えてもパソコンのビューが出てしまうことがあります。なお、レスポンシブデザインのサイトです。

レスポンシブデザインが関わっているとは思いますが、私ならユーザーIDでフィルタリングして、そのユーザーの意図を探ります。同業者や関係者の可能性もあるため、成果につながらなければスルーしても良いのではないでしょうか。

明らかにバグだと思われたら、Microsoft Clarity の Github に Issue として申し立ててみても良いかもしれません。

ユーザーIDはブラウザ別に発行されるのですか?同じスマホの Safari と Chrome で見た場合、別ユーザーと判別されますか?

そうですね、Microsoft Clarity はユーザーを Cookie で判断しているようなので、ブラウザ別になります。パソコンでも、通常のウインドウとシークレットウインドウでアクセスすると、別ユーザーとして判別されます。

ですので、クロスデバイスで追いたいのなら GA4 などと同様に、ログインしたユーザーを判別できるIDをカスタムタグに設定することで同じユーザーの行動を追いやすくなります。 ただし、ユーザーIDは個人情報に近いため、適切な取り扱いが必要だということをお忘れなく。

モバイル画面のヒートマップでハンバーガーメニューが開きっぱなしで表示されている時があるのですが、メニューを閉じた状態のヒートマップを見る方法はありますか?

ヒートマップ画面右上の「スクリーンショットを変更する」ボタンをクリックし、メニューを閉じた状態のスクリーンショットを選択することで、該当のヒートマップを確認できます。 データ数が少ない場合は、期間を30日間に延長してみてください。

Microsoft Clarity 勉強会の今後の予定

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

Microsoft Clarity 勉強会の今後のテーマ

Microsoft Clarity はウェブサイトに来てくれた方をファンにするためのヒントを得られるツールです。もっと活用したい事業主や法人、またはクライアントに提案したい企業の担当者さん向けのサポートを行っています。「わからないことがわからない」という方でも、ご安心ください。

\ 単発相談からパートナー契約まで /

第1回 Microsoft Clarity 勉強会|クラリティの画面を見てみよう

この記事が気に入ったら
フォローしてね!

この記事を書いた人

はい、ごめんください(/・ω・)/
WordPressをメインとした制作、開発、ウェブコンサルと、ストレングスファインダーを活用したコーチングを行っています。このブログでは、ユーザーの行動分析をモリモリできる Microsoft Clarity(クラリティ)を研究した備忘録としています。解析のお仕事は中小企業向けにご提供しています。

目次