Microsoft Clarityとは?無料で使えるヒートマップの設定・使い方を解説

 
ねこ
  • サイトに訪れたユーザーの行動を分析したい
  • 無料のヒートマップツールを探している

より良いサイト(ホームページ)を運営するには、実際にサイトを訪れたユーザーの行動分析がとても重要です。

自分はとても良い記事を書いていると思っていても、ユーザー視点で見ると「見にくい」「読みにくい」ということがよくあります。

そこでこの記事では、無料で使えるマイクロソフトのユーザー行動分析ツール「Microsoft Clarity」を紹介します。

この記事を参考にしてユーザーの行動分析をすれば、よりユーザー満足度の高いサイト(ホームページ)が作成できるようになるはずです。

このブログも開設してから「Aurora Heatmap」という無料ヒートマッププラグインを使っていましたが、Microsoft Clarityは完全に上位互換です。

Microsoft Clarity(マイクロソフトクラリティ)とは?

Microsoft Clarity(マイクロソフトクラリティ)は、Microsoftが提供する無料のユーザー行動分析ツールです。

2020年10月より利用可能になった新しいツールです。

Microsoft Clarity(マイクロソフトクラリティ)でできること

Microsoft Clarityでは以下のことができます。

  • ダッシュボード(Dashboard)でサイト分析
  • セッションレコーディング(Recordings)でユーザーの行動分析
  • ヒートマップ(Heatmaps)でユーザー行動の可視化
  • GA(Google Analytics)との連携

ダッシュボード(Dashboard)でサイト分析

Microsoft Clarity Dashboard

ダッシュボードでは、サイト全体のトラフィックデータをわかりやすく表示してくれます。

セッション情報(Sessions)人気のページ(Popular pages)デバイス(Devices)などの定番の情報に加えて、Dead clicks(本来クリックする箇所ではない箇所のクリック率)、Rage clicks(ユーザーが要素を繰り返しクリックした)などの情報も教えてくれます。

セッションレコーディング(Recordings)でユーザーの行動分析

Microsoft Clarity Recordings

セッションレコーディングでは、サイトを訪れたユーザーが実際にどのような操作(スクロールやクリック)をしているのかを動画で再生できます。

無料でありながらセッション数に制限がないのも大きな特徴です。

ヒートマップ(Heatmaps)でユーザー行動の可視化

Microsoft Clarity Heatmaps(Click)

ヒートマップでは、ページを閲覧したユーザーが「どこをクリックしたか」が一目でわかります。

Microsoft Clarity Heatmaps(Scroll)

また、ユーザーがページのどの位置までスクロールしたか(どこまで読んだか)を確認できるスクロールマップに切り替えることもできます。

Google Analytics(グーグルアナリティクス)と連携

Microsoft Clarity Google Analytics

Microsoft ClarityはGoogle Analyticsと連携することもできます。

連携するとGoogle Analyticsのカスタムディメンションに「ClarityPlaybackURL」(該当ページのセッションレコーディングURL)が追加されます。

Microsoft Clarity(マイクロソフトクラリティ)の導入・設定方法

Microsoft Clarityの導入から初期設定までの手順を解説します。

事前にBing Webmaster Tools(ウェブマスターツール)に登録しておいてください。
  1. Bing Webmaster ToolsからMicrosoft Clarityにサイトを登録する

    Bing Webmaster Toolsにログインし、「マイクロソフトクラリティ」をクリックします。

    Bing Webmaster Tools マイクロソフトクラリティ

    「Microsoftのクラリティ準拠の条件を読んで同意しました。」にチェックをし、「承諾」をクリックします。

    Bing Webmaster Tools マイクロソフトクラリティ利用規約

  2. クラリティのスクリプトを自分のサイトに追加する

    画面に表示されたスクリプトをコピーします。

    Microsoft Clarity クラリティスクリプト

    コピーしたスクリプトを自分のサイトの<head>セクションに貼り付けます。

    ※<head>セクションへの貼り付け方法はご自身の環境にあわせてください。

    headセクションに貼り付け

    Google Tag Manager(GTM)を使う場合はこちら

    Google Tag Manager(GTM)にログインし、「タグ」→「新規」をクリックします。

    Google Tag Manager 新規タグ

    タグ名にわかりやすい名前を入力し、「タグタイプを選択して設定を開始…」をクリックします。

    Google Tag Manager タグの設定

    「カスタムHTML」を選択します。

    Google Tag Manager タグタイプ

    先ほどコピーしたクラリティのスクリプトを貼り付けます。

    Google Tag Manager タグHTML

    トリガーの「トリガーを選択してこのタグを配信…」をクリックします。

    Google Tag Manager トリガーの設定

    「All Pages」を選択します。

    Google Tag Manager トリガーの選択

    右上の「保存」をクリックします。

    Google Tag Manager タグの設定保存

    「公開」をクリックします。

    Google Tag Manager タグ公開

    バージョン名にわかりやすい名前を入力し、「公開」をクリックします。

    Google Tag Manager 変更の送信

    以上でGoogle Tag Manager(GTM)の設定は完了です。

    Microsoft Clarityのサイトに戻り、「続行」をクリックします。

    Microsoft Clarity サイト追加

    「サイトがクラリティ プロジェクトに追加されました」と表示されていることを確認し、「Clarityに移動」をクリックします。

    Bing Webmaster Tools Clarityに移動

  3. Microsoft Clarityにログインする

    Microsoft Clarityにログインする方法を選択します。

    ※自分がアカウントを持っているサービスでログインすればOKです

    Microsoft Clarity ログイン

    先ほど登録したサイトが追加されているので、クリックしてMicrosoft Clarityの画面を開きます。

    Microsoft Clarity サイト洗濯

  4. Google Analyticsと連携する

    初回ログインではSetupの画面が表示されます。

    ※表示されない場合は、「Settings」→「Setup」とクリックします。

    Google Analytics integrationの「Get Started」をクリックします。

    Microsoft Clarity Google Analytics integration

    Microsoft Clarityへの権限の付与は「許可」をクリックします。

    ※権限の付与は何回か表示される場合があるので、すべて「許可」をクリックします。

    Microsoft Clarityへの権限の付与

    最後の確認画面も「許可」をクリックします。

    Microsoft Clarityを信頼できることを確認

    接続するサイトを選択し、「Save」をクリックします。

    Microsoft Clarity Google Analytics接続サイト

    画面上部に「Successfully linked Google Analytics」と表示されたことを確認し、「Finish setup」をクリックします。

    Microsoft Clarity Google Analytics連携成功

    連携がうまくいっている場合は、このような画面になります。

    Microsoft Clarity Google Analytics連携成功

  5. Microsoft Clarityのダッシュボードを表示する

    画面上部の「Dashboard」をクリックします。

    おそらく↓のような画面が表示されると思いますが、“It may take up to two hours.”(最大2時間かかる場合があります)とあるようにデータの取得には少し時間がかかります。

    ※私の場合は約25分後には見れるようになっていました。

    Microsoft Clarity ダッシュボード(設定直後)

    データが取得されるとこのような画面になります。

    Microsoft Clarity ダッシュボード

Microsoft Clarity(マイクロソフトクラリティ)の使い方

ここからはMicrosoft Clarityの簡単な使い方を解説します。

ダッシュボード(Dashboard)でサイトを分析する

ダッシュボードでは、サイトのトラフィックデータがグラフで表示されます。

Microsoft Clarity ダッシュボード

特徴的な項目をいくつか説明しておきます。

Microsoft Clarity Dead clicks

Dead clicks

ユーザーがページのどこかをクリックしたのに応答が検出されなかった場合に記録されます。

  • 壊れた要素
  • 高遅延のリクエスト
  • または誤解を招くUX

を見つけるのに役立ちます。

Microsoft Clarity Rage clicks

Rage clicks

ユーザーが短時間内にクラスター化された領域を繰り返しクリックしたときに記録されます。

  • ユーザーが要素を繰り返しクリックした(応答を期待している)
  • サイトのナビゲーション中にイライラしたUIのバグ壊れた要素

を見つけるのに役立ちます。

Microsoft Clarity Quick backs

Quick backs

ユーザーが新しいページに移動した後、すぐに前のページに戻ったときに記録されます。

  • 後続のページをクリックしようとした後、すぐにサイトのホームページに戻るなど、ユーザーが混乱するナビゲーション

を見つけるのに役立ちます。

Microsoft Clarity Excessive scrolling

Excessive scrolling

ユーザーが標準のコンテンツ消費で予想されるよりも高い速度でサイトコンテンツをスクロールしたときに記録されます。

  • ユーザーがすばやくスクロールして特定のコンテンツを探す
  • レイアウトの配置の問題
  • 重要なコンテンツの特定

を見つけるのに役立ちます。

他にもサイト分析に必要な情報は一通り確認できます。

  • セッション情報(Sessions)
  • スクロールの深さ(Scroll depth)※ページのどの部分まで読まれたか
  • 人気のページ(Popular pages)
  • JavaScriptエラー(JavaScript errors)
  • ブラウザ(Browsers)
  • OS(Operating systems)
  • 国(Countries)
  • 流入元(Referrers)
  • デバイス(Devices)

また、フィルター(Filters)を使えば、

  • 特定の期間
  • 特定のデバイス
  • 3回以上クリックされたセッション

など、必要な情報を簡単に絞り込むことができます。

Microsoft Clarity フィルター(Filters)

セッションレコーディング(Recordings)でユーザーの行動を分析する

「Recordings」では、セッションごとにユーザーの実際の行動を再生することができます。

※セッションごとなので、途中で同じサイト内の別のページに遷移した場合も記録は続きます

Microsoft Clarity セッションレコーディング(Recordings)

「More details」をクリックすれば、そのセッションの詳細な情報を表示しながら実際の行動を確認することができます。

Microsoft Clarity セッションレコーディング(Recordings) More details

 
ねこ
正直、このセッションレコーディング機能だけでも有料級

ヒートマップ(Heatmaps)でユーザーの行動を可視化する

ヒートマップは、ページでユーザーがクリックした場所を可視化してくれる機能です。

「Heatmaps」では、ページごとにヒートマップを確認することができます。

Microsoft Clarity Heatmaps

クリックが多い箇所ほど、赤色に近い色になります。

Microsoft Clarity ヒートマップ(Heatmaps) Most popular Least popular

「Scroll」をクリックすると、スクロールマップに切り替わります。

ユーザーがページのどの部分まで読んだかを知るのに便利です。

 
ねこ
このページもここまで読んでくれたユーザーさんには感謝

Microsoft Clarity(マイクロソフトクラリティ)FAQ

データはどこに保存されますか?
MicrosoftAzureクラウドサービスに保存されます。
どのくらいの期間データにアクセスできますか?

データは記録時から12か月間保持されます。

異なるサブドメインでClarityを使用できますか?

はい。同じウェブサイトの複数のサブドメインでClarityを使用できます。

ヒートマップはサイトの速度を低下させますか?

ヒートマップはClarityによってすでに収集されたデータに基づいて作成され、追加情報を収集しません。したがって、ヒートマップによってサイトの速度が低下することはありません。

ユーザーがクリックしてヒートマップに表示されるまでにどのくらい時間がかかりますか?

ユーザーのクリックは30分以内にヒートマップに表示されます。

まとめ:ヒートマップツールは無料のMicrosoft Clarity(マイクロソフトクラリティ)を使っておけばOK

Microsoft Clarityでは無料で以下のことができます。

  • ダッシュボード(Dashboard)でサイト分析
  • セッションレコーディング(Recordings)でユーザーの行動分析
  • ヒートマップ(Heatmaps)でユーザー行動の可視化
  • GA(Google Analytics)との連携

無料でこれだけの機能が使えるサイト分析ツールは他にありません。

実際にサイトを訪れてくれた人がどのような行動をしているかが視覚的にわかるので、Microsoft Clarityのデータはより良いサイト作りの参考になります。

データが蓄積されるまでには多少の時間がかかるので、早めに設定しておきましょう。