広報担当の杏野です。
リンクだと思ってクリックしたところがただの文字だったこと、ありませんか？
私はしょっちゅうあります。実はうちのサイトにもそんな場所がありました。
GA4で今月のアクセス数や直帰率を確認しても、「どう改善すればいいの？」と悩むことがあります。直帰率が高いことは分かっても、ページのどこで離れているのかまでは数字からは見えてきません。直そうにも、どこから手をつければいいのか決められないんですよね。
日々の仕事に追われていると、数字をじっくり読み解く時間もなかなか取れません。
でも、ページを見るだけで直す場所が分かる方法があるんです。
ヒートマップなら結果が一目で分かる
ヒートマップは、ページの上に色を重ねて見せる機能です。訪問者が集中して読んでいるところやクリックした場所が、色の濃さで分かるようになっています。
名前だけ聞くと難しそうですが見た目はとても直感的です。雨雲レーダーと同じで、赤いところほど多く、青いところほど少ない、と見ればだいたい分かります。
実際のページに色がつくので、訪問者がどう反応したかが一目で分かります。そこからどこを直せばいいかも見えてきます。
QA ZEROでヒートマップを開く手順
- ①左メニューの「行動」から、見たいレポートを開きます
- ②期間を選びます
- ③表から見たいページを選び、「ヒートマップ」列にある端末のアイコンをクリックします
難しい操作や設定はありません。「行動」メニューのくわしい使い方は、ヘルプページをご覧ください。
正直なところ、私がQA ZEROを知って一番ワクワクしたのはヒートマップでした。レポートの読み方を知らなくても、ページを見るだけで話が弾むんです。
ヒートマップは4種類
同じページでも4つの見方があり、それぞれ分かることが違います。全部を使いこなす必要はなくて、見たいものに合わせて切り替えて使えます。
| 種類 | 何が分かるか |
|---|---|
| スクロールマップ | 何％の人が、どこまで読んだか |
| アテンションマップ | どこがよく読まれているか |
| クリックヒートマップ | どこが押されているか |
| クリックカウントマップ | どのボタンが何回押されたか |
上の2つは「読まれ方」、下の2つは「押され方」を見るものです。スクロールマップにはその位置まで到達した人数も出ます。
クリックカウントマップだけは色ではなく数字で、押された回数が出ます。
それぞれのくわしい見方は、ヘルプページをご覧ください。
ちなみに、4種類は自由に組み合わせられます。
1つずつしか見られないと、画面を行ったり来たりすることになるので大変です。
おすすめは、アテンションマップとクリックヒートマップの組み合わせです。2つにチェックを入れて重ねると、どこに注目が集まっているかが見ただけで分かります。逆に、読み飛ばされているところや、押されていないボタンもすぐに見つかります。
眺めているだけでけっこう面白いです。
下の画像は、丸山さんの記事70%のユーザーが拒否する時代。「Cookie同意」のアクセス解析への影響を考えるで、アテンションマップとクリックヒートマップを見たところです。
同じ記事の中でも、場所によってこれだけ違います。
読まれていない場所が分かると、どこから手を入れればいいかの見当がつきます。
押せない場所が押されていた
QA ZEROのトップページで8か月分のデータを見てみたところ、一つ気になることがありました。
クリックヒートマップにクリックカウントマップを重ねてみると、メニューやボタンには色と一緒に押された回数が出るのに、色だけで回数が出ない場所があります。
カードの下にある緑の英字のあたりに色が集まっていました。とくに「COOKIE-LESS & PRIVACY」は赤くなっています。でも、ここには回数の数字が出ていません。
比較表にも同じような場所がありました。「AIが推測に使うデータ量」は赤いのに数字がありません。すぐ下の「取得できるデータ項目を見る」には「6」と出ています。
同じように押されているのに数字が出ないのは何が違うんだろう、と思いました。
気になって開発の今井さんに聞いてみると、2つには次の違いがあるそうです。
- クリックカウントマップは、リンクやボタンが押された回数を数えている
- クリックヒートマップは、それ以外の場所のクリックも拾っている
つまり、色だけ出ていた場所は、もともと押せない場所だったのです。
カードの緑の英字も比較表の文字も、リンクではありませんでした。
押せないのに押されているのは、読んだ人が「ここを押せば詳しく分かりそう」と思った場所なんだと思います。
緑の英字はリンクっぽく見えますし、「AIが推測に使うデータ量」はもっと知りたくなる言葉なのかもしれません。
よく押されている文字にリンクを置けば、知りたい人をそのまま次のページへ案内できます。数字だけを見ていたらたぶん気づけなかったと思います。
ヒートマップを見るときに気をつけること
データの量や見ている端末によって見え方が変わります。ヘルプページに注意点がまとまっているので、その中からとくに大事だと思った4つを紹介します。
1. データが少ないうちは色だけで決めない
色の濃さは、そのページの中で「どこが多いか」を比べたものです。データが少ないと数回のクリックでも赤く見えることがあります。
画面の上にある「有効データ数」がヒートマップを描くのに使った訪問の数です。QA ZEROのトップページは1か月分だと183件だったので、8か月分の1,536件で見ました。
2. パソコンとスマートフォンは分けて見る
画面上のメニューで表示する端末を切り替えられます。
画面の幅が違うと同じページでもボタンの位置が変わるので、端末ごとに見たほうが正確です。
3. ページを直す前に画面を保存しておく
ページの内容をアップデートした場合、画面右上にある「ヒートマップバージョンを更新」を押すと、新しいページでヒートマップが描き直されます。
ただ、更新前のヒートマップに戻して見ることはできません。直す前の画面をキャプチャしておくと、あとで変更前と比べられます。
くわしくはヒートマップバージョンについてをご覧ください。
4. ほかのレポートの数字とは合わないことがある
ページビュー数と、ヒートマップに使われるデータの数は、数え方が違います。
平均滞在時間は、ほかのアプリを使っていた時間は含まれず、実際にページを見ていた時間だけが表示されています。
「なぜ」まで知りたくなったら
押せない場所を押した人はそのあとどう動いたのでしょうか。すぐにページを離れたのか。別の場所を探したのか。そこまではヒートマップでは分かりません。
ヒートマップで分かるのは「どこが読まれていて」「どこを直せばよさそうか」までです。「なぜ」を確かめたいときは、セッションリプレイを使います。
セッションリプレイは、訪問者の動きを動画のように再生できる機能です。迷ったりつまずいたりした様子がそのまま見えます。
最初はセッションリプレイもこの記事で一緒に書くつもりでした。社内の詳しい人に相談したら、別の機能だから記事も分けたほうがいい、と言われました。たしかにヒートマップの話だけで盛りだくさんだったので、両方は欲ばりすぎでしたね。
まとめ
ここまでの話を、5つにまとめます。
- ヒートマップを使うと、ページのどこが読まれ、どこが押されているかが色で分かります
- 種類は4つ。見たいものに合わせて切り替えて使います
- アテンションマップとクリックヒートマップを重ねると、読み飛ばされている場所や、押されていないボタンが見つかります
- 押せない場所が押されていたら、そこは読んだ人が「もっと知りたい」と思った場所かもしれません
- 「なぜ」まで知りたいときは、セッションリプレイを使います
数字をじっくり読み解く時間がなくても、ページを見るだけで次にやることが見えてきます。
次の記事では、セッションリプレイの話をしたいと思います。
よくある質問
Q. 計測を始めてから、どのくらいでヒートマップを見られますか？
計測タグが正しく設置されていれば、データはすぐに集まり始めます。画面に反映されるまでには数分かかることがあります。ただ、ヒートマップで傾向を見るには、ある程度の期間データをためてから見るのがおすすめです。
Q. スマートフォンのヒートマップも見られますか？
はい。ヒートマップの画面の上で、パソコン・スマートフォン・タブレットを切り替えて見られます。画面の幅によってボタンの位置が変わるので、端末ごとに見るのがおすすめです。
Q. SNSから来た人だけのヒートマップは見られますか？
はい。ヒートマップの画面の上にある「Filter」で、参照元などを指定して絞り込めます。
Q. 自分や社内の人のアクセスが、ヒートマップに混ざりませんか？
混ざらないようにできます。ログインしている人や、特定のIPアドレスなどを計測から外す設定があります。くわしくはお問い合わせください。
Q. GA4と一緒に使えますか？
はい、併用できます。QA ZEROはGA4の置き換えではなく、一緒に使うことを想定したツールです。GA4で離脱率などを確認して、気になったページをヒートマップで見る、という使い方ができます。
Q. WordPress以外のサイトでも使えますか？
はい。QA ZEROはWordPressの上で動いていますが、計測するサイトはWordPressでなくてもかまいません。独自に作ったサイトやほかのCMSでも計測できます。Shopifyで作ったサイトにも対応していて、QA ZEROのための特別な設定はいりません。
Q. サイトの表示が遅くなりませんか？
計測のしくみはページの表示を待たせない形で読み込まれ、分析の処理は別のサーバーで行われます。通常、表示速度への影響は最小限です。
ほかの質問と答えは、ヘルプページのよくある質問に載っています。
出典：QA ZERO公式ドキュメント（ヒートマップ／ヒートマップバージョンについて／行動／よくある質問）
この記事を書いた人
広報担当・杏野（あんの）
QAシリーズの広報担当。文系出身で、入社したころはCookieはお菓子のことだと思っていました。今も専門家ではありませんが、わからないことはその日のうちに開発チームへ聞きに行くようにしています。覚えたての知識を、読者のみなさんと同じ目線で記事にしています。
自分のサイトでヒートマップを試したい方へ
QA ZEROには無料のトライアルがあります。一部のページからでも実際の反応を確かめられます。
「うちのサイトはどこが読まれているのかな」と気になった方はぜひご検討ください。