ヒートマップで分かること。無料で使えるMicrosoft Clarityで、ページの「どこで迷っているか」を見る
アクセス解析の数字は、「何人が来て、何人がどのページで帰ったか」を教えてくれます。
でも、「ページのどこまで読んで、どこで迷ったのか」までは教えてくれません。
直帰率が高いページがある。滞在時間が短いページがある。
そこまでは分かっても、「じゃあ、そのページの何を直せばいいのか」は、数字だけを見ていても、なかなか決めきれないんですよね。
その「どこで」を見せてくれるのが、ヒートマップです。
今回は、ヒートマップで何が分かるのか、どう読めば改善につながるのかを、リセラで普段使っているMicrosoft Clarity（クラリティ）を例に書いてみたいと思います。
ヒートマップは、ページの中の「人の動き」を色で見せる
ヒートマップは、ページを見た方が、どこをよく押したのか、どこまで読み進めたのかを、色の濃さで表したものです。
よく見られている・押されているところほど赤く、そうでないところほど青く表示されます。
Googleアナリティクスが「ページ単位」の数字だとすると、ヒートマップは「ページの中」の数字です。
どちらが良い、ということではなく、見ているものが違います。
アクセス解析で「どのページを直すか」を決めて、ヒートマップで「そのページのどこを直すか」を決める。
私は、この順番で使うのがいちばん無駄がないと思っています。
アクセス解析で毎月見ているところは、アクセス解析の記事にまとめています。
ツールはいろいろ。おすすめは、無料で使えるClarity
ヒートマップのツールは、有料・無料を含めて、いろいろなものがあります。
その中で、私がおすすめしているのが、Microsoftが提供しているClarityです。
理由は、いくつかあります。
- 無料で使える：Microsoftの公式ページでも、ずっと無料で、アクセス数の上限で有料版への切り替えを求められることはない、と案内されています
- ヒートマップの種類が多い：クリック、スクロール、エリア、アテンションなど、見たいものに合わせて切り替えられます
- セッションの録画が見られる：1人ひとりの方が、ページをどう動いたのかを、動画のように再生できます
- Googleアナリティクスと連携できる：GA4とつなげておくと、録画の画面で、GA4側の条件で絞り込んで見ることもできます
設置も、計測用のタグをサイトに入れるだけです。
Googleアナリティクスと同じように、一度入れておけば、あとは自動でデータがたまっていきます。
Clarityのヒートマップで、見られること
Clarityのヒートマップには、いくつかの種類があります。
それぞれ、見えるものが違います。
| 種類 | 見えること | こんなときに |
|---|---|---|
| クリックマップ | ページの中の、どこがどれくらい押されたか | ボタンやリンクが押されているか確かめたい |
| スクロールマップ | ページのどこまで、何％の方が読み進めたか | 大事な内容が、読まれる位置にあるか確かめたい |
| エリアマップ | 自分で囲んだ範囲の中で、どれくらい押されたか | ブロックごと、エリアごとに比べたい |
| アテンションマップ | ページのどこに、どれくらい長く目がとまっていたか | じっくり読まれているところを知りたい |
スクロールマップと「平均フォールド」
私がいちばんよく見るのは、スクロールマップです。
ページを上から下へ、何％の方がどこまで読み進めたかが、色で分かります。
Clarityでは、「平均フォールド」という線も表示されます。
ページを開いて、スクロールする前に見えている位置の平均です。
つまり、この線より上は、ほぼすべての方が目にしているところ。
ここに何を置くかで、ページの印象が大きく変わってきます。
スマホとパソコンでは、この平均フォールドの位置がまったく違います。
パソコンでは最初に見えている予約ボタンが、スマホでは2回スクロールしないと出てこない、ということも、よくあるんですよね。
ヒートマップは、必ずスマホとパソコンを分けて見るようにしています。
「困っているサイン」を見つけてくれる
Clarityのもうひとつの良さは、ページを見た方の「困っているサイン」を、自動で見つけて教えてくれることです。
デッドクリック：押しても、何も起きない
押してみたのに、ページが変わらない、何も反応がない、というクリックです。
よくあるのが、写真や、ボタンのように見える見出しが、何度も押されているケースです。
見る方は「ここを押せば、詳しく見られる」と思っている。
だったら、そこをリンクにしてあげればいいんです。
レイジクリック：同じところを、何度も連打
同じところを、短い時間に何度も続けて押しているクリックです。
ボタンを押しても反応が遅い、読み込みに時間がかかっている、といったときに起こりやすいです。
予約やお問い合わせのボタンでこれが出ていたら、何かが引っかかっているサインなので、すぐに確かめたいところです。
過度なスクロール：探しているものが、見つからない
ふだんより、ずっと多く上下にスクロールしている動きです。
知りたい情報を探して、ページの中を行ったり来たりしている、ということが多いです。
料金やアクセスなど、よく探される情報の場所を見直すきっかけになります。
クイックバック：開いて、すぐに戻る
リンクを押して別のページに移ったものの、すぐに元のページに戻ってきてしまう動きです。
リンクの文言と、移った先のページの中身が合っていないときに起こりやすいです。
「料金はこちら」と書いてあるのに、移った先に料金がすぐ見当たらない、といったケースですね。
こうしたサインは、数字だけを見ていても、なかなか気づけません。
サインが出ているページの録画をいくつか再生してみると、「あ、ここで迷っているんだ」というのが、手に取るように分かります。
ヒートマップを、改善につなげる読み方
ヒートマップは、見ているだけでも面白いものです。
でも、見て終わりにしないために、私が気をつけていることがあります。
まず、ページの目的を決めてから見る
そのページは、何をしてもらうためのページなのか。
予約なのか、資料請求なのか、見学会の申し込みなのか。
目的が決まっていないと、「ここがよく押されている」が、良いことなのか悪いことなのかも判断できません。
数字と、ヒートマップと、録画を行き来する
Googleアナリティクスで、気になるページを見つける。
ヒートマップで、そのページのどこで止まっているかを見る。
録画で、実際にどう動いているかを確かめる。
この3つを行き来すると、「なんとなく、ここかな」が、「ここを、こう直そう」に変わっていきます。
少ない数で、決めつけない
ヒートマップは、見た方が少ないうちは、色の出方がたまたまに左右されやすいです。
アクセスが少ないページは、期間を長めにとって、ある程度の数がたまってから見るようにしています。
録画も、1人の動きだけで決めつけず、何人か見て、同じ動きが続いているかを確かめます。
直したら、もう一度見る
ボタンの位置を変えた。見出しを変えた。順番を入れ替えた。
直したあとに、もう一度ヒートマップを見て、動きが変わったかを確かめます。
改善を入れて、効果を確かめて、また次の手を考える。
この流れは、レポートの1か月の記事にも書いています。
ヒートマップで見つかりやすい、改善のヒント
ヒートマップを見ていると、業種を問わず、似たような発見がよくあります。
- いちばん伝えたいことが、平均フォールドよりずっと下にあって、半分以上の方に読まれていない
- 押してほしいボタンより、その近くの写真のほうがよく押されている
- スマホでは、メニューを開いた方の多くが、同じ1つの項目を押している（それなら、メニューの外に出しておいてもいい）
- ページの下のほうにある「よくある質問」が、実はとてもよく読まれている
- スライドショーの2枚目以降は、ほとんど見られていない
どれも、作る側が「こう見てもらえるはず」と思っていたことと、実際の動きとのズレです。
このズレに気づけることが、ヒートマップのいちばんの価値なんじゃないかと思っています。
見る方の動きに合わせて、お声がけのタイミングを考える話は、お声がけの記事にも書いています。
入れる前に、確かめておきたいこと
プライバシーポリシーに、使っていることを書いておく
Clarityは、ページを見た方の動きを記録するツールです。
Microsoftも、Clarityを使っていることを、サイトのプライバシーポリシーなどで分かるように伝えることをすすめていて、そのための文例も用意しています。
入れるときは、プライバシーポリシーもあわせて見直しておくのが安心です。
入力された内容は、記録されない
お問い合わせフォームなどに入力された文字は、Clarityでは隠された状態で記録されます。
そのうえで、ほかにも隠しておきたい部分があれば、管理画面で設定できます。
会員ページなど、個人の情報が表示されるページがあるサイトは、ここも確かめておきたいところです。
データには、保存期間がある
Clarityの録画は、記録してから30日間が保存期間です（お気に入りに入れたものなどは、もう少し長く残ります）。
ヒートマップは9か月までさかのぼれます。
大事なページの改善前の様子は、スクリーンショットなどで残しておくと、あとで比べるときに助かります。
最後に
アクセス解析の数字は、「何が起きたか」を教えてくれます。
ヒートマップは、「どこで起きたか」を見せてくれます。
そして録画は、「どう起きたか」を見せてくれます。
この3つがそろうと、ページの直し方が、推測ではなく、見る方の実際の動きから決められるようになります。
無料で始められるので、まだ入れていない方は、まず入れてみて、自社のページがどう見られているのかを、のぞいてみるだけでも面白いと思います。
「入れてみたけど、どこを見ればいいのか分からない」
「ヒートマップから、どう直せばいいのか相談したい」
そんなときも、気軽にお声がけください。
最後まで読んでいただき、ありがとうございました。
参照した資料
- Frequently asked questions（Microsoft Learn）
- Heatmaps overview（Microsoft Learn）
- Semantic metrics（Microsoft Learn）
- Sample wording for Clarity Site and Privacy Policy Disclosure（Microsoft Learn）
SHARE
AUTHOR
UMEHARA BLOG
