ECサイトのヒートマップ分析例 導入から活用までを解説していきます。
ECサイトにおけるヒートマップの活用
ECサイトでは、商品ページやカテゴリーページのユーザー行動を分析することが重要です。
ヒートマップを使用することで、どの商品が最も注目されているか、どの部分が無視されがちかなど、貴重な洞察を得ることができます。
これらの情報は、商品配置の最適化や、ユーザー体験の向上に直接役立ちます。
1：はじめに ヒートマップ分析の重要性
ECサイト運営において、ユーザーの行動を理解することは極めて重要です。
ヒートマップ分析は、この理解を深めるための強力なツールです。
ユーザーがサイト上でどのように行動しているかを視覚的に捉えることで、改善点を明確にし、より効果的なサイト設計へと導きます。
2. ヒートマップとは？
ヒートマップの基本的な定義
ヒートマップとは、ウェブサイトの特定ページ上でユーザーの行動を色の濃淡で表現した図です。
色が濃い部分はユーザーの活動が集中しているエリアを、薄い部分は比較的少ないインタラクション（ユーザーとサイトの相互アクション）を示します。
この視覚的な表現により、ウェブサイトのどの部分が最も注目されているか、または無視されているかを理解するのに役立ちます。
ヒートマップの種類
- クリックマップ： ユーザーがクリックした箇所を示し、どのリンクやボタンが最も人気があるかを把握できます。
- ムーブマップ： ユーザーのマウス移動を追跡し、彼らがページ上でどのように移動しているかを示します。
- スクロールマップ： ユーザーがどこまでスクロールしたかを示し、ページのどの部分が最も注視されているか、あるいは無視されているかを理解できます。
3. ヒートマップ分析方法
ツールの選定
ヒートマップ分析を行う際には、適切なツールの選定が重要です。
多くのツールが市場に存在しますが、それぞれに特徴があります。
選定の際には、ツールの機能性、使いやすさ、価格などを考慮する必要があります。
ヒートマップにアンケート機能がついているものもあり、付加サービスで導入を検討するケースもあります。
ヒートマップシステム導入前の検討
有料のシステム導入前に、「現在の1dayの平均PVで1ヶ月単位で分析するなら、このコストは捻出しても問題ないか？」と検討してみてください。
データ収集
ヒートマップツールを設定した後、実際のデータ収集に移ります。
この段階では、特定のページやユーザーセグメントに焦点を当て、十分なデータ量を確保することが重要です。
分析の実施
データが集まったら、分析を行います。
ヒートマップを通じて、ページ上のユーザーの挙動を視覚的に把握し、どのエリアが注目されているか、どのエリアが改善が必要かを判断します。
この分析は、サイトのナビゲーションの改善、コンテンツの最適化、コンバージョン率の向上に直結します。
3.5 無料ツール Microsoft Clarityの活用
Microsoft Clarity – Free Heatmaps & Session Recordings
Microsoft Clarityの概要
Microsoft Clarityは、ユーザーの行動を追跡し、分析するための無料のツールです。
このツールは、ECサイト運営者にとって貴重なリソースであり、ヒートマップ、セッション録画、ユーザーインサイトなど、多岐にわたる機能を提供しています。
なぜMicrosoft Clarityを選ぶべきか
「ヒートマップ 無料」のオプションを探している場合、Microsoft Clarityは理想的な選択肢です。
ユーザーインターフェースが直感的で、セットアップが簡単なため、技術的な専門知識がないユーザーでも容易に利用開始できます。
また、リアルタイムのデータ分析を提供し、サイトの問題点を迅速に特定することが可能です。
無料のツールから利用を開始し、分析に慣れた時点で他のツールの機能比較をしていくと、無駄なコストを抑え、製品やサービスの評価をすることができます。
Clarityでできること
- ヒートマップ分析： ページのどの部分が最も注目されているか、または無視されているかを視覚的に理解できます。
- セッション録画： 実際のユーザーのセッションを録画し、行動パターンを分析することができます。
- ユーザーインサイト： ダッシュボードを通じて、サイト訪問者の行動傾向や流入経路などを分析します。
Google Analyticsとの連携
- 数値データとユーザー対話の組み合わせ： ClarityとGoogle Analyticsを接続することで、数値データだけでなく、ユーザーのサイトとの対話方法も確認できます。
- GDPRとCCPAに対応： サンプリングなしで、プライバシーに配慮した分析を実現。
- セグメントのレコーディング視聴： セグメントは自動的にインポートされ、設定は数クリックで完了します。
- 目標の改善： Google Analyticsの目標に関連するセッションの探索と、それに伴う記録とヒートマップの表示。
Microsoft Clarity – Free Heatmaps & Session Recordings
4. ヒートマップ分析の観点
ユーザー行動パターンの識別
ヒートマップ分析を通じて、ユーザーの行動パターンを識別します。
どのエリアが最も注目され、どのエリアが無視されているかを理解することで、ユーザーの興味や嗜好を深く知ることができます。
高インタラクションエリアと低インタラクションエリアの特定
サイト上の高インタラクション（多くのクリックやマウス移動があるエリア）と低インタラクション（少ないインタラクションのエリア）を特定します。
これにより、改善が必要な領域と、既に効果的に機能している領域が明らかになります。
改善点の発見
ヒートマップの分析を基に、サイトのナビゲーションやコンテンツ配置の改善点を発見します。
これには、ユーザーが重要な情報やアクションボタンを見逃している場合の改善策の検討が含まれます。
5.ケーススタディ
ここでは、弊社の分析業務からの実例を主に掲載していきます。
◯％改善という表示をする解説もあると思いますが、その瞬間はその数値だっただけだと思います。
同じサイトを長年分析すると、当時良かった改善も廃れてきます。
そのため、効果のあった改善点を列挙するだけに留めます。
-
CTAの変更: カートボタンのクリックが少なかったため、CTA（コール・トゥ・アクション）をより直接的な文言、「購入する」などに変更しました。これにより、購入への道筋が明確になり、変換率の向上が期待されます。
-
ボタンデザインの調整: クリックが多くされる場所の周囲もクリックされていることから、ボタンが押しにくいとの仮説を立て、ボタンを全幅に変更しました。これにより、ユーザビリティが向上し、より多くのクリックが期待できます。
-
コンテンツの簡素化: スクロール率が高いことが、一画面に要素が収まっていないためと仮説を立て、商品詳細の説明をシンプルにし、画面の縦幅を縮めました。これにより、見せたい要素が一画面に収まり、情報の見落としを防ぐことができます。
-
レビューの掲載内容変更: スクロール率がレビューで数%下がっていることから、広告内容とレビューの内容が合致していないとの仮説を立て、レビューの掲載内容を変更しました。これにより、ユーザーがより関連性の高いレビューを読むことができます。
-
背景色の変更: ユーザー行動のレコーディングを見ると、目立たせたいコンテンツやその周辺での行動がスクロールで飛ばされていることが判明したため、サイトの背景色を白やシンプルな色に変更し、重要な要素が強調されるようにしました。
-
技術的な問題の修正: ユーザーのフラストレーションが検出され、「タップ・クリックの連打」が見られたため、サイトを確認し、特定のデバイスでサイトのボタンが動作していない問題を修正しました。
これらの改善策は、ヒートマップ分析に基づく具体的な行動から導かれたもので、ユーザーエクスペリエンスの向上とコンバージョン率の増加に寄与することが期待されます。
特にユーザーの不満があるかを見ていくのは、単にシステムが立ててくれるフラグだけを見るのではなく、レコーディングをひとつひとつ見ていくことで、気付きが多く得られれます。
レコーディングを見ることは、ユーザーにサイトの使い勝手をヒアリングするのと同じですからね。
重要なのは「仮説」
注意してほしいことがあります。
サイト改善をする際に最も重要なのは、あなたのサイトとプロダクト独自の特性を考慮することです。
行動心理学やビッグデータに基づく知見は非常に価値があるものですが、それだけを真似ても、必ずしもあなたのサイトに最適な結果をもたらすとは限りません。
たとえば、ヒートマップ分析の本に書かれている「ファーストビューのレイアウト改善方法」をそのまま適用することで、成果が出ることもありますが、その時点では偶然の成果率改善です。
まず、あなたのサイトのユーザーがどのように行動しているかを理解する必要があります。
ユーザーが最も注目しているのはどの部分か、どの要素に反応しているのか、またどの情報を求めているのか。
これらのデータをもとに、サイト固有の最適化戦略を立てることが重要です。
仮説があって、それを実証するから、偶然が必然になります。
例えば、あなたのECサイトが高級家具を販売している場合、ファーストビューには製品の高品質な画像と、ブランドストーリーを伝える短いコピーが最適かもしれません。
高級家具の中でも、直近で人気のある家具を紹介するべきか、ニッチなものを紹介して訴えかけるべきか、そうした部分はマーケティング戦略で変わってきます。
ターゲットによっては搬入費用が気になるかもしれませんし、新商品購入と同時に既存の家具を処分したいのかもしれませんね。
重要なのは、一般的なベストプラクティスに盲目的に従うのではなく、自サイトの特性に合わせたカスタマイズを行うことです。
あなたのサイトとプロダクトだけの勝ち筋を見つけるためには、データを深く掘り下げ、ユーザーの行動と反応を注意深く分析する必要があります。
このように、あなたのECサイトにとって最適な改善方法を見つけるためには、一般的なガイドラインに加え、自サイト固有のデータとユーザーの行動パターンに基づいた戦略が必要です。それこそが、真の成果への道を切り開く鍵となるでしょう。
よくある分析担当者の間違い
無計画なデータ分析は危険性が高いというお話です。
分析を行う際、よくある間違いの一つが、仮説を立てずにいきなりデータを見始めることです。
仮説が無く、データを見始めてしまうと、自分に都合の良い数値を見つけてしまいます。
「ここが悪いんだ」と思い込めば、どんな数値は悪く見えますし、「良い」と思い込めばどんな数値でも良い点を探してしまいます。
分析者は意識的であれ無意識的であれ、自分に都合の良い数値を探してしまう可能性が高いです。
人間は無関係な事象にも、つながりを見つけるのが得意です。
雨が降った日に財布を拾ったら、恵みの雨なのだ…などと思ってしまうのです。
例えば、「この部分が問題だ」と思い込むと、その考えを裏付ける数値ばかりを見つけようとし、逆に「ここはうまくいっている」と思い込むと、良い点ばかりを探してしまいます。
偏った感情で分析をスタートするのではなく、事実に基づいた仮説を事前に立て、フラットな感覚で分析をしてください。
偶然の出来事に意味を見出す人間の習性
私たち人間は偶然の出来事に、意味やパターンを見出そうとする傾向があります。
これは、人間の脳が無秩序やランダム性を好まず、物事の間に論理的なつながりを求める性質に由来します。
この認知バイアスは、日常的な状況だけでなく、科学的な研究やビジネス分析においても影響を及ぼす可能性があります。
全ての事象が説明できるというのも傲慢な考え方です。
分析をしていると、3割から4割程度の「理由がわからない現象」も起こります。
そこで「わからないことに無理やり理由をつけない」のが、分析のコツです。
他社の事例
他社の有力な改善事例を合わせてご紹介します。
4 Heatmap Case Studies & Success Stories For Inspiration より抜粋
Taskworldの変換率40%アップ
- 背景: Taskworldは、サインアップページを通じてリードをユーザーおよび顧客に変換することに依存していました。
- ヒートマップ分析: 主要な「サインアップ」CTAよりも「サインイン」リンクがより多くクリックされていること、フォームフィールドへの注目度が途中で低下していること、タイムゾーン選択フィールドが無視されていることが明らかになりました。
- 改善策と結果: サインインオプションの削除、ページの再構成、フィールドの簡略化を行い、結果として変換率は40%増加し、プロセス中のドロップオフは4.5%減少しました。
Bannersnackによるサインアップの最適化
- 背景: Bannersnackは、ウェブ分析ツールを使用していましたが、ユーザーの実際のサイト内行動が不明確でした。
- ヒートマップ分析: ホームページに配置されたヒートマップは、人々がメインCTAよりも追加のページ要素とより多くの相互作用をしていることを示しました。
- 改善策と結果: より大きなCTAボタンとコントラストの増加に基づいたテストを実施し、サインアップが25%増加しました。
4 examples of website heatmap analysis | NerdCow より抜粋
1. NerdCowによるヒートマップ分析の4つのパターン
- 分析対象: NerdCowチームは、8つのランディングページに対する26,228回の訪問を分析しました。
- 発見された4つのパターン:
- 視認性の低いがクリックの多い要素: これらの要素をページの上部に移動することを検討する。反対に、多くの視線を集めるがほとんど相互作用がない要素も存在する。
- 「真のクリック率」の利用: 特定のセクションが100回クリックされたが、25%の人しかそのセクションを見ていない場合、それは80%の人が見た200回のクリックよりも人気があることを意味する。
- デッドクリックの修正: SaaS企業に特に重要。Microsoft Clarityなどのツールを使用してデッドクリックの位置を特定する。
- 変換を目指すランディングページ: 広告が「熱い」リードを引き付けている場合、人々はページを探索せずに直接変換する。
2. Surgeによるヒートマップの種類とその利用
- ヒートマップの概要: クリックの多いエリアが明るく表示されることで、どのエリアが最もクリックされているかを示す。
- ヒートマップの種類:
- マウスムーブメント: ユーザーがページを読み、ナビゲートするパターンを示す。A/Bテストにおいて有用。
- スクロールマップ: ユーザーがどこまでスクロールしたか、そしてページのどこで離脱したかを示す。特に長いコンテンツに適している。
- クリックマップ: ユーザーがページ上で最もクリックした部分を示す。ページから気を散らす要素を取り除き、ユーザー体験を向上させるのに役立つ。
- CROへの貢献: ヒートマップは、ユーザーのブラウジング決定に関する多くのデータを提供し、CTAの改善に不可欠。
CRO（Conversion Rate Optimization）
CRO（Conversion Rate Optimization）は、「コンバージョン率最適化」と訳され、ウェブサイトやランディングページなどのオンラインプラットフォームで、訪問者を顧客やリードに変換する割合を高めるための戦略やプロセスを指します。
具体的には、ウェブサイトのデザイン、コンテンツ、ユーザー体験（UX）などを改善し、訪問者が特定のアクション（例えば、製品の購入、メールリストへの登録、問い合わせの送信など）をとる確率を高めることを目指します。
CROの主な目的は、既存のトラフィックをより効果的に活用し、マーケティングのROI（投資収益率）を最大化することです。
これには、A/Bテスト（異なるバージョンのページをテストして最適なものを見つける）、ユーザー行動の分析（ヒートマップの使用など）、ページのローディング速度の改善、CTA（コール・トゥ・アクション）ボタンの最適化など、様々な手法が含まれます。
6.ヒートマップ分析時に注意すべきこと
データ収集期間
毎日のPVに関係します。
低すぎる平均PVでは、ひとりひとりのユーザーの動きに大きく数値が引っ張られてしまうことで、分析結果が偏りやすくなります。
これは、分析上の外れ値にも分析内容が引っ張られやすくなることなので注意が必要です。
およそ1週間の測定が必要と仮定しています。
これは、特定の曜日に起こる数値変動を加味しています。
業界によっては、水曜日が売れないなどの法則が働くためです。
1日のPV
測定結果を分析するには、ある程度のPVが必要です。
ある程度のPVとは、一日400PVと仮定しています。
簡単な根拠は以下。
- 分析の軸にしていたヒートマップツール会社から勧められた
- 過去の駆け出しのクライアントサイトの分析業務で、サイト構築序盤に平均400PVは狙って作れるちょうどいい数値
このちょうどいい数値というのは、SNSなどで集客をかけると、全く知識のない人で少額でも200PVくらいが流れてきます。
その他の集客手段と合わせて、300PV程度は天然で作れてしまうことが多く、狙ってPVを作る際に1day400PVと伝えるようになりました。
最低PV数
最低PV数は目的、業界によって異なる場合があります。
それでも、一般的には大きなサンプルサイズ（分母が大きい）が推奨される傾向があり、これには統計学的な根拠も多く存在します。
ただ、分母のデータが大きすぎても見落としが出て、判断を見誤るため、特定の期間で分析することを推奨します。
大きいPV数値で分析が難しくなった実例
- 販促キャンペーンが予想以上に効果が出た
- SNSでのバズ
- メディアで急に取り上げられた（無許可掲載のため予測ができない）
セグメントを無視できるか確認
ユーザー属性をセグメントと表現します。
ユーザー区分、ユーザーのグループ分けといったほうがわかりやすいかもしれません。
弊社の場合、サイト改善コンサルで改善点の頭出しができている段階で、ヒートマップ分析となります。
そのため、ユーザーセグメントが明確になっていることが前提となり、集客サポートもしていれば全体が似たセグメントのユーザーとなっているため、あえてセグメントを細分化して分析するケースは少なくなっていきます。
マーケティングとセグメント
ユーザー属性は、ヒートマップ分析だけでなく、マーケティング戦略においても重要な要素です。
特定のユーザーグループがどのような行動を取るかを理解することは、UI改善、UX改善、商品説明の修正、マーケティング戦略の全体最適化などに非常に有用です。
セグメントを無視できる場合
一般的な目的: ウェブサイトやアプリが非常に広範な目的で使用される場合
初期フェーズ: プロジェクトが新しく、まだ多くのデータが集まっていない場合
限られたリソース: 分析力や技術的なリソースが限られている場合
セグメントを無視するリスク
誤解: セグメントを無視すると、全体の平均値しか見えなくなり、特定のユーザーグループのニーズや問題点が見過ごされる可能性があります。
ただ、この問題は分析に慣れている人材だと、自然に気が付きます。
女性向けのプロダクトを扱っているのに、男性ユーザーの注文が多ければ、さすがに誰でも異変に気がつくものです。
弊社の場合、個人情報保護の観点から、クライアントサイトの注文履歴などを確認することはないものの、想定したセグメントと違うユーザーには、案外サイト上の動きだけで気が付きます。
※ヒートマップのレコーディング機能等でも気がつく
機会損失: セグメントごとの分析を行うことで、新たなビジネス機会や改善点が明らかになる場合があります。
結論として、セグメンテーションは多くのケースで重要な手法ですが、特定の状況下で無視することも考慮に入れるべきです。
しかし、その場合でも上記のようなリスクが伴う可能性が高いため、現在のビジネスの状態や状況に応じて慎重な判断が必要です。
クリック分布の確認
サイトページのどの構成要素が多くクリックされているか？
予想外にクリックされているエリアがないか？
クリック数とクリック率をチェック
- CVに繋がるボタン
- 新規挿入したクリック可能な画像要素
- よくある質問などの商品購入に関する補足内容
- クリックできない要素
CVに繋がるボタン（CTA）
商品購入やお問い合わせに繋がる導線です。
ボタンは、挿入箇所を増やすことも検討してください。
ボタンも、ヒートマップで押されている箇所をチェックしています。
ボタンの周辺がクリックされている場合は、押しづらいのかもしれません。
ABテストをしながら、大きさ、色、CTA文言、上下左右の位置、もチェックしていくと、ヒートマップ分析の効果が実感できます。
クリックできない要素のクリックを改善
弊社で重要視しているのが、クリックできない要素を作らないことです。
クリックできると思ってクリックできなかった＝不満と捉えることができます。
- デザインがクリックできると勘違いさせていないか
- クリック要素の間にある場合は位置が正しいか
あまり多くの分析観点を持ちすぎないことも大切です。
ユーザー目線の、より単純な視点で分析することが成功への近道になります。
クリック要素とFittsの法則
Fittsの法則（Fitts’s Law）は、人間の運動学に関する予測モデルの一つです。
特に人間がマウスやタッチパッドを使ってサイトページ上のターゲット（例：ボタン、リンク、アイコンなど）に到達するための時間を予測するものです。
デザインとFittsの法則
Fittsの法則は、ユーザーインターフェース（UI）の設計において非常に有用です。この法則を適用することで、デザイナーは以下のような洞察を得ることができます。
- よく使用されるボタンやリンクは、よりアクセスしやすい位置に置く。
- ターゲットが小さい場合は、それを大きくするか、他の要素から離して配置する。
- メニューやナビゲーションの設計において、よく使用される項目を容易にアクセスできる位置に置く。
以上のように、Fittsの法則はユーザーエクスペリエンス（UX）を向上させるための重要なガイドラインとなる場合があります。
7.スクロール率の改善方法
ページのユーザー注意を引き付ける
ウェブサイトのスクロール率を高めるためには、ユーザーの注意を引き付け、ページ全体を閲覧させることが重要です。
縦に長いランディングページの場合、スクロールマップのデータを使用して、ユーザーがページ全体を見るようにUXデザインやコピーを調整することができます。
これにより、サイト離脱を減少させ、コンバージョン率を向上させることが可能です。
「偽のボトム」の識別
訪問者がページ下部に更なるコンテンツがあることに気づかないことがあります。
これは「偽のボトム」と呼ばれ、ホワイトスペースや改行、ブロックによって引き起こされる場合があります。
スクロールマップのパーセンテージを使用してページを「深度テスト」し、特定の要素を過ぎてどれだけの人がスクロールするかを確認することができます。
注意点として、「ホワイトスペース」「改行」「ブロック」が不要ではありません。
稀にこの無駄を完全排除するWEB担当者を見かけますが、適切な位置に区切りはあるべきです。
データ分析を長年やっていると、この「気持ちのいい区切り」がCVにつながることがわかります。
コンテンツとコンテンツの間には、適切な隙間が必要であり、ユーザーにとって興味のない内容がどこで終わっているのか、視覚面からユーザーにガイドする必要性があります。
「上部折り目」でのコンテンツ表示の確認
ウェブページの「上部折り目」とは、多くの人が着地時に最初に目にするエリアのことです。
ファーストビューですね。
スクロール率の分析は自動的にページの平均折り目を計算し、重要な要素（例えばアクション呼び出し）を複数のデバイスで効果的に表示するための配置を検討するのに役立ちます。
ユーザーの多くのデバイスで、最初に出ている画面はどこまでなのか、スクロールしなければ見えない要素はどこからなのかがわかれば、続きのコンテンツにユーザーの興味を惹ける可能性が高まります。
上部折り目
「上部折り目」という表現は、英語で “above the fold” に相当します。
この言葉は、新聞の折り目より上の部分、つまり最初に見える部分を指す古い用語から来ています。
ウェブデザインにおいては、ユーザーがスクロールする前に画面に表示されるコンテンツの領域を指します。
このエリアは、ユーザーがランディングページやウェブサイトにアクセスした際に最初に目にする部分であり、重要な情報やアクション呼び出しを配置するのに適した場所です。
ユーザーが必要な情報を見つけられるかの判断
スクロールマップを使用してページを最適化する際の目標は、可能な限り多くの人にページの下部までスクロールさせることではありません。
ユーザーが必要なコンテンツを見つけることができないためにスクロールすることがあります。
ページが良好なクロスデバイス体験を提供しているかの確認
ユーザーはデスクトップとモバイルで異なる挙動を示すことがあります。
レスポンシブウェブサイトを最適化する場合、スクロールヒートマップは、ユーザーがデスクトップとモバイルでスクロールを停止する場所を示し、すべてのユーザーに対応するマルチデバイス体験を設計するのに役立ちます。
基本的にはモバイル、スマートフォン向けのページを最適化していくことになるはずですから、PC向けデザインを軽視するサイトもあります。
しかし、多くのユーザーを獲得していくと、PCユーザーがわずかに存在していることにも気が付きます。
それがたとえ全体の１％だったとしても、全体のアクセスが1万PVの中の1％だったら？10万PVの1％だったら？と、デスクトップのサイトデザインは、サイトが成長する毎に重要度が増してきます。
6. まとめ
本記事では、ECサイトにおけるヒートマップ分析の方法とその重要性について詳しく説明しました。ヒートマップは、ユーザーの行動パターンを視覚的に捉え、サイトの改善点を特定するための強力なツールです。特に、無料で提供されているMicrosoft Clarityのようなツールは、ECサイト運営者にとって非常に有用です。このツールを利用することで、ユーザーエクスペリエンスの向上、コンバージョン率の増加、そして最終的には売上の向上を目指すことができます。
当サイトはリンクフリーです。
ご自身のブログでの引用、TwitterやFacebook、Instagram、Pinterestなどで当サイトの記事URLを共有していただくのは、むしろありがたいことです。
事前連絡や事後の連絡も不要ですが、ご連絡いただければ弊社も貴社のコンテンツを紹介させていただく可能性がございます。
