Webページの反応を見える化するヒートマップ
こんにちは、ピーシー・ブレインの高山です。
パラリンピックの開会式の構成・演出はとても印象的でした。片翼の飛行機が離陸する際のプロジェクションマッピングはぜひ生で見てみたいと思いました。
さて、今回はホームページ上の反応を可視化するヒートマップについての情報を中心にお届けします。
Webページの反応を見える化するヒートマップ
今日は、ホームページの分析・診断で使うことのある「ヒートマップ」について紹介します。
▼ヒートマップとは？
一般的なアクセス解析ツールでは、どのページが見られているのか、そこからどこへ遷移しているのかなどは分かりますが、そのページ内のどの部分に実際反応があったのかまでは分かりません。
ヒートマップは、実際の利用者の操作をトラッキングして、ページ内で何に注目しているのか、どの部分を操作したのかといった情報を取得して見える化したものです。
ホームページをキャプチャーした画像の上に、収集・分析したデータを色で重ねてグラフィカルに表示しているので直感的で分かりやすい情報になっています。
▼どのようなマップあるのか？
ヒートマップといってもデータの整理の仕方によっていくつかの種類のマップがあります。よく使われるのは次の3つのマップです。※実際の名称はサービス提供者によってまちまちです。
熟読／アテンションマップ
ページ上のどの部分・コンテンツよく読んでいる（熟読）のか、注視（アテンション）しているのかを可視化したもので、色が濃いほどその度合いが高くなります。- スクロール／離脱マップ
ページのどの部分までスクロール・移動して、離脱したのかを色分けしたものです。一般的には下に行くほど離脱する割合が高くなっています。 - クリック／タップマップ
ページ内のどの部分がクリックされたのかを表示したマップです。同一の遷移先やコンテンツを表示するリンクやボタンがあったときに、実際にはどのリンク・ボタンが一番クリックされているのかなどが分かる様になります。
他にもマウスの動きを追跡したマップなどもあります。
▼活用方法
- コンテンツに対する反応アップ
ファーストビューがしっかりと見られているのか、そこから先のコンテンツもしっかり見られているのかという分析に使うことができます。
また、いくつものコンテンツを掲載している場合、あまり読まれていないものがあれば、それを外してよりアピールするものと入れ替える、配置場所を変えるためのヒントにもなります。 - ボタン、リンクの反応改善
次ページ誘導のために画像が良いのか、テキストが良いのか、どういったボタンやリンクが適しているのかの判断に利用することもできます。
また、配置したボタン・動画などのコンテンツが意図したようにクリックされているかどうかといった確認やより反応アップさせる表示、配置場所の変更に役立てることもできます。 - 離脱の改善
スマホサイトのページやランディングページなど長いページの場合には、途中で離脱してしまう利用者も多くなりますが、どのあたりのコンテンツ・表示を変更すると良さそうかというヒントが得られます。
▼無料で利用できるサービス
ヒートマップのサービスは基本的には有料ですが、アクセス数や分析内容が制限された無料プランが提供されているものもあります。サービスに登録して発行される計測用タグを分析したページに埋め込んで使います。
- User Heat
https://userheat.com/
月間30万PVで利用できます。有償の上位サービスの無料版です。
他にも、WordPressのプラグインとして利用できる「Aurora Heatmap」や、マイクロソフトが２０２０年から提供を始めたClarityなども無料で利用できます - Aurora Heatmap
https://ja.wordpress.org/plugins/aurora-heatmap/ - Clarity
https://clarity.microsoft.com/ （※英語のみのサービスです）
▼利用上の注意
- 利用者の反応を可視化したもので、コンテンツ自体の品質や評価とは直接関係ありません。
- ページ毎の評価になるため、サイト全体の改善にはアクセス解析などのツール・サービスが適しています。
- レスポンスデザインやPC・スマホで別レイアウトになるページでは、環境によって表示内容が変わるため、サービス側が対応していないと正しい分析ができません。
- データを蓄積する必要があるため、ある程度のアクセス数（利用者）、期間が必要です。また収集期間中は原則ページの変更を行わないようにしないと正しいデータが取れません。
- 利用者やアクセスする度に表示内容が変わる動的ページの分析には向きません。
パスワードの流出をチェック
不正アクセスなどによるデータ漏洩、流出の事件は後を絶ちません。
今回は、パスワード情報の流出をチェックする方法についてお伝えします。
▼Have I Been Pwned
Have I Been Pwned は、セキュリティの専門家によって作られた流出情報の検索サービスです。
https://haveibeenpwned.com/
メールアドレスでの検索
サイトにアクセスして、右図のようにメールアドレスを入力し、「pwned ?」ボタンをクリックすると、過去に流出した情報の中にメールアドレスが登録されているかどうかを検索してくれます。結果は登録が無ければ ”no pwnage found!” と、登録されている場合は ”pwned!” と表示されます。- パスワードの検索
メールアドレスの代わりにパスワードで検索したい場合は、メニューから “Passwords” を選択します。パスワードを入力し「pwned?」ボタンをクリックして調べます。
▼パスワードチェックアップ（グーグル）
グーグルでは、ブラウザChromeに保存したアカウント情報を流出データと比較して危険度を判定する「パスワードチェックアップ」を提供しています。
パスワードマネージャーへアクセスしてから、ツールへアクセスします。
もし、流失・漏洩した可能性があるものが見つかると、警告画面と対象のサイトが表示されます。
パスワードマネージャー
https://passwords.google.com/
▼流出していることが分かったら？
不正アクセス用のリストに既にメールアドレス、パスワードが含まれているので、いつ攻撃、乗っ取りにあってもおかしくありません。速やかにパスワードを変更してください。多数ある場合は、個人情報やお金を扱っているサービスの対応を優先した方がよいでしょう。
なお、２段階認証を使っている場合でも、１段階目は突破されてしまうことになるので、安心せずにこの場合もしっかりと処置しましょう（時間稼ぎにはなります）。
スタッフのツイート
【藤井】
ついに腹をくくりましてデビューしました。リーディンググラス…すなわち老眼鏡です。
長年活動時間の大半PCモニターに向かい眼球を酷使している割には日常生活を裸眼で過ごしてきた藤井ですが、ついに設定文字サイズを「大」にしてもスマホの文字を追うのが辛くなり、子供の家庭科の宿題をサポートするにも縫い針に糸を通せず、現実を受け入れ眼鏡屋さんの扉を叩きました。
スマホを見るにも本を読むにもストレスが大きく軽減され快適です！
【嵐田】
朝の昆布作業から解放され、5時間睡眠から8時間睡眠に移行したことで、徐々に 体調が良い方向に戻ってきました。
ご褒美に以前から気になっていた3万円の枕 を購入。使った感想としては雨の日でも快晴かと思うくらい目覚めがスッキリし て、気分も最高という感じでした。寝具って大事だなと痛感したので、今後は 別の寝具もグレードアップさせようと思います。
【田島】
最近リリースされたスマホのRPGゲームを始めたところ、盛り上げるために運営サイドからゲーム内で使用できるアイテムなどがお知らせとともに、とある金曜日に無料配布されたのですが…その時のお知らせが「アイテムを使って、花金を楽しみましょう！」という内容でした
花金！しばらく聞いていない単語！ゲームプレイヤーの年齢層はおそらく花金という言葉を知らない層では…なんて思いながら久々に目にした花金にちょっぴり「フフッ」となってしまった田島です。
【高田】
函館では春と秋の年に2回、チケット制の飲み食べ歩きイベント「バル街」が開催されます。
5枚綴りのチケットを事前購入し、イベント参加店をハシゴして飲み、食べ歩く・・・つまりはハシゴ酒です(笑)バルとはスペイン語で居酒屋などの「社交場」を意味し、そのバルの連なりを函館の西部地区で再現しようと今から17年ほど前にスタートしました。
チケット1枚につき、ドリンク1杯＋ピンチョス（おつまみ）1品が振舞われ、普段は敷居が高く入りにくいお店でも、このイベントのときは気軽に入れちゃうのも魅力の1つです。
函館バル街恒例の「振舞いサービス」もあり、ここで出される生ハムがもう絶品！函館の秋の風物詩と化してるので、コロナが終息した暁にはぜひ参加してみてください。
【後藤】
年老いた両親のために「脳ブロック・ペントミノ」といって長方形の箱にランダムな形のブロックをキレイにはめるというパズルを買いました。
答えは2000通り以上あるそうで、簡単そうにみえたので難易度1を通り越して2からスタートしました。やってみるととても難しく、いまだに全部はめれたことがありません。こういうものはちゃんと難易度1からスタートするべきだったと後悔しました。