ClarityでわかったECサイトの改善ポイント実例集

ここまでヒートマップとセッション録画の見方をお伝えしてきました。

「理屈はわかったけど、実際どう使うの？」

そう思った方のために、今回はClarityのデータから改善ポイントを見つけて、実際に直した事例を紹介します。

すべて、私たちがECサイトの支援で実際に経験したケースです。

事例1：商品画像の下で離脱が多い → 情報不足だった

あるアパレルECサイトの商品ページ。GA4で見ると離脱率が高いことはわかっていたが、原因がわからなかった。

スクロールヒートマップを確認すると、商品画像のすぐ下で閲覧者の40%が離脱していた。

セッション録画を5件見てみると、共通の行動パターンがあった。商品画像を見る→少しスクロールする→すぐに戻る→ページを閉じる。

画像の下にあったのは、素材名と洗濯表示記号だけ。サイズ感も着用イメージも書いていなかった。

商品画像の直後に以下を追加した。

・着用スタッフの身長・体型情報（「身長162cm、普段Mサイズ着用」）

・サイズ選びの目安テーブル（スマホでも読める形式で）

・「○日以内返品無料」の案内

商品ページの滞在時間が1.5倍に伸び、カート追加率が上がった。

事例2：CTAボタンが画面外 → スクロールしないと見えなかった

食品ECサイトのトップページ。スマホからのアクセスが80%以上なのに、コンバージョン率が低い。

スマホのスクロールヒートマップを確認。ファーストビュー（スクロールなしで見える範囲）には大きなバナー画像だけが表示されていた。

「今すぐ購入」ボタンはスクロールした先にあったが、スマホユーザーの50%以上がファーストビュー内で離脱していた。

つまり、半数以上の人がボタンの存在すら知らずに帰っていた。

ファーストビュー内に「人気商品を見る」ボタンを追加。バナー画像の高さを少し縮めて、ボタンがスクロールなしで見えるようにした。

スマホでの商品ページ到達率が大幅に改善。ボタンの位置を変えただけで、商品ページへの流入が増えた。

事例3：スマホで文字が小さすぎる → レスポンシブの問題

雑貨ECサイト。「商品の説明はちゃんと書いているのに、なぜか売れない」という相談。

スマホのセッション録画を見てすぐにわかった。

商品説明文のフォントサイズが10pxしかなく、スマホではほぼ読めない。お客さんが画面をピンチアウト（指で拡大）しようとしている動きが何度も録画されていた。

さらに、商品スペック表がPC向けの横幅で作られていて、スマホでは横スクロールが必要な状態だった。

・商品説明文のフォントサイズを16pxに拡大

・スペック表をスマホ対応のレスポンシブデザインに変更

・画像とテキストの間に余白を追加して読みやすく

スマホからの平均閲覧ページ数が増加。商品ページの滞在時間も伸びた。

事例4：送料ページをひたすら探している人がいた

美容系ECサイト。カート放棄率が業界平均より高い。

セッション録画で、商品ページからフッターに移動し、「送料について」というリンクを探しているお客さんが多数いた。

でも、送料の情報はフッターのリンクの先にある別ページにしかなかった。しかも、そのリンクの文言が「特定商取引法に基づく表記」で、お客さんにはそれが送料ページだとわからなかった。

・商品ページの購入ボタンのすぐ上に「送料：全国一律500円。○○円以上で送料無料」と明記

・フッターに「送料・配送について」という専用リンクを追加

カート放棄率が改善。お客さんが「探す」行動をする必要がなくなった。

事例5：「お気に入り」ボタンを「購入」ボタンと間違えている

あるECサイトで、「お気に入りに追加」のクリック数が異常に多いのに、実際のお気に入り登録からの購入がほとんどない。

クリックヒートマップを確認すると、「お気に入りに追加」ボタンが「カートに入れる」ボタンのすぐ隣にあり、しかも両方ともオレンジ色だった。

セッション録画を見ると、お客さんが「お気に入りに追加」をクリックした直後に「あれ？」という感じでページ内を探し回る動きがあった。カートに入れたつもりが、お気に入りに入ってしまったのだ。

・「カートに入れる」ボタンを大きくし、色をサイトのメインカラー（オレンジ）に

・「お気に入りに追加」はハートアイコンだけのシンプルなデザインに変更し、位置も離した

「カートに入れる」のクリック率が上がり、お気に入りの誤クリックが激減。

共通するポイント

5つの事例に共通しているのは、こういうことです。

ボタンの位置を変えた。テキストを追加した。フォントサイズを大きくした。

やったことは小さい。でも、お客さんの行動をデータで見て「ここが問題だ」と特定してから直したからこそ、効果があった。

当てずっぽうで全体を作り替えるのではなく、ピンポイントで直す。

Clarityはそのための「目」を与えてくれるツールです。

次回予告

次回からは3つ目のツール「Google Search Console」に入ります。GA4が「サイトに来た後」、Clarityが「サイト上での行動」を教えてくれるのに対して、Search Consoleは「サイトに来る前」、つまり検索での表示状況を教えてくれます。