5つのヒートマップの実例と各ヒートマップの使い方

ヒートマップとは、ユーザーがオンライン上でどのようにページに反応しているか色分けして視覚的に表現したものを総称したものです。ヒートマップにはそれぞれ異なるインサイトが隠されています。

ヒートマップガイドのこの章では、5つのヒートマップの例と、それらを使ってサイトを改善する方法を紹介します。

1.スクロールマップは重要なコンテンツが無視されていることを示す

スクロールマップの例

上のスクロールマップは、ページがどれだけ下にスクロールされたかを示しています。

スクロールマップが強調したもの

スクロールマップを見ると、すぐに2つの急な色のグラデーション変化に気づくことができます。1つはページの上部（赤から黄色へ）、もう1つはページの4分の3あたり（緑から濃い青へ）です。 通常、スクロールマップでは色が徐々に冷たく（青く）なっていくことが期待されます。しかし、急激な変化がある場合、それは特定のポイントで大多数のユーザーがスクロールを止めたことを示しています。

下部の緑から青への変化に注目してください。コンテンツのレイアウトの仕方から、2つの仮説を立てることができます：

1. 訪問者は、「現在の募集（current opening）」のセクションを閲覧し終わるとページが終わると思い、その結果、ページを去ってしまいます。

2. 一方で、応募を検討しているユーザーは募集ポジションに関心を持ち、次のページへ進むためにクリックしています。

いずれにせよ、ページ下部は全訪問者の約20％しか見ていません。

Glassdoor社の5点満点中5点という高評価（平均以上）は、求職者にとって優れたソーシャルプルーフとなります。 しかし、このページを訪れるユーザーの80%は、その情報を知ることなく離脱しています。

なぜスクロールマップがこのユースケースに適していたのか？

ヒートマップデータによると、訪問者の80％がウェブページの一番下までたどり着かず、ソーシャルプルーフのセクションを見ていないことがわかりました。

では、リニューアル後のページのヒートマップを見てみましょう。 このページはより短くなり、ファーストビューのすぐ下に「従業員の声が」セクションが追加されています。

現在では、訪問者の75％が「従業員の声」のセクションを見ており、なんと69％がページの一番下まで到達しています！

💡プロのヒントヒートマップの数値データと、ContentsquareのVoice of Customerツールから得られる定性インサイトを組み合わせることで、ユーザーフィードバックを収集し、ページをさらに改善しましょう。

以下の例では、あるユーザーが「職種や勤務地で求人をフィルタリングできない」と指摘しました。このようなフィードバックを活用することで、該当の機能を追加し、ユーザーがよりスムーズにサイトを操作できるよう改善できます。

2.クリックマップは、ユーザーが動画を無視していることを明らかにする

動画で2回だけクリックされたことを示すクリックマップの例

上のヒートマップはクリックマップまたはクリックヒートマップで、ユーザーのクリック量を薄い（クリック数が少ない）または濃い（クリック数が多い）カラーパレットで表示します。 これは、主要要素とのインタラクションを調査するために、「採用情報」ページの再設計されたバージョンに配置されました。

クリックマップが浮き彫りにしたもの

リニューアル後の採用ページでは、冒頭のテスティモニアルセクションに動画を追加しました。訪問者が最新の社内ミートアップの様子を見たがり、「再生」ボタンをクリックすると想定していました。しかし、実際にはそうなりませんでした。

このボタンは、ほとんどクリックされずに放置され、3300回のセッションのうちクリックされたのはわずか2回でした（CTRは0.02）。

なぜクリックマップがこのユースケースに適していたのか？

クリックマップは、ユーザーがビデオを見たいという前提で興味深いデータを提供してくれます。

この単純なデータ分析から、訪問者がビデオを再生しない理由を説明する2つの仮説が導かれています：

1. 単純に、訪問者はビデオに興味がない場合。

2. 彼らはこれがビデオであり、ボタンがクリック可能であることに気づいていない場合。

これらの仮説を検証するために、ABテストを設定して、このセクションのレイアウトやコンテンツを変更し、ユーザーエクスペリエンスを向上させることができます。

プロからのアドバイスContentsquareでユーザーインタビューを行うことで、ユーザーから直接フィードバックを得ることができます。上記の例では、動画をクリックしない理由を明らかにすることができます。

3.ムーブマップは、ユーザーがマウスを動かした場所を表示する

上のヒートマップはムーブマップまたはマウス追跡ヒートマップであり、ユーザーがページ内を移動する際のマウスの動きを示しています。無意識であろうとなかろうと、ユーザーの目はマウスの動きを追います。 したがって、ムーブマップは信頼性の高いアイトラッキング技術として利用できます。

ムーブマップが浮き彫りにしたもの

このムーブマップはガイド記事から取得したもので、長文コンテンツ内で読者の注意を引くポイントを示しています。興味深いインサイトの一つは、長い文章のブロックが読者の関心を維持できていないことです。これは、段落の下部に進むにつれて色が薄くなっていることからも分かります。

なぜムーブマップがこのユースケースに有効だったのか？

このテキストセクションの下にマウスを移動させた読者が少ないことから、大半の読者は読み始めたものの、読み飛ばしに終わっていると考えていいでしょう。

このことは、次のいずれかを示しています。

1. コンテンツ自体が十分に魅力的でない場合。

2. 読者はセクションの冒頭で必要な情報を得る場合。

最初のケースでは、最後まで読ませるためにコピーを変えた方がいいかもしれません。2つ目の選択肢は、読者が望んでいるものを前もって与えることができたということを示しています。

しかし、決断を下す前に、この行動の背景を理解し、仮説を検証する必要があります。

💡 プロのヒント：コンテンツフィードバックアンケート（Contentsquare Surveysで作成）も、読者がページのコンテンツに満足しているか、何が足りないか、レイアウトが好みでないかなどを判断するのに役立ちます。

4.ゾーンベースのマップは、ユーザーがページとどのようにインタラクションしているかを表示します。

「会社概要」ページのエンゲージメントゾーンヒートマップの例

ゾーンベースのヒートマップ（エンゲージメントゾーンマップとも呼ばれる）は、デスクトップではクリック・ムーブ・スクロール、モバイルやタブレットではタップ・スクロールのデータを統合し、1つのビューにまとめたものです。データの可視化に最適なヒートマップ分析ツールです。

ゾーンベースのヒートマップが浮き彫りにしたもの

この「会社概要」ページの「お客様の声」セクションを見ると、ヒートマップはユーザーがカードに関心を持っていることを示しています。

Glassdoor社のロゴと「Current Hotjar employee」コンポーネントは最も多くのエンゲージメントを集めています。これは、ユーザーがGlassdoorのレビューを確認しようとしてクリックしようとしていることを示しています。 しかし、これらのコンポーネントはどちらもクリックできません。

さらに悪いことに、ユーザーはクリック可能な「レビューを読む」要素をを完全に無視しています。

なぜゾーンベースのヒートマップがこのユースケースに適していたのでしょう？

このセクションでのユーザーの行動は、Glassdoor社のレビューの信頼性を確認したいという意図を示しています。実際、企業がレビューへのリンクを提供していない場合、「このレビューは作られたものではないか」と疑われても不思議ではありません。

ゾーンベースのマップは、潜在的な不信の原因を浮き彫りにしました。 この実用的なインサイトがあれば、レビュー欄のデザインを見直して、次のようにUXを確信を持って改善することができます。

• Glassdoor社のロゴと左下の要素をクリック可能にする。

• 「レビューを読む」のCTAをもっと見やすくする。

5.レイジクリックマップは、ユーザーがページ上でイライラし、何度も様々な要素をクリックしている場所を正確に特定するのに役立ちます。

価格ページのレイジクリックマップの例

お察しの通り、レイジークリックマップはページ上でレイジクリックが発生した場所を表示します。 レイジクリックはユーザーのフラストレーションの重要な兆候であり、コンバージョン率を妨げるイライラする体験を示しています。

レイジクリックマップ

料金表を見ると、レイジクリックパターンで目立つのは、各プランに含まれる機能に焦点を当てている点です。

それは、ユーザーがそれらの機能の意味を理解していないか、もっと詳細を知りたがっていることを示唆しています。 ユーザーは、各機能が同じページか別のページにある説明にリンクしていることを期待しているかもしれません。

なぜ、このユースケースでレイジクリックマップが有効だったのでしょうか？

このページで見られる レイジクリックのパターンは、料金ページのテーブルがユーザー体験の改善を必要としている可能性を示しています。考えられる対応策として、以下のようなものがあります：

• 情報をより見やすくする

• ユーザーがコピーの上にカーソルを置くと、情報の内容が表示されます。

• 情報をドロップダウンメニューに変更する

• 機能名を変更してより分かりやすく

• 機能へのリンクを追加することで、ユーザーをさらに下のページに誘導し、そこでより詳細な説明を参照できるようにする。

ユーザーの不満の対象をピンポイントで特定することで、レイジクリックマップはUX改善の機会を提供します。 そして、どのような変更がユーザーに最も響くかをABテストすることができます。

さまざまなタイプのヒートマップでより多くのビジネス成果につながるCX改善インサイトを得ましょう

各タイプのヒートマップの使い方がわかった今、実用的なユーザー行動のインサイトを収集することを妨げるものは何もありません。 プロダクトやウェブサイトのユーザー体験を向上させ、コンバージョンを増やすためのデータ収集を始めましょう。