Microsoft Clarityの使い方｜ヒートマップで止まっている箇所を絞り込む

アクセス解析の数字でも、「このボタンが押されていない」ことまでは分かります。分からないのは、押そうとして押せなかったのか、そもそも視界に入っていなかったのかです。直す対象はまるで違うのに、表示回数と離脱率はどちらも同じ顔をした数字で返ってきます。

Microsoft Clarity は、訪問者のクリックとスクロールを集計してヒートマップにし、1人ぶんの操作を録画として残すツールです。この記事では、Microsoft Learn に置かれている公式ドキュメントの記載だけを使い、どの画面に何が出るのか、「レイジクリック」などの語が何を指すのかを整理します。

先に、いちばん大事な制約を書きます。迷いを示す指標には、具体的なしきい値が公表されていません。何回以上なら異常という線はドキュメントに書かれておらず、「平均より多い」「一定の時間より短い」という書き方になっています。つまり他社や業界平均と並べる数字としては使えません。自社のページ同士、あるいは変更の前後で比べる道具として読むのが正しい使い方です。

扱わないことも先に書きます。料金、データの保持期間、日本語の画面表記、他の解析ツールとの連携は扱いません。今回参照したページに記載がないか、この記事で確認していないためです。確認日は2026年11月10日です。画面の名称と項目は改定されるため、社内の手順書に写す前に各ページの現在の記載を確認してください。

入れたページしか映らない

最初に押さえる条件は3つです。公式ドキュメントは、ヒートマップはトラッキングコードを入れたサイトのページにしか表示されないと明記しています。計測タグが一部のページにしか入っていない状態だと、見えない区間が「訪問されていない区間」と見分けられなくなります。

2つめは、使い始めるときの条件がほとんどないことです。ヒートマップを生成するための最低トラフィックの制限はないと書かれており、作成待ちもなく数秒で返ると説明されています。アクセスの少ないページでも、出てきた図をそのまま見られます。ただし母数が小さければ、そこに写るのは数人の行動です。図の濃さを「傾向」と呼ぶかどうかは、ページビューの数を見てから決めることになります。

3つめは、集計の単位です。用語集では、セッションを「ユーザーがサイトで過ごした時間」とし、30分間操作がないとセッションが終わると定義しています。1人が同じ日に複数のセッションを開くこともあると書かれています。録画を何件も見ていると「人数」と「セッション数」を混ぜて数えがちなので、社内で報告するときはどちらを数えたのかを添えてください。指標の選び方そのものはアクセス解析で見る指標の選び方｜定義と前提から絞り込むで整理しています。

ヒートマップは5種類ある

公式ドキュメントは、クリックマップ・スクロールマップ・エリアマップ・コンバージョンマップ・アテンションマップの5種類に対応していると書いています。単一のページでも、条件で束ねたページ群でも生成できます。

種類	公式ドキュメントの説明	当社の整理（見たい場面）
クリックマップ	ページ上でユーザーがどこをクリックしているかを示し、最もクリックされた要素とその回数が分かる	申し込みの入口が選ばれているか
スクロールマップ	ページをどこまでスクロールしたかを追跡し、ある位置まで到達した割合と平均的な折り返し位置が分かる	判断に要る内容が読まれる位置にあるか
エリアマップ	選んだ範囲の中にあるすべての要素のクリック合計を表示する	画像やメニューのまとまりで見たいとき
コンバージョンマップ	電子商取引サイトの購入率のデータを示し、どのクリックが成果につながったかが分かる	購入までの経路を絞りたいとき
アテンションマップ	ページの各部分にユーザーが費やした時間を表示する	時間をかけて読まれている箇所を知りたいとき

3列目は当社の整理です。公式ドキュメントが挙げている用途としては、スクロールマップで要素の優先順位が適切かを確かめる、クリックマップでCTAが注目されているかを見る、コンバージョンマップで収益につながるクリックを見つける、が示されています。CTAそのものの作り方はCTAとは？行動を促す部分の作り方と改善の手順を解説にまとめています。

クリックマップは6つに切り替えられる

クリックマップは1枚ではありません。ドキュメントは、全クリック・デッドクリック・レイジクリック・エラークリック・ファーストクリック・ラストクリックの6種類を挙げています。全クリックには、デッドクリック、レイジクリック、ファーストクリック、ラストクリックが含まれると書かれています。

エラークリックは「JavaScriptエラーの直前に発生したクリック」、ファーストクリックは「ページ上の最初のクリック」で利用開始時のパターンを探すのに役立つ、ラストクリックは「最後のクリック」で遷移の流れを探すのに役立つ、と説明されています。

集計の仕組みにも触れておきます。Clarityのクリックマップは、マウスの絶対位置ではなく要素を基準にしてクリックを集計していると書かれています。ビューポートの大きさが違う場合、レスポンシブなデザイン、ページの状態が変わる場合でも正確に熱量を計算できる、という説明です。スマートフォンとPCで要素の並びが変わるサイトでも、同じボタンのクリックが別の場所に散らばりにくいということになります。

左の欄には、クリック数の多い順に要素が並びます。要素を選ぶとクリック数と全体に対する割合が出て、コピーのアイコンからはその要素のCSSセレクタを取得できます。制作会社や社内の開発担当へ「この要素を直したい」と伝えるとき、画面の説明ではなくセレクタを渡せます。上部では期間、訪問したURL、PC・タブレット・モバイルの切り替えができ、下部には対象のページビュー数とクリック数が出ます。1枚のヒートマップで扱えるページビューは10万件までと書かれています。

スクロールマップに出る3つの数字

スクロールマップは、最大のコンバージョンに適したページの長さを判断する助けになる、という位置づけで説明されています。左の欄に出る数字は3つです。「% Scrolled」はページ内の位置で5%刻み、「# of visitors」はそのページまたはページ群に来た人数、「% drop off」はその高さで離脱した訪問者の割合です。線で表示される既定の目安は25%・50%・75%です。

もう1つ、平均的な折り返し位置（average fold）が表示されます。ドキュメントは、これをサイトを訪れているユーザーに基づいて、スクロールを始める前に見える平均的な位置だと説明しています。「ファーストビュー」を端末の画面サイズから推定するのではなく、実際の訪問者から平均を取っている値です。

ここで判断が1つ要ります。到達率が下がる位置と、判断材料を置いた位置を重ねて見ることです。料金や対応範囲のような、問い合わせの前に確かめたい内容が折り返しより下に続いていて、しかもその高さで離脱が増えているなら、順番を入れ替える候補になります。逆に、到達率が落ちていても落ちた先に何も置いていないのなら、直す理由はありません。落ちている場所を直すのではなく、落ちている場所に大事なものを置いていないかを見ます。ページ全体の組み立てはWebサイトのCVRを改善する方法｜問い合わせを増やす手順で扱っています。

迷いを示す指標に、公表されたしきい値はない

ダッシュボード側の指標は、ドキュメントで「セマンティック指標」として説明されています。定義の書き方を、そのまま押さえておく価値があります。

レイジクリックは、ユーザーが「狭い範囲に短時間で何度もクリックした」場合にページビューまたはセッションに旗が立ちます。固まったクリックの1つずつがレイジクリックとして記録され、操作できる要素だと期待した場所で起きていればいらだちの強い手がかりになる、と書かれています。

デッドクリックは、要素をクリックしたのに「妥当な時間のうちに反応が返らなかった」場合です。見た目の状態が変わらず、ページの移動も起きないクリックを指します。壊れた要素、遅い通信、誤解を招く見た目のいずれかを示しうると説明されています。

過剰なスクロールは、そのセッションの縦スクロール量が「期待される平均より多い」場合に旗が立ちます。見つけにくい情報設計、内容と検索意図のずれ、標準的でない操作などを示しうるとされ、ページがサイトからの離脱に寄与している強い手がかりになりうる、と書かれています。

クイックバックは、現在のページから別のサイトへ出たあと、定められた時間より短い時間で戻ってくるクリックです。ドキュメントは「そのページの滞在時間として定義されたしきい値より短い時間で前のページへ戻った場合に検出する」と書き、この指標は将来のリリースでサイトごとに適応していくとも書いています。

このうち、数字で示されたしきい値は1つもありません。「狭い範囲」「短時間」「妥当な時間」「期待される平均」「定められたしきい値」です。この書き方を、社内の報告では言い換えないでください。「レイジクリックが基準値を超えました」と書くと、公表されていない基準があるかのように読まれます。「レイジクリックの旗が多く立っているページ」と書けば、実際の仕組みと一致します。

JavaScriptエラーについては、合計数と内訳を見て、各エラーに関連する録画を見られると書かれています。クリックの直後に起きたエラーは「クリックエラー」として扱われ、該当のセッションに自動でタグが付き、絞り込んで見られます。フォームの送信が失敗しているのに問い合わせが減った理由が分からない、という場面で最初に見る場所になります。フォーム側の切り分けは入力フォームの改善｜どこで止まっているかを切り分けてから直すで扱っています。

集計から1人の操作へ降りる順番

旗が立った指標と、ヒートマップと、録画は、同じ画面の中でつながっています。つなぎ方には順番があります。

クリックマップで要素を選ぶと、その要素がクリックされた録画だけを見に行けると書かれています。適用した絞り込みはバッジとして表示され、録画・ダッシュボード・ヒートマップのいずれにも引き継がれます。制限も明記されています。この絞り込みはヒートマップからしか設定できず、通常のフィルターからは選べません。閉じてしまったらヒートマップから設定し直すことになるため、繰り返し見るならセグメントとして保存します。

手順を飛ばすと判断を間違えます。録画から先に見ると、たまたま開いた1人の操作が全体の傾向のように見えます。逆に集計だけで終わらせると、「このボタンでデッドクリックが多い」までは分かっても、その人が直前に何をしていたかが分かりません。集計で場所を決め、録画で前後の文脈を足すという順番になります。

直したあとの確認についても機能が用意されています。ドキュメントは、ヒートマップの比較機能を使ってサイトの変更がコンバージョンにどう影響したかを観察できると書いています。期間を分けた2枚を並べる形なので、変更した日を記録しておく必要があります。並行して別の案を比べる方法はWebサイトのA/Bテストとは？進め方と検索への影響を抑える方法で扱っています。

録画を回す前に、マスキングを決める

録画は画面の中身を記録します。自社のサイトに問い合わせフォームや会員向けの画面があるなら、タグを入れる前にマスキングの設定を決めてください。順番を逆にすると、記録してから考えることになります。

公式ドキュメントは、Clarityは既定で機微な内容をマスクし、マスクされたものは一切アップロードされないと書いています。そのうえで、サイト全体に効くモードが3つ用意されています。

Strictは内容のすべてをマスクし、Balancedは機微な内容だけをマスクします。機微な内容として分類しているのは数字とメールアドレスだと書かれています。Relaxedは内容をマスクしませんが、入力欄とドロップダウンはそれでもマスクされます。入力欄の中身とドロップダウンの選択肢はすべてのモードでマスクされ、変更できないと明記されています。

運用で引っかかりやすい点が3つあります。1つめは、マスキングの変更は新しい録画にだけ反映され、反映に最大1時間かかり、過去の録画に遡って適用されないことです。2つめは、マスクやマスク解除ができるのはプロジェクトの管理者だけで、管理者以外はモードの変更も要素の追加・削除もできないことです。3つめは、Clarityがスタイルシートやstyleタグの中身はマスクしないと書かれていることです。ドキュメントは、機微な内容をCSSの中に置かないよう勧めています。

部分的な指定もできます。設定画面の「Mask by element」でCSSセレクタを挙げるか、HTMLの要素に data-clarity-mask="True" を付けます。後者はその要素と子要素の内容をマスクし、設定画面での指定よりも優先されると書かれています。解除は data-clarity-unmask="true" です。クラスを指定するとDOMの子要素も対象になるため、どこに付けるかで範囲が変わります。

どのモードを選ぶかは、記録した画面を社内の誰が見るかで決まります。録画は個人の操作をそのまま残すものなので、見る人の範囲と、見た結果を何に使うかを決めてから回してください。本記事は法務の助言ではありません。会員情報や問い合わせ内容を扱うサイトでは、自社の規程と、適用される法令にもとづく判断が必要です。

公式ドキュメントで確認できなかったこと

参照したページの記載だけで書いているため、空欄は空欄のまま残します。

各指標のしきい値の具体値は、どのページにも書かれていませんでした。レイジクリックの「短時間」が何秒か、過剰なスクロールの「期待される平均」が何を母数にした平均かは、今回の範囲では確認できていません。

データの保持期間と料金についても、今回参照した6ページには記載を見つけられませんでした。無期限に残るのか、一定期間で消えるのかは、この記事では書けません。社内で導入を決める前に、現在の条件を提供元のページで確認してください。

日本語の画面表記も確認していません。この記事は英語のドキュメントを読んでいるため、画面に出る語と本記事の訳語が一致しない場合があります。社内の手順書を作るときは、実際の画面に出ている表記を採ってください。

他の解析ツールとの連携、コンバージョンマップが対応する電子商取引の条件、スマートイベントの自動設定の中身も扱っていません。参照した範囲に十分な記載がなく、推測で補うことになるためです。

まとめ

Clarityでできるのは、場所の特定です。クリックマップで押されている要素と押されていない要素、スクロールマップで到達する高さ、ダッシュボードで迷いの旗が立つページを見て、直す対象を絞ります。

絞ったあとに、録画で1人ぶんの前後を確かめます。この順番を守るかどうかで、同じ画面を見ていても結論が変わります。先に録画を見ると、1人の操作が全体の傾向に見えてしまいます。

指標の読み方として覚えておくことは1つです。レイジクリック、デッドクリック、過剰なスクロール、クイックバックには、公表されたしきい値がありません。基準値として扱わず、自社のページ同士や変更の前後の比較に使います。

そして、タグを入れる前にマスキングを決めます。既定はBalancedで、数字とメールアドレスが機微な内容として分類されます。入力欄とドロップダウンは常にマスクされ、設定で外せません。変更は新しい録画にだけ効き、最大1時間かかり、遡っては適用されません。確認日は2026年11月10日です。