0%

Marketingウェブマーケティングブログ

Posted:2018.02.04

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

この記事の目次

みなさんウェブサイトがユーザーにどう見られているかって気になりませんか?私はすごく気になります!実はウェブサイトのどこがよく見られているかを可視化できるサービスがあるんです!今回は「ヒートマップ」と呼ばれるグラフを使った方法でウェブサイト内でのユーザー行動を見ていきたいと思います。

 

ヒートマップとは?

ヒートマップはユーザーのウェブサイト内での行動を可視化したグラフです。行動の度合いによって青から赤のグラデーションで表現されるので、物体の温度を計測するサーモグラフィーをイメージしていただくとわかりやすいのではないでしょうか。

 

このヒートマップを使うことでウェブサイトのどこをよく見られていて、クリックされているかを調べることができますので、サイトデザインやコンテンツの改修に使えるヒントとなります。今回はこのヒートマップでサイト内のユーザー行動を調べることができるWebサービスを利用して調べていきたいと思います。

 

サイトのヒートマップが使えるWebサービス

ヒートマップを使えるWebサービスですが有料もあれば、機能は制限されますが無料で利用できるものあります。いくつか似たようなサービスはあるのですが、今回は無料で利用でき、使い方もわかりやすい「無料ヒートマップ解析ツール User Heat」を使ってサイトのヒートマップを見ていきたいと思います。

【無料ヒートマップ解析ツール User Heat】
https://userheat.com/

 

まずはサイトにアクセスしてみます、すっきりとしたオシャレなサイトですね!1サイトになりますが、30万PVまでは無料で利用でき、スマホ表示にも対応しているようです。

 

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

 

まずは無料のアカウント登録を行います。トップページ中央にある入力フォームに解析したいサイトのURLを入力して登録ボタンをクリックします。

 

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

 

新規登録のフォームが表示されるので、必要事項を入力していき、ページ下部にある登録ボタンをクリックします。

 

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

 

 

メールが送信されたとのアナウンスが表示されるので、届いたメールを確認してみると、アカウント承認URLが書かれていますので、リンクをクリックすると登録が完了します。

 

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

 

改めてログイン画面へアクセスし、先ほど作成したアカウント情報でログインします。

 

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

 

ヒートマップ解析の準備を行う

ユーザー行動のデータを収集するために解析を行うコードをサイトに設置する必要があります。ですので最初はこのような表示になっています。

 

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

 

ログイン後の画面で「解析タグ発行」のメニューを選択し、解析タグ発行ページにアクセスすると解析タグが表示されているので、そのままコピーしウェブサイトのhead終了タグ直前にペーストします。

 

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

 

次に「設定」のメニューを選択し、解析サイトの設定ページにアクセスします。画面中程にGoogleアナリティクス連携のサービスがあるので、連携ボタンをクリックして承認作業を行います。

 

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

 

連携作業が完了すると次のようなメッセージが表示されますので、データ取得され始めるまであとは待つだけです。また同じくサーチコンソールの連携も可能ですので必要に応じてこちらも連携しておきます。

 

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

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

 

サイト内での行動をヒートマップで確認する

ある程度アクセスが集まりデータが表示されるようになりますと、ログインしてからページごとの進捗状況と合わせてヒートマップが確認できるようになります。確認できるくらいのアクセス数が溜まった対象のページがリストで表示されます。ページタイトルのリンクをクリックしてヒートマップを確認したいと思います。

 

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

 

画面が切り替わり、ページのキャプチャ上にヒートマップが表示されているのが確認できます。まずは「マウス」のデータ項目になりますが、ここではマウスカーソルの移動した跡を確認することができます。赤、緑、青の矢印で数字を追っかけるように移動した場所が表示されています。

 

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

 

次に上部のメニューから「クリック」を選択しますとクリックした箇所に色がついたヒートマップに変わります。ここではリンクやボタンなどに集まっているのが確認できるかと思います。皆さんのサイトではクリックしてほしいところに集まっているでしょうか?

 

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

 

そして「熟読エリア」を選択します。ここではクリックやマウスカーソルの動きが集まっている箇所をエリアごとに色分けされて表示します。よく見られているエリアが黄色で映っており、緑から青色の順によく見られている度合いを示します。

 

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

 

「終了エリア」を選択すると、先程の熟読エリアとは逆でページトップからのマウスの動きやクリックが無くなったエリアを確認できます。アクションが無くなった割合に合わせてエリアの色と幅で違いがわかるようにしています。

 

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

 

最後の「離脱エリア」では離脱率が25%に達した区域をボーダーラインで確認することができます。重要なコンテンツやコンバージョンエリアがこれより上の位置にあることがポイントになってきます。

 

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

 


 

このようにサイトでユーザーの行動が視覚的に確認できるようになることで、サイトの導線設計の改善やコンテンツの作り込みへのヒントになるかと思います。アクセス解析やキーワード分析ではわからない情報ですので、ヒートマップを合わせて使うことがサイト運用のポイントになりそうですね!

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】