「マウスグラフィ」ヒートマップで、注目箇所が丸わかり！

ページ内のコンテンツの良し悪しを評価する際に、ユーザーがWEBページの「どこに注目して見ているか」が知りたくなったことはありませんか？また、UI（ユーザーインターフェイス）の評価に際しても、ユーザーが「どんなマウスの動きをしているのか」が気になったことはないでしょうか。

このようなとき、「マウスグラフィ」ヒートマップを用いれば、マウスカーソルの移動が集中している箇所がわかるので、サイト訪問者の視線が集まっている箇所がわかり、どのコンテンツに注目しているかを発見できます。
今回はユーザービリティ改善のヒントが見つかる、「マウスグラフィ」ヒートマップについてご紹介いたします。

目次

「ヒートマップツールの導入を検討している」「ヒートマップとは？」「ヒートマップのメリットって何？」このような内容について知りたい方は、以下の記事もぜひご覧ください。

サイト訪問者のマウスカーソルの移動した箇所を視覚化したものが「マウスグラフィ」ヒートマップです。
アメリカのカーネギーメロン大学の研究で、人間の視線とマウスカーソルの位置は、およそ87%の確率で一致するというデータがあります。
「マウスグラフィ」ヒートマップでは、ユーザーの視線とカーソルの位置の相関性を用いて、アイトラッキングに近い解析を手軽に実施できます。ユーザーの注目している箇所や、ページ上でのエンゲージメントを計ることができます。

「マウスグラフィ」ヒートマップを使うことで、以下のような疑問を解消できます。

①ユーザーの関心の高いコンテンツはなにか？

同じページ内に複数のコンテンツや商品が存在する場合、どれがユーザーの関心が高いコンテンツ、商品なのかを知ることで、表示する優先順位やデザインの改善に役立ちます。
記事コンテンツであれば、どの部分が熱心に読まれているかなどが把握できるので、コンテンツ改善に大いに役に立ちます。

②コンテンツの間の行き来が多くて不便なところはないか？

ページ内で利用頻度が多い要素が遠く離れていると、ユーザーにとってはわかりづらく、
またマウスの移動が多くなってストレスがたまってしまいます。あまり使われていないナビゲーションの要素が、必要とされている要素の視認性を下げているかもしれません。
見られている要素がわかることで、こういったUI上の課題を発見し、改善することができます。

③フォームや、CTAボタンをどこに置けば最も注目を集めるか？広告を掲載するのに最適な場所はどこか？

ページ内の視線が集まりやすい箇所がわかるので、どの位置にフォームやCTAを設けたら成果が上がりそうか知ることができます。アフィリエイト目的のページであれば、コンテンツ内で広告の視認性が上がり、クリックされやすい箇所がわかります。要素を最適な箇所に配置することで、成果の向上につながります。

続いては、ユーザーの注目している要素を明らかにすることで、実際にどのようにコンテンツやユーザービリティが改善できるか、活用方法をご紹介いたします。

スクロールヒートマップでは、ページの上下方向のどのコンテンツがよく見られているかがわかりますが、左右横並びのコンテンツのどれが注目されているかまではわかりません。
「マウスグラフィ」ヒートマップを見ることで、横並びのコンテンツのどこに注目しているかがわかります。
例えば、ナビゲーションの中でどれがよく見られているのかを知ることで、ユーザーが何に関心を持っているのか知ることができます。

同じく左右横並びのコンテンツで、クリックヒートマップではあまり差が見られないような場合でも、「マウスグラフィ」ヒートマップでは大きな違いが見られることもあります。

上の図では、左側のコンテンツがより注目を集めていることがわかります。
こういった場合、右側のコンテンツをより見せたいなら、より上部に移動したほうが良いかもしれません。あるいは、思い切って注目を集めている左側のコンテンツのみに絞って訴求し、右側のコンテンツを消したり、下部に移動したりすることでより成果に直結する事も考えられます。

クリックヒートマップと見比べて見ることで、明らかにマウスをホバーをして読まれているのに、クリックはあまりされていない、「スルー」の動作が起きていることがわかります。

「スルー」されている箇所がある場合は、あまりニーズを感じていないか、表現にピンと来ていない可能性があります。クリックエリアの表現を変えることや、場合によっては要素そのものを外したり入れ替えたりすることを検討しましょう。逆に、マウスの動きはあまりないのにクリックが頻発している箇所は、迷うことなくクリックされているといえます。

プルダウンメニューのように、ユーザーに動作を促す要素では、UIの課題点を発見することができます。

上の図では、左側に文があり、右側に[開く]ボタンが有るプルダウン形式となっていますが、ユーザーの目線が文章によっていることがわかります。
もし文章の部分をクリックしてもメニューが開かないような仕様となっているのであれば、
マウスの誤クリックや、左右を行き来する不要な動作が発生してユーザーがストレスを感じる原因になります。
文字の部分をクリックしてメニューが開くように改善することで、よりユーザビリティを高めることができます。ホバーエフェクトを実装することで、クリックができることを示しても良いでしょう。

「マウスグラフィ」ヒートマップと活用方法について紹介しました。
「マウスグラフィ」ヒートマップでは、マウスカーソルが移動した箇所を元にユーザーが注目している箇所を把握でき、コンテンツやユーザービリティ改善にご活用いただけます。
ユーザーの求めているコンテンツが提供できているか、ストレスが少ないユーザビリティが提供できているかを知り、ウェブサイトを改善しましょう。

当社が運営、開発を行う多機能ヒートマップ解析ツール SiTest（サイテスト）は、豊富なヒートマップを搭載しています。
この記事でご紹介したヒートマップと同等の機能を搭載しているので、ユーザービリティの検証、コンテンツの評価が視覚的に行うことができます。
また、定量データによる解析もできるので、客観的な分析も可能です。

面倒なタグ設置などの初期設定からオンラインデモ等、サポートも充実しています。
お見積りは無料です。
お問合せはこちらから。