ヒートマップ

【Tips】ヒートマップ機能について①~クリック・スクロール編~

今回はMouseflowのメイン機能であるヒートマップについて、改めて機能をご紹介するとともにその効果的な活用方法についてもお話したいと思います。
Mouseflowのヒートマップには、以下の4つの種類があります。

  1. クリック
  2. ムーブメント
  3. スクロール
  4. アテンション

今回はこの中の「クリック」と「スクロール」についてご紹介します。

・クリックヒートマップ

これはページ内のどの部分がクリックされているかをサーモグラフィー状に表示するヒートマップです。

ページ内のボタンがそれぞれどれぐらいクリックされているか、ユーザが最も関心がある、あるいは頻繁に使用しているコンテンツは何かを確認できるだけでなく、クリックできない箇所や意外なコンテンツがクリックされていたりなど、ユーザの予期せぬ行動を検知することもできます。

・スクロールヒートマップ

ユーザがページのどこまでスクロールしているかを可視化するヒートマップです。

一般的に、ページを下にスクロールするにつれてユーザの関心は減少していきます。
スクロールヒートマップではページの重要なコンテンツ部分までどれだけのユーザがスクロールしているのか表示されるだけでなく、平均的なページの折り目部分、つまりロード時にページが途切れる場所も表示されます。
そのため、各デバイスタイプごとに確認することが重要です。

この2種類のヒートマップはそれぞれを単体で確認するのではなく、2つを掛け合わせることでより効果的なUXの検証を行うことができます。
クリックヒートマップとスクロールヒートマップは、ともにユーザの【行動】を示しています。
そのため、クリック率の高い場所とスクロール率の高い範囲が一致している状態が最適と考えられます。
つまり、多くのユーザにクリックされている場所はスクロール率の高い範囲に収まっていて、且つどのデバイスタイプでもページの折り目より上に配置されていなければなりません。

例として、弊社Webサイトを見てみましょう。

ヘッダーだけでなく、フッターのカテゴリー一覧の中でも「会社概要」が非常に多くクリックされています。
また採用ページへのリンクも、ページ最下部にありながら比較的クリック率が高いようです。
しかし、スクロール率で見るとページ最下部までは全体の10%しか到達していません。
このことから、弊社Webサイトのトップページを訪問したユーザの関心は「会社概要」と「採用情報」であり、この2つは近い場所に配置したほうがよいこと、そして採用コンテンツはもっとページ上部に配置してもいいのではないか?というアイデアが浮かびます。

みなさんもぜひ、ご自身のWebサイトで試してみてください!新たな視点が生まれるかもしれません。
次回はムーブメントとアテンションについてご紹介します。

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. ヒートマップ

    Mouseflowの新機能:ライブヒートマップで動的なヒートマップ分析が可能に!

    mouseflowのヒートマップに新機能が追加されました!その名も「…

  2. ヒートマップ

    ユーザビリティの検証で気を付けたいこと、やってはいけないこと③

    ユーザビリティ検証の注意点と禁止事項について、前回の続きからご紹介しま…

  3. ヒートマップ

    クリック・ヒートマップの使い方

    個々の訪問者の行動を分析するにはセッション・リプレイが有効ですが、もっ…

  4. Mouseflow

    mouseflow の フリクションイベント って何?

    Webサイトの訪問者は、様々な理由でコンバージョン[閲覧者による収益…

  5. ヒートマップ

    ユーザビリティの検証で気を付けたいこと、やってはいけないこと①

    今回から何回かに分けて、ユーザビリティ検証で気を付けたいこと、やっては…

  6. ヒートマップ

    ムーブメント・ヒートマップ

    以前の記事で、ページの全体的な傾向を掴むには、レコーディングを一つ一つ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. モダンデータスタックなワークフローオーケストレーションツール…
  2. Streamlit in Snowflakeによるダッシュボ…
  3. Streamlit in SnowflakeによるStrea…
  4. Streamlitを使った簡単なデータアプリケーション作成ガ…
  5. 生成AI機能を活かしたデータカタログ製品「Secoda」を試…
  1. Amazon Web Services

    System Managerを利用したVPC内Redshiftへの接続
  2. ブログ

    ④DMPについてーOracle DMP
  3. KARTE

    KARTE:カスタムイベントでページの要素を取得して接客を出す
  4. Adobe Analytics

    Adobe Analytics: VisitorAPIでSafariでもクロスド…
  5. Adobe Analytics

    Report&Analytics グラフについて
PAGE TOP