ヒートマップ

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

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

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

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

・クリックヒートマップ

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

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

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

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

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

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

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

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

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

Databricks: Spark DataFramesをJDBCから作成する前のページ

Adobe Analytics:計算指標でevents変数を後付けでパーティシペーションにする次のページ

ピックアップ記事

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

関連記事

  1. ヒートマップ

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

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

  2. ヒートマップ

    MouseflowをAdobe Analyticsと一緒に使う

    近年、視覚分析ツールの需要が高まっています。ウェブサイトの統計的なロ…

  3. ヒートマップ

    【Tips】フリクションとは?

    フリクションとは、Webサイトを訪問したユーザが感じたストレスやフ…

  4. ヒートマップ

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

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

  5. ヒートマップ

    Mouseflowアップデート情報 @2019/6/6

    Mouseflowの機能がアップデートされました!今回のアップデート…

  6. Mouseflow

    Mouseflowで問題解決① -事例ベースで機能紹介-

    Mouseflowで問題解決 -エクスチュアのツール紹介-webサイト…

コメント

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

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

CAPTCHA


カテゴリ
最近の記事
  1. dbt Fusion使ってみた
  2. Manusを使ってみたうえでManusに感想ブログを書かせて…
  3. SquadbaseとStreamlitでお手軽アプリ開発
  4. [Snowflake Summit 2025] Snowfl…
  5. [Snowflake新機能]AI_AGGを試してみた
  1. Linux

    無料のWindows10仮想マシンをEdge/IE11検証用途で使う
  2. ブログ

    IPアドレスとは
  3. Amazon Web Services

    System Managerを利用したVPC内Redshiftへの接続
  4. Adobe Analytics

    Adobe Analytics: AppMeasurement.jsの実装開発作…
  5. Tableau

    Tableau Viz紹介 : 10.4新機能を使ってダッシュボードを作ってみた…
PAGE TOP