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