見えないユーザー行動を可視化する「Microsoft Clarity」の基本から活用方法までご紹介

Webサイトやランディングページの成果を向上させたいと考えている方なら、アクセス数やコンバージョン率といった数値を確認されていることでしょう。しかし、数値のデータだけでは「なぜユーザーが離脱するのか」「どこで興味を失うのか」といった定性的な要因を把握することは難しいものです。

そんなときに役立つのがWebサイト上のユーザー行動を視覚的に分析できる「Clarity（クラリティ）」です。

同様のツールは、有料のものを含めてさまざまありますが、ClarityはMicrosoft社が提供するツールで、無料でヒートマップをはじめとした機能が手軽に利用できます。そのため、これからユーザー行動の分析も始めたいという方には特におすすめのツールです。

この記事では、Clarityの基本的な機能から広告運用における活用例までをご紹介します。

Clarityとは？

Clarityは、Microsoftから提供されている、Webサイト上のユーザー行動を視覚的に分析できるツールです。ユーザーがどこをクリックし、どこでスクロールを止め、どこで離脱しているのかなどを可視化する機能が充実しています。

たとえば、ランディングページ上のどの部分が離脱の原因となっているのか、どこに興味をもってよくクリックしているのかなどを、視覚的に確認できます。これにより、定量データのみでは見えてこなかったユーザー行動やサイトの改善すべき課題を発見しやすくなります。

ユーザー行動を可視化するClarityの3つの機能

Clarityにはユーザー行動を可視化する機能が3つ用意されています。

効果的な分析をするためには、まず何ができるかを理解しておくことが重要です。それぞれの機能を詳しく見ていきましょう。

また、Clarityにはデモサイトが用意されているため、記事を読みながら実際に触って確かめてみるのもおすすめです。この記事でもデモサイトをもとに機能をご紹介していきます。

参考：Clarity Live Demo

ダッシュボード

ダッシュボードは、サイト全体の主要な指標を一目で確認できる機能です。どのチャネルからどれくらいの流入があるか、ユーザーが異常に同じ所をクリックしていないかなどを簡単に把握できます。ただし、同様のデータはGA4などのアクセス解析ツールでも確認できますので、Clarityでとくに注目したいのは画面中央の「インサイト」の数値です。（なお、セッションなどの数値はGA4などとは計測条件が異なるため、基本はアクセス解析のデータを正とするのがおすすめです）

また、Google広告やGA4と連携している場合、上部のダッシュボードのアイコンにマウスカーソルを合わせると、ドロップダウンメニューが表示され、各データを切り替えながら確認できます。GA4については先ほどご紹介した通り独自のデータではないため、あまり利用する機会はないでしょう。

参考：Clarityダッシュボードの機能

レコーディング

レコーディングとは、サイト上に訪れたユーザーの操作を映像として閲覧できる機能です。具体的には、クリックやタップの動き、スクロールの動きなどが可視化され、ユーザーがどのようにページを操作したのかを詳細に確認できます。

それでは実際のレコーディングの画面を見ていきましょう。

Clarityの管理画面で「レコーディング」タブを選択すると、上記画面に移動します。左側①の箇所に開始ページ、終了ページ、参照 URL、クリック数、ユーザー ID、デバイス タイプなどの情報が記載されたセッションカードが並ぶため、いずれかのカードを選択します。

左下②の再生ボタンをクリックすると、選択したセッションカードの映像が再生されます。

レコーディングは、映像としてユーザーの動きを追えるため、どこで迷っているのか、期待と異なる操作をしていないかなどの特定に役立ちます。漠然と確認するレコーディング対象を選ぶのではなく、「滞在時間〇分以上、PVが〇ページ以上」など熱心にページをみているユーザーに絞り込んで確認すると、迷いやすい箇所やみられやすい箇所が見つかりやすくなるでしょう。

例えば、フォームの離脱率が高い場合、レコーディングを見ると「住所入力に時間がかかっている」「エラーメッセージが出ても修正せずに離脱している」といった課題が見えてくるかもしれません。こうした課題がわかれば、入力項目を減らしたり、エラーメッセージをより分かりやすくすることで、ユーザーの負担を減らし、離脱率の低下に繋げられるでしょう。

また、レコーディングの保存期間は以下となっており、後で見返したいデータがある場合、見つけられなくなる可能性があるため、注意が必要です。

そのため、後で見直す可能性があるレコーディングは、セッションカード内の左下にある星マークをクリックしてお気に入り登録をしておくと良いでしょう。

参考：セッションの概要

ヒートマップ

ヒートマップは、Webサイト上のユーザーが、ページ内のどこをクリックし、どこまでスクロールしたかなどを可視化してくれる機能です。よくクリックされた箇所や、スクロールの到達地点などが色の濃淡で表示されるため、ユーザーがどんなコンテンツに興味を持っていそうか、どんな箇所で操作に困っていそうかなどを一目で把握できます。

Clarityには4種類のヒートマップと比較機能が用意されています。それぞれの特徴や見方について見ていきましょう。

①：クリックマップ

クリックマップは、ユーザーがどんな箇所をよくクリックしているかを可視化できます。具体的に絞り込めるクリックの種類は、以下の6種類です。

さらに、上部画像の赤枠の箇所から、クリックの種類ごとに絞り込んで分析することも可能です。例えば、ユーザーが期待と違うクリックをしていないかを確認したいときには、「デッドクリック」や「レイジクリック」で絞り込むと良いでしょう。

上部画像の①の箇所には、クリック数の多い順でランク付けされた要素が並びます。並んだ要素のいずれかを選択すると、該当要素の場所が右側に表示されます。また、上部画像②の「レコーディングを表示」選択すると、ユーザーが該当要素をクリックした様子を映像で確認することもできます。

クリックマップではクリックされにくいものとクリックされやすいものがわかります。これにより、ユーザーがスムーズに情報にアクセスしたり、迷わないようにコンテンツを提示したりと改善のヒントを得られます。

例えば、アクセス数は多いのにコンバージョンが発生していない場合、実はCTAボタンがほとんどクリックされていないことが分かるかもしれません。また、CTAではないのによくクリックされる箇所もみつかることもあります。そのような場合には、クリックしたユーザーが求めている情報のあるページへのリンクを用意するのが効果的な可能性がありますよね。

ただし、クリック数が多ければ良いとは限りません。誤クリックの可能性もあるため、後述するレコーディング機能を併用したり、クリックの種類を変えて分析すると、より正確な課題を特定できるでしょう。

参考：クリックマップ

②：スクロールマップ

スクロールマップでは、ユーザーがページをどれくらいまでスクロールしたのかを確認できます。

左側のパネル「スクロールデータ」には、どのくらいのサイト訪問者がどのくらいの領域までスクロールしたのかが表示されます。

「スクロールデータ」内に表示されている項目の意味は、以下の通りです。

スクロールマップは、Webサイトやランディングページ内のどこで離脱しているユーザーが多いかを探るときに役立ちます。

例えば、ファーストビューを変更した後にコンバージョン数が減少した場合、スクロールマップを確認し、ファーストビュー以下のスクロール率が大幅に低下していないかを分析します。

これにより、広告の訴求内容とページの内容が一致していない可能性を発見し、コンテンツの順番変更などの改善策を検討できるかもしれせん。他にも、急激にスクロール率が低下する箇所がある場合は、ユーザーが興味を失っている可能性が考えられます。これに対し、該当箇所の画像やコンテンツを差し替えることでスクロール率の改善をみていくのも効果的です。

一方、スクロール率が高くても、必ずしも内容が読まれているとは限りません。次に紹介するアテンションマップとも照らし合わせて、実際にユーザーが注目しているかどうかも確認しておきましょう。

参考：スクロールマップ

③：アテンションマップ

アテンションマップでは、ユーザーがページ内のどんな箇所を注視していたかが、色の濃淡で示されています。

上部画像の右側のアテンションマップにマウスを合わせると、正確な場所ごとに「費やされた時間の平均」、「平均セッションの長さに対する割合」が①のように表示されます。。

上部画像の②の箇所の「アテンションデータ」には、ユーザーが特定のページのセクションをどれくらいの時間見ているかがまとめられています。

「アテンションデータ」内に表示されている項目の意味は、以下の通りです。

アテンションマップは、じっくり読まれているコンテンツは何か、見て欲しいコンテンツが読み飛ばされていないかなどを確かめる際などに活用できます。

例えば、下までスクロールしているユーザーが多いのに全く成果に繋がっていないという場合に、アテンションマップを確認してみると良いでしょう。もしかしたら、コンテンツの視認性が悪く、読んで欲しいコンテンツが流し見されている可能性を見つけられるかもしれません。

なお、スクロール率が低い場所でもアテンションマップでは止まっていると表示されることがあります。そのため、フッターのナビゲーションのように、下までスクロールしたから見られる場所なのか、それとも気になるコンテンツに留まっているのか、ユーザー目線で考えて確認すると効果的です。

注意しておきたい点は、ブラウザは開いているが、スマホは放置して別の行動をしているようなユーザーデータも、注視していると判定される可能性があることです。クリックマップなど、他のマップと照らし合わせながら、実際にユーザーはコンテンツを見ていそうかを確認すると良いでしょう。

参考：アテンションマップ

④：エリアマップ

エリアマップは、ページ内の特定領域ごとにクリック数やクリック率を表示する機能です。上部画像①のパネルには、HTMLの階層で順序付けられたエリアのリストが並んでいます。いずれかのエリアを選択すると、そのエリア全体のクリック数とクリック率が表示されます。

デフォルトでは、ユーザー行動に基づいてClarityが自動的に分割したエリアが表示されますが、上部画像②の「編集領域」から新しいエリアの作成が可能です。また、上部画像③または④のカメラアイコンを選択すると、ユーザーが該当エリアをクリックした様子を映像で確認することができます。

エリアマップは、クリックマップに似た機能ですが、特定領域ごとに分析ができるため、コンテンツ同士やボタン要素同士などで比較したい場合に役立ちます。例えば、複数のCTAボタンを比較したもののクリックマップではわかりにくいといった時に、エリアマップで比較をするとCTAの領域ごとにデータが見れるため分析しやすくなります。

しかし、クリックマップで赤い箇所が多いと全体的にクリックされているように感じますが、エリアマップを見るとそうではないことが多いです。クリックマップで詳細を見たらエリアマップで俯瞰してみましょう。また、エリアマップ単体ではユーザー行動を掴みにくいため、他の種類のヒートマップや、レコーディング機能と組み合わせての活用もおすすめです。

参考：エリアマップ

比較機能で多角的な分析をしよう

実はClarityには、2つのヒートマップを比較できる機能が用意されています。

実際に比較機能を利用するには、いずれかのヒートマップ1つを閲覧しているときに、上部画像右上の「比較」ボタンを選択します。

次に上部画像の①でフィルターを設定、②で比較したいヒートマップの種類を選択します。そして、③で人気のあるページのリストからURLを選択、または任意のURLを入力します。

2つのヒートマップが表示されたら、比較機能の設定は完了です。

ヒートマップの比較機能は、ユーザー行動の変化を探るときに役立ちます。

例えば、ランディングページの一部のコンテンツを変更後、変更前と変更後でユーザーの動きにどんな変化があったかを分析したいときに利用すると効果的です。また、同じページでスクロールとアテンション、クリックとアテンションなどを比較してみると、よりユーザーの行動が分かりやすくなります。

他にも、自然検索から流入したユーザーと直接リンクをクリックして流入したユーザーなど、参照元別で比較をすると、それぞれのユーザーの意図の違いを見つけやすいです。自然検索から流入したユーザーはサービスの機能説明や特徴で手を止めているのに対し、直接リンクをクリックして流入したユーザーはログインボタンで手を止めているなどの違いが発見できるかもしれません。ユーザーの意図の違いを把握できれば、それぞれの参照元に応じた情報の配置や導線設計の改善に繋げられるでしょう。

参考：ヒートマップの比較

分析前に知っておきたい便利機能

Clarityでは具体的なユーザー行動を見て分析ができる一方、大量のデータを1つ1つ分析すると膨大な時間がかかってしまうため、データの絞り込みなどを行い、効率的に分析することが重要です。ここでは、分析時間の短縮に繋がる便利な機能をご紹介します。

フィルター

フィルター機能を活用すると、例えばGoogle広告経由で流入したユーザーのみなど、特定の条件に合致するデータのみを抽出できます。膨大な量のユーザー行動のデータも、特定の条件に基づいて絞り込めば、効率的に分析を進めやすくなります。

ただし、絞り込み過ぎには注意が必要です。100以下のような場合にはイレギュラーのデータも目立つようになるため、数百は確保できるよう設定するのがよいでしょう。逆に多すぎても傾向が分からなくなるため、必要に応じて調整するのをおすすめします。

カテゴリ	フィルター項目
ユーザー情報	期間、曜日、デバイス、ブラウザ、OS、場所、ClarityユーザーID、ユーザーの種類
ユーザーによる処理	分析情報（Clarityから生成されたインサイト）、操作（ページに対するユーザー操作）、意図（エンゲージメントのレベルに基づくユーザー分類）、クリックしたテキスト、ページスクロールの奥行き、スマートイベント（主要なユーザー操作）
パス	URLの指定
トラフィック	参照サイト、ソース、メディア、キャンペーン、チャネル
パフォーマンス	パフォーマンススコア、LCP（ページの読み込み速度）、INP（ページ上の全ての操作で最も長い待機時間）、CLS（ページ上の視覚的な安定性）
製品	価格、ブランド、製品名、在庫状況、評価、評価数、購入、チェックアウトの放棄
セッション	セッションの継続時間、セッションのクリック数、セッションのページ数
ページ	ページ継続時間、ページクリック数、JavaScriptエラー、ページサイズ、画面解像度、表示ページ、非表示のページ
カスタムフィルター	カスタムタグ、カスタムユーザーID、カスタムセッションID、カスタムページID、カスタムラベル

大きく分けて上記9つのカテゴリのフィルターが用意されており、ヒートマップ、レコーディング、ダッシュボードの各機能で利用できます。例えば、広告流入別でユーザー行動を見たい場合、チャネルのフィルターを利用してGoogle広告やSNS広告などの流入元ごとにセッションを絞り込むと、それぞれのチャネルのユーザー行動を確認できます。

それでは、フィルターを適用する手順を見ていきましょう。

画面左上の「フィルター」を選択します。

フィルター項目が表示されるため、分析したいデータや期間にあわせて設定を進め、右上の適用をクリックすれば設定完了です。

参考：フィルターの概要

なお、設定メニューにも同じ「フィルター」という項目がありますが、こちらは英語名だと「Funnel（ファネル）」となっており、特定のフロー内のステップ間での状況を確認するための機能ですので、混同しないように注意しましょう。

セグメント

設定したフィルターは「セグメント」として保存することができます。1クリックで保存したフィルターを適用できるため、よく利用するフィルターは保存しておくのがオススメです。

フィルターを適用後、「セグメントとして保存」を選択すれば、簡単にセグメント保存を進めることができます。

また、保存したセグメントは、画面左上の「セグメント」ドロップダウンリストから選択して適用したり、削除することが可能です。

参考：セグメント

AIによる要約

Clarityでは、Microsoftから提供されているAIのCopilotを活用することができます。ヒートマップとレコーディングではユーザー行動のデータを要約してくれたり、ダッシュボードではAIとチャット形式で分析などをお願いできます。

複数のユーザー行動のデータを確認したい場合、まずは一度AIに要約してもらい、先に概要を掴んでから詳細の確認に移れば、分析時間の短縮に繋がるでしょう。

今回は例として、レコーディング機能でAIを利用する手順をご紹介します。

上位10個のセッションを要約してもらう場合

「レコーディング」に移動し、 右上の「レコーディングを要約する」ボタンを選択し、ドロップダウンリストから「上位10個のレコーディング」をクリックします。

上位10個のレコーディングについて、AIによる要約が表示されます。

指定した1つのセッションを要約してもらう場合

上部画像の①から「レコーディング」に移動し、任意のカード内で上部画像②の「セッション分析情報を生成」アイコンを選択します。

選択したカードのレコーディングにおいて、ユーザーがどんな行動をしたのかをAIが要約してくれます。

参考：セッションインサイト

運用型広告でのおすすめ活用シーン

ユーザーがサイト内でどのように行動しているかを知れば、運用型広告の成果改善にも活かすことができます。ここでは、運用型広告における具体的な活用シーンをご紹介します。

ランディングページのコンテンツ改善のヒントを見つけたい時

Clarityを活用すれば、ランディングページのどこでユーザーが離脱しているのかを可視化でき、具体的な改善策を見つけやすくなります。

例えばヒートマップを活用すると、以下などを確認することができます。

もし「ファーストビューの次のコンテンツで離脱率が高い」とわかった場合、コンテンツの順番変更や情報の見せ方の見直しなどを検討できるでしょう。

フォームの改善点を見つけたい時

レコーディング機能を活用すれば、ユーザーがどのタイミングでフォーム入力をやめたのか、どの項目でつまずいているのかを視覚的に確認できます。

例えば、以下のようなユーザー行動が見つかるかもしれません。

このような場合、フォームの入力項目を削減したり、より分かりやすいエラーメッセージを表示したりすることで、ユーザーの負担を減らし、離脱率やコンバージョン率の改善に繋げられるでしょう。

ユーザー行動から広告訴求の改善を考えたい時

広告クリエイティブの検証においても、Clarityを活用すれば、クリック率やコンバージョン率などの数値だけでは見えてこなかった示唆を得られることがあります。

例えば、商品の強みを訴求した広告Aに加えて、割引キャンペーンを強調した広告Bを新たに配信したものの、広告BでCVしたユーザーは継続購入に繋がっていないという課題が発生したとします。

このような場合、広告Aと広告Bのヒートマップを比較することで、原因を探れる可能性があります。広告Bで流入したユーザーは、ページ内の「商品の正しい使い方」という箇所に到達する前にCTAをクリックして購入完了していた影響で、継続購入に繋がっていないと仮説が立てられるかもしれません。

すると、広告Bの割引キャンペーンの訴求に「商品の正しい使い方」や「継続利用のメリット」を付け足せないか、ランディングページ内でCTAの前に「商品の正しい使い方」や「継続利用のメリット」のコンテンツを配置できないかなどの改善案を見出せるでしょう。

Clarityを活用して新たなインサイトを掴もう

Clarityを活用すれば、定量データだけでは見えないユーザーの実際の行動を分析できるため、数値変化の原因探求や、新たなインサイトの発見に役立ちます。

Google Analyticsや広告媒体の管理画面で見れる定量データとClarityで見れる定性データ、両方を照らし合わせれば、より納得感を持って改善案を見出すことができるでしょう。

Clarityは無料で利用できるため、まずは実際に触ってみることをオススメします。具体的な始め方については、以下の記事にまとめているため、ぜひ参考にしてみてください。

Microsoft Clarityの始め方｜アカウント作成から設定まで