無料ヒートマップツールMicrosoft Clarityを使ってみた

こんにちは。システム開発部のsonohaです。ニフティ温泉のWEBサイトの開発全般を担当しています。

検索エンジンBingにOpenAIのGPT-4をベースにしたAIチャット・AIコパイロット機能を搭載することが発表され、今とても注目が集まっているMicrosoft。
そんなMicrosoft社が提供しているWEB向けヒートマップ・レコーディングツールであるClarityを使ってみたので、ご紹介していきたいと思います。

目次

Clarityとは

Microsoft Clarityとは、Microsoft社が提供しているヒートマップツールです。

ヒートマップとは、WEBサイトを閲覧しているユーザーのアクション（マウスの動きやスクロールなど）をトラッキングして、ページ内でよく使われている要素やよく見られている箇所を色の濃淡で表現することで視覚的に把握しやすくした、WEB分析ツールです。

Clarityはヒートマップ以外にも、WEBサイトのUX改善に役立つ複数の機能を備えています。

Clarityができること

Microsoft.com公式の製品紹介ページによると、Clarityでは大きく5つのことができます。

1. ヒートマップの生成
2. セッションのレコーディング
3. インサイトダッシュボードの生成
4. 各種インテグレーション
5. ライブ拡張機能

それぞれ、ニフティ温泉の検証環境で実際に使ってみたキャプチャとともにご紹介します。

ヒートマップの生成

サイトにタグを埋め込むことで、デバイス×ページ単位でシンプルなヒートマップを生成できます。

「クリック」を選択すると、右カラムにClarityによって保存されたWEBページが表示され、よく押されている点が着色されます。
また、よく押される要素には番号が振られ、左カラムにそれらの要素ごとのクリック数が表示されます。

「スクロール」を選択すると、ユーザーの何%がページのどこまで到達したのか、テーブルとグラデーションで可視化されます。

「領域」を選択すると、ユーザーの何%がどの領域を押したかが表示されます。
可視化したい領域は任意に編集できるので、たとえば新しい要素を追加した場合の効果計測やコンバージョンのボトルネック調査に役立ちます。

ヒートマップ同士を比較することも可能です。
直近1週間と先月の1週間を比較する、異なるブラウザー同士で比較する、流入元の異なるトラフィック同士で比較する、など様々な観点で比較することができます。

以下は、ヒートマップの絞り込みに利用できるフィルターです。

ユーザー情報	期間（今日、過去3日間、過去7日間、過去30日間、カスタム） デバイス（PC、タブレット、モバイル、その他） ブラウザー（Chrome、Edge、Firefox、など） OS（Windows、MacOS、ChromeOS、など） 国 ClarityユーザーID
ユーザーによる処理	分析情報（イライラしたクリック、デッドクリック、過剰なスクロール、クイックバック） 操作（カーソルを動かした、テキストを入力した、文字列を選択した、ページサイズを変更した） クリックしたテキスト（自由記述） ページスクロールの深さ（最小値、最大値）
パス	閲覧済みURL（ワイルドカードを利用可能な自由記述）
トラフィック	参照サイト UTMソース UTMメディア UTMキャンペーン UTMチャネルグループ
ページ	ページの滞在時間（最小値、最大値） ページクリック回数（最小値、最大値） JavaScriptエラーページサイズ（指定の幅×高さより大きい、小さい、等しい） 画面の解像度（指定の幅×高さより大きい、小さい、等しい） ページの表示時間（最小値、最大値） ページの非表示時間（最小値、最大値）
カスタムフィルター	カスタムユーザーID カスタムセッションID カスタムページID カスタムラベル

セッションのレコーディング

ユーザーの実際のアクション（カーソルをどう動かしたか、どこをクリックしたか、など）を動画で確認することができます。

レコーディングされてから通常30分以内（最大でも2時間以内）にClarity管理画面上で動画を確認できるようになり、1日あたり最大10万セッション分の動画を保持できます。保持期間は30日間（お気に入り登録した場合には13ヶ月間）です。サイトの閲覧者が10万セッションよりも多い場合は、保持される動画はランダムに選出されます。
また、100セッションを上限として、現在サイトにアクセスしているユーザーのアクションをリアルタイムにストリーミングできます。

ヒートマップと同様に、フィルターを使用してレコーディングを検索できます。
レコーディングでは、ヒートマップのフィルターに加えて次のフィルターを利用できます。

パス	エントリURL（ワイルドカードが利用可能な自由記述） 終了URL（ワイルドカードが利用可能な自由記述）
セッション	セッションの継続時間（最小値、最大値） セッションあたりのクリック数（最小値、最大値） セッションあたりのページ数（最小値、最大値）

ちなみに、このレコーディング機能はMP4やMOVのような動画ファイルを生成するわけではありません。公式のFAQによると、レコーディング当時のHTMLとカーソル位置などの情報を保持しておき、Clarity上でユーザーの挙動を再現しているようです。
この仕組みにより、レコーディングの記録時にはサイト動作の重さにほとんど影響を与えないように感じられます。代わりに、レコーディングの再生時にHTMLをレンダリングする必要があるため、ややガタついた挙動に見えることがあります。

インサイトダッシュボードの生成

Clarityは全てのセッションをトラッキングしており、次のような統計情報をダッシュボード上で確認できます。

デッドクリック（Dead clicks）	ユーザーが要素をクリックしたが、ページ上に何の変化も起こらなかったようなクリックの数。 ※ファイル選択など、OS標準のウィンドウが呼ばれる場合もこれに含まれることがあるようです。
イライラしたクリック（Rage clicks）	ユーザーが狭い領域を素早く何度もクリックした数。
クイックバック	ユーザーがあるページにアクセスしたがすぐにブラウザバックした数。
過剰なスクロール	ユーザーの垂直方向スクロールが予想平均値よりも大きかった数。
JavaScriptエラー	ページへのランディング時に発生したJavaScriptのエラーおよび、ユーザーのクリックによって発生したJavaScriptのエラーを含む数。
人気上昇中のページ	指定期間内によく見られているページのURLと数。URLにクエリパラメータを含めるか除外するか選択可能。
参照元	流入元となるドメインの種類と数。
デバイス	ユーザーがページへのアクセスに利用しているデバイスの種類（PC、タブレット、モバイル、その他）と数。
オペレーティング システム	ユーザーがページへのアクセスに利用しているOSの種類（Windows、Mac、など）と数。
ブラウザー	ユーザーがページへのアクセスに利用しているブラウザーの種類（Chrome、Edge、など）と数。
国	ユーザーがどこの国からアクセスしているかの種類と数。

これ以外にも特別なセットアップを行うことで、購入に関する統計情報をまとめたeコマースインサイト、記事コンテンツに関するユーザーの興味・反応を分析するためのコンテンツインサイトなども表示されるようになります。

各種インテグレーション

Clarityは2023年3月現在、23種のサービスとのインテグレーションが用意されています。
代表的なサービスは次のとおりです。

• Clarityとデータ共有できるサービス
  • Google Analytics
  • Google Optimize
  • AB Tasty
  • Optimizely Web
• Clarityを簡単に導入できるサービス
  • Google Tag Manager
  • Shopify
  • Wix
  • Gatsby
  • WordPress（WooCommerce Plugin）
  • ほか

特にGoogle Analyticsとの連携には力を入れており、インテグレーションを有効化することで相互にデータを参照することができるようになります。
Clarity上では、Google Analyticsで作成したセグメントを用いてレコーディングを絞り込んだり、目標到達ステップごとのヒートマップやレコーディングを確認できるようになります。一方、Google Analytics上ではClarity Playback URLがディメンションとして使えるようになり、Google Analyticsコンソールから直接Clarityのレコーディングを探せるようになります。

Google Optimizeについては、2023年1月に「2023年9月30日をもってサービスを終了する」という発表がありましたので、これから連携を行う場合はご注意ください。Googleから後継ツールやFirebase A/B TestingのWEB版などが提供された際に、Clarityがそれらをサポートするかどうかは不明です。

ライブ拡張機能

Microsoft Clarity LiveというChrome拡張機能をインストールすることで、Clarityコンソールにアクセスすることなくヒートマップやレコーディングを確認できるようになります。

拡張機能をインストールし選択すると、ウィジェット表示/非表示のトグルが表示されます。これをONにすることで、ヒートマップやレコーディングをライブ表示するためのウィジェットがページ上に表示されます。

Clarityコンソールにアクセスすることなく、計測対象のサイト上で直接ヒートマップを確認することができました。期間や領域での絞り込みもできるようです。
Clarityコンソールにアクセスしたくなった場合は、ウィジェットからジャンプすることもできます。

Clarityの強み

ここまででClarityの機能を紹介していきましたが、私が感じたClarityの強みは次の3点です。

• 無料でできることが多い
• サンプリングなし・リクエスト制限なしが嬉しい
• セキュリティレベルが高い

無料でできることが多い

ヒートマップ、レコーディング、様々な観点でのダッシュボード生成、外部サービスとの連携など、標準搭載の機能が豊富です。他に同様の機能を無料で商用利用できるサービスは、私が調べた限りでは存在しませんでした。

もちろん、他のサービスではできるがClarityではできないこともあります。例えば、フィードバック収集ポップアップの挿入、クラッシュレポート、クロスプラットフォーム分析はClarityではサポートされていません。これらを利用したい場合は、別サービスの導入をご検討ください。

リクエスト制限なし・サンプリングなしが嬉しい

他サービスと比較して突出した強みは、計測リクエスト数に制限がなく、サンプリングなしでデータ収集できる点です。

他のサービスでは大抵、計測対象となるセッション数について日あたりや月あたりの上限が定められており、上限解放のためには追加課金が必要というモデルになっています。
Clarityでは全てのセッションが計測対象となっています。保存されるレコーディング数には上限がありますが、ヒートマップやインサイトダッシュボードはすべてのセッションをもとに生成されます。

個人情報保護レベルが高い

ClarityはGDPR（EUの一般データ保護規則）とCCPA（カリフォルニア州消費者プライバシー法）に準拠しており、高レベルな個人情報保護水準と言えます。

先にお見せしたキャプチャ内では、ページ内の文字列が■■■や□□□とマスキングされていましたが、これは私が記事用に編集したわけではなくClarityによって自動マスキングされています。機密性の高い文字列を自動で検出しマスキングしてくれるので、日本の改正個人情報保護法にも準拠した運用方法が可能となります。
ただし、基本的には個人情報を収集しない前提の設計となっているため、現時点ではオプトアウト機能やDNT設定の適用機能は存在しません。プライバシー保護の観点からそれらを用意するためには、独自に実装する必要があります。
ニフティ温泉ではユーザーの入力を不用意に記録してしまわないように、マスキング設定をバランスモードにした上で、口コミ入力ページやプロフィール変更ページへのClarity導入は避けるようにしています。

他のツールとの比較

2023年3月7日時点の情報をもとに代表的なサービスを比較してみます。
最新の情報は、各公式サイトにてご確認ください。

サービス	できること	料金
Microsoft Clarity	ヒートマップ レコーディング インサイトダッシュボード 各種インテグレーション ライブ拡張機能 自動マスキング	無料
Hotjar	ヒートマップ レコーディング フィードバック収集 サーベイ収集 ユーザーインタビュー インサイトダッシュボード ファネル分析 各種インテグレーション	無料（35セッション/日） $39/月（100セッション/日） $99/月（500セッション/日） $249/月（1,500セッション/日） $389/月（2,500セッション/日） $489/月（4,000セッション/日） $789/月（8,000セッション/日） $1,289〜/月（1.5万〜セッション/日）
Smartlook	ヒートマップ レコーディング イベント収集 ファネル分析 クラッシュレポート クロスプラットフォーム分析 各種インテグレーション	無料（3,000セッション/月） $55/月（5,000セッション/月） 応相談（5万セッション/月）
Ptengine	トラフィック分析 イベント収集 ヒートマップ A/Bテスト シナリオパーソナライズ キャンペーン作成 インサイトダッシュボード 各種インテグレーション	無料（3,000PV/月、各種制限） 9,980円/月（3,000PV/月） 19,800円/月（1万PV/月） 39,800円/月（5万PV/月） 59,800円/月（10万PV/月） 99,800円/月（20万PV/月） 149,800円/月（50万PV/月） 従量課金（50万〜PV/月）

なぜ今Clarity？

当社はニフティ温泉を主力サービスのひとつとして位置付けており、今後コンテンツの拡充にも力を入れていく方針です。ユーザーが増えれば、それに比例してセッション数やPV数も増えていくことが想定されます。Clarityはセッション数やPV数によらずリクエスト制限なしに無料で使えるという点が非常にありがたいです。

また、今後もしかするとAI利用を視野に入れたBing Webmaster Toolsが登場し、ひいてはClarityを含む既存ツールと統合されるかもしれないと思い、このタイミングでMicrosoft製のツールに触れておきたいと考えました。Microsoft独特のUIに慣れておく良い機会になったと思います。

まとめ

今回はMicrosoft社の提供するヒートマップツールClarityを使ってみました。
無料でヒートマップやレコーディングなど様々な機能を制限なく使えるだけでなく、個人情報保護などの観点からも重宝するツールとなっています。

今後、他のBing Webmaster Toolsも使ってみたいと思いますので、よろしくお願いいたします。

最後までお読みいただきありがとうございました！