OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

ヒートマップを使ってサイト内の行動をチェックしてみよう

最終更新日:2018.2.4 Update!!
みなさんウェブサイトがユーザーにどう見られているかって気になりませんか?私はすごく気になります!実はウェブサイトのどこがよく見られているかを可視化できるサービスがあるんです!今回は「ヒートマップ」と呼ばれるグラフを使った方法でウェブサイト内でのユーザー行動を見ていきたいと思います。  
ヒートマップとは?
ヒートマップはユーザーのウェブサイト内での行動を可視化したグラフです。行動の度合いによって青から赤のグラデーションで表現されるので、物体の温度を計測するサーモグラフィーをイメージしていただくとわかりやすいのではないでしょうか。   このヒートマップを使うことでウェブサイトのどこをよく見られていて、クリックされているかを調べることができますので、サイトデザインやコンテンツの改修に使えるヒントとなります。今回はこのヒートマップでサイト内のユーザー行動を調べることができるWebサービスを利用して調べていきたいと思います。  
サイトのヒートマップが使えるWebサービス
ヒートマップを使えるWebサービスですが有料もあれば、機能は制限されますが無料で利用できるものあります。いくつか似たようなサービスはあるのですが、今回は無料で利用でき、使い方もわかりやすい「無料ヒートマップ解析ツール User Heat」を使ってサイトのヒートマップを見ていきたいと思います。 【無料ヒートマップ解析ツール User Heat】 https://userheat.com/   まずはサイトにアクセスしてみます、すっきりとしたオシャレなサイトですね!1サイトになりますが、30万PVまでは無料で利用でき、スマホ表示にも対応しているようです。   ヒートマップを使ってサイト内の行動をチェックしてみよう   まずは無料のアカウント登録を行います。トップページ中央にある入力フォームに解析したいサイトのURLを入力して登録ボタンをクリックします。   ヒートマップを使ってサイト内の行動をチェックしてみよう   新規登録のフォームが表示されるので、必要事項を入力していき、ページ下部にある登録ボタンをクリックします。   ヒートマップを使ってサイト内の行動をチェックしてみよう     メールが送信されたとのアナウンスが表示されるので、届いたメールを確認してみると、アカウント承認URLが書かれていますので、リンクをクリックすると登録が完了します。   ヒートマップを使ってサイト内の行動をチェックしてみよう   改めてログイン画面へアクセスし、先ほど作成したアカウント情報でログインします。   ヒートマップを使ってサイト内の行動をチェックしてみよう  
ヒートマップ解析の準備を行う
ユーザー行動のデータを収集するために解析を行うコードをサイトに設置する必要があります。ですので最初はこのような表示になっています。   ヒートマップを使ってサイト内の行動をチェックしてみよう   ログイン後の画面で「解析タグ発行」のメニューを選択し、解析タグ発行ページにアクセスすると解析タグが表示されているので、そのままコピーしウェブサイトのhead終了タグ直前にペーストします。   ヒートマップを使ってサイト内の行動をチェックしてみよう   次に「設定」のメニューを選択し、解析サイトの設定ページにアクセスします。画面中程にGoogleアナリティクス連携のサービスがあるので、連携ボタンをクリックして承認作業を行います。   ヒートマップを使ってサイト内の行動をチェックしてみよう   連携作業が完了すると次のようなメッセージが表示されますので、データ取得され始めるまであとは待つだけです。また同じくサーチコンソールの連携も可能ですので必要に応じてこちらも連携しておきます。   ヒートマップを使ってサイト内の行動をチェックしてみよう ヒートマップを使ってサイト内の行動をチェックしてみよう  
サイト内での行動をヒートマップで確認する
ある程度アクセスが集まりデータが表示されるようになりますと、ログインしてからページごとの進捗状況と合わせてヒートマップが確認できるようになります。確認できるくらいのアクセス数が溜まった対象のページがリストで表示されます。ページタイトルのリンクをクリックしてヒートマップを確認したいと思います。   ヒートマップを使ってサイト内の行動をチェックしてみよう   画面が切り替わり、ページのキャプチャ上にヒートマップが表示されているのが確認できます。まずは「マウス」のデータ項目になりますが、ここではマウスカーソルの移動した跡を確認することができます。赤、緑、青の矢印で数字を追っかけるように移動した場所が表示されています。   ヒートマップを使ってサイト内の行動をチェックしてみよう   次に上部のメニューから「クリック」を選択しますとクリックした箇所に色がついたヒートマップに変わります。ここではリンクやボタンなどに集まっているのが確認できるかと思います。皆さんのサイトではクリックしてほしいところに集まっているでしょうか?   ヒートマップを使ってサイト内の行動をチェックしてみよう   そして「熟読エリア」を選択します。ここではクリックやマウスカーソルの動きが集まっている箇所をエリアごとに色分けされて表示します。よく見られているエリアが黄色で映っており、緑から青色の順によく見られている度合いを示します。   ヒートマップを使ってサイト内の行動をチェックしてみよう   「終了エリア」を選択すると、先程の熟読エリアとは逆でページトップからのマウスの動きやクリックが無くなったエリアを確認できます。アクションが無くなった割合に合わせてエリアの色と幅で違いがわかるようにしています。   ヒートマップを使ってサイト内の行動をチェックしてみよう   最後の「離脱エリア」では離脱率が25%に達した区域をボーダーラインで確認することができます。重要なコンテンツやコンバージョンエリアがこれより上の位置にあることがポイントになってきます。   ヒートマップを使ってサイト内の行動をチェックしてみよう  
  このようにサイトでユーザーの行動が視覚的に確認できるようになることで、サイトの導線設計の改善やコンテンツの作り込みへのヒントになるかと思います。アクセス解析やキーワード分析ではわからない情報ですので、ヒートマップを合わせて使うことがサイト運用のポイントになりそうですね!
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram