ヒートマップとやらを調査してみた

# ヒートマップってそもそも何？
ヒートマップとは、データを可視化する為に、数字データの強弱を色で視覚化する方法です。
サイトの訪問者のマウスの動きやクリックした場所を、サーモグラフィーのような色のグラデーションで表示することができます。

## ヒートマップを使うことでわかること
ヒートマップを利用することで、以下の情報を視覚的にわかるようになります。

- ページ内でよくクリックされているところ
- ページ内でよく読まれているところ
- ページがどこまで読まれているか
- ユーザがどのようなマウスの操作を行ったか

これらの情報をもとにWEBサイトの解析を行い、間違ってクリックされているところや、
あまり見られていないところなどの改善を行うことができます。

# ヒートマップのサービスを使用してみる。
## 事前準備（ヒートマップ導入のためのWEBページの準備）
  「HTML　サンプル」などで検索したページをサーバーに格納し、Apacheの設定をごにょごにょして開けることを確認。
  使用したWEBページは「無料ホームページテンプレート TEMPLATE PARTY」のポータルサイト用ページ。
![スクリーンショット 2020-02-18 16.24.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/0ef7e268-79d4-8fc1-f1ec-264e0bc699f6.png)
  [「無料ホームページテンプレート TEMPLATE PARTY」](https://template-party.com/)
  たとえ試しにヒートマップを使ってみるとはいえ、WEBページがしょぼいと使用の実感がわかないことから無料でしっかりとしたページを使用できるページを採用

## User Heatの導入
1. [「User Heat」](https://userheat.com/)とは？
  無料で使えるヒートマップ解析サービスのひとつ。
  他のサービスに比べ、無料で使用できる範囲が大きく、「熟読エリア」・「終了エリア」・「クリックエリア」・「マウスムーブ」・「離脱エリア」の5つのヒートマップを確認することができ、PV件数も月３０万PVと他のサービスに比べてかなり良心的なサービス。
  ![スクリーンショット 2020-02-18 16.39.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/2d68beef-bd32-b56f-ef99-85fb7e8e46dd.png)

1. User Heatの導入方法
  導入方法は至ってシンプル。
  トップページに対象のWEBページのURLを入力し、アカウントの登録を行う。
  登録を行うとユーザページが表示できるようになるので上部メニューから解析タグ発行をクリックすることで、画像のように埋め込みコードが自動的に生成される。
  ![スクリーンショット 2020-02-18 16.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/b8bf19bd-9197-b456-287d-b8bbaa4625fc.png)
  埋め込みコードについてはHTMLヘッダー部にコードを埋め込むだけでサービスを利用することが可能。<font color="Red">とても良心設計</font>:sunglasses:
 
1. 使ってみた感じ
  使ってみての評価は以下の通り
  導入の難易度：:o:
  導入費用　　：:o:
  実用性　　　：:o:
  導入後の制限：:o:
  　
  導入後は、マイページから以下の画像のように確認を行うことが可能。
  また、30万PV以上必要とするサービスについても以下の価格で有償契約することが可能。
  書いている通り，ヒートマップに関するサービスの中では最安値
　実際の画面がこんな感じ
　![無題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/f437be91-7800-90c1-3d3a-a6439d97f77a.png)

  
## Mouseflowの導入
1. [「Mouseflow」](https://mouseflow-jp.com/)とは？  
　無料で使えるヒートマップ解析サービスのひとつ。
　ヒートマップ機能だけでなく、ページ間の遷移率を記録する「ファンネルズ」という機能やフォームをユーザがどのように使用したかを計測する「フォーム分析」なども兼ねそろえている。
　無料で利用できる範囲は1か月500PVまでとUser Heatに比べかなり制限があるが、機能は充実している。

1. Mouseflowの導入方法
  まずは、アカウント登録を行う。アカウント登録はメールアドレスとパスワード、あとは解析したいページのURLを入力するだけで完了する。
　次に登録後にマイページよりヒートマップ解析に必要なスクリプトコードをコピーしてHTMLのBODYの最後に追加してあげる。
　![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/f38dd27d-dc72-4c63-e6a1-4691d06ca695.png)
　そうすると最後に個人情報はないかなどの確認が行われるので署名して初めてレコードが開始される。
　![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/9fe020f0-7a34-a30d-8385-b3484c14474c.png)

1. 使ってみた感じ
  使ってみての評価は以下の通り
  導入の難易度：:o:
  導入費用　　：:x:
  実用性　　　：:o:
  導入後の制限：:x:

　無料でお試しする分についてはすぐに制限となってしまうため、検証等は結構難しいかもしれない。
　一番大きなプランで50万PVまで対応しているがUser Haetと比べるとという印象がつよい。
　ただし利用できる機能が幅広く実用性は高いかもしれない。
　実際の画面はこんな感じ
　![ヒートマップ – Mouseflow - eu.mouseflow.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/4ad0b381-17b7-0283-2fe6-42e056b4c12d.png)
![ヒートマップ_ムーブメント – _index.html  – Mouseflow - eu.mouseflow.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/78f0016f-0180-75fa-c6f5-ce84196a55a4.png)
![ヒートマップ_クリック – index.html_Mouseflow - eu.mouseflow.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281719/d6935bbe-ba4d-ae0a-b987-d200daa8c322.png)

# まとめ
ヒートマップは、サイト上でのクリック数を計測し、それらを可視化することができます。
これにより、訪れたユーザーがどこの箇所をよく見ているかやどのようなものに興味を示しているかを分析することができます。
実際に管理しているWebページにおいてどのようなところに力を入れるべきか、どのようなところを改善すべきかなどの指標にするにはもってこいのツールなのかもしれないと考えました。