【アテンションマップ】Webサイトの弱点が一瞬で分かる！MicrosoftClarityの新機能がすごい！

※ 動画内で「マイクロソフトクリアリティ」と言い続けておりますが、正しくは「マイクロソフトクラリティ」です…（謝罪動画）

こんにちは、ウェブ企画パートナーの竹内です。
今回は、Microsoft Clarity（マイクロソフト・クラリティ）に新しい機能が追加されたということで、その詳細をいち早くご紹介したいと思います。実は前から「ほかのサービスでは使えるけれど、Clarityにはまだ来ていないな…」とずっと待ち望んでいた機能なんです。それがついに実装されたということで、まだ試したことがない方や、ニュースなどでチラッと見ただけの方にも、実際の画面をお見せしながら分かりやすくお伝えしていきたいと思います。

そもそもMicrosoft Clarityって何？

まずはじめに、「そもそもMicrosoft Clarityって聞いたことがないんだけど？」という方も多いと思います。
Microsoft Clarityは、Microsoftが提供している無料のウェブ解析ツールです。

「ウェブ解析ツール」と聞くと、

• Googleアナリティクス
• サーチコンソール

などを思い浮かべる方が多いですよね。実際、打ち合わせなどで「Clarityは使っていますか？」とお尋ねすると、かなり高い確率で「知りませんでした」という反応が返ってきます。そこで、まずはClarityがいったいどんな役割を持つのかを簡単にご説明しておきます。

Googleアナリティクスとサーチコンソールとの違い

• サーチコンソール
  あなたのWebサイトが、検索結果にどれくらい表示されていて、どのキーワードで何回クリックされたのか、といった「サイトに入ってくる前のデータ」を確認できるツール。
• Googleアナリティクス
  あなたのサイトに入ってきた後、「どのページをどれくらいの時間見たか」「どこからアクセスが来たか」など、訪問者の動線や行動を分析できるツール。

ではMicrosoft Clarityは何を見てくれるのかというと、Googleアナリティクスでは「何分くらい滞在したか」「何ページ見たか」までは分かるけれど、たとえばページが縦に長い場合の「ページのどの部分をじっくり読んでいたのか」がハッキリつかみにくいですよね。
Clarityは、そこをヒートマップなどの可視化機能でしっかり分析できるのが最大の特徴です。

Clarityが無料で使えるヒートマップツール

ヒートマップツールというと、従来は有料で月額5万〜10万と高額なサービスも多かったのですが、Clarityは完全無料で利用できるのが大きな魅力です。保存期間は3ヶ月程度なので長期データは追えませんが、直近のユーザー行動を把握するには十分役立ちます。
「まだ入れていないよ」という方は、まずはタダなのでサクッと導入してみることをおすすめします！

新機能「アテンションマップ」とは？

2025年1月15日の公式ブログでリリース

Introducing Attention Maps: Unlock Deeper Insights with Microsoft Clarity

Microsoft Clarity’s new Attention Maps feature offers a fresh perspective on how visitors interact with your pages

clarity.microsoft.com

今回の目玉は、Clarity公式ブログ（2025年1月15日付）で発表された「アテンションマップ（Attention Map）」という新機能です。
英語の情報がメインでしたが、日本語に翻訳すると以下のようなことが書かれています。

アテンションマップは何ですか？
ユーザーがウェブページ上で最も長く時間を費やしている場所を暖色や寒色で強調表示して、ページのどの部分が注目を集めているかを可視化します。

これによって、

1. ユーザーはページ上の最も重要な要素に興味を持っているか？
2. 訪問者は重要なCTA（コールトゥアクション）や情報を見逃していないか？

といったポイントを把握しやすくなる、というのが売りです。
では、このアテンションマップを実際に管理画面でどう見えるか、詳しく解説していきます。

管理画面で実際に見てみよう

すでにClarityを導入済みの方はご存じかもしれませんが、管理画面を開くとまずダッシュボードが表示されます。ここで一つ注意点があって、デフォルトの統計期間が過去3日になっているんですね。もしアクセス数が多くないサイトの場合、過去3日だとサンプルが少なくデータが偏りがちです。
ですので、期間を1ヶ月ほどに設定し直してからデータを確認してみるのがおすすめです。

ヒートマップのメニュー

次に、左側のメニューバー（表示されていない場合は右上のハンバーガーメニューをクリック）から「ヒートマップ」を選択します。すると、「どのページのヒートマップを見たいか？」というリストが出ますので、一番アクセスが多いページなどを選んでみます。

従来の3つのヒートマップ

• クリック
  ページ上のどの部分がどれだけクリックされたかを色で示してくれます。
• スクロール
  ユーザーがどの程度ページを下までスクロールしたか、到達度合いを色で表示します。
• 領域
  ページ内のどの「領域」（HTML要素）で注目度が高いかを可視化します。

新機能：アテンションマップ

この3つに加えて登場したのが、今回話題の「注意」（アテンション）という項目です。
ここをクリックすると、ページ全体が1枚のヒートマップで表示されますが、従来の「スクロール」ヒートマップが上部ほど赤く、下部ほど青くなるのに対して、アテンションマップは「どこでユーザーが最も長く滞在していたか」を色濃く表示してくれます。

たとえば、私が書いた技術系ブログでいうと、上部のヘッダー画像や目次部分はあまり見られておらず、具体的な解決策のテキストが載っている中段あたりが赤く表示されているという感じです。これは「読者が求めている情報にこそ、一番時間を費やしている」ということがダイレクトに分かるわけですね。

どう活用すればいいの？

公式ブログの翻訳にもあった通り、アテンションマップで分かることを整理すると、以下の2点が特に重要です。

1. ユーザーはページ上の最も重要な要素に興味を持っているのか？
2. 訪問者は重要なCTA（お問い合わせや購入ボタンなど）を見逃していないか？

1. 重要な要素が本当に読まれているかを確認

たとえば、商品が競合よりも安いことを売りにしているランディングページ（LP）があるとします。
「安さ」を一番見てもらいたいのに、アテンションマップを見たら「成分」や「使用方法」の欄ばかり時間をかけて読まれている…というケースがあるかもしれません。
そうしたら、「成分が気になる」というニーズが想定以上に高いということなので、もう少しその部分を分かりやすくしたり、実際に価格との関連を強調して「高品質な成分なのに、これだけ安い！」といった訴求を上手に盛り込むなど、サイト改善のヒントが得られます。

2. CTA（ボタン）や重要情報が見逃されていないかをチェック

CTAとは「お問い合わせ」「予約する」「購入する」などのボタンのことです。
ページ全体のデザインが青系なのに、ボタンも青いままだと分かりづらい場合があります。アテンションマップを見れば、ページのどの辺りでユーザーが一旦立ち止まっているか、重要なボタンを見落としていないかが可視化されるので、もしボタン部分が赤く表示されていなかったら「目立ちにくいかも？」と仮説を立てられます。
それを踏まえて「ボタンを赤に変更してみる」「期間限定割引など、CTAの直前にインパクトのある要素を配置してみる」といった改善策を試して、反応を見ていくとよいでしょう。

まだClarityを入れていない方へ

このように、アテンションマップは非常に使い道が広い機能です。ただし、導入してすぐに過去のデータが見えるわけではなく、ある程度のアクセスが集まったタイミングで初めて機能を発揮します。
なので、まだ入れていない方はなるべく早く設置するのがおすすめですね。Googleタグマネージャーを使えば、導入はとても簡単です。

さらに充実するClarityの便利機能

Microsoft Clarityには、ほかにもユーザーの録画機能などユニークな機能があります。
たとえば「お問い合わせや購入に至った人が、サイト内でどんな操作をしていたのか」を実際のマウス操作やスクロール、ページ移動などでまるごと記録・再生できるんです。「そんなことまで分かるの!?」と驚く方も多いですが、サイト改善のためにはとても役立ちます。

私自身、毎月お客様のWebサイト改善をサポートする際、こうしたClarityの機能をフル活用して「ここを直すと効果がありそうですよ！」といった提案を行っています。無料でここまで使えるなんて、本当にありがたいツールだなと感じますね。

まとめ

• Microsoft Clarityは、Microsoftが提供する無料のウェブ解析ツール
• 新機能「アテンションマップ」が追加され、ページ内のどこにユーザーが最も時間を費やしているかが分かる
• ページ改善のヒントとして、重要要素が読まれているか、CTAが見落とされていないかをチェックできる
• 録画機能なども含め、サイト運営には欠かせないツールへと進化中

もし「自社のWebサイトをもっとブラッシュアップしたい」「ヒートマップを活用した分析や改善をしてみたい」という方がいましたら、ぜひClarityを導入してみてください。やってみると本当に色々な気付きが得られるはずです。

弊社では毎月のWebサイト改善サポートの中で、こうしたツールの活用方法についてもアドバイスしております。ご興味のある方は、ぜひお気軽にお問い合わせください。それでは、最後までお読みいただきありがとうございました！

以上、ウェブ企画パートナー竹内がお届けしました。
新機能の「アテンションマップ」、ぜひ試してみてくださいね。