東京・大阪のWeb制作会社|株式会社インスパイア

Blog

公開日:

更新日:

【2025年版】Microsoft Clarity ヒートマップの使い方の解説

【2025年版】Microsoft Clarity ヒートマップの使い方の解説

1.ヒートマップとは

ヒートマップとは、ユーザーがWebサイト上でどの部分をよく見ているか、どこをクリックしているかなどを「色の濃淡」で視覚的に示すツールです。

赤やオレンジの部分ほど注目度が高く、青い部分はあまり見られていないことを意味します。Microsoft Clarityでは、閲覧データを自動で解析し、ページのどこに関心が集まっているのかを一目で把握できます。

※Microsoft Clarityの他の機能については下記記事よりご確認ください。

2.ヒートマップ画面への移動方法

1.画面上部のヒートマップをクリック

Microsoftクラリティを開くとダッシュボードが表示されますので、画面上部のヒートマップボタンを押すとヒートマップ画面に移動することが出来ます。

またクラリティ内の色んな場所で炎のようなアイコンがありますので、そちらをクリックするとそれぞれのヒートマップ画面に移行することも出来るようになっています。

2.確認したいページ・URLをクリック

上のアイコンをクリックするとデータが取れているページが表示されますので、確認したいページをクリックすれば該当ページのヒートマップが閲覧可能です。
※上記画像はクラリティのサンプルサイトになりますので1ページのみ表示されています。
※特定のページやURLを確認している状態で前述のヒートマップアイコンをクリックするとそのまま該当ページのヒートマップに遷移するため、こちらの画面は表示されません。

3.デバイス別にヒートマップを確認する方法

それぞれのデバイスのヒートマップを確認したい場合は、画面の左上のボタンを押せば切り替えることが可能です。

左からパソコン画面、タブレット画面、スマートフォン画面となっております。

4.ローディング画面でヒートマップが確認できない時の操作方法

ヒートマップを開いてみると、ローディング画面などが設定されているサイトではローディングが表示されている場合があります。

ローディング画面が出てしまっている時のキャプチャ

ローディング画面が出ていてヒートマップを確認できない時があります。

その際は下のキャプチャの箇所「スクリーンショット」ボタンで確認したい画面を選択しましょう。

1.スクリーンショットを選択

画面右上から「スクリーンショットを変更する」を押します。

スクリーンショットを変更するボタンに赤枠がついているキャプチャ

スクリーンショットを変更する

2.画面が正常に表示されているキャプチャを選択

いくつかキャプチャが表示されるので、その中から正常にページが表示されているキャプチャを選びましょう。
※もしそういったキャプチャが見つからない場合は数日〜数週間時間を置いてから確認してみましょう。

スクリーンショットを変更するで開いた画面のキャプチャ

正常に表示されているキャプチャを選択します。

5.各ヒートマップについて解説

ヒートマップでは「クリック」「スクロール」「アテンション(注意)」の指標でどこがユーザーに見られているか・見られていないかを知ることができます。

種類概要色の意味
クリックヒートマップページ上でクリックされた箇所を色の濃淡で表示。クリック数が多い場所ほど目立ちます。赤・オレンジ=クリックが多い/青=少ない
スクロールヒートマップページのどこまで読まれたか(スクロールされたか)を可視化。読了率を確認できます。赤=多くの人が見た/青=あまり見られていない
アテンションヒートマップ(注意ヒートマップ)ページ上でユーザーがどこに時間を費やしているかを可視化します。
ユーザーがページの各部分にどれくらい滞在しているかを確認できます。
赤=長く滞在(注目度が高い)/青=滞在していない(注目度が低い)

1.クリックヒートマップ

クリックヒートマップは、ユーザーが実際に「どの場所をクリックしたか」を記録・可視化したものです。

リンクやボタンだけでなく、画像や装飾要素などクリックできない箇所への誤クリックも確認できます。これにより、デザインや導線の改善点を具体的に見つけることができ、ユーザー体験の向上につながります。

領域ボタンについて

画面左にある領域ボタンを押すと、クリックした場所をピンポイントではなく領域で表示することができます。

2.スクロールヒートマップ

スクロールヒートマップは、ページのどこまでユーザーが読み進めたかを可視化するツールです。画面をどの位置までスクロールした人が多いのかを色の濃淡で示し、どの範囲まで閲覧されているか(読了率)を直感的に把握できます。

赤い部分ほど多くのユーザーが見たエリア、青い部分ほどあまり見られていないエリアを示します。
ページの「離脱ポイント」や「重要情報の見落とし」が発生していないかを確認するのに便利です。

3.アテンション(注意)ヒートマップ

アテンションマップは、ユーザーがページのどこに注目しているかを可視化するツールです。
画面の中で「視線が集まりやすい」「手が止まりやすい」エリアを色の濃淡で示し、どの部分が関心を引いているのかを推測できます。

クリック数やスクロール量を示す従来のヒートマップとは異なり、“どこを見ていたか” に焦点を当てて確認できるのが特徴です。
ボタンや画像、テキストなど、ユーザーが実際に注視した箇所を把握したいときに役立ちます。

6.まとめ

Microsoftクラリティのヒートマップは解析ソフトに慣れていない方でも直感的に操作できるのが良いところですね。

クリックヒートマップはサイト内のクリックされている箇所や、クリックされていない箇所が分かるようになっておりますので、ぜひ活用してサイト改善に役立ててみてはいかがでしょうか。

Contact

ご相談やご見学など、お気軽にお問い合わせください。

お問い合わせフォーム
03-5956-6815

営業時間:9:00〜18:00