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担当者として月額サポートします。

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

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


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






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

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


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方


どうぞWeb365の個別講座をご覧ください。

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

執筆者:

関連記事

Androidで確認するとサイトの右にできる余白を消す方法

iPhoneでは普通のサイトもAndroidで確認するとサイトの右に余白ができることがあります。今回はその解消方法です。 調べると3つほど解決法があります。 min-widthを指定してみる view …

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

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

【体験】オンラインビジネスチャットサポートってなに?無料体験の流れと機能を解説

Webサイトの閲覧ユーザーの満足度をあげる機能「オンラインビジネスチャットサポート」、つまりチャットってどんなものなの?いちサービスを無料体験してみた流れと機能解説などしてみたいと思います。 Web3 …

ALTタグ入力の方法

【Webマーケティング】画像検索一覧に表示させる方法なら、ALTタグ入力がおすすめ

ビジュアル商材を扱っているサイトですと画像検索からの流入も意識したいですね。どんな対策があるか知っていますか? そんなときは、画像のALTタグの入力がおすすめです。 ALTタグの入力で画像検索で自商材 …

WordPressの企業サイト事例

WordPressの企業サイト事例とテーマ選【徹底解説】

  【5分で読めます】 WordPressで企業サイト構築の検討に役立つ記事です。 WordPressで企業サイトを構築するメリット・デメリットやWordPressの企業サイトに向いてるか判断する7つ …

【解説】売上規模0から数十万円のECサイトを制作するときの考え方とサービス比較

【5分で読めます】 クライアント事例として、ECサイト(eコマース、つまりオンラインショップ)を新規作成したいときに、「なにで、どう作ればよいか?」ついての全体感と直近サービス列挙から提案事例を解説し …

【コピペ】見積もり計算フォームを作成しましたので活用ください

ビジネスサイトで商材の見積もり計算機能がほしいと感じることはありませんか? クライアント事例で、Word Pressで、「見積計算機能」を作成しました。各項目と個数入力などで小計と合計を計算する仕様で …