月別: 2021年11月

マーコム・サポーターの椎名です。中小企業や個人事業主のマーケティング活動をサポートする傍ら、ライティング活動も行っています。今回はWebのヒートマップ分析について、活用方法や分析ツールについて取り上げたいと思います。

ヒートマップとは、多次元データの関係性を色で表現し、わかりやすくするものです。Webにおけるヒートマップはページのどこが見られているか、どこをクリックしたかをビジュアルで表現しています。そうすることで、サイトの問題点や、ユーザの隠れたニーズを視覚的に解析できるようになります。

とはいえ、ヒートマップ分析はさまざまな種類があり、具体的にどう見ればよいのか迷ってしまうかもしれません。分析結果をどう読み取って、どこをどう改善すればよいのかわからない方も少なくないでしょう。そこで本記事では、一般的に使うヒートマップ分析を取り上げ、指標の見方や改善ポイントについて解説します。後半では、おすすめの分析ツールについても簡単にご紹介します。

ヒートマップ分析の主な種類

一般的に使われている基本的なヒートマップ分析は以下の3つです。

• アテンションヒートマップ
• スクロールヒートマップ
• クリックヒートマップ

アテンションヒートマップは、ページのどこがどのくらい見られているか、その熟読率を可視化。それに対し、スクロールヒートマップは読了率をみます。すなわち、ユーザがページのどこまでを見て、どこで離脱しているかがわかるのです。クリックヒートマップは、文字通り、どこがよくクリックされているかを確認できます。

上記3つ以外に、ユーザのデバイス操作の動きから興味関心を分析できるものとして以下の2つがあります。

• マウスフローヒートマップ
• タッチアクションヒートマップ

マウスフローヒートマップは、マウスの動きが分かるもの。これはPCからのアクセスのみ有効です。これに対して、タッチアクションヒートマップは、スマートフォンやタブレットに向けたものです。タップやスワイプユーザのタッチパネルの操作を可視化します。

ヒートマップ分析でわかること

ここでは、基本的な3タイプのヒートマップについて、ヒートマップで読み取れる指標や分析のチェックポイント、実際にどう改善に導いていけばよいかについて解説します。

アテンションヒートマップ

アテンションヒートマップの指標は熟読率です。マウスなどの動きからどれだけその箇所を読んでいるかを可視化できます。分析のポイントとして、以下があげられます。

• 注目してほしいところが想定通り熟読されているか？
• 想定外によく読まれているところはあるか？

分析結果に対する具体的な改善策としては、例えば、次のようなものがあげられます。

【注目してほしいところが読まれていない場合】

ユーザがわかりにくいと考えて読まれていない可能性があります。その場合、図表で視覚化したり、コピー文を変えたりして、反応があがるかを試してみましょう。

【想定外によく読まれている場合】

その部分がユーザの隠れたニーズである可能性があります。サイト上部の目立つところに再配置することで全体の反応が高くなる可能性があります。

スクロールヒートマップ

スクロールヒートマップの指標は離脱率です。何％のユーザがどこまで画面をスクロールしているかを確認します。分析のポイントとして以下があげられます。

• どこで大幅に離脱しているか？
• サイトのコンバージョン地点とその周辺の離脱率はどうか？

改善策の例として、以下があげられます。

【大幅に離脱している個所がある場合】

サイトに書かれている情報が、ユーザの求めるものと違っているかもしれません。ターゲットユーザの求めるコンテンツは何かを洗い出し、可能性のある情報に差し替えるといいでしょう。

なお、大幅に離脱している地点の近くに重たい画像がある場合、画像の読み込み速度の問題で離脱に繋がっている可能性もあります。画像を軽くするか、思い切って削除してしまうのも手です。

【サイトのコンバージョン地点に至らずに離脱してしまっている場合】

この場合、コンバージョンに至るまでの説明が長すぎる可能性があります。コンバージョンの位置を上にあげるだけでも効果がでる場合があるので、試してみることをおすすめします。

クリックヒートマップ

クリックヒートマップはクリック率を可視化します。どのくらいユーザがその場所をクリックしているかを可視化できます。分析のポイントとしては、以下です。

• コンバージョンにつながる場所が想定通りクリックされているか？
• リンクがないのにクリックされている箇所はどこか？

改善策の例として以下のようなものがあります。

【想定通りクリックされていない場合】

ユーザがクリックしたいと思わない、興味がもてない可能性があります。これはコピー文を変えるだけでもユーザの態度変容を促すことができるので、文章を変えてみるのもおすすめです。

また、UIがわかりにくく、クリック箇所だと思われずに素通りされている可能性もあります。その場合は、ボタンの色を変えるだけでも改善するので試してみるとよいです。

【リンクがないのにクリックされている場合】

例えば、そこに画像がある場合、画像が小さく読みづらいため拡大しようとしている可能性があります。その場合、画像を見やすく改善するか、拡大画像を設けるとよいです。

ヒートマップを使ってサイトの改善をする際は、このようにヒートマップの分析のポイントを見て、なぜそうなったかを考え仮説をたてることが重要です。そうすることで改善策の糸口がつかめます。

ヒートマップは組み合わせて改善せよ

ヒートマップは、単独で指標を見るだけでなく組み合わせて使うとより効果的です。ここでは、2つ例をあげて説明します。

• アテンションヒートマップ×スクロールヒートマップの例

アテンションヒートマップの熟読率が高いにも関わらず、スクロールヒートマップで離脱が多いことがあります。これは、ユーザがその箇所でなんらかの混乱を起こして結果的に熟読率が高くなっているリスクを示しています。コンテンツがわかりにくい可能性があるので差し替えたほうがよいでしょう。

• スクロールヒートマップ×クリックヒートマップの例

コールトゥアクション（CTA）となる登録フォームの近傍をスクロールヒートマップみると、離脱が多くなっていることがあります。これは2つの可能性があります。ひとつは、想定通りコンバージョンしている場合です。この場合は改善の必要はありません。

もうひとつは、登録せず離脱している場合です。これをクリックヒートマップのクリック状況で確認できます。離脱している場合はクリックが少なくなっています。ユーザは登録を迷っているので、迷いを解消する内容を盛り込んでみるとよいでしょう。

主なヒートマップ分析ツール

ここでは、無料で使える代表的なヒートマップ分析ツールをいくつか紹介いたします。

• ミエルカヒートマップ（https://mieru-ca.com/heatmap/）

シンプルでわかりやすい操作性であり、初めてでも迷うことなく操作できます。無料プランでもサポートを受けられるので初心者でも使いやすいツールです。

• User　Heat （https://userheat.com/）

URL数無制限で30万PVまで無料で使えます。入力フォームにサイトのURLを登録するだけで利用可能です（ただし、計測タグの埋め込みは必要）。有料版としてUser Insightsがあります。

• Ptengine （https://www.ptengine.jp/）

国内導入実績No.1のツールで、世界で20万社が利用しています。サイト全体のアクセス解析とヒートマップ分析を一元管理できます。

• Sitest （https://sitest.jp/）

アクセス解析も兼ね備えているツールです。A/BテストやEFO機能も搭載しています。AIによるレポーティング、流入チャネル分析が可能です。マウスフローヒートマップが搭載されているため PCユーザの解析はおすすめです。

• Contentsquare （旧：Clicktale、https://contentsquare.gaprise.jp/）

コンテンツ単位のROIも可視化できるツールです。コンバージョンへの貢献を金額で見ることができるので、ECサイトなどで有効活用できます。

まとめ

ヒートマップ分析は、サイトの改善やユーザの隠れたニーズを探るのに役立つちます。「どこがよく見られていて」「どこで離脱されているのか」を視覚的に表現しているので初めての人にもわかりやすいです。

ヒートマップ分析にはさまざまな種類があります。「どこをどう改善したいのか」、複数のヒートマップを組み合わせて分析するとよいでしょう。ヒートマップツールはさまざまなものがあり、無料で使えるものも多いので目的に合わせてまずはトライアルで導入してみることをおすすめします。

The post ヒートマップ分析で何がわかる？主な活用方法やおすすめのツールを紹介 first appeared on モノカク.

テクノポートの井上です。Webサイト制作を行う中で内容が膨らみ、より凝った動きを加えていった結果、ページ表示速度が遅くなってしまったということはありませんか？今回、弊社のお客様にモニターのご協力をいただき、ページ表示速度の改善を行いました。どれくらいの改善ができたか、どのように行ったかを紹介いたします。

結果からお伝えすると、下記のように大幅なページ表示速度の改善ができました。（もともとが遅すぎたというお話もありますが）
ご協力いただいた企業　荒川技研株式会社（https://a-giken.co.jp/）

ページ表示速度の重要性

ページ表示速度がなぜ重要か、主に「ユーザー視点」と「検索順位」の2つの理由が挙げられます。

サイトの離脱率に影響

2017年と2018年のGoogleの調査によると、ページ表示速度が1秒から3秒になると直帰率が32%増加、6秒になると106%増加、10秒まで遅くなると123%増加すると報告されています。 また、表示に3秒以上かかるモバイルページからは53%のユーザーが離脱するそうです。

SEO評価に影響

Googleは、2018年にモバイルページの検索順位の評価付け（速度が遅いとマイナスの評価を付ける）として、ページ表示速度を評価項目に取り込むと発表しました。ページ表示速度が遅く、ユーザーがストレスを感じるサイトは順位が下がる可能性があります。

ページ表示速度の確認方法

ページ表示速度について数値で表すことができれば、改善できたかどうかも計測できます。ページ表示速度を調べるにはいくつかありますが、一番メジャーなものはGoogleの「Page Speed Insight」です。

調べたいサイトのURLを入れるだけで、簡単に表示スピードを調べることができます。さらに調査結果に対して、改善点や改善方法をアドバイスしてくれます。

ページ表示速度を決定する3つの要因

では、ページ表示速度はどのように決まっているのでしょうか？ページ表示速度の決定要因を理解することで、改善の糸口が見えてきます。ページ表示速度は主に以下の3つの要因で決まります。

1．ネットワーク処理

通信量や通信回数によって表示スピードに影響を与える処理のことです。

2．レンタリング処理

サーバーから送られてきたデータを画面に表示させる処理のことです。HTMLデータやCSS、JavaScript処理、画像データも含まれます。

3．サーバー処理

プログラムやDB（データベース）からWebページの材料となるデータを生成するサーバー側の処理のことです。改善にはプログラム言語やDBの知識が必要となりますが、 レンタルサーバーの場合は編集不可能な場合がほとんどです。レンタルサーバーを使用する場合は、もともと高速なサーバーを選ぶことが大切になります。

「WP（WordPress）におすすめのレンタルサーバー」などで検索すると、いろいろ紹介されています。ちなみに弊社では、自社でも利用しているエックスサーバーをおすすめしています。他にも「ConoHa WING」がおすすめされているケースが多いようです。

具体的な改善手段

ページ表示速度の決定要因がわかったところで、ではどうすれば改善できるのでしょうか？具体的な改善手段をいくつか紹介します。

プラグインを見直す（不要なプラグインの削除）

基本的にプラグインは少ないほうがよいです。利用していないプラグインは積極的に削除しましょう。

PHPのバージョンを最新にする

簡単にできて、大幅な改善が見込めるPHPのバージョンアップ。サーバーの管理画面から切り替えが可能です。バージョンアップする際には事前にバックアップをとることをおすすめします。

画像の読み込みを遅延させる

画像の読み込みを後回しにすることでページ表示速度を上げます。WordPress5.5以降は設定の必要がなく有効になったようですが、imgタグにwidthとheightの入力が必須です。

画像の容量を適切なサイズにリサイズする

サイズの大きい画像をそのままページに入れてしまうと、表示が遅くなります。必要最低限のサイズにリサイズした上でメディアにアップするようにしましょう。今までアップした画像のサイズをリサイズできるプラグインもあります。

WordPressキャッシュ化プラグインを導入する

代表的なキャッシュ化プラグインとして「WP Super Cache」があります。

記事を開くたびにHTMLファイルを動的に読み込むのではなく、静的なHTMLファイルを自動生成し、それを表示することによりサイトの表示速度を改善できます。

サーバーを見直す

WordPressの表示速度が速いとされるサーバーに切り替える方法です。移行は手間がかかりますが、大きく改善できる可能性があります。国内最速と評判が良いのは「ConoHa WING」のようです。

荒川技研株式会社の改善内容

今回行った修正内容は以下の通りです。

• 画像圧縮（必要に応じたサイズ変更・圧縮後効果確認含む）
• 画像遅延読み込み処理（JavaScript不使用　画像サイズ調査含む）
• 動画遅延読み込み処理(JavaScript不使用　動画サイズ調査含む）
• 画像、動画preload処理
• JavaScriptファイルの遅延読み込み処理
• キャッシュ・ファイル圧縮関連プラグイン最適化
• ブラウザキャッシュポリシーの最適化

自社で取り組める内容もあれば、エンジニアにお願いしないとできないものもあります。まずは自社でできるものを試し、それでもうまく改善しない場合には制作会社に相談するとよいかと思います。

今回のケースでは、表示速度は大きく改善されましたが、それに伴い直帰率や離脱率の数値改善ができればという狙いがありました。しかし、数値を見る限り大きな変化は見られませんでした。

ECサイトはユーザビリティに関して非常に高いレベルを求められるが、BtoBのサイトの場合、そこまでの水準は求められないのではと考えています。ショッピングではなくビジネスとして、自社の要望にあった技術や加工を提供できる会社なのか、ユーザビリティよりも、コンテンツの中身をよく見ているのではと思います。

もちろんページ表示速度が速いに越したことはないので、あまりにも遅い場合は改善を検討してみてはいかがでしょうか？ページ表示速度の改善手法について紹介しました。参考にしていただければ幸いです。

The post Webサイトのページ表示速度の高速化を実現（ビフォー・アフター事例付き） first appeared on モノカク.