無料のヒートマップツール「Clarity」とは？概要や機能の特徴、設定方法、有料ツールと比べた違いを解説

ヒートマップ解析はウェブサイトのコンバージョン率向上に欠かせない手法です。
そして、ヒートマップ解析を行うためのツール「ヒートマップツール」は有料無料問わず、国内外でさまざまなベンダーから提供されています。

Microsoft 社が提供している無料のヒートマップツール Clarity （クラリティ）もその一つです。

本記事では、Clarity の概要や機能の特徴、設定方法を解説します。
また、ほかの有料ツールと比較した場合にどのような特徴を持つのかについても解説します。

目次

• Clarity とは
• Clarity の解析機能
• Clarity の導入方法
• 有料ヒートマップツール SiTest と比較した Clarity

Clarity とは、Microsoft 社が米国時間の2018年に提供を開始した、無料のヒートマップツールです。
有料版はなく、すべての機能が制限なく無料で使用できます。

また、ヒートマップ解析だけでなく、セッションのレコーディング再生など複数の解析機能が搭載されています。

一般的にヒートマップツールはページビュー数や、セッション数などアクセスに応じた従量課金です。
一方で、Clarity はアクセス数が無制限で無料で使用できます。

Clarity にはヒートマップ解析のほかにいくつか解析機能が搭載されています。
解析機能は大きく以下の3つです。

■ ダッシュボード
■ レコーディング
■ ヒートマップ

順に概要を解説します。

ダッシュボード機能では、計測中のウェブサイト全体のユーザー数をはじめ、デバイス別、ページ別、参照元別などの利用頻度の高いディメンションの数値が確認できます。

また、ユーザーが同じ箇所を素早くクリックする行動「イライラしたクリック」が発生したセッション数や、とくにアクションにつながらなかった「デッド クリック」が発生したセッションの割合など日本のツールではあまり見られない指標などもあります。

ちなみに「イライラしたクリック」は英語で「 Rage clicks 」と言い、海外のアクセス解析ツールでは比較的一般的な指標です。

レコーディング機能は、サイト訪問者の行動ログを動画として再現する機能です。
実際に計測中のウェブサイトを閲覧し始めてから、離脱するまでの行動を確認できます。

ヒートマップ解析やアクセス解析などの定量データからは気づけなかった発見が得られるため、ヒートマップ解析と併用することで新たな施策の立案につながる場合があります。

ヒートマップ機能は、あるページ上で発生したユーザーのクリックした位置やスクロール位置、滞在時間を視覚化する機能です。

Clarity には「クリック」「スクロール」「領域」の3種類のヒートマップ解析機能が搭載されています。

クリックヒートマップ

クリックヒートマップは、クリックが発生した箇所を視覚化します。
赤色に近い場所ほどクリックが多く発生している場所で、青色に近い場所ほどクリックが少ない場所と判断します。

また、クリックが発生した要素に対するクリック数も確認できます。

スクロールヒートマップ

スクロールヒートマップは、ユーザーがサイトの上から下まで、どこまでスクロールしたかを視覚化します。

赤色に近い場所ほど到達率が高い場所で、青色に近い場所ほど到達率が低い場所と判断します。
なお、一般的なサイトでは、ページの上部のほうが到達率が高く、ページの下部になるほど到達率は低くなるので、ページ上部が赤く、ページ下部が青くなります。

また、左側にはスクロール到達率を定量的に確認できる「スクロールデータ」が表示されています。

領域ヒートマップ

領域ヒートマップは、ページ内の各セクション内の合計クリック数を視覚化する機能です。
赤色に近い場所ほどクリックが多く発生している場所で、青色に近い場所ほどクリックが少ない場所と判断します。

また、クリックが発生したエリアに対するクリック数やクリック率も確認できます。

主要な機能ではありませんが、Clarity は Google のアクセス解析ツール Google アナリティクスと連携できます。

Google アナリティクスと連携することで、Clarity 内で Google アナリティクスの計測データのダッシュボードを作成できます。
また、目標やセグメントをインポートできます。

なお、Clarity 内では「コンバージョン」や「目標」の設定はありません。
コンバージョン率や売上向上を目的として Clarity を利用する場合、Google アナリティクスの利用と連携は必須といえます。

Clarity を自社のウェブサイトで利用するために、導入方法を解説します。
以下の3ステップで計測を開始できます。

1. Microsoft Clarity のアカウントを作成する
2. 新規プロジェクトを作成する
3. Clarity のタグをウェブサイトに設置する

Microsoft Clarity の公式サイトのトップページにアクセスし、「サインアップは無料です!」という白いボタンをクリックしてください。

ボタンをクリックすると、「 Clarity でサインアップする」のポップアップが表示されます。
Microsoft、Facebook、Google でそれぞれサインアップできます。
任意のサインイン方法を選択してください。

サインインが成功すると、メールアドレスの確認画面に遷移します。
メールアドレスが正しいかどうかを確認し、上のチェックを入れて次に進みます。

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

これでプロジェクトの作成が完了です。

最後に計測したいウェブサイトに Clarity の計測タグを設置すれば完了です。
タグの設置方法は2種類あります。

■ ウェブサイトのソースコードに直接スクリプトを記載する
■ Google タグマネージャー経由で追加する

ウェブサイトのソースコードに直接スクリプトを記載する

HTMLソースコードに直接追加する場合は「手動でインストールする」エリア内の「追跡コードを取得する」ボタンをクリックしてください。

計測タグが表示されるので、このスクリプトを HTML ソース内の と の間にコピー＆ペーストしてください。

その後、本番環境に公開すれば計測が開始されます。

Google タグマネージャー経由で追加する

Google タグマネージャーで設定する場合は左側のボタン「セットアップを開始する」をクリックしてください。

Google タグマネージャー上での設定方法については、遷移後に「Clarity GTM テンプレートを使用したインストール方法」を選択しご確認ください。
手順通りに設定すれば計測が開始されます。

最後に、有料のヒートマップツールと比べて使用感や機能がどのように異なるかを比較します。
今回は当社グラッドキューブが提供する SiTest（サイテスト）を例として比較します。
比較項目は、ヒートマップ解析機能と違い、解析機能以外の特徴、サポート体制の3項目です。

有料ツールは Clarity に比べてヒートマップ解析機能の種類が豊富

Clarity のヒートマップ解析機能は先述した通り「クリックヒートマップ」「スクロールヒートマップ」「領域ヒートマップ」の3種類です。
一方で、SiTest の場合は パソコン・スマートフォンそれぞれに適切なヒートマップが用意されています。
具体的には、以下の6種類です。

■ スクロールヒートマップ（PC・SP）
■ クリックヒートマップ（PC）
■ マウスグラフィ（PC）
■ タップヒートマップ（SP）
■ タッチアクション（SP）
■ クリックデータ（PC）
■ タップデータ（SP）

単純なクリックやスクロールだけでは分からない目線の分析なども、マウスグラフィを使えば疑似的に分析ができます。
また、タッチアクションは、スマートフォンの UI を向上させるために欠かせない機能です。

セッションリプレイはどちらも搭載

セッションリプレイ機能は、SiTest も Clarity も同様に使用できます。
ただし、後述するコンバージョン設定の有無により Clarity での利用はテクニックが必要です。

コンバージョン計測の有無によるセグメント機能の利便性

Clarity にも SiTest にもセグメント機能があります。
特定の条件にマッチするセッションやユーザーのみのデータを比較分析することで、新しい発見が得られます。

ただし、Clarity にはコンバージョン設定の機能がありません。
そのためコンバージョンユーザーと非コンバージョンユーザーの行動の違いは比較できません。
方法として Google アナリティクスと連携することで、Google アナリティクスの目標設定を Clarity 上で利用できますが、Clarity と Google アナリティクスでは計測の仕組みも異なるため精度には注意が必要です。

一方で、SiTest には SiTest 上で「ゴール機能」によるコンバージョン設定ができます。
SiTest の計測しているデータの中でコンバージョンを計測できるため、セグメントはもちろん、SiTest 上でコンバージョン率の推移を含む KPI の改善状況を確認できます。

Clarity は解析機能に特化しているが、改善は不得意
Clarity はヒートマップ解析やセッションリプレイなど解析機能をそろっていますが、ヒートマップ解析などで得られた示唆や仮説を検証するための改善施策を実施する機能は用意されていません。

そのため、A/B テストやパーソナライズなど実際にウェブサイトを変更したい場合はエンジニアが直接ソースコードを編集するか、別途 A/B テストツールの導入が必要です。

以前までは Google オプティマイズと Clarity の併用すればツールコストが0円で施策をできたのですが、2023年9月30日にGoogleオプティマイズがサービス提供を終了されることから、有料のA/Bテストツールの導入は必須となっています。

この状況では、Clarity と有料の A/B テストツールを導入するか、Clarity の利用を中止してヒートマップ解析も A/B テストも実装できるオールインワンのウェブサイト改善ツールを導入するかのどちらかです。

この点で、SiTest はオールインワンのウェブサイト改善ツールとして、ヒートマップ解析も A/Bテスト 機能も備えています。
これからヒートマップツールを導入しようと検討されている方であっても、そのあとにA/Bテストが必要な場面が増えてくるでしょう。
金銭的なコストに加えて学習コストも考えると、オールインワンツールを導入するほうが総合的なコストは低いと言えます。

Clarity は海外ツールであり、問い合わせのハードルは高い
当然ですが、Clarity は海外産のツールであり、日本ユーザーにとっては問い合わせのハードルが高いです。
また、活用サポートなども充実しているとは言えません。
無料ツールを導入した際によくある失敗ですが、サポートや活用支援がなくとりあえず計測しているだけ、という状況に陥ります。

SiTest では、導入企業様には専任のカスタマーサクセス担当がついており、ツール使用にあたって基本的なサポートはもちろん定期ミーティングなどで状況に合わせて活用を支援しています。

ツール導入の際にサポートの手厚さは重要なポイントです。

総評として、Clarity は初めて触ってみるにはおすすめですが、実際に改善したい方にはおすすめできません。
とくに機能の数が少なかったり、海外の方の利用を前提とした UI から質の高い分析をするには非常に高いテクニックが求められます。

いままで一度もヒートマップを見たことがない、使ったことがないという場合には無料ですのでお試しで導入するのは良いですが、ここから具体的に改善をしようとすると、機能がより充実しておりサポート体制が安心できる国産のウェブサイト改善ツールが良いでしょう。

本記事では、Microsoft 社が提供している無料のヒートマップツール「 Clarity 」について解説しました。

導入は一般的な計測ツールと同様でトラッキングコードをひとつ設置するだけで手軽です。
また、機能については必要最低限のページ分析機能が用意されています。

一方で、有料のヒートマップツールに比べると、解析機能はもちろん、改善機能の不足やサポート体制に不安が残ります。
最初のお試しには有用かもしれませんが、本格的に改善を進めていきたいという方には不十分かもしれません。

Clarity の導入を検討している方の参考になれば幸いです。

なお、本記事の中でもご紹介した当社の提供するウェブサイト解析改善ツール SiTest は無料トライアルで全機能を体験いただけます。
ヒートマップ解析だけでなく、A/B テスト、EFO（エントリーフォーム最適化）、パーソナライズ、ポップアップなど解析と改善がオールインワンで搭載されています。

SiTest でも無料でヒートマップをお試しいただけますので、ぜひお気軽にお問い合わせください。
無料トライアルはこちら