記事一覧
数字の「なぜ」はヒートマップでわかる 離脱の原因の見つけ方
数字の「なぜ」はヒートマップでわかる 離脱の原因の見つけ方
アクセス解析の数字を見ていると、「この商品ページで多くの人が離れている」といったどこでは分かります。ですが、なぜそこで離れるのかまでは、数字だけでは見えてきません。
この記事は、アクセス解析の連載の行動観察編です。「なぜ」を見るための、ヒートマップ／セッション録画／行動指標の見方を、前回までと同じネットショップの例で紹介します。
この記事は、アクセス解析の連載の行動観察編です。「なぜ」を見るための、ヒートマップ／セッション録画／行動指標の見方を、前回までと同じネットショップの例で紹介します。
数字だけでは「なぜ」が分からない
たとえばEC編で、「よく見られているのに、カートに入らない商品ページ」が見つかったとします。数字から分かるのはここまでです。原因が「探している情報が見つからない」のか「ボタンが押せない」のか「表示が崩れている」のかまでは、数字からは分かりません。
そこで使うのが、訪問者の実際の動きを目に見える形にする仕組みです。無料で使えるものもあり、代表的なのがMicrosoft Clarityです。計測タグをサイトに1つ入れるだけで、その日から使い始められます。大きく分けて、次の2種類の見方ができます。
そこで使うのが、訪問者の実際の動きを目に見える形にする仕組みです。無料で使えるものもあり、代表的なのがMicrosoft Clarityです。計測タグをサイトに1つ入れるだけで、その日から使い始められます。大きく分けて、次の2種類の見方ができます。
- ヒートマップ
- ページ内のどこがクリックされ、どこまで読まれたかを、色の濃淡で見せる
- セッション録画
- 訪問者ひとりの画面操作を、動画のように再生して確認できる
使いやすさを表す4つの行動指標
ヒートマップを1ページずつ見る前に、まずサイト全体の「使いやすさ」をつかむ数字があります。下の4つは、先ほど紹介したMicrosoft Clarityのダッシュボードで確認できる代表的な行動指標です。GA4の画面には出てこない数字なので、探す場所はClarity側です。
- デッドクリック率
- 押しても反応しない場所をクリックした訪問（セッション）の割合。リンクに見えて押せない箇所がある印
- クイックバック率
- リンクを押して別のページへ移ったあと、すぐ元のページへ戻った訪問の割合。移った先のページが期待と合っていない印
- JSエラー率
- ページ上でプログラム（JavaScript）のエラーが起きた訪問の割合。機能が動いていない疑いがある
- 表示速度（LCP）
- 主要な内容が表示されるまでの時間。2.5秒以内が目安
この例では、デッドクリック率が10.1%、クイックバック率が40%と、どちらも前月より上がっています。「リンクに見えるのに押せない画像」「タップできそうで反応しないカードやアイコン」があるのかもしれません。EC編で見た「見られているのにカートに入らない商品」とも重なります。
クイックバック率の40%は、10回の訪問のうち4回で、別のページへ移ってすぐ戻る動きがあったということです。リンクの文言と、移った先のページの中身が食い違っていないかを確かめます。JSエラー率は、このあと紹介するセッション録画で、エラーが起きた場面を直接確かめられます。表示速度（LCP）は2.0秒と良好なので、「遅くて離脱」ではないと切り分けられます。もし遅ければ、ページの中身を直しても離脱はなかなか減らないので、先に画像の大きさや、読み込みに時間のかかる要素を見直します。
クイックバック率の40%は、10回の訪問のうち4回で、別のページへ移ってすぐ戻る動きがあったということです。リンクの文言と、移った先のページの中身が食い違っていないかを確かめます。JSエラー率は、このあと紹介するセッション録画で、エラーが起きた場面を直接確かめられます。表示速度（LCP）は2.0秒と良好なので、「遅くて離脱」ではないと切り分けられます。もし遅ければ、ページの中身を直しても離脱はなかなか減らないので、先に画像の大きさや、読み込みに時間のかかる要素を見直します。
補足
これらの数値の目安は、サイトの種類やページの役割で変わります。他社と細かく比べるより、前月より上がった指標や、ほかのページより高いページから、ヒートマップとセッション録画で中身を確かめていくと進めやすくなります。
ヒートマップの3つの見方
気になるページが見つかったら、そのページのヒートマップを見ます。ヒートマップには、代表的な3つの見方があります。
| 種類 | わかること |
|---|---|
| クリックマップ | どこが押されているか。押せない場所でのクリックも見える |
| スクロールマップ | ページのどこまで読まれたか。離脱が集中する高さがわかる |
| エリアマップ | 領域ごとのクリック数を集計し、どの部分が使われているかを比べられる |
3つとも、先ほどのClarityで確認できます。Clarityには、ページのどの部分で長く止まって見られたかを色で示す「アテンションマップ」もあります。
スクロール到達率でわかること
中でも分かりやすいのがスクロールマップです。ページを上から下へ区切り、それぞれの高さまで到達した人の割合（スクロール到達率）を見ます。
この例では、ファーストビュー（最初に見える範囲）は100%ですが、商品説明のあと、レビュー／詳細に進む手前で88%から63%へと大きく落ちています。レビューまで届くのは6割ほどで、ページの最下部まで届くのは4人に1人です。
もし「カートに入れる」ボタンや伝えたいことがページのかなり下にあるなら、多くの人はそこに届く前に離れています。大事な要素は、読まれているうちに見せておくと届きやすくなります。スクロール到達率は、その配置を決める材料になります。
もし「カートに入れる」ボタンや伝えたいことがページのかなり下にあるなら、多くの人はそこに届く前に離れています。大事な要素は、読まれているうちに見せておくと届きやすくなります。スクロール到達率は、その配置を決める材料になります。
セッション録画で「詰まり」を見る
ヒートマップが「全体の傾向」なら、セッション録画は「ひとりの体験」です。実際の訪問者の操作を動画のように再生できるので、数字では見えない詰まりが分かります。よく見つかるのは、次のような動きです。
- 同じボタンを何度も連打している（押せていない、または反応が遅い）
- フォームの特定の入力欄で止まり、そのまま離脱している
- 目的の情報を探して、ページを上下に激しく往復している
- 画面を左右に動かしている（スマホで横にはみ出している疑い）
Clarityでは、ボタンの連打は「イライラしたクリック」、上下の激しい往復は「過剰なスクロール」として自動で印が付くので、録画をその条件で絞り込めます。とくに、デッドクリック率が高いページの録画を何本か見ると、「どのボタンが押せていないのか」の見当がつきます。数字で当たりをつけ、録画で実際の動きを確かめる、という順番です。基礎編で触れたスマホの実機での確認に加えて、スマホからの訪問の録画を見ると、実際のつまずきが分かりやすくなります。
録画に、訪問者の個人情報は映りませんか？
Clarityの標準の設定では、入力欄に打ち込まれた内容と、ページに表示された数字やメールアドレスが伏せ字になって記録されます。氏名など、それ以外の文字はそのまま映るので、会員情報をページに表示しているサイトでは、伏せ字にする範囲を設定で広げておくと安心です。
また、Clarityの利用規約では、プライバシーポリシーに、Clarityを使っていることと、Microsoftがデータを集めることを書くよう求められています。書き方は、Microsoftの文例（英語）が参考になります。
また、Clarityの利用規約では、プライバシーポリシーに、Clarityを使っていることと、Microsoftがデータを集めることを書くよう求められています。書き方は、Microsoftの文例（英語）が参考になります。
まとめ
行動観察編の要点を整理します。
- 数字は「どこで」離脱したかを示しますが、「なぜ」はヒートマップと録画で見ます。
- デッドクリック率／クイックバック率などの行動指標で、直したいページに当たりをつけます。
- スクロール到達率で、大事な要素が読まれる前に離脱されていないかを確かめます。
- セッション録画で、押せないボタンや入力の詰まりを確かめます。
- 表示速度（LCP）が遅いと、中身を直しても効きにくいので、先に確かめます。
数字と行動観察を組み合わせると、改善は「なんとなく」から「ここを直す」に変わります。次の計測の信頼性編では、その大前提となる「そもそもその数字は正しいのか」を扱います。
次の記事：その数字、本当に正しい？（計測の信頼性編）
ヒートマップや録画は、導入すればその日から見られます。難しいのはむしろその先で、どのページを開き、見つけた動きをどんな改善につなげるかの判断には慣れがいります。観察から改善までを社内で続けるのが大変であれば、その部分を外部の専門家に預けるという選び方もあります。実際に何をどこまで任せられるのかは、WEB活用コンサル「IMG★EXP」の紹介記事で具体的に紹介しています。
この記事は参考になりましたか？
ご回答ありがとうございました
