【ユーザーの動きを見てみよう！】サービス開発をしている人に猛烈にオススメしたいHotjar

## はじめに
はじめまして！最近のQiitaでは「〜作ってみました！」のような個人でサービス開発されている開発者の記事がちらほら、見受けられますが、みなさんの個人サービスではサイト分析にどんなツールを入れていますか？

ほとんどの方がGoogleアナリティクスを使っていると思いますが、それに加えて今回紹介させていただく、 **Hotjar** も導入してみてはどうでしょうか？

Qiitaで検索しても記事がヒットしなかったので、簡単に紹介させていただき、実際に無料で一年近く運用をしているので、特によかった点を紹介させていただきます。

私自身、サイト分析は主な業務ではありませんので、内容としてはライトなものになりますが、ご了承くださいませ:-p

記事の最後に導入方法を記載しておりますので、興味があれば導入してみてください！

## Hotjarって？
[Hotjar](https://www.hotjar.com/)のトップページには下記のように書いてあります。
![スクリーンショット 2018-12-04 2.43.33.png](https://qiita-image-store.s3.amazonaws.com/0/204698/92a5d63e-7804-1637-aef1-78c1be6fe8ec.png)

>The fast & visual way to understand your users

Hot.jarを使えばサクッとユーザーの動きを理解するのに役に立ちます。

具体的には、下記の機能を使ってユーザーの動きを知ることができます。

* Heatmaps
* Recordings
* Conversion Funnels
* Form Analysis
* Feedback Polls
* Incoming Feedback
* Surveys
* Recruit User Testers

今回はこの中でも特にオススメしたい機能の3つ！

* Heatmaps
* Recordings
* Incoming Feedback  

にフォーカスを当てて説明します！

## 猛烈にオススメしたい機能1-ヒートマップ
![スクリーンショット 2018-12-04 2.48.01.png](https://qiita-image-store.s3.amazonaws.com/0/204698/64b15143-d437-9e39-d786-5ad90c6142f7.png)
上記の写真にあるようなヒートマップが作成できます。
ヒートマップについては特に説明しませんが、ぽちぽち4,5回クリックすれば作成できるので便利です。

**無料プランの場合、ヒートマップは1000PVでレコーディングがストップします。**

UIの修正後、ヒートマップを作成して〜チェックして〜改善して〜という流れが自然にできます。

**Googleアナリティクスを使っても画面のレンダリング後の改善は具体的にイメージが持ちにくく、手詰まりになってしまうことがあるので個人的に重宝しています。**

## 猛烈にオススメしたい機能2-レコーディング
![スクリーンショット 2018-12-04 3.02.29.png](https://qiita-image-store.s3.amazonaws.com/0/204698/285c890b-61ef-7b75-3afc-ac6362ed6ad1.png)

**これは鬼👹** 
本当に入れてよかったと思った機能です👹 
一番オススメかもしれません👹

ユーザーの動きを録画してくれるのですが、どうやったらこんなにスムーズな動きが取れるんですか？ってくらいスムーズです。
また、録画されたものがすごく見やすく、
  
* クリックした場所、マウスの移動場所をハイライトできたり  
* 再生速度を4x にできたり  
* 入力項目はモザイクにしてくれたり
* ユーザーのアクションにジャンプできたり

ユーザーの動きの確認(ビューワーが良い)がとっても快適です。

また、下記のようにブラウザ、OSを判別してくれるので、
動きが気になるものをフィルタして重点的にチェックすることができます。

![スクリーンショット 2018-12-04 3.11.57.png](https://qiita-image-store.s3.amazonaws.com/0/204698/a21028d3-8b1e-8667-d96b-f839fe149e84.png)

**[sentry](https://sentry.io)などを入れていてもボタンがdisabledになっていた...とかってエラーが出ず、機会損失に気が付けなかったりするので個人的にIEなどはなるべくチェックするようにしています。**


## 猛烈にオススメしたい機能3-フィードバック
![スクリーンショット 2018-12-04 3.16.45.png](https://qiita-image-store.s3.amazonaws.com/0/204698/0a4d387c-a9f1-9464-eb38-c737cf5dcb4a.png)
**この機能はとってもユニークで大好きな機能です!**
ユーザーからのフィードバックなどを簡単に回収することができます！

この機能をONにするとサイトに「Feedback」という下記のボタンが表示されます。
![スクリーンショット 2018-12-04 3.20.01.png](https://qiita-image-store.s3.amazonaws.com/0/204698/e2b4ccca-6eea-34c8-9841-dfc6a880b34e.png)

場所や色、文言などは詳細に設定することができるのですが、
ここをクリックするとユーザーの意見を聞くことができ、下記のページのようにユーザーの意見を参考にすることができます。

![スクリーンショット 2018-12-04 3.22.23.png](https://qiita-image-store.s3.amazonaws.com/0/204698/81109075-4cd4-de3b-3d76-91b5fac837d8.png)

**この意見はすごく助かっていて、
「バグの発見」「改善アイデア」「モチベーションの維持」
などなど...ありがたい意見を聞くことができるんです！**

## 導入方法

オススメの3つの機能を紹介させていただきましたが、
ここまで読んでくれた方はきっと導入方法が気になっているのではないでしょうか？

導入方法はすごく簡単で、サインアップして、サイトを作成して、ヘッドタグにスニペットを貼り付けるだけです。ガチで1分です。**(無料プランで運用するつもりならカードの登録も必要ありません)**
![スクリーンショット 2018-12-04 3.35.17.png](https://qiita-image-store.s3.amazonaws.com/0/204698/e263d4e5-4c05-96a1-3e2a-349cd5fbc913.png)

また、Gatsby + Netlify CMSで作成したサービスでは[gatsbyjsのHotjarプラグイン](https://www.gatsbyjs.org/packages/gatsby-plugin-hotjar/?=hot)
があったので、こちらを使って導入できました。



## おわりに

いかがだったでしょうか？
Hotjarの回し者でもないので、あれなんですけどもし興味を持たれたら入れてみてください！
**きっとGoogleアナリティクスとは違う角度でサイトを分析できると思います！**

もし、読者の中に他にも面白いサービスがあるよーって方がいればコメント欄などに書いていただけると嬉しいです。

**それでは良き個人サービス開発ライフを！**