WEB担当ツール・ハウツー WordPressでホームページを作るには

【事例】ヒートマップ分析でWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と改善方法を解説

投稿日:

Webサイトの改善で、ユーザーの閲覧具合をみて、改善をはかりたいとき、「ヒートマップ」での分析はひとつの選択肢です。

今回は、ヒートマップでWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と改善方法を解説します。

 

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

 

当方、クライアントのWebコンサルも担当するので、分析改善から、新規ツール導入の提案や調査などもしております。

 

新しいWebサービスツールを導入するときの進め方と17のチェックリスト

 

ヒートマップ分析とは

イメージ01_ヒートマップの分析改善方法

 

ヒートマップ分析とは、ユーザーの閲覧具合を分析する手法です。

今回利用させていただいたサービスでは、下記の3つの指標を用いて分析します。

  • アテンション
    (熟読具合、クリックなどのアクション具合)
  • スクロール
    ページをどのくらいスクロールしているか
  • クリック

などを率で計測して、ユーザーの興味関心にとってページの良い点、悪い点を把握することができます。

 

 

メリット

ユーザー視点、数値による客観的なページの分析改善ができる

があります。

 

事例、ヒートマップツールを1ヶ月運用した分析改善

今回、ヒートマップツール「ミエルカ」を採用し、1ヶ月ほどの計測期間で、分析と改善をはかりました。

「ミエルカ」は

  • 1週間トライアル(有料範囲までさわれます)
  • トライアル終了後、無料枠は継続利用できます

今回は、無料枠の範囲で計測分析改善の事例です。

下記は、実際のページのヒートマップされたビジュアルのサンプルです。

 

イメージ03_ヒートマップの分析改善方法

 

有効熟読率と各ヒートマップの解説

有効熟読率について

上記画像の左上に「有効熟読率」が計測されています。ここでは2.96%(例、10/28-11/4の期間)。

この数値を、期間ごと週次ペースでどうあげるかを事例にします。

 

各ヒートマップの解説

画像、再掲、各ヒートマップの解説です。

イメージ03_ヒートマップの分析改善方法

  • アテンションヒートマップ
    各セクションごとに数値が表示されます。

    解説:
    スクロールをとめている時間を熟読、そのほかクリック率をアクションとし、総合的なアテンション率を計測)

  • スクロールヒートマップ
    ページをどのくらいスクロールしているか

    解説:
    ページ最上部は当然100%、そこから次のセクションで67%がスクロールしている場合、23%は離脱(サイトもしくはページを離脱)
    つまり、著しく離脱するセクションの改善をはかる

  • クリックヒートマップ
    どこがクリックされているか

    解説:
    ファーストビューの問い合わせボタンをクリックされたい場合、本当にクリックされているか、クリックされている具合でニーズが判断できる

 

ヒートマップ運用の分析改善の時系列

時系列は下記です。

  1. 導入から2週目:計測(改善できそうな箇所を特定する)
  2. 2週目    :特定した改善箇所を修正
  3. 4週目終了  :計測(改善箇所の数値を注視)

Webサイトの分析改善のセオリー

分析改善のセオリーとしては、

  1. 既存の数値を計測する
  2. 比較できるよう複数の数値を集計する
  3. 他に比べ、数値が低い点を見つける
  4. 改善点を検討する
  5. 実装する
  6. 改善後の数値と改善前の数値を比較する
  7. 改善後が高まっていれば成功、
  8. それ以外なら別の改善案を再度試す

といった具合です。

ヒートマップ導入から2週目、計測

今回、当サイトのトップページを事例に、

期間別に計測したデータをトップページの画像と合わせて解説していきます。

 

ヒートマップ導入から2週目、まずは計測です。

当時のトップページの最上部から2番めのセクションの画像です。

 

イメージ04_ヒートマップの分析改善方法

 

余談ですが、サイト構成の意図を解説します。

  • ファーストビュー
    (サイトの端的なアクションボタンしてほしい)
  • 次のセクションは課題感の提示
    (当サービスが解決できる課題を提示)

です。

なぜこのようなサイト構成なのか、ページの目的で変わりますが、サイト構成の考え方を解説した記事も合わせてご覧ください。

 【簡単】商材ページ、13のポイントを意識して簡単につくる方法

 

確認、トップページの計測全期間の「有効熟読率」データ

次に、トップページの計測全期間の「有効熟読率」データです。

結論、有効熟読率が1.74%から7.94%に向上してます。

 イメージ05_ヒートマップの分析改善方法

 

次に、トップページの計測全期間の「スクロール」「アテンション」データです。

ページの各セクションを横軸にして、「スクロール」「アテンション」別に数値を集計しています。

 

イメージ06_ヒートマップの分析改善方法

 

スクロール、アテンションの各行ごとに、数値の昇順でカラースケール表示しています。

色付けすることで、セクションの関心度が確認、比較できます。

 

ヒートマップ導入、2週目、改善箇所を修正

既存ページの数値把握、集計ができたら、改善箇所を特定し、修正します。

今回特定したのは、下記画像の青枠、

ファーストビュー/課題提示のセクションと、実績セクションのあいだあたりです。

 

イメージ07_ヒートマップの分析改善方法

 

ページイメージですと、下記画像、赤枠です。

 

イメージ08_ヒートマップの分析改善方法

 

上記、赤枠の箇所で数値が低い、つまりボトムなので、改善をはかります。

この場合の、ページの改善セオリーは、

  1. 読みやすく
  2. 分かりやすく

です。

他にも、サイト改善の考え方を解説した記事も合わせてご覧ください。

【徹底解説】Webサイト改善の27の王道メソッド

 

今回は、テキストの情報を、「読みやすく、分かりやすく」したいので、ビジュアルを足して、改善しました。

ページイメージですと、下記画像、赤枠です。

 

イメージ09_ヒートマップの分析改善方法

 

この改善で経過をみていきます。

 

ヒートマップ導入、4週目終了

下記青枠、改善箇所の数値経過です(再掲)

10月15日に改善しています。

 イメージ07_ヒートマップの分析改善方法

 

改善後、「スクロール」の数値に向上が見られます。

最終週も「アテンション」の数値が向上していますが、次週(11月初週)も含めて、トレンドで見ていきたいので、参考にとどめ、全体的にポジティブな反応があったくらいでみておきます。

 

次に、有効熟読率の数値です。(再掲)

 

イメージ05_ヒートマップの分析改善方法

 

結論、有効熟読率が1.74%から7.94%に向上してます。

各週ずつの数値変化もみていくと、

  • 1週目:1.74%
  • 2週目:2.38%(前週から1.36倍)←ここで改善
  • 3週目:5.90%(前週から2.47倍)
  • 4週目:7.94%(前週から1.34倍)

前週比較すると、
改善後の2週目から3週目が2.47倍と大きな変化が見られます。

改善修正が成功と判断していいでしょう。

まとめ

分析改善のセオリーとしては、

  1. 既存の数値を計測する
  2. 比較できるよう複数の数値を集計する
  3. 他に比べ、数値が低い点を見つける
  4. 改善点を検討する
  5. 実装する
  6. 改善後の数値と改善前の数値を比較する
  7. 改善後が高まっていれば成功、
  8. それ以外なら別の改善案を再度試す

 

ヒートマップ分析改善は、

  • 「スクロール」と「アテンション」の数値をチェック
  • 各セクションの数値を比較し、改善を特定する

 

分析改善の時系列は、

計測、改善、計測ですすめる

  1. 計測(改善できそうな箇所を特定する)
  2. 特定した改善箇所を修正
  3. 計測(改善箇所の数値を注視)

 

以上です。

 

ご活用ください。

 

■お気軽にご相談ください

ヒートマップ導入のサポートや、そもそものWebサイトの分析提案や改善実行など相談したい方はこちらよりお気軽にご連絡ください。

必須お名前
必須メールアドレス
必須ご相談内容
必須メッセージ本文

 

 






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方

どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。






外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています

・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。

【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行(Googleアナリティクス、eコマース、ヒートマップClarityなど)


まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。

WEB担当ツール・ハウツー, WordPressでホームページを作るには

執筆者:

関連記事

文字起こしは音声データを口頭でGoogleドキュメントに音声入力するがなんだかんだ一番かもです

文字起こしは音声データを口頭でGoogleドキュメントに音声入力するがなんだかんだ一番かもです。 クライアントさんの話を聞き書きし、記事化する業務をしています。 その際に、音声データを文字起こしする必 …

SEO対策の記事を無料ツールを使って4ステップでつくる方法

SEOを意識したサイト作りをする際に、ページや記事を作成する必要があります。Googleなどの無料ツールを活用しながらSEOに合った記事構成案までつくる方法を解説します。 ※メモ書きです。後日詳細を追 …

【解説】EC機能内製化の検討例と7.27%のコストカット試算事例

クライアント事例として、自サイトでEC機能(eコマース、つまりオンラインショップ)内製したいときのリニューアル検討についての調査と意思決定についての流れを解説します。 Web365とは Web365は …

お問合せを増やしたいフォームの制作の方法と考え方

【コピペ】お問合せを増やしたいフォームの制作の方法と考え方_前年比200%増の成果事例

お問合せを増やしたいときには、お問い合わせフォームの制作や改善が優先度の高い施策になります。ビジネスに活用するサイトでは集客から逆算したサイト作り意識しましょう。 今回はお問合せを増やすためのフォーム …

【完全網羅】Word Pressの保守運用・セキュリティ59の対策一覧

Word Pressのセキュリティ対策の一覧と情報収集ソースを59ほどリストアップしました。自身のサイトのセキュリティ対策にご活用ください。   Web365とは Web365は、外部Web担当者とし …

イメージ00_【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれておこう

【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれておこう

【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれ方を解説します。 クライアントサイトで対応例です。前提条件もありますが、プラグイン2つで対応します。 W …

【秒速解決】Word Press Popular Postsでウィジェット保存できないときの解決方法

Word Pressのプラグイン「Word Press Popular Posts」でウィジェット保存できない挙動があったので、その解決方法を解説します。 Web365とは Web365は、外部Web …