Microsoftの無料ヒートマップツール「Clarity」とは?設定方法や使用方法、使用上の注意事項についてまとめて記載

2018年にβ版が公開されていた Microsoft の Clarity が2020年10月29日に一般公開されました。この記事では Clarity に関する基本的な情報や設定方法や使用方法、使用上の注意事項についてまとめて記載しています。

注意事項

【注意】「ユーザーヘルスケア、金融サービス、または政府関連情報を含む機密データを含む Web サイトでClarityを使用すべきではない」という旨が公式ヘルプ上には記載されています。これらのデータを含むサイトにはClarityの導入今一旦見送る形を推奨します。詳しくはこちらの記事でも解説しています。

※本記事は2021年6月6日時点の情報をもとに編集された記事であり、今後変更が加えられることによって修正が入る可能性があります

目次

そもそもClarityとは?

Clarity とは Microsoft が提供している、ユーザーのWebサイト利用を理解するのに役立つ無料の行動分析ツールで「セッションのレコーディング」「ヒートマップ」「インサイト」を機能として実装したものになります。実際にサイト内に導入することで、下記のような分析を実行できるようになります。

参照:What is Clarity?

Clarity ならではの特徴が5つ存在します。その点についても解説していきたいと思います。

Clarityの5つの特徴

5つの特徴については、下記のとおりです。

1.費用は無料

無料で登録し利用することが可能です。今後課金プランなどが明示される可能性はあるかもしれませんが、現在は無料で使用することが可能です。

2.セッションのレコーディングに対応

Clarity ならではの魅力はなんと言っても「セッションのレコーディング」に対応しているという点です。ユーザーのマウスカーソル、スマホの画面タップがレコーディングされ、レコーディングされたものは管理画面上で下記図のように確認する事ができます。

今まで無料ツールでセッションのレコーディングにセッション数無制限で対応してくれていたツールは存在しませんでした。

情報漏洩についても対策がなされています。マスキング機能がデフォルトでONになっており、ユーザーが入力した個人情報などは目隠しがされる仕様になっています。マスキングは3段階での加減調整です。マスキングについては下記記事にて詳細に解説しているので、興味がある方はそちらをご参照下さい。

3.セッション数に制限なし

セッション数に制限はありません。そのため、小規模なサイトから大規模なサイトまで導入可能なツールになります。

大規模なサイトに関しては既に有料の上位互換となるようなツール(例えばContentsquareなど)を導入しているケースもあるかとは思いますが、費用面で敷居が高く、今まで手が届かなかった方も多かったのではないでしょうか。

そんな場合は Clarity がオススメです。Clarity であればセッション数に制限なく、無料で使用し続けることが可能です。

4.Google Analyticsと連携しデータの受け渡しが可能

2020年11月4日から GA との連携が可能になりました。また2021年4月より、 GA4 との連携も可能です。

参照:Google Analytics integration

GAと連携させるメリット、具体的な方法や注意点については下記記事にて詳細を解説しているので、興味がある方はそちらをご参照下さい。

5.データ保有期間は無制限

データの蓄積に期間的な制限がありません。管理画面上「 Time frame 」では以下のように5つの期間を選択し、該当期間のデータを確認する事が可能です。 

  • Today
  • Last 3 days
  • Last 7 days
  • Last 30 days
  • Custom

しかし早めに設定しなければ、結局データをストックしておくことはできません。もし導入を検討されているのであれば、早期導入をオススメします。

Clarityの初期設定方法

公式サイトに登録するところから、サイト内にタグを設置するところを含めた初期設定の手順としては、下記の通りです。

  • 公式サイトにアクセス
  • 登録を済ませ情報を入力
  • タグをWebサイトに設置(GTMでの設置可)

慣れれば数分で設定可能です。タグの発行やGTM上の設定方法については下記記事にて詳細を解説しているので、興味がある方はそちらをご参照下さい。

Clarity を使用することでできるようになる3つのこと

Clarity を導入しデータを集め分析を行っていくことで、下記3つのことができるようになります。

(1)Webサイトのどこをユーザーがどう見ているのかがよくわかるようになる

「セッションのレコーディング」によって記録されたセッションの記録を映像で見ることにより、より具体的にユーザーがWebサイトのどこをユーザーがどう見ているのかが具体的にわかるようになります。

特に重点的に見られているテキストや画像、動画なども視覚的に見えるようになるため、それらをベースにランディングページの改良などを実行可能になります。

(2)わかりやすい素材で他者を説得することが可能に

リテラシーの高くない決裁権者や意思決定者に伝わりやすい、理解しやすい素材を用意することが可能となります。例えばGAの「ユーザーエクスプローラ」を直接見せるよりも Clarity の「セッションのレコーディング」を直接見せた方がリテラシーに関係なく理解が可能なため、話し合いをスムーズに実現することが可能となるはずです。

(3)問題点の明確化、可視化、解釈の余地のない話し合いの場への素材提供

例えば明らかにフォームに問題点がある場合でも議論が事実ではなく、解釈のぶつけ合いになり進展しないことは多々あります。しかし実際にデータを提示することで、解釈の余地が生まれない話し合いが可能になります。

導入前に知っておいた方が良い7つのポイント

導入前に知っておいたほうがいい7つのポイントについて、こちらでまとめて紹介しています。

(1)セキュリティ面について

リリース以降1度も脆弱性が指摘されたことはありません。

(2)反映スピードについて

初期設定後の反映スピードは若干個体差のようなものがあるように思います。サイトの規模感などによる影響は殆どないものと思われます。そのため初期設定を行い、2時間待ち数値が一切反映されないようであれば設定ミスを疑いましょう。

(3)レコーディングしたデータの共有方法

レコーディングしたデータを共有することも可能です。共有したいレコーディングを開き、右上部ボタン(下記図赤枠)をクリックするとURL共有が可能です。

クリックすると、以下のような画面が表示されます。

権限が付与されているメンバーに共有する場合は「 With project team 」から共有可能です。

権限が付与されていないメンバーに共有する場合は「 with anyone 」をクリックし、期間を指定して数秒待つと利用できるURLが発行されます。

権限が付与されていないメンバーに共有する場合は、最大30日しか確認可能な URL を作成することしかできません。有効期限がない録画データを共有したい場合、公式が用意しているもの以外を用いて録画データを用意する必要があります。

Mac であればスクリーンショットと同じように特定のコマンド操作で画面録画することができますので、それを使うことで録画が可能です。Windows の場合、 Chrome の拡張機能を使うことで画面録画が可能になります。

参照:Google Chrome用スクリーンレコーダー

(4)権限付与について

権限付与が可能です。詳細は下記別記事にて詳しく解説しているのでご参照下さい。

(5)データ保有期間について

タグ設置後は無制限です。

(6)膨大なレコーディングデータをどのようにMSは管理しているのか

最後にレコーディングされたデータをどう MS が管理しているかについてですが、まずレコーディングされているデータは「単純録画」ではありません。ピクセル単位でのデータのみをレコーディングし( Session Recordings )再生時にレンダリングしているようです。

自分も社内の詳しい方に聞くまで気付きませんでしたが、それ故に動画を単純に撮影するよりもデータ量も少なく、サイトの読み込みスピードにも影響を与えず、サクサク機敏に動くことを可能としているようです。

(7)IPアドレスを用いた除外設定について

2021年4月より IP アドレスによる除外設定が可能となりました

これにより、社内や特定の個人(管理者など)からのアクセスといった内部トラフィックを除外した上でのデータ収集が可能となります。

IPアドレスの除外は下記図サイドメニュー「IP blocking」より可能です。

「+ Block IP address」(下記図赤枠)をクリックすると、下記図のように「Name」「IP address」と表示されます。

「Name」には管理上の名称を、「IP adress」には IP アドレスを入力します。ちなみに今現在アクセスしている環境を除外したい場合、チェックボックスの「Block my current IP」をチェックすれば IP アドレスの入力なしに除外設定が可能です。

クライアントや特定の端末からのアクセスを収集しないようにする場合、以下のような IP アドレスを確認できるサービスなどを利用し除外設定を行います。

(サービス例)アクセス情報【使用中のIPアドレス確認】

赤枠内に IP アドレスが表示されますので、そちらを確認し設定します。

Clarity を使用する上で注意すべき3つのポイント

Clarity を使用する上で、注意すべきポイントが3つあります。その点についても説明していきます。

(1)意図したデータを作り上げてしまう危険性について

「セッションのレコーディング」は非常に明快な故、単純な数値データ以上に人を動かす力を持っています。ただし間違った方向に動かすこともできてしまうことは事前に把握しておく必要性があります。

仮説を立ててデータを確認し事実確認をする際に「仮説」に縛られ、仮説を立証するためのデータ集めをしてしまうということはありがちですが「セッションのレコーディング」はより明快なため、その傾向を強めてしまう危険性があります。

(2)分析をする際は目的を持って明確かつ計画的に

「データ分析をしよう」とするとついダラダラと見れしまうことは多々ありますが、「セッションのレコーディング」はよりその「ダラダラ」を加速させます。

サイト内のセッション別の行動履歴はGAの、「ユーザーエクスプローラ」などでも確認可能でしたが、実際にユーザーの動きが動画として確認できる「セッションのレコーディング」をつい無目的に見続けてしまう人は多いのではないでしょうか。

そのためもしデータを確認する場合、下記のような形で使用される事をオススメします。

  • 確認するサンプルデータ数を事前に明確化した上で確認
  • 分析対象のページを事前に選定しスポットで分析
  • 目的と時間を明確化の上分析する(例えばフォームページのデータだけをみると決めて30分で実施するなど)

(3)リリース直後の無料ツールであることを正しく理解する

無料ツール故データに過度な期待や性能向上を期待するのは避けるべきでしょう。あくまでも無料ツールですから、使用するのであればありがたく利用しましょう。

Clarirtyを用いた改善の試みについて

当ブログにも実際に Clarity を設置していますが、Clarity を設置し得ることの出来たデータを元に改善を試みました。下記(1)(2)が実際の事例になります。

(1)ヒートマップを用いて改善を試みた事例

主に行った改善(正確には現状把握を含む)は下記の通りです。

  1. 数値の明確化(全体把握)
  2. 誤クリック誘発ポイントの修正
  3. 英語記載箇所の修正

詳細下記の通りです。

(2)セッションレコーディングを用いて改善を試みた事例

主に行った改善は下記の通りです。

  1. 一部リンクの削除
  2. 記事を読みつつ設定作業をしている方のための最適化
  3. 記事幅の変更

詳細は下記のとおりです。

最後に

まずは「面白い新しいおもちゃ」として使ってみる感覚が必要かと思われます。そして事前に改善を行うと想定し設定した場合、有意性のあるデータ収集期間として2〜3か月ぐらいは最低でも必要となりますので、遅くとも具体的な改善アクションを実行する2〜3か月前までには、サイト内に Clarity を設置するといった動きが必要になります。