Microsoft Clarityとは？
https://clarity.microsoft.com/
Clarityとは、Microsoftが無料で提供しているWebサイト分析ツールです。Webサイト上でのユーザー行動を記録し、ヒートマップやレコーディングとして表示・分析をすることができます。特にレコーディング機能では、サイト上での実際のユーザーの行動を目視で確認できるため、被験者を募ることなく継続的にユーザビリティの検証が行えるという利点があります。
ECサイトでユーザーが商品を購入した時の実際の画面操作を観察したい
新規登録のフォームでわかりにくい項目はないか？
ユーザーが間違ってクリックしてしまっている要素（デッドクリック）はないか？
といった、定量データだけでは確認することが難しい課題を検証したい時におすすめのツールです。
Clarityで使える3つの機能！注目はレコーディング機能
分析ツールというと、多機能で操作が複雑な印象があるかもしれません。しかし、Clarityの基本的な機能は以下の3つのみ。非常にシンプルで、特に大きな学習コストがかからないツールとなっています。
ダッシュボード
まず、Clarityのホーム画面的な役割を持つダッシュボード画面では、Clarityが収集したユーザー行動データに関する統計的な情報がまとめて表示されます。特に、中央の「インサイト」にはユーザビリティの課題を発見しやすいような以下の4つの指標と実際にこれらの問題が起こったセッションのレコーディングへのリンクが準備されています。
イライラしたクリック（連続クリックなど）
デッドクリック（反応がない要素へのクリック）
過度なスクロール（操作の迷いなど）
クイックバック（期待と異なる画面への遷移）
Clarityを導入したのち数時間程度でこれらの指標が表示されるようになるため、まずはこれらの指標を手がかりにサイトの課題を確認してみると良さそうです。
ヒートマップ
次に、ユーザー行動をヒートマップ化してくれる機能です。このヒートマップでは、ページごとに以下の3つの情報を可視化することができます。
クリック頻度
スクロール率
滞在領域
ページ内でユーザーがどのような情報に興味を持っているのかがわかりやすく可視化されるため、ページごとの改善ポイントを洗い出したいときにまず確認したい画面ですね。
またClarityの強みとして、それぞれのクリックが実際に起こったセッションのレコーディングへのリンクが設置されているため、ユーザーがどのようなタイミングでその要素をクリックし、その後どのような行動を取ったのかといった情報を確認することが可能です。これは他のヒートマップツールと比べても大きなメリットです。
レコーディング
Clarity注目の機能がこのレコーディング機能です。上記のダッシュボードとヒートマップがそれぞれ統計的な情報を表示してくれるのに対し、レコーディングでは実際のユーザーのサイト利用時の画面操作を動画として確認することができます。
レコーディングでは、
カーソルの動き
クリック
スクロールの動き
ページ遷移
エラーメッセージ
といった情報が可視化され、ユーザーがどのようにサイトを使っているのかを、まさにユーザビリティテスト実施時のように観察することができるのです。とはいえ、膨大な数になるセッションのレコーディングをすべ て確認するのには大きな時間がかかるため、
ダッシュボードやヒートマップを使って問題の発生しているセッションを特定
問題のあるセッションのレコーディングでユーザー行動を確認
といった使い方をする必要があります。
他にも、レコーディングのフィルター機能を利用して、特定のページが含まれるレコーディングや、GA4と連携して特定のイベントが発生したレコーディングを抽出して確認するといった方法で課題を発見することができます。このような「まず特定の条件でフィルタリングをしてから、該当するレコーディングを確認する」という使い方がClarityをうまく使いこなすためのポイントです。
Clarity導入のメリット
Clarity導入の最大のメリットは、通常被験者の募集などで実施コストがかかりがちな定性的なユーザビリテ ィ調査を無料で手軽に行えるようになる点です。
ユーザー行動の背景にある「なぜ？」に迫ることができないという点は、対面でのユーザビリティテストに劣りますが、コストの高いユーザビリティテスト以外ではなかなか発見できないUX上の課題を低コストかつ頻繁に確認できるという点ではとても強力なツールとなっています。
Clarity導入の主なメリットをまとめると以下の通りです。（2023年12月現在）
無料
無期限でデータを保存してくれる
保存セッション数が無制限
GA4との連携は便利？Playback URLのGA4への送信は廃止に
Clarityを導入するメリットとして、GA4との連携によりGA4で特定したセッションのレコーディングURLを抽出できるという点が挙げられることがあります。
この機能は2023年12月現在もClarityのドキュメントに記載があるものの、ClarityのGithubを参照すると11月ごろからGAへのPlayback URL（レコーディングのURL情報）の送信は行なっていないとのことでした。実際にGA4を連携してもGA4にClarity Playback URLのカスタムディメンションが自動設定されることはなく、手動で設定してもデータを取得することはできませんでした。
GA4と連携をすると、GA4のデータが一部Clarityにも表示されるようになるものの、Clarity上でGA4のイベントを使ったフィルタリングなどはできないため、現状あまり大きなメリットはなさそうです。
また、これまでGA4との連携で実現していたような、「特定のイベントを発生させたユーザーのレコーディングURLを取得する」というような使い方をするためにはClarityのカスタムタグ機能を使用することができます。こちらの詳しい設定方法については、「特定のイベントが起きたセッションのレコーディング確認」で解説しています。
レコーディング機能におけるプライバシー保護について
レコーディング機能と聞くと、ユーザーの画面を"録画"しているような印象を受けるため、「Microsoftのサーバーにユーザーの画面録画ファイルが存在するのでは？」というような疑問が生まれるかもしれません。しかし、実はClarityのレコーディング機能は実際にユーザーの画面の録画を行っているわけではないのです。
Clarity のセッション レコーディングは、サイトと対話しているユーザーのビデオ ストリームではありません。以下が機能する仕組みです。Clarity では、ユーザーが表示するすべてのページ情報 (DOM コンテンツ) と、ユーザーがサイトを参照する場合に実行するアクションが記録されます。セッションのレコーディングとは、デバイ ス間のマウスの動き、クリック、スクロールなど、これらのユーザーの操作をすべてキャプチャしているアニメーションのことです。
https://clarity.microsoft.com/session-recordings
Clarityは、実際のユーザーの画面を録画しているわけではなく、ユーザーの見た画面の情報と操作内容のみ記録し、アニメーションによってユーザーのサイト操作を"再現"しています。
そのため、録画による動画ファイルは存在せず、フォームへの入力内容や個人情報などのプライバシーデータをこの再現アニメーションに含めず、Microsoftのサーバーにも送信しないようにすることもできます。機密情報のマスキング方法については、「機密情報のマスキング設定」にて解説しています。
ClarityをUX改善に活かす
では、具体的にClarityを使ってどのようにUX改善に繋げていくことができるのでしょうか？ここでは、UXリサーチと同じような目的でClarityを活用するためのポイントを紹介します。基本的には、確認するレコーディングの スコープを絞った上で、以下のような点に気をつけてユーザー行動を観察していくと課題が発見しやすいです。
何度もやり直しているタスクはないか？
特に時間がかかっているタスクはないか？
目的のコンテンツに最短距離で辿り着くことができているか？
定量データで把握できていないようなエラーは起こっていないか？
ECサイトのカートから購入完了までに離脱するユーザーの課題を抽出
ECサイトで重要な指標の一つが「カゴ落ち率」です。カゴ落ち率とは、カートに追加された商品が最終的に購入されなかった割合のことで、主に購入フローの中のどこかで離脱しているような状況です。
ユーザーが閲覧したページのURLによるフィルタリング
このように、特定の階層以下のページのユーザー行動を確認したい場合は、画面左上の「フィルター」で特定の階層のパスを含むURL（/checkoutなど）を閲覧したセッションを絞り込んでダッシュボードとそれぞれのレコーディングを確認すると良いです。
ECサイトにおける商品購入には多くのフォーム入力が必要なことも多く、レコーディングを確認することで頻繁に起こるフォームのバリデーションエラーやユーザーが迷わず次のステップに進むことができているかなど、定量データだけでは確認しにくい側面を検証することができます。
動画コンテンツ視聴時の画面インタラクションを観察
動画配信サービスなどでは、ユーザーのコンテンツ視聴中のインタラクションを観察したい場合があります。例えば、動画コンテンツを視聴しているときに、動画内にどのようなコンテンツが表示されているタイミングで再生を停止したり、シェア機能を使ったりしているのかを確認することは定量データ分析だとやや難しいです。
このような場合には、動画視聴ページでの滞在時間が長く、かつクリックインタラクションの多いレコーディングから順に確認していくとユーザーがコンテンツ視聴中にどのような操作を行なっているのかを確認することができます。
特定のイベントが起きたセッションのレコーディング確認
例えばメディアサイトのシェア機能分析では、「シェアをした」というイベントを定量的に取得することができても、記事閲覧中のどのようなタイミングでこの機能が使われたのかなどは定量データ分析ではなかなか見えてきません。このような場合にも、Clarityでユーザー行動を確認するとUX改善のヒントが見えてきます。
この場合のように、Clarity内で特定のイベントが起きたセッションのレコーディングを抽出したい場合には、 以下のようにイベントが発生するタイミングでClarityにイベントタグを送信する設定を行う必要があります。Googleタグマネージャーを導入している場合は、カスタムHTMLタグを設定することでも対応できます。
clarity("set", "key", "value");このように、カスタムタグを設定すると、30分から2時間以内にClarityのフィルター内に設定したタグが表示され、該当するタグが送信されたセッションのレコーディングを抽出することができます。
以前はGA4連携を使い、GA4の探索機能でも実現できたものですが、2023年11月頃よりClarityからGA4への"Clarity Playback URL"（レコーディングURL）の送信が廃止されたようで、現在このような分析を行うためには上記のようなClarityのカスタムタグを設定する必要があります。
Clarityの使い方と設定方法
Clarityは日本語にも対応しており導入はとても簡単です。ここでは、それぞれのステップを解説します。
Microsoftアカウントの作成
新規プロジェクトの作成
タグの設置
計測開始
1. Microsoftアカウントの作成
Clarityは、Microsoft、facebook、Googleのアカウントを使用したログインに対応しています。まずはClarityのサービス紹介ページ右上の「サインアップ」よりアカウントを作成しましょう。
2. 新規プロジェクトの作成
アカウントの作成が完了したらプロジェクトを作成しましょう。一つのプロジェクトは一つのWebサイトに対応する形となります。名前をつけてサイトのURLを入力するだけでプロジェクトを作成することができます。ちなみに、Androidアプリもサポートされています。
3. タグの設置
次に、ユーザー行動の情報を送信するタグの設置です。スクリプトを直接サイトに設置する場合は、「設定 > セットアップ > インストール方法」から「手動でインストールする」を選択し、表示されたスクリプトをサイト内で分析したいすべてのページの<head>要素に貼り付けます。
Googleタグマネージャーを使用している場合は、ユーザー行動の情報を送信するタグの設置です。「設定 > セットアップ」からGoogleアカウントを使った連携を行うだけでClarityの導入が完了します。
4. 計測開始
以上でClarityのインストールは完了です。問題なくインストールができていれば、数分ほどでライブユーザーのレコーディングを確認できるようになります。
おすすめの追加設定
ここまでの基本設定を行うだけで、ひとまず基本機能のダッシュボードやヒートマップ、レコーディングの確認が行えるようになります。ここでは、追加で行なっておくと良い設定を2つだけ紹介します。
内部トラフィックの除外
こちらは、分析の際に内部ユーザー（社員やプロジェクトメンバーなど）によるアクセスをClarityの記録から除外するための設定です。ClarityではIPアドレスによる内部トラフィックの除外を行うことができるため、「設定 > IPブロック」より会社や自宅のIPアドレスを設定しておくと良いでしょう。
機密情報のマスキング設定
レコーディング上で隠したい情報は、設定画面の「マスク」で細かく指定することが可能です。デフォルトでは「バランス」に設定されており、フォームの内容などを自動で機密情報として判断してレコーディング動画の生成時に内容をマスキングしてくれます。
一点気をつけなくてはいけないのが、フォームではなくサイトの画面上にユーザーの個人情報が表示されるようなケースです。ECサイトの注文確認画面やアカウント情報画面など、ユーザーの個人情報が表示される画面がサイト内にある場合は、「要素ごとにマスク表示」機能を使用してCSSセレクター形式の記述で画面内の特定の要素内の文字にマスキングを行うこともできます。細かくマスキングを行いたい場合は、Clarityでのマスキング用のCSSクラスを準備しておいてこちらで一括指定してしまっても良いかもしれません。
また、ページ単位でClarityのレコーディングから除外したい場合は、Clarityのスクリプト自体を外したいページに設置しない、またはGoogleタグマネージャーでタグのトリガーに例外を追加することで対応することもできます。
Microsoft Clarity Live
「Microsoft Clarity Live」は、Clarityのヒートマップやレコーディングに分析対象のサイト上からアクセスできるようにし てくれるChromeの拡張機能です。
こちらをインストールすると、サイトをブラウザ上で閲覧しながらヒートマップを重ねたり、指定した領域内でのクリックがあったセッションのレコーディングを再生するといったことができるようになります。Clarity導入後に一度試してみると良さそうです。
まとめ
今回は、一般的にコストがかかりがちな定性調査を無料で簡単に取り入れることができるツール「Microsoft Clarity」を紹介しました。定量的なデータ分析まではまだ手が出ないといったデザイナーの方にも、ClarityであればUXリサーチと同じような感覚でユーザーの行動を観察し、課題を抽出することができおすすめのツールです。
