クリックヒートマップとは? ~ユーザーの思考を読み取り、ユーザービリティを改善しよう~ | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

クリックヒートマップとは? ~ユーザーの思考を読み取り、ユーザービリティを改善しよう~

Web ページ内でユーザーがどこのリンクもしくはボタンをクリックして次のページに遷移しているのか、気になった経験はございませんか?
ウェブ担当者様なら大半の方が経験されたことがあるかと思います。
このようなユーザーの思考を読み取りたい際に、クリックヒートマップが活用いただけます。

例えば、クリックしてほしい箇所にクリックが発生していなければ、ページの導線設計に問題があると考えられます。
その場合ユーザーにとっては、リンクと気づかずにページ離脱(機会損失)に繋がっている可能性が高いです。

今回は Web ページ内のユーザービリティ検証に役に立つ、クリックヒートマップについてご紹介いたします。

スポンサーリンク

目次

クリックヒートマップとは

ユーザーがページ上のどこでクリック(タップ)したのかを視覚化

クリックヒートマップとタップ解析ヒートマップのキャプチャ

クリックヒートマップとは、ユーザーが Web ページ上のどこでクリックしたのかを視覚化したものです。
一般的に、多くのクリックが発生している場所ほど色が赤く、クリックの発生が少ない場所ほど青く表示されます。

クリックヒートマップを使って、「ユーザーにとって使いやすいページデザイン・レイアウトになっているか」つまり、ユーザービリティの検証に適しています。
ユーザーがクリックしたエリア、リンクやボタンはもちろん、何も設置していないスペースへのクリックを全て知ることができ、ユーザーが適切にリンクやコンバージョンボタンを認識してクリックされているかどうかを見極める際に最適です。

クリックヒートマップで解析する

クリックヒートマップを使用することで、大きく以下の2点を確認できます。

①ボタンやリンクをユーザーが正しく見つけられているか

ウェブサイトにおいて、問合せのボタンや商品の購入ボタンは非常に重要なパーツです。
デザインによっては、周りのコンテンツに埋もれて気づかれず、クリックもされないということが考えられます。
このような場合、ユーザーがボタンだと認識されていない可能性が高いので、ひと目で見てわかるボタンデザインするなど改善が必要です。

② ボタンやリンクと勘違いされているコンテンツ、デザインはないか

ボタンもリンクもない部分にクリックが集中していることもあります。
それはユーザーがそのコンテンツに対して、「リンクがあるかも」「クリックしたらなにか起きるかも」と感じているためです。
ユーザーがアクションを起こそうと思ってクリックした結果、なにも起きないということは、ユーザーにとってはストレスの要因となるのでいち早く改善が必要です。

クリックの可視化からわかるWeb改善での活用方法

前述のとおり、クリックヒートマップを使用することでクリックを可視化できるということがわかりました。
続いては、ユーザーのクリックを可視化して、実際にどのようにユーザービリティが改善できるか、活用方法をご紹介いたします。

ボタンがクリックエリアだと認識されていない箇所

ボタンがクリックエリアだと認識されていない箇所 一例

ボタンがクリックエリアだと認識されていない場合は、ユーザーの興味・関心が少なく、注目されていないボタンの可能性があります。
以下の原因が考えられます。

  • ■ ボタンだと認識されていない
  • ■ ユーザーの興味・関心の低い内容とわかる

ユーザーにとって、興味・関心のある情報でないため、訴求内容を変更したコンテンツにするか、もしくは目に留まるボタンデザインにすることでクリック改善につながるケースもございます。

クリックエリアでないがクリックが集中している箇所

クリックエリアでないがクリックが集中している箇所 一例

クリックエリアでないがクリックが集中している場合は、ユーザーが注目しているコンテンツの可能性があります。
以下の原因が考えられます。

  • ■ リンクだと勘違いしている
  • ■ 詳しい情報を知りたい

詳細ページへリンクを設定することで、ユーザービリティの改善につながるケースもございます。

想定していない画像にクリックが集中している箇所

想定していない画像にクリックが集中している箇所 一例

想定していない画像にクリックが集中している場合は、ユーザーニーズの高い可能性があります。
以下の原因が考えられます。

  • ■ 画像を拡大して見たい
  • ■ 画像内の詳しい情報を知りたい

拡大画像を表示できるようにすることで、ユーザービリティの改善につながるケースもございます。

クリックヒートマップを活用した施策例

この章では、クリックヒートマップを活用した施策での成功事例をご紹介します。

【支払方法のクリックエリアを拡大したことでフォーム完了率の改善に貢献】
株式会社クオリティーナンバーワン 様

株式会社クオリティーナンバーワン様は、音速パソコン教室という教材をインターネット上で販売されており、生徒数が9,000人以上いらっしゃる企業です。
商品特徴から、 IT に対するリテラシーが低いお客様が多いためウェブサイトを見ても、電話や FAX で注文される方が多いという悩みを抱えておりました。

課題としては下記2点です。

  • ■ 電話注文対応コスト削減
  • ■ 入力フォームからのCVR改善

クリックヒートマップを使用して、ユーザーのフォームの使い方を確認したところ、お支払い方法部分で選択できない箇所にクリックが集中していることがわかりました。

株式会社クオリティーナンバーワン様 施策例

上記の解析結果を基に、導線設計・操作性(クリックエリアの拡大)の改善を行ったところ、ボタンのクリック率が向上し、入力完了率も167%改善することができました。

成功事例の詳細はこちら
株式会社クオリティナンバーワン 様|入力フォームで入力完了率が167%改善!電話注文対応コストを削減

さいごに

クリックヒートマップと活用事例について紹介しました。
クリックヒートマップでは、クリックが多いエリアでユーザーニーズを把握できるのでユーザービリティ改善にご活用いただけます。
ページ回遊率やコンバージョン率が伸び悩んでいるサイト、ページだからといって全てリニューアルするのではなく、クリックヒートマップから何が課題としてあるのかを分析し、一つずつ解決していくことが最も低リスクでコンバージョン率を改善することができます。

多機能ヒートマップ解析ツール SiTest(サイテスト)

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

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