2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

Webサイト上の実績を確認する方法

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

hMyXjS3Sll0z7mC1690702869_1690703033.png

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

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

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

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

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

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

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

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

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

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

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

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

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

ヒートマップツールの導入

ヒートマップとは?

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

スクリーンショット 2023-07-30 15.00.36.png

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

User Heatを使ってみる

User Heatとは、無料で活用できるヒートマップツールです。

スクリーンショット 2023-07-30 16.20.31.png

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

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

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

User Heatの使い方

コチラのページへアクセスし、アカウントを作成します。
※アカウント作成には、メールアドレスと、サイトのURLが必要です。

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

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

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

①熟読エリアのヒートマップ
スクリーンショット 2023-07-30 15.00.36.png

②クリック箇所
スクリーンショット 2023-07-30 14.58.42.png

③終了エリア
スクリーンショット 2023-07-30 14.59.06.png

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

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

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

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

※質問箱はコチラから

この記事は、著者が運営するメディア「ぬるぺでぃあ」でも読むことができます(記事はコチラ

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?