手軽に始める、ウェブサイトのヒートマップでユーザーをもっと理解しよう

Beth Anne Kinnaird によるイラストレーション

ヒートマップは、サイトやアプリ上のユーザーの行動をカラースケールで表示するデータ可視化の手法です。ヒートマップを作成するソフトウェアを使用すると、企業は個々のウェブページがどのように使われているかをより深く理解できます。この定性的なデータがあれば、デザイナーはユーザーの体験の根底にある「なぜ？」をより深く理解して、継続した改善を行えます。

ウェブサイトのヒートマップは、ページのどのエリアが最も注目されているか、また見直す必要がありそうかを特定するために役立ちます。正しく使えば、ヒートマップを取り入れたデザインプロセスは大きな力を発揮します。この記事は、ビジネスへの貢献を最大化できるように、ヒートマップのテクニックを掘り下げます。

ヒートマップの原理

ヒートマップソフトウェアは、ウェブページからデータを収集し、どの領域がどの程度クリックされているかを、色のスケールを使用して表示します。一般的に、ユーザーが最も頻繁にクリックするエリアは濃い赤色で表示され、インタラクションが少ないエリアは青色で表示されます。この配色によるデータの視覚化は、多くのヒートマップで使用されていますが、ソフトウェアによっては他のカラースケールを使用するものもあるため、常に凡例をチェックして確認するようにしましょう。以下はヒートマップの一例です。

この視覚的な手がかりはパターン化が可能であり、訪問者がどのように振る舞っているのかについて、企業はより深い洞察を得られます。多くの場合に、訪問者の実際のページ上の行為は、デザイナーが訪問者のために準備した経路とは異なります。ヒートマップは、訪問者の特定のページ上での振る舞いについて、曖昧さを解消する効果があります。

ヒートマップを使う理由

調査には、定量的なものと定性的なものがあります。Google Analytics のような定量的な分析ツールは、「x 人」がウェブサイトに来て、「y 人」がコンバージョンし、そのために「z 分」費やしたといった具体的で定量的な数字を与えてくれます。アンケート、カードソート、A/B テストなど他の定量分析ツールも、製品の使いやすさを数値化し、異なるデザインを比較するための具体的な数字を提供します。これらの定量的なツールが扱えないのは、訪問者の行動の背後にある理由です。この欠けている定性的なデータが必要になる時が、ヒートマップの出番です。

ここで、ヒートマップの使い方を理解するために、一般的なヒートマップの使用例をいくつか見てみましょう。

1. よりユーザーフレンドリーな UI へのデザイン修正：継続的にデザインを改善する企業では、何が効果的で、何が改善できるかという洞察を得るのに、ヒートマップが役立ちます。ウェブデザインのベストプラクティスを解説する記事はたくさんあります。一旦デザインが決まったら、ヒートマップはデザインを訪問者がどのように扱っているかを理解するための手段になります。
   
   CTA のコピー、コンテンツの配置、カラースキームの選択などの調整を行ったときは、ヒートマップを比較すると、その成果を測定できます。対象ユーザーに何が最も効果的かを発見したら、それをデザイン全体に再利用して、コンバージョンとエンゲージメントを高められます。

2. 登録者の増加： 登録者の増加がビジネス目標であれば、ヒートマップの使用は賢い選択です。多くの場合に、フォームの要素や配置が異なると、登録状況に直接的な影響がでます。企業によっては、サイトからの申し込みが主要な営業チームのリードとなる場合もあるでしょう。
   
   例えば、SEO の効果でウェブサイトが高いトラフィックを獲得しているのに申し込みが少なかったら、その理由をどのように説明できるでしょうか？ヒートマップは、訪問者がどこをクリックしているかを示します。ページ内で最も人気のあるセクションを特定し、そのエリアの一部に申し込みフォームを埋め込めば、訪問者の誘導効果を高められるかもしれません。

3. 直帰率を下げる： 直帰率を下げることが目的の場合でも、ヒートマップは素晴らしい選択肢になることがあります。ヒートマップはウェブサイト上で訪問者の妨げになっているものを特定するのに役立ちます。さらに、コンテンツの配置を最適化や、直帰率を下げるために効果的なコンテンツの種類を理解するヒントにもなります。

4. ナビゲーションのズレを修正する： ウェブサイトのナビゲーションが訪問者のメンタルモデルに合っていない場合、ヒートマップはその個所を検出するための洞察を与えてくれます。訪問者が実際に何を探しているかを見つけ出して、こうしたズレを解消するためにも、ヒートマップは役立ちます。

5. A/B テストの結果を理解する： ウェブサイトの 2 つのバージョンを比較する場合、ヒートマップは、それぞれのパフォーマンスが異なる理由を与えてくれます。ヒートマップを分析すると、訪問者がそれぞれのデザインにどのように反応し、ナビゲートしているかがわかります。この比較は、デザイナーが一方の体験が他方より優れている理由を理解するのに役立ちます。

ヒートマップから学べること

ヒートマップからは数多くの定性的な洞察を得られます。ですが、ヒートマップを使い始めた頃は、その方法があまり明らかではないかもしれません。

ヒートマップを分析するときは、以下のような質問をしてみましょう。

1. どの見出しやバナーがより多くの訪問者をコンバージョンしたか？

2. どの画像が注目を集めたか？訪問者はリンクされていない画像をクリックしたか？

3. 訪問者は検索オプションを簡単に見つけられたか？

4. 画像とテキストのどちらがより多くクリックされたか？

5. 訪問者はサイドバーのコンテンツを操作したか？

6. 訪問者はコンテンツを読んでいるか、ただスクロールしているだけか？

ヒートマップの様々な種類

ヒートマップの基礎を説明したところで、次は、ヒートマップの様々な種類を紹介します。

クリック追跡ヒートマップ：この最も伝統的なタイプのヒートマップは、訪問者がページ上で行ったインタラクションを視覚的に表現します。訪問者のクリックは一定期間記録され、累積的な訪問者の行動が表現されます。クリック追跡ヒートマップは、エンゲージメントの増加を暖色で示し、その反対を青色で示します。

クリック追跡ヒートマップの一般的な使い方の一つは、CTA のクリック率が低い原因が、欲求の欠如か、ページでの見つけにくさかを判断することです。あるいは、訪問者はクリックできない要素をクリックしようとしているかもしれません。

スクロールマップ：このタイプのヒートマップは、訪問者のスクロールを記録します。これにより、訪問者がページやサイトを離脱する前にどこまでスクロールしたかを正確に把握できます。

この結果は、デザイナーが、ページの長さが訪問者のユーザー体験に理想的かどうかを理解するのに役立ちます。離脱前に訪問者がどこをスクロールしたかを理解することは、将来のデザイン判断の指針になります。サイトからの直帰は、魅力的なコンテンツの欠如が原因かもしれません。A/B テストでコンテンツを変えたときの差を検証するのにもスクロールマップは役立ちます。

マウス追跡ヒートマップ：このタイプのヒートマップは、訪問者のマウスの動きを追跡します。訪問者が最も頻繁にカーソルを移動するエリアと最も注目されないエリアを特定するのに役立ちます。訪問者が体験を通してどのようにマウスを移動したかを追跡することは、CTA ボタンなどを配置するのに最適な場所の特定に役立ちます。

オーバーレイとリストレポート：オーバーレイとリストヒートマップは、ウェブサイトの各要素がクリックされた割合を生成します。要素を視覚的に分解し、ページ上の総クリック数に対するクリック数の割合を要素ごとに表示します。これにより、どの要素が訪問者にクリックを促しているかを正確に把握できます。

オーバーレイレポートでは、ページ上の特定の要素の横に注釈が表示されます。これらの注釈には、クリック率以外にも、特定の要素に関する他のデモグラフィック情報が含まれることがあります。

リストレポートはオーバーレイレポートに似ていますが、情報がリスト形式で表示されます。そのため、ニーズに合った方法で情報を並べ替えて、データの傾向を特定できます。

視線追跡ヒートマップ：この技術は、ウェブページを体験する訪問者の視線の動きを追跡します。データのプロットには、一般的なヒートマップと同じカラースケール方式が使われます。訪問者がナビゲートする際にどこを見ているかを正確に知ることは、ビジネスに様々に役立ちます。例えば、どのパターンを継続して使用するべきで、どれを廃止すべきかを判断できます。もし訪問者の視線がページの中心に引き寄せられる傾向があるなら、そこに最も重要な要素を配置すべきだと分かります。一方、訪問者が右のサイドパネルにほとんど目をやらないのであれば、そこに CTA を配置するのは避けたいと思うでしょう。

視線のスキャンパターンは、コンバージョンに最も影響を与える要素を配置すべき場所を知るのに役立ちます。視線追跡はヒートマップの中では高価な手法です。アイトラッキングの実際の機能を知るには、特別なソフトウェアや視線追跡メガネといった周辺機器に投資する必要があることに留意しましょう。

手頃なヒートマップ作成ソフトウェア

ヒートマップを作成するために、必ずしも多額の予算を用意する必要はありません。ビジネスニーズに合わせ、無料または手頃な価格のサービスもいくつかあります。

• Crazyegg は、ヒートマップ、スクロールマップ、ユーザー記録、A/B テストが専門です。
• Mouseflow は、クリック、スクロール、マウスの動き、フォームなどをトラッキングするのに便利です。フォームエラー、データが空白のままの送信、パターンなどうぃ測定します。
• Hotjar は、ウェブサイトのユーザー体験とコンバージョンを改善するための分析とフィードバックツールの組み合わせです。
• Motamo は、A/B テスト、ユーザー記録、その他のリアルタイムデータを提供し、ユーザー体験、コンバージョン、最適化指標の評価を可能にします。
• Inspectlet は訪問者の行動を動画で記録し、マウスの動き、スクロールのパターン、キーの押し方などを追跡します。

ヒートマップの限界

この世界の多くのものと同じように、ヒートマップが提供できる情報には限りがあります。ヒートマップは効果的ではありますが、考慮しなければならない点もあります。ここでは、ウェブサイトのヒートマップに関する 5 つの主要な制限を紹介します。

1. ヒートマップは、訪問者がサイトのあるエリアで悪戦苦闘していることを示唆していても、実際には、部屋の中にいる誰かに邪魔されていたり、チャットや e メールに気を取られているのかもしれません。このような邪魔のために訪問者が何度もクリックした場合、不正確なヒートマップができることになります。ヒートマップでは、サイトでのユーザー体験以外の邪魔が考慮されません。

2. 単純に訪問者がクリックしなかったというだけで、訪問者が興味を持たなかったとは限りません。人の興味を示す要素の中には、ヒートマップでは測定できないものもあります。

3. ヒートマップは、ページがダイナミックに変化する体験ではうまく機能しません。一般的に、JavaScript を多用したウェブページは、ヒートマップで評価することが困難です。

4. ヒートマップは要素を覆い隠します。そのため、どの要素が注目されているかを知るのが困難になります。特にウェブサイトに慣れていない人は、赤い色がどの要素を隠しているかを特定するのに苦労するかもしれません。

5. レスポンシブデザインと様々な画面解像度が存在する現在、固定されたアスペクト比を想定して設計されたデータ可視化手法は不正確な結果を生み出します。ヒートマップは、訪問者をアスペクト比ごとに集計しますが、それらを組み合わせて視覚化するのは困難な作業です。ヒートマップ作成ソフトウェアがクリックされた位置を標準化した結果、不正確なビジュアライゼーションに基づいて判断を行うことになる可能性があります。

おわりに

ヒートマップは、ウェブサイトの質的データを評価する際に利用できる強力なツールです。ヒートマップは、訪問者の行動の背後にある理由について、貴重な洞察を提供します。この洞察は、ユーザー体験を向上させ、コンバージョンを増加させるための、デザインに関する判断を導いてくれます。

この記事は Website Heat Mapping On a Budget – How & Why（著者:Justin Morales の抄訳です