Webサイト上の行動を視覚化する方法〜ヒートマップの使い方〜

## Webサイト上の実績を確認する方法
この「ぬるぺでぃあ」へ、どれだけのアクセス数があって、記事がどれだけ読まれているのかは、日々のレポートで欠かさずにチェックするようにしています。

![hMyXjS3Sll0z7mC1690702869_1690703033.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/f25e7883-7151-0c01-efe3-fd36f3c5cfc4.png)


このレポートは、Google Analyticsやサーチコンソールで分かる内容のうち、私が見たい指標を集約しています。

※経験が浅い方／初心者の方は、Google Analyticsの使い方「超初級編」を、ぜひご覧ください。

https://miuradonuts.com/2023/07/07/ga-001/



毎朝7:00にメールで配信される自動レポートによって、昨日までの成績を確認するのが私の日課です。

※こちらのレポートは、下記の記事にて無料配布中です！

https://miuradonuts.com/2023/07/20/ga-002/

レポートの内容は全てチェックするようにしていますが、特に気にするのは…

- アクティブユーザーの数（≒アクセスしてくれた人数）
- コンバージョン（自分が設定した目標に関わる項目）
- 昨日のページ別のPV数
- 「ぬるぺでぃあ」内の外部リンクへのアクセス数（OpenSea／Unlash／Baseショップなど）

この辺りの数値は、かなりシビアに確認するようにしています。私が更新している記事や発信内容が、見にきてくれた方へ、どのように響いているのか。この数値や推移から、見やすく・使いやすいサイトにするべく、仮説を立てて考えています。


## Webサイト上の行動を可視化してみる（ヒートマップ）

日々の成績などは、先ほどのレポートで確認をしていますが、このサイトを作るにあたって懸念していることがありました。それは…

①見て欲しい外部リンクをバナーにして飾っているけど、詰め込みすぎではないか？
②先週のPV数ランキングや、カテゴリー毎に表示しているけど、縦に長すぎないか？

元々は「どーなつ図鑑」というNFTに特化したサイトでしたが、リニューアルするにあたって、この２つは常に懸念をしていました。

もしかしたら、この構成が理由で「見にくいサイトだな…」と感じていたり、「どこを見ればいいのか分からない」といったことを感じるユーザーもいるかもしれない…。そう考えるようになったのです。

そこで、ユーザーの目線や行動が視覚的に分かるツールを試してみることにしました。

### ヒートマップツールの導入
#### ヒートマップとは？

ヒートマップとは、ユーザーの行動やデータの多い／少ないをわかりやすく色で表現したものです。
下記は、「ぬるぺでぃあ」のTOPページを、読まれているエリアをヒートマップ化したものです。

![スクリーンショット 2023-07-30 15.00.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/2eec6700-6768-bc4e-b1ec-8961dde771e1.png)

赤い部分ほどよく読まれており、逆に、青い部分ほど、あまり読まれていないことになります。この辺りの詳細なアルゴリズムは不明ですが、滞在時間やマウスオーバーの回数などを参照しているのでしょうか。Analyticsの情報と合わせることで、仮説を立てる材料としては十分に活用ができます。

### User Heatを使ってみる
User Heatとは、無料で活用できるヒートマップツールです。

![スクリーンショット 2023-07-30 16.20.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/ee1aa4bd-0c8b-f962-ab21-28d7b285c9e5.png)

無料で使える機能やPV数に制限はありますが、まだまだこれからの個人で運営するブログであれば、このツールで十分です。

User Heatで可視化できるのはこの5つです。

- ページの熟読エリア
- マウスの動き
- クリックした場所
- ページ内のどこまで読まれたのか分かる終了エリア
- 離脱したエリア

### User Heatの使い方

[コチラのページ](https://userheat.com/)へアクセスし、アカウントを作成します。
※アカウント作成には、メールアドレスと、サイトのURLが必要です。

アカウントを作成後は、解析するためのタグを発行します。「Wordpress」でサイトを作成されている方は、タグではなく、「プラグイン」を使って解析を行うことも可能です。

※アカウント作成後、タグを埋めこんでから、ヒートマップとして出力できるようになるまでに1日程度の時間がかかります。

### 「ぬるぺでぃあ」の結果を一部公開します

①熟読エリアのヒートマップ
![スクリーンショット 2023-07-30 15.00.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/668e0ad0-e56b-7e24-c1aa-6073af463e71.png)


②クリック箇所
![スクリーンショット 2023-07-30 14.58.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/0c7c802b-91cc-b67d-7cbe-1ceafe829039.png)


③終了エリア
![スクリーンショット 2023-07-30 14.59.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/1e9442e7-b737-740d-ccdb-e5fc2d1045c7.png)


これらの結果から分かるのは…
・TOPページ上部の「新着情報」が、各記事への誘導をしっかり果たしている
・ユーザーの75%が、「BASE SHOP」までのバナーで閲覧を終了している
・TOPページのバナー乱立が、クリックの分散を生んでいるかも？
 →ジャンプ先のページでの直帰に繋がっている可能性もある

このヒートマップの結果だけで具体的な対策を考えるには、材料が少ないかもしれませんが、視覚的に分析結果が分かるのは嬉しいです。早速「ここで得た仮説をもとに、対策を考えよう！」…となるわけです。

今回得た仮説をもとに、「ぬるぺでぃあ」では、使いやすいサイトへと変更を加えていく予定です。引き続き、ぜひお楽しみください。

もし、ご要望や気づいた点がありましたら、匿名で投書を送ることができる「しつもん箱」もご用意しています。ぜひ、自由なご意見やご要望をお聞かせください。

※質問箱はコチラから

https://forms.gle/QnAjasGTdiigDC6h8


この記事は、著者が運営するメディア「ぬるぺでぃあ」でも読むことができます（記事は[コチラ](https://miuradonuts.com/2023/07/30/ga-006/)）
![](https://miuradonuts.com/wp-content/uploads/2023/06/ヘッダーエリア画像作成.png)