ユーザーがウェブサイトでの行動や反応を確認できるヒートマップツールは、有料無料問わず、国内外でさまざまな企業様から提供されています。

しかし、多くのヒートマップツールの無料プランは、データの保有期間やアクセス数などの機能に制限があります。Microsoft 社が提供する Clarity （クラリティ）は、すべての機能が制限なく無料で使用できます。企業・個人関係なく活用しやすいことが特徴です。

本記事では、Clarity（クラリティ）の機能から設定方法・使い方までをご紹介します。
ぜひ、ヒートマップツールを活用することで、ウェブサイトの成果を上げていきましょう！

Clarity（クラリティ）とは

Clarity （クラリティ）は Microsoft 社が2018年に提供を開始した無料のヒートマップツールです。公式サイトはこちら：https://clarity.microsoft.com/lang/ja-jp

Clarity（クラリティ）には、主に下記３つのメリットがあります。
1．永久に無料で利用できる
2．無制限のセッション数やトラフィック数
3．Google アナリティクスと連携することで、より高度な分析が行える
※2024年4月の時点

初めてアクセス解析ツールを使う方は、恐らくイメージしにくいかもしれません。
ここから、Clarity（クラリティ）の具体的な機能を解説します。

Clarity（クラリティ）３つの機能

Clarityには大きく分けて「ダッシュボード」「ヒートマップ」「レコーディング」3つの機能があります。機能の概要を以下の表にまとめました。

Dashboard
ダッシュボード		 ダッシュボードでは、Clarityで取得できる情報を、表やグラフなどの視覚的なデータで把握する機能です。
また、カードを「ドラッグ アンド ドロップ」して、ダッシュボードのレイアウトを変更することができます。
Heatmaps
ヒートマップ		 ヒートマップ機能は、あるページ上で発生したユーザーのクリックした位置やスクロール位置、滞在時間を視覚化する機能です。
Recordings
レコーディング		 レコーディング機能は、サイト訪問者の行動ログを動画として再現する機能です。
※ Google アナリティクス 連携 Google アナリティクスと連携することで、Clarity 内で Google アナリティクスの計測データのダッシュボードを作成できる機能です。

 

Clarity（クラリティ）を導入する方法

ユーザー行動分析に必要なヒートマップ機能が一通り備わったClarity（クラリティ）を導入してみたいですね！
それでは、ウェブサイトを利用するための導入手順を解説します。

手順1. Microsoft Clarity のアカウントを作成する

Microsoft Clarity の公式サイトのトップページにアクセスし、【使い始める】という青いボタンをクリックしてください。
ボタンをクリックすると、「 Clarity でサインアップする」の小さなウィンドウが表示されます。
Microsoft、Facebook、Google でそれぞれサインアップできます。
任意のサインイン方法を選択し、サインインが成功すると、メールアドレスの確認画面に遷移します。
メールアドレスが正しいかどうかを確認し、チェックを入れて次に進みます。

手順2. 新規プロジェクトを作成する

メールアドレスの承認後、「新しいプロジェクトを追加する」画面が表示されます。
入力フォームには、計測したいウェブサイトの名前と、URLを入力します。
入力後、「新しいプロジェクトを追加する」ボタンを押してください。
これでプロジェクトの作成が完了です。

手順3. Clarity のタグをウェブサイトに設置する

作成したプロジェクトを押すと、最後に計測したいウェブサイトに Clarity の計測タグを設置すれば完了です。タグの設置方法は2つあります。

【手動でインストールする】方法については、追跡コードをコピーしてサイトの要素に貼り付ければ、設置が完了となります。

もう一つは、Googleタグマネージャー（GTM）を利用して連携する方法です。分析したウェブサイトにすでにGoogleタグマネージャー（GTM）を設置している場合が多いかもしれません。手動でタグを設置しなくてもすぐ利用でき、非常に便利です。

※Googleタグマネージャー（GTM）はHTMLを編集することなくタグを追加・編集・削除するためのツールです。HTMLの知識がない初心者でも比較的簡単に行えます。

Googleタグマネージャー（GTM）のタグ自体は設置しなければならないです。ウェブサイトにアクセス解析タグや広告計測タグなど複数のタグを設置する場合は、管理のコストや工数が増えるし、ページの表示速度が遅くなる可能性がありますので、Googleタグマネージャー（GTM）を利用する方法をおすすめします。

関連記事：Googleタグマネージャー（GTM）とは？メリットと基本用語を徹底解説

【Googleタグマネージャーを使用してインストールする】方法については、「検出済み」という黄色いボタンが現れます。
「セットアップの開始」＞「今すぐつながりを申請」＞「作成と発行」をクリックすると、連携は完了です。

Clarity（クラリティ）の活用方法

ツールを導入することはゴールではありません。根本的な目的は「ユーザーエクスペリエンスの向上を目指して、サイトを改善する」ことです。ツールを使用する人によって、使い方が異なるかもしれません。筆者はClarity（クラリティ）を使う場面は主に２つです。

活用方法1：ユーザーを特定してレコーディングで行動を確認する

サイトを改善するため、ユーザーの動きを把握することは不可欠です。
Clarityのレコーディング機能はサイト訪問者の行動を、動画として再現する機能です。しかし、すべてのユーザーの行動をチェックするのは大変だし、意味もありません。レコーディング機能を利用する前に、ユーザーを絞ったほうがいいでしょう。

例えば、ECサイトを運用する場合でしたら、「ページ数」が多く、コンバージョンに至らなかったユーザーの「行動」を確認したほうがいいでしょう。なぜなら、そのようなユーザーは商品に興味・関心を持っている可能性が高いのに、何らかの理由で購入に至らなかったからです。

なお、レコーディングの「詳細」をクリックすると、ユーザーの都道府県やクリック数、参照元、デバイス、終了ページなどの情報を確認し、仮説を細部まで詰めることができます。ぜひ、コンバージョンしたユーザーやリピーター様の動きを確認してみてください。

活用方法2：ヒートマップ機能でウェブサイトの課題点を把握する

ページのどこが見られているのか？ページ上のどこをクリックをしているのか？
ユーザーの動きのデータを視覚的に表示できることはヒートマップツールを使う一番のメリットです。
Clarity（クラリティ）の「ヒートマップ」機能にはクリック、スクロール、領域という3つのデータが確認できます。機能の説明は以下の表にまとめましたので、ぜひご参考にしてください。

機能 説明
クリック ページでクリックされた箇所を確認できる機能です。
スクロール ユーザーがサイトの上から下まで、どこまでスクロールしたかが見える機能です。
領域 ページ内の各セクション内の合計クリック数を視覚化する機能です。

 

例えば、こちらのブログの目次で最もクリックされている箇所が一目瞭然、ユーザーニーズを把握することができますね。

また、下記の図が示すように画像がクリックされやすいことがわかりました。実際に画像をクリックしても拡大ができない場合は、ユーザーはストレスを感じて離脱してしまう可能性が高くなります。ぜひ、ユーザー側の視点から仮説を立てて検証していきましょう。

※本記事に使った画像の出所はClarity（クラリティ）の管理画面です。

まとめ

本記事では無料高性能のヒートマップツールClarity（クラリティ）の機能と導入・活用方法を紹介しました。
しかし、Clarityを利用することで、ユーザーの個人情報が見えてしまう（＝意図せず Microsoft 社に個人情報を譲渡してしまう）ことが発生する可能性があります。必ず、マスクの設定を「バランス（Balance）」か「厳密（Strict）」を選んでください。
また、ヒートマップツールはサイト全体や複数ページにわたった傾向分析は苦手といった短所があります。Googleアナリティクスを併用し分析を行うことをおすすめします。

ぜひ、ビジネスゴールの達成に向けて定期的にヒートマップ分析を行い、サイトを改善してください。

メルマガ登録