Microsoft Clarity（マイクロソフト クラリティ）とは、Microsoft社が提供する無料のWebサイト・アプリ分析ツールです。
サイト改善のためにユーザー行動を分析したい方や、記事のリライトをしたい方、ヒートマップツールを初めて触る方など、幅広くおすすめできるツールです。
本記事では、サイト改善の実例を交えながら、ヒートマップ機能の活用方法をご紹介します。
初期設定やGoogleタグマネージャーを使った導入手順については、YouTube動画「Microsoft Clarity 使い方の基礎【導入編】」をご覧ください。
クラリティの主な機能とは
Microsoft Clarityは、サイト上のユーザー行動を直感的に把握できるヒートマップや、実際のユーザーの動作を再現動画で確認できるレコーディングなど、便利な機能が備わっています。
- ヒートマップ機能（4種）
- アテンション：ユーザーが長く滞在した熟読エリアを色で可視化
- クリック：どの要素がクリック・タップされたかを色で可視化
- エリア：要素ごとのクリック数や割合を数値で可視化
- スクロール：スクロールした距離や離脱箇所を色で可視化
- レコーディング：各ユーザーの操作を動画で再生し、行動の流れが確認可能
- ダッシュボード：さまざまな指標を確認できるサマリー画面
Microsoft Clarityは無料で使える上、ライブデモ画面も提供されています。まだ触ったことがない方も、ぜひ一度実際の操作を試してみてください。
ヒートマップを使ったサイト・記事の改善方法
Microsoft Clarityでは4種類のヒートマップが使えますが、どのヒートマップを使うときも基本的な分析の流れは共通しています。
ユーザー行動の傾向を把握 → 仮説を立てる → 施策に落とし込む →検証する
Webサイトや記事の改善施策を考える際の、具体的な使い方を5つご紹介します。
- アテンションマップで「熟読されている箇所」を見つける
- スクロールマップで「離脱ポイント」を見つける
- クリックマップでCTAやリンクがクリックされているか確認する
- クリックマップで記事の目次を確認する
- クリックマップで「デッドクリック」を確認する
使い方➀アテンションマップで「熟読されている箇所」を見つける
アテンションのヒートマップでは、ユーザーが長時間表示していた熟読箇所が暖色で表示されます（赤〜オレンジ）。
熟読箇所を見つけることで、ユーザーの関心を集めている要素や、読みづらい要素を特定できます。
Clarityの言語設定を日本語にしている場合は、attention＝「注意」と翻訳されています。メガネマークをクリックすると、アテンションマップに切り替わります。
このページのアテンションマップでは、ファーストビューが最も熟読されており、ページ下部のほうにも熟読されているオレンジ色の部分があることがわかります。
熟読されている箇所への改善策・打ち手
ユーザーの関心をひいたコンテンツはどこなのかを確認し、その理由を深ぼりしてみましょう。
例えば、ページ内でよく熟読されている部分に対して、以下のような仮説や改善施策を検討することができます。
| ユーザー行動 | 仮説 | 改善案 |
| 熟読されている | 興味を持って読まれているのでは？ |
|
| 内容がわかりづらくて、手が止まっているのでは？ |
|
|
| 読みづらくて、手が止まっているのでは？ |
|
熟読されていない箇所への改善策・打ち手
アテンションヒートマップの青～寒色部分は、ユーザーがあまり注目していない箇所や、読み飛ばされてしまっている可能性が考えらます。
| ユーザー行動 | 仮説 | 改善案 |
| ほとんど熟読されていない | 興味・関心が薄いトピックなのでは？ |
|
| 大事な内容なのに注目されていない | 目立っておらず、ユーザーの目に留まっていないのでは？ |
|
アテンションマップを見るときの注意点
「熟読されている ＝ ユーザーの関心が高い良質なコンテンツ」と捉えがちですが、必ずしもそうとは限りません。
文字が小さくて読みづらかったり、フォーム入力に手間取っていたりと、デザインやUIがわかりづらいせいでスクロールが止まり、滞在時間が長くなっているケースも考えられます。
そのような場合、ユーザー行動の流れを動画で再現できるレコーディング機能から洞察を得られる場合もありますので、ヒートマップと併用して確認してみるのもおすすめです。
また、アテンションマップの全体的な傾向を見ているだけでは、判断を見誤ってしまう場合もあります。
ユーザー全体と、エンゲージメントが高めなユーザーを比較しながら、傾向を見るようにしましょう。
たとえ少数であっても、コンバージョンに近いユーザーが注目している箇所は、サイト改善において重要なポイントである可能性があります。
使い方②スクロールマップで「離脱ポイント」を見つける
スクロールのヒートマップでは、ユーザーがページ内のどこまでスクロールしたのかを視覚的に確認できます。
ページの上から下に向かって、到達したユーザーが多い部分は暖色、到達ユーザーが少ない部分は寒色で表示されています。（赤＞オレンジ＞黄色＞緑＞水色＞青）
色のグラデーションを見れば、どの地点で離脱が多く発生しているかが一目でわかります。
離脱が多い箇所への改善策・打ち手
ヒートマップで急激に色が変わる箇所や、到達率・ドロップオフ（離脱率）が大幅に低下しているエリアに注目し、その理由を考察してみましょう。例えば、以下のような原因があるかもしれません。
| ユーザー行動 | 仮説 | 改善案 |
| ファーストビュー（画面上部）直後で離脱 | ユーザーの期待と内容が合っていない・期待外れなのでは？ |
|
| ページの途中で離脱 | 知りたい情報を見つけづらいのでは？ |
|
| ネガティブな印象を持ったのでは？（例：広告っぽい、うさん臭いなど） |
|
また、ファーストビュー直後の離脱が多い場合は、分析対象ページだけでなく、流入元からこのページに辿りつくまでの流れも含めて考えましょう。
ランディングする前のユーザーの期待と、ページを見て実際に感じた印象にズレがあると、離脱につながることがあります。
- 流入元ページのアンカーテキストや訴求文言と、ページ内容の食い違い
- 検索結果に表示されているページタイトルやスニペットの表示内容と、ページ内容の食い違い
- SNSやディスプレイ広告のデザイントンマナや訴求文言と、ページ内容の食い違い
スクロールマップを見るときの注意点
- ドロップオフ（離脱）は、必ずしも悪いユーザー行動とは限らない
- どんなページにも、ファーストビューだけを見て離脱するユーザーは一定発生する
ドロップオフ（離脱）は、ページを閉じたり戻ったりするものだけでなく、CTAボタンやリンクをクリックして他のページに遷移した場合も含まれています。
そのため、サイト内の他ページへの遷移なのか、そうでないのか、「離脱の質」も見極めることが大事です。
スクロールヒートマップと同じ条件設定のクリックヒートマップも並べて分析をするクセをつけて、離脱率で判断しないようにしましょう。
使い方③クリックマップでCTAやリンクがクリックされているか確認する
クリックのヒートマップでは、ページ内のどのボタンやテキストリンクがよくクリックされたかを視覚的に確認できます。
クリックマップで色がついていない部分は、ユーザーにクリックやタップをされていません。
上部のメニューに、PCビューを表示させているときは「クリック」、スマホやタブレットビューにしているときは「タップ」と表示されている部分から、ヒートマップを切り替えられます。
クリックされていないCTAの改善策・打ち手
CTAボタンや内部リンクがクリックされていない場合は、以下のような仮説や改善施策が考えられます。
| ユーザー行動 | 仮説 | 改善案 |
| CTAがクリック・タップされない | ユーザーの関心とCTAの訴求がミスマッチなのでは？ |
|
| ユーザーの目にとまっておらず、気づかれていないのでは？ |
|
|
| ユーザーが今知りたい情報ではないのでは？ |
|
クリックマップを見るときの注意点
いくらCTAの訴求文言やデザインを工夫しても、そもそもユーザーに見られていなければクリックやタップは発生しません。
そのため、クリックヒートマップと同じ条件に設定したスクロールマップも並べて分析をするようにしましょう。
もしかすると、CTAがユーザーの目に入る前に大半が離脱してしまっている可能性も考えられます。
そのような場合は、「CTAをもっとページ上部に移動して、より多くのユーザーの目に入れる」など、別の打ち手が考えられる場合もあります。
便利なエリアマップも活用しよう！
エリアマップもユーザーのクリックやタップを可視化したヒートマップです。エリアマップモードに切り替えると、指定したエリア内の合計クリック数や割合を数字で確認できます。
Clarityの言語設定を日本語にしている場合はarea＝「領域」と翻訳されていますので、クリックするとエリアマップに表示を切り替えられます。
また、「編集領域」ボタンをクリックすると、エリアの編集モードに切り替わり、エリアの区切り方を好きに調整することもできます。
Microsoft Learnより画像引用
使い方④クリックマップで記事の目次を確認する
記事のリライトをする場合は、クリック（タップ）のヒートマップで、目次のどの項目がクリックされているかを確認しましょう。
クリック数が多い項目は、ユーザーの関心が高いコンテンツである可能性が高く、構成の見直しに役立ちます。
例えば、このコラムの目次では、「よかったこと」「後悔したこと」が多くタップされていることがわかります。
もし、目次で多くクリックされているコンテンツがページの下のほうに位置している場合は、上部に移動することを検討してもよいでしょう。
ユーザーが知りたい情報に楽にアクセスしやすい記事構成にすることで、ユーザー行動がよりスムーズになる可能性があります。
アコーディオンで目次を折りたたんでいる場合の確認方法
記事の目次がアコーディオンなどで初期状態では折りたたまれている場合、そのままではヒートマップツール上でアコーディオンの中のどの部分がクリックされているのかを確認することはできません。
その場合は、Chrome拡張機能「Microsoft Clarity Live」で確認するのが手軽です。
分析対象のページを閲覧・操作している状態で拡張機能を利用できるので、アコーディオンの中やポップアップ要素のクリック状況を確認することができます。
目次やアコーディオンだけでなく、ハンバーガーメニューの中などもクリック状況を確認することもできます。
アコーディオン部分を開いてから拡張機能からヒートマップを表示させれば、展開状態のクリックを確認できます。
拡張機能の下部のパネルから、期間を選択することもできます。
使い方⑤クリックマップで「デッドクリック」を確認する
クリックのヒートマップでは、ボタンやリンクがないのにクリックされている箇所がないかも確認しましょう。
デッドクリックとは、クリックやタップをしても何も起きない、期待した動作が得られない、意味のないものを指します。
ユーザーの混乱やストレスに繋がりやすいため、デッドクリックが多いページはユーザビリティが良いとは言えません。
例えば、この料金プラン紹介コンテンツでは、3つのプランがそれぞれカード上のデザインになっていて、一見カード全体がクリックできそうに思えますが、実際にリンクがついているのは2か所の小さなボタン部分だけです。
赤丸で囲った部分は、ユーザーに無駄なクリックをさせてしまっている可能性が考えられます。
デッドクリックを減らすための改善策・打ち手
デッドクリックが多く発生している部分は、ユーザーがより詳しい情報や次のアクションを求めているにも関わらず、うまく誘導できていない可能性が考えられます。
以下のような改善施策を検討するとよいでしょう。
- デッドクリックが起こっている部分に、適切なリンクを設置する。
- クリックできそうでできない紛らわしいデザインを見直し、ユーザーの誤操作を防ぐ。
- クリックしたら何が起きるのか、ユーザーがイメージしやすくする。
ヒートマップ分析はSEO・コンテンツマーケティングに不可欠
アユダンテのSEOコンサルティングでは、ヒートマップ分析も活用して、ユーザー行動に基づいた施策提案をしています。
SEOはGoogleのアルゴリズムなどブラックボックスな要素が多いですが、過去のGoogleの発言や社内文書から、ユーザー行動も評価されていることは明らかになっています。
「UX（ユーザー体験）とSEOは切り離して考えるべきではない」というのが、私たちの考えです。
実際に、ヒートマップ分析を裏付けとしてページの最適化を行って、SEOで大きな成果に繋がった事例も多くあります。
- 学校法人 駿河台学園様「リニューアルで全体最適化！ 新たなニーズ獲得に成功したSEO事例」
- 株式会社 自由が丘フラワーズ様「わずか10本の記事で全記事流入の4割獲得！ヒートマップも活用したコンテンツ事例」
その他のSEO成功事例や、アユダンテのSEOコンサルティングの特長も、ぜひ参考にしてみてください。
