Mouseflow（マウスフロー）公式サポート > BLOG > オンラインマニュアル（Mouseflowの使い方） > Mouseflow（マウスフロー）各機能の使い方 > ヒートマップ（Heatmaps） > ヒートマップの基礎：Attention Heatmaps（アテンションヒートマップ）

ヒートマップの基礎：Attention Heatmaps（アテンションヒートマップ）

2016年11月26日

ヒートマップ（Heatmaps）

私たちのAttention Heatmaps（アテンションヒートマップ）は、ユーザーがあなたのページにどのくらいの時間を費やしているのかを示しています。色味によって、ページのどの部分がよく見られているか、エンゲージ（ユーザーが取るクリック、スクロール、マウスムーブなどのアクション）されているかを知ることができます。

ヒートマップの左下にあるパネルは、色味の説明になります。赤色の領域は、最も活動量が多く、色がより青みがかり冷たくなるにつれて、活動量が少なくなる領域であることを示しています。

heatmaps101_attentionheatmap_key

色の変化を見ることで、ページ上のアクティビティのレベルを理解することができます。活動量多いほど、色はより暖色になります。涼しげな色ほど、活動量が少ないことを示しています。

このヒートマップを活用すれば、ページのどの部分がユーザーにとって最も魅力的かを理解することができます。ウェブサイトを分析するとき、重要な要素がより涼しげな（青みがかった色の）領域にあるかどうか注意してください。重要なコンテンツは、ユーザーの注意を引く可能性が最も高い領域に配置することをおすすめします。たとえば、最も行って欲しい行動・（クリック）の要素は、ヒートマップ上の赤い領域に配置することで、より多くのアクションを引き出すことができます。

heatmaps101_attentionheatmap_image

The hover menu（ホバーメニュー）

heatmaps101_attentionheatmap_image2

このヒートマップには、特定の箇所をホバーすると、エンゲージメント（ユーザーが取るクリック、スクロール、マウスムーブなどのアクション）に関する追加の機能が表示されます。

Line：ページ内での正確なピクセル位置（ページ上部から計測） – 要素を正確に配置する際に活用できます。
Viewed by：ページの当該箇所を閲覧したユーザーの割合。
Avg. time：ページの当該箇所でユーザーが費やす平均時間。
Avg. engagement：ページの当該箇所でユーザーが何かしらのアクションを行った合計時間（クリック、スクロール、マウスムーブなどの活動）の合計時間。

ページをスクロールして、特定の部分にカーソルを置くと、このAttention Heatmaps（アテンションヒートマップ）のデータが表示されます。どのくらいの人がページの特定のコンテンツ（ブログ投稿やフォトギャラリーなど）でエンゲージ（ユーザーが取るクリック、スクロール、マウスムーブなどのアクション）しているかを容易に把握することが出来ます。また、お問い合わせボタンのクリックなどユーザーに促したい行動について、特定の場所でどの程度エンゲージメント（ユーザーが取るクリック、スクロール、マウスムーブなどのアクション）されているかを指標にすることができます。

まとめ

Attention Heatmaps（アテンションヒートマップ）は、ユーザーがページのどの箇所で時間を使っている（又は使っていない）かを知ることができます。これにより、効果的なページレイアウトを設計して、訪問者の関心を引くページ作りを行うことができます。

Mouseflow（マウスフロー）の料金・価格はコチラ

ヒートマップの基礎：Attention Heatmaps（アテンションヒートマップ）

The hover menu（ホバーメニュー）

まとめ

この記事を読んだ人は、こんな記事も読んでいます。