Clarity（正式名称：Microsoft Clarity ） は、Micrsoft が提供している無料のヒートマップツールです。
ヒートマップとは、ウェブページ上のユーザー行動を記録し、視覚的に表現するツールです。
・ヒートマップの導入をこれから考えている方、
・有料のヒートマップを過去に導入したことがあるけれど、費用対効果に見合わなかった方
・他の無料のヒートマップを試してみたけれどイマイチだったという方
上記のような方に、筆者が是非おすすめしたいのが「 Clarity 」です。今回は、この「 Clarity 」の魅力や機能に関して、詳しくご紹介します。
Microsoft Clarityの特徴
当記事の執筆時点（２０２３年７月）では、Clarity は全ての機能を無料で使用することが出来ます。
他のヒートマップツールでは、無料の場合、トラフィック数に上限が設けられていたり、制限を超えると有料にアップグレードされるなどが一般的ですが、Clarity にはそのような制限がありません。
また、Clarity は Microsoft 広告と連携することが出来ます。Microsoft 広告は、日本では２０２２年５月からサービス開始された新しい広告プラットフォームです。
ここからはあくまでも筆者個人の見解ですが、広告プラットフォームでの広告主の費用対効果や利便性を向上させることで、より多くの広告主に Microsoft 広告で広告費を使ってもらい、そこで収益を上げる狙いで、Clarity を無料提供しているのではないかと推測します。
Microsoft 広告を利用していないユーザーでも、Clarity は無料で使えるため、Clarity で収集したデータを機械学習に取り入れ、検索エンジンや広告配信のターゲティングの精度向上に繋げるためという狙いも考えられます。
いずれにせよ昨今の Microsoft は、Microsoft 広告の主流となる検索エンジン「 Bing 」 にいち早く AI チャット機能の搭載するなど、広告プラットフォーム 及び 検索エンジンとしてシェアを獲得しにいこうとする本気度が伝わってきますよね。
そのシェア獲得を叶えるためのサービスの一つとして据えているのが、Clarity の無料提供ではないでしょうか。
Microsoft 広告や Bing のリスティング広告に関してのより詳しい記事は、下記をご参照ください。
Microsoft広告とは｜どこよりも分かりやすく特徴 / 種類 / 機能を解説
https://strategy-code.com/marketing-colum/ads/microsoft/about-microsoft-ads/
Bingのリスティング広告｜その特徴やメリットと出稿までの流れ
https://strategy-code.com/marketing-colum/ads/microsoft/bing-listing-ads/
Clarity の機能
ここからは、Clarity に搭載されている代表的な機能について説明していきます。
インスタントヒートマップ
インスタントヒートマップでは、ユーザーのスクロール範囲や、熟読範囲、クリックした箇所などを一目で確認することが出来ます。
２つのヒートマップを並べて表示することも出来るため、同一ページの異なるバージョンを比較することで、簡易的な A/B テストとしての使い方も可能です。
また、Rage clicks（特定の箇所を連打するクリック。何度クリックしても反応せず、ユーザーがフラストレーションを感じているポイント）や、Dead clicks（ユーザーがクリックしても何も反応がないポイント）と思われる箇所も検出してくれます。
セッションの記録（レコーディング）
（匿名化された）ユーザーのウェブサイト上での実際の動きを個々にレコーディングし、確認することが出来ます。
高精度のレコーディングを、任意の倍速で再生することができ、レコーディングデータを第三者に簡単に共有することも可能です。
例えば、スマートフォン表示での画像やフォントが小さく、ユーザーがピンチイン（画面をつまむようにして2本の指を近づけるズーム操作）するような、先述のインスタントヒートマップでは発見できないような挙動を、レコーディングデータから見つけることが出来ます。
Google アナリティクスとの連携
Google アナリティクスと接続することで、Clarity のデータの一部を Google アナリティクスに取り込み、表示させることが出来ます。
アナリティクスでセグメントを適用して、対象ユーザーの（ Clarity の）レコーディングにフィルタリングするといった使い方が可能です。
反対に、Clarity 側でも Google アナリティクスのダッシュボードを表示させることが出来ます。
設置の手順
ここからは、新規で Clarity のアカウントを発行してウェブサイトに設置する手順について説明していきます。
まず、Microsoft Clarity にアクセスし、「サインアップ」をクリックします。
サインアップする方法として、以下の３種類から選択します。（いずれのアカウントも持っていない場合は、どれか一つアカウントを用意する必要があります）
- Microsoft アカウント
- Facebook アカウント
- Google アカウント
サイト名と URL を入力し、「新しいプロジェクトを追加する」をクリックします。
ウェブサイトへのインストール方法を選択します。この記事では最も汎用的な「手動でインストールする」を選択して実装する流れを説明しますが、Google タグマネージャー などを既に利用している場合は、タグマネージャーで実装することも出来ます。
ウェブサイトの<head>タグに挿入する Clarity のコードが表示されるので、「クリップボードにコピー」をクリックして、コピーします。
ウェブサイトの <head> タグから </head> タグに先ほどコピーした Clarity のコードを挿入したら、基本的な設定は完了です。
Google アナリティクスと連携したい場合は続けて、「設定」から「セットアップ」を選択し、「 Google アナリティクスの統合」の項目で、「開始する」をクリックします。
Google アナリティクスを設定している Google アカウントを選択して、Clarity のアクセス許可をします。
「接続するサイト」の候補に、アクセスを許可した Google アカウントに紐づく Google アナリティクス プロパティが表示されるため、対象のプロパティを選択し、「保存」をクリックします。
これで Google アナリティクスとの連携作業は完了です。接続が完了すると、「ログイン済✓」のフラグと、接続先のウェブサイト URL が表示されます。
導入後の使い方
Clarity の導入が完了してデータが溜まりはじめたら、いよいよデータ分析に着手することで出来ます。ここからは、Clarity の管理画面の各機能や使い方について説明していきます。
ダッシュボード
ダッシュボードでは、以下に紹介する様々な指標がカード形式で表示されるため、全体を数値傾向を把握することができます。
| セッションの合計数 | 選択している期間のセッション数。 ボットと判定したセッションは自動的に合計数から除外されます。 |
| セッション別のページ数 | １セッションあたりの平均ページ閲覧数。 |
| スクロールの奥行き | １セッションあたりの平均スクロール深度。 |
| 費やした時間 | １セッションあたりの平均滞在時間。 アクティブ（ユーザーがサイトに注目した場合）と、 非アクティブ（他のタブやウィンドウの後ろにサイトが隠れてしまった場合）の時間の割合も表示されます。 |
| ユーザー | ライブユーザー数と、異なるユーザー（ユニークユーザー）数。 「レコーディング」をクリックすると、それぞれの録画済みリストに遷移します。 |
| デッドクリック（Dead Clicks） | デッドクリック（何も起こらないクリックまたはタップ）が発生しているセッションの内訳。 「レコーディング」をクリックすると、デッドクリックのある録画済みリストに遷移します。 |
| イライラしたクリック（Rage clicks） | イライラしたクリック（同じ狭い範囲をすばやくクリックまたはタップ）が発生しているセッションの内訳。 「レコーディング」をクリックすると、イライラしたクリックのある録画済みリストに遷移します。 |
| 過剰なスクロール | 過剰なスクロール（想定以上に早いページスクロール）のあるセッションの内訳。 「レコーディング」をクリックすると、過剰なスクロールのある録画済みリストに遷移します。 |
| クイックバック | クイックバック（ページ移動後に、前のページにすばやく戻る）のあるセッションの内訳。 「レコーディング」をクリックすると、クイックバックのある録画済みリストに遷移します。 |
| 人気上昇中のページ | 閲覧数の多いページ。 |
| 参照元 | 流入元となる多い媒体。 |
| JavaScript のエラー | JavaScript エラー（ブラウザーで JavaScript 実行中のエラー）が発生しているセッションの内訳。 「レコーディング」をクリックすると、JavaScript エラーのある録画済みリストに遷移します。 |
| ブラウザー | 閲覧の多いブラウザー。 |
| デバイス | 閲覧の多いデバイス。 |
| 国 | 閲覧の多い国。 |
| オペレーティングシステム | 閲覧の多い OS 。 |
ダッシュボードでは他に、データ対象とするユーザーを絞り込むための「フィルター」と「セグメント」の機能もあります。
〇 フィルター機能
ユーザー情報
ユーザー情報では、「期間」「デバイス」「ブラウザー」「オペレーティングシステム」「国」「Clarity ユーザーID（各サイト訪問者に割り当てられた ID）」から選択して、対象データを抽出することが出来ます。
ユーザーによる処理 / パス
ユーザーによる処理では、「分析情報」「操作」「クリックしたテキスト」「ページスクロールの奥行」「目標の設定」から選択して、対象データを抽出することが出来ます。
パスでは、ページパスを指定して対象データを抽出することが出来ます。
トラフィック / セッション
トラフィックでは、「参照サイト」「ソース」「中型（サイトにトラフィックを送信したページの種類）」「キャンペーン」「チャネル」から指定して、対象データを抽出することが出来ます。
セッションでは、「セッションの継続時間」「セッションのクリック回数」「セッションページ数」から指定して、対象データを抽出することが出来ます。
ページ
ページでは、「ページの継続時間」「ページクリック回数」「JavaScript エラー」「ページサイズ」「画像の解像度」「閲覧可能なページ」「非表示ページ」から指定して、対象データを抽出することが出来ます。
カスタムフィルター
カスタムフィルターでは、「カスタムユーザーID」「カスタムセッションID」「カスタムページID」「カスタムラベル」から指定して、対象データを抽出することが出来ます。
〇 セグメント機能
先述の「フィルター」の機能で、抽出データの絞り込みをしたものを「セグメント」に登録することが出来ます。セグメントに登録することで、対象条件のデータをすぐに呼び出すことが出来ます。
任意の条件でフィルターを適用したら、「セグメントとして保存」をクリックします。
「新規として保存」をクリックします。
セグメント名を入力して、「保存」をクリックします。
これでセグメントに登録されました。「セグメント」をクリックすると、登録したセグメントが表示されるので、任意のセグメントを選択して、一発で条件を適用することが出来ます。
レコーディング
レコーディングでは主に、ウェブサイト上でのユーザーの個々の動きを確認することが出来ます。
「ダウンロード」を選択して、ダウンロードするセッション数を指定し、「ダウンロード」をクリックすると、対象のセッション数分のデータを CSV で書き出すことが出来ます。
※CSV の中には、レコーディングデータへのリンクも含まれます
また、「並べ替え」を選択して、任意の指標順に一覧を並べ替えることが出来ます。
「お気に入りの録画」を選択クリックすると、（対象期間内で）過去にお気に入りに登録したレコーディングデータの一覧が表示されます。
「〇人のライブユーザー」を選択すると、ライブユーザーのレコーディングデータの一覧に遷移します。
クリップを選択すると、右側に対象のレコーディングデータが表示・再生されます。
各クリップには以下のアイコン・機能があります。
| セッション分析情報の生成 | どんな経路でユーザーが流入したか、ページの問題点がないかなど、分析情報を掲示してくれます |
| このセッションをお気に入りに追加する | お気に入りの動画に追加することが出来ます |
| レコーディング を共有 | レコーディングデータのリンク URL を取得することが出来ます。 共有リンクは「プロジェクトチームメンバーのみ」とするか、 「誰とでも」を選択することが出来ます。 誰とでもを選択した場合は、リンクの有効期限は最大30日間となります |
| 訪問者プロファイルを表示 | 対象ユーザーの「Clarity ID」や「ロケーション」、 「参照元 / メディア」などの情報を確認することが出来ます |
〇 クリップボード内の主な機能
詳細
セッション情報とイベントのタイムラインを確認することが出来ます。
クリック
対象セッションのクリックヒートマップを確認することが出来ます。
スクロール
対象セッションのスクロールマップを確認することが出来ます。
領域
対象セッションのエリアマップを確認することが出来ます。
再生速度の変更
レコーディングの再生速度を 0.25 倍速～ 12 倍速の範囲で任意の速度に変更することが出来ます。
ヒートマップ
上部メニューの「ヒートマップ」をクリックすると、対象期間でのセッションの多い URL が一覧で表示されます。
この一覧の中から任意の URL を選択するか、検索窓でヒートマップを確認したい URL を入力して選択します。
選択した URL のヒートマップ画面に遷移します。デフォルトでは、「 PC 」デバイスの「全てのクリック」が選択された状態のため、まずは確認したい任意のデバイス（ PC or タブレット or モバイル）を選択します。
クリックを選択すると、「すべてのクリック」「停止したクリック」「激怒したクリック」「エラークリック」「最初のクリック」「前回のクリック」から任意のものを選択することが出来ます。
スクロールを選択すると、左側のスクロール深度の割合が表示されます。また、右側のプレビュー画面ではカーソルを置くと、そのポイントのスクロール到達率を確認することが出来ます。
領域を選択すると、ヘッダーやフッター、ボディ、サイドカラムなどの領域ごとのクリック数（クリック率）を確認することが出来ます。
他にも、「ヒートマップを共有」や「ダウンロード」などの機能もあります。
特に、「比較」の機能を使うと、異なるページとの比較や、同一ページで異なるデバイスでの比較、同一ページで異なる期間での比較などを確認することが出来ます。
Google アナリティクス
Google アナリティクスと接続している場合は、上部メニューに「 Google アナリティクス」が表示されます。
「 Google アナリティクス」をクリックすると、Google アナリティクスで収集しているセッション数や集客チャネルなどの情報を確認することが出来ます。
設定
「設定」をクリックすると、Clarity の各種設定項目が表示されます。
概要
概要では、サイト名・サイト URL・サイトカテゴリーを確認、編集することが出来ます。
Clarity ツアー
Clarity ツアーでは、Clarity が推奨する各種設定項目、設定の反映状況を確認することが出来ます。
チーム
チームでは、Clarity のデータを複数メンバーで共有する場合のメンバー管理を行うことが出来ます。
新しくメンバーを追加する場合は、「＋チームメンバーを追加する」から、メンバーに追加するメールアドレスと役割（管理者 or メンバー）を申請します。
申請したメールアドレスに招待メールが届くので、承認するとチームメンバーに登録されます。
役割（管理者 or メンバー）ごとに割り当てられる権限の違いについての詳細は、下記の公式サイトをご参照ください。
参考：Project access | Team management | Microsoft Learn【 Microsoft 公式】
セットアップ
セットアップでは、Clarity を対象サイトと接続するセットアップ状況を確認することが出来ます。
「詳細設定」からは、Cookie 利用やボット検出のオン / オフを設定でき、「インストール方法」からは、Clarity をウェブサイトに接続するためのインストール方法を確認出来ます。
マスク
マスクでは、ウェブサイトのテキスト情報を Microsoft のサーバーに送信しないためのモードを選択することができます。
デフォルトでは、保護が必要な機密性の高いテキストのみをマスクする「バランスモード」です。
「厳密」モードは全てのテキストがマスクされ、「リラックス」モードはマスクがかからなくなります。
IP ブロック
IP ブロックでは、Clarity のデータ収集から除外設定している IP アドレスを確認することが出来ます。
新しい除外 IP アドレスを登録したい場合は、「＋ IP アドレスをブロックする」を選択し、名前とIP アドレスを入力して「追加」をクリックします。
まとめ
いかがでしたでしょうか？ 今回は、無料で使用することのできるヒートマップツール、Microsoft Clarity について、用意されている機能と導入の手順、設置後の管理画面の使い方をご紹介しました。
今回ご紹介した機能が全て無料で利用することが出来るというのは、かなり革新的だと思います。Google に対抗していこうとする Microsoft の本気度が垣間見えるのは筆者だけでしょうか？
今後も機能は逐一アップデートされていくことと思われますので、最新情報をキャッチアップしながら使い倒していきたいですよね。
