ABOUT

クライアント

教育関連企業(前職)

依頼内容

既存ページの改良

目的

新規顧客の獲得

目標数値

GA4:離脱率 10%減少

Clarity:サイトウ先生紹介エリア前までのスクロール 20%増加

メインターゲット

小・中学生の勉強が苦手な子どもがいる母親(30~50代女性)

クライアントの要望

GA4・Clarityのヒートマップから考察しどこを改良したら目標数値を達成出来そうか提案してほしい。

わかりやすく印象に残るようなFVに変えてほしい。

掲載後から3ヶ月間を目安にGA4・ヒートマップで反応を確認し、必要に応じて改良してほしい。

担当範囲

データ分析 / デザイン

CHALLENGE

TOPページは、新規顧客獲得の入り口となる重要なページであり、集客ファネルの起点として大きな役割を担っていました。

しかし、GA4とClarityのヒートマップを用いた分析の結果、以下の課題が明らかになりました。

  • 体験レッスンページへのリンクバナーの手前でスクロールが約40%が離脱しており、リンク自体のクリックも少ない
  • 指導法エリアでスクロールが約40%離脱
  • サイトウ先生紹介エリア前までのスクロールが約80%離脱
  • よく見られているページエリアの4つあるリンクのうち2つはほとんどクリックされていない状況

ページ全体の構成変更は社長やSEO担当との調整が必要で、デザインチームのみでは実施できないため、改善可能なFV〜よく見られているページエリアまでを優先的に改良することで、離脱を防ぎ、CVにつながる導線を強化することを目指しました。

IMPROVEMENT

1. FVの変更

従来はコロナ禍に合わせたオンライン指導をメインにしたビジュアルでしたが、簡単に成績アップができることをメインで訴求し、実績もわかりやすく掲載する構成に変更しました。Webディレクターがワイヤーフレームを含めて企画してくれていたので、ディレクターやコーダーと相談しながら、企画イメージに沿ったデザインを作成しました。

左がBefore、右がAfter

FVのbeforeとafterの画像

2.FV下〜よく見られているエリアのレイアウト・デザイン改善

ヒートマップで確認した範囲を中心に、体験レッスンへのリンクバナー導入文はカット、押されていないお知らせリンクバナーも削除しました。

体験レッスンリンクバナー以降の構成を以下のように整理しました

  • 初めての方への導入文+リンクバナー(元々よく見られているページエリアにあったもの)
  • よく見られているページエリア(リンクバナーは4つから2つに削減)
  • 指導法エリア(重複していた下部エリアはカット、モバイル版が長くて見づらいので短くスッキリさせた)

左がBefore、右がAfter

レイアウトbeforeとafterの画像

指導法エリア モバイル版 左がBefore、右がAfter

指導エリアモバイル版beforeとafterの画像

3.データ分析中の改善

  • 初めての方へのリンクバナーのクリック率を上げるため、バナー上に矢印を追加
  • よく見られているページエリアのリンクを、クリック数も少なくCVRが低かった『塾で伸びない3大原因』からCVRが高い『他社との料金比較』に差し替え

左がBefore、右がAfter

バナーbeforeとafterの画像

RESULT

GA4とClarityの分析により、以下の成果が得られました。

離脱率の10%減少を達成(目標達成)

Clarityのスクロールマップにて、各エリアで以下の改善・目標達成

  • ファーストビュー(FV)のスクロールが約5%増加
  • 体験レッスンリンクバナー手前でのスクロールの離脱が約40% → 約10%に改善(約30%増加)
  • 指導法エリアでのスクロールの離脱が約35% → 約5%に改善(約30%増加)
  • サイトウ先生紹介エリア前までのスクロール増加が目標20%を大きく超え、約40%増加

リンクの成果改善

  • よく見られているページエリアのリンクを『塾で伸びない3大原因』から『他社との料金比較』に変更した結果、リンククリック数が増加
  • これにより、CVRが上昇し、CPAが減少

特に、離脱率改善とスクロール率向上により、ユーザーがページ下部までスムーズに到達する導線を実現できました。

DATA

制作期間

FVデザイン作成:1週間

データ分析・デザイン改善:3ヶ月

使用ツール

Adobe XD / Photoshop / Illustrator / GA4 / Microsoft Clarity

BEFORE・AFTER

左がBefore、右がAfter

全体ビフォーアフター画像