ECサイトのTOPページ改善してみた！改善の流れと売上を上げるために考えるべき改善ポイント

こんにちは。ディーエムソリューションズでマヌカハニー専門店BeeMeを運営しています、ECの虎チームの岸川です！
こちらの記事では私が自社内でECサイトを運営する中で成功したことや失敗したことを包み隠さず公開していきます！

いまECサイトを運営されている方、立ち上げを検討されている方はぜひ実例として参考にしてみてください。
今回はECサイトの顔ともいえる、TOPページを改修した話をさせていただきます！プチ改善なのでどんなところを変えてどうなったのか、ぜひ見ていってください～。

そもそもECサイトにおけるサイト・ページ改修が必要なタイミングはいつ？

一般的なWebサイトの改修タイミングとしては以下5つが考えられます。

デザインが古い

日々Webのデザイントレンドは変化していきます。そのため数年などある程度の時期でうちのデザイン古いかも…と思うことが出てくる方も多いと思います。デザインが古いと購買意欲をなくしてしまうユーザーもいるため改修のタイミングです。

情報が多くなりすぎる

新サービスや各部署からページに掲載したい要望を受け続けていると、トップページの情報が煩雑になりがちです。情報が多くなると、当時のサイトリニューアルした目的とずれたページデザインになっていることも。情報過多がユーザーファーストではないと感じたら変え時です。

サポート対象外の機能がある

2020年12月31日にサポート対象外になったFlashなど、古いバージョンがページに掲載されている場合は即刻改修したほうが良いです。

スマートフォン未対応

既に未対応のサイトは少なくなっていますが、多くのサイトはモバイル経由のユーザーがPCより多くなっています。現ページがスマホファーストになっていないと感じるようであれば、デザイン改修のタイミングです。

サービスとの実態に乖離がある

製品やソリューション、サービスなど実態が、ページに反映されていないようであればページ改修をやるべき時です。

当社ECサイトBeeMeの場合はサイトオープンから3年以上経っていることや、スマホファーストなサイト集客改善の一環としてテコ入れすることにしました。

実際どのように進めていったのか？改修の流れをご紹介！

はじめに：予算を決めて対象範囲を決める

まずは予算がどのくらいかけられるのか。これに尽きますよね！予算はほとんどの場合は普段出ている利益（粗利）をもとにどのくらい出せそうか考えると思います。

当社の場合は費用感やリソースの関係から今回は一番見られる“サイトの玄関口“TOPページの改修のみをすることにしました。さらに、昨今のモバイルファーストインデックスの流れからデバイスはスマートフォンメインに据えた改善を行うことにしました。

ちなみに、デバイスごとのデザインについて補足すると当社ECサイトBeeMeではレスポンシブ対応をしているので、大枠の構成・デザインは一緒ですが細かいレイアウトが少し違っています。

改修するときは自分のサイトがデバイスごとでどのように動作させるように設定されているのか把握しておき、改修によって各デバイス（PC・スマートフォン）ごとにデザイン面でどのような影響が出るのかしっかり確認しておきましょう！

ステップ1：課題・改善点の洗い出し

まずは改善する場所を見つけるために課題を探してみます。課題・改善点の洗い出しには以下3つの観点を用いてみました。

• 実際のユーザーニーズを分析する（ヒートマップツール）
• サイトの目的、ユーザーに起こしてほしい行動を洗い出す
• 競合調査をして自店に足りない要素はないか、確認する

実際のユーザーニーズを分析する（ヒートマップツール）

実際のユーザーニーズを分析するには、ページ内で何が見られていて、何が見られていないのかを見る必要があります。
今回はユーザーのクリックを計測して、よくクリックされている場所とそうでない場所を色分けして見ることができる「ヒートマップツール」で課題を見つけていきました。

ヒートマップツールは無料・有料、色々とありますが、今回はMicrosoftが提供している無料ツール「Microsoft clarity」を使いました！

参考元：Microsoft clarity

見ていただくと分かりますが英語なんですよね！でも最近のブラウザはおりこうさんなので、日本語に訳してくれちゃう。ので訳しちゃう。これでアカウント作成してClarityのセッティング画面で概要を設定、セットアップで発行されるタグをGoogleタグマネージャーに設定するだけ！

上のメニューでヒートマップを選んで、期間など欲しい情報に絞り込めば指定した条件下のクリックやスクロールに応じたヒートマップが表示されます！

ヒートマップツールのメリットはパッと見るだけでクリックされているコンテンツとクリックされていないコンテンツが分かることです。クリックされているコンテンツほど暖色（黄色～赤）になり、クリックされている数が少ないと青、全くクリックされていないと色がつきません。

例えばBeeMeで見ていくと、以下のヒートマップではマヌカハニーとは何かの概要を文章で表現し、詳細のコンテンツページへ飛ばすテキストリンクがありますが、全く見られていないことがわかります。

一方で以下のヒートマップでは商品ランキングの「一覧はこちら」ボタンはよくクリックされていて、“商品一覧“へのニーズが高いことが分かりました。

このように見ていくことで、以下のように改修の方向性を決めることができます。

見られているコンテンツ	よりユーザーの目に留まりやすい場所に設置する
見られていないコンテンツ	削除や簡素的にするなど削減する

サイトでユーザーに起こしてほしい行動を改めて確認、一番目につく場所へ入れる

ECサイトの目的は、商品を買ってもらうことですね。ヒートマップツールでユーザーニーズを理解するだけでは、本来の目的である商品を買ってもらうことにはたどり着かない可能性があります。

そのため、ユーザーに起こしてほしい行動は何か、を洗い出す作業を行っておきます。

【ユーザーに起こしてほしい行動】

• 会員登録をしてほしい
• 初回限定ページを見てほしい（新規ユーザーが購入に至りやすい商品ページ）

このことから、上記2つはTOPページのかなり目立つ場所に入れよう、ということが決まりました。

競合サイトを見て自店に足りないコンテンツがないか確認する

その他、競合サイトがどんなコンテンツを入れているか、もとても重要です。
競合にあって自店にない要素があってそれが自店のサイトより魅力的に見えるなら、絶対に入れたほうが良いです。このあたりは自分の目利き次第なところもある部分ですね。

情報が分かりやすく整理されていて、買いたくなるサイトや、検索した時に上位に出てくる他社サイトは日頃からチェックしておくとどういうコンテンツが良いのか、分かってくると思います。

ステップ2：ワイヤーフレームの作成

課題・改善点が見つかったら、次は制作会社へ指示をするためにページの構成を資料にしていきます。これは皆さんご存知かと思いますがワイヤーフレームといって、色々な作り方がありますよね！

ちなみに私は信頼できる友、Excelさんで作りました。なんだかんだExcelさんて例えるなら“クラスで同じグループにいる仲良しの子”ぐらいの付き合いだから使いたくなっちゃうんですよね。。VBAバリバリ組んでっていうレベルまで行ったらマブダチになれると思うのですがまだそこまでの仲ではない…。

余談が過ぎましたがこんな感じで修正指示の外観と、横に詳細指示内容を記載しました。

ステップ3：デザイン～構築

業者選定などするならステップ1や2と並行して行わなければならないですが、とりあえずワイヤーフレームができたらデザイナーに依頼をして基本的には以下のような流れで進んでいきます。

1. デザインデータの作成
2. デザインデータ完成後問題ないかチェック
3. デザインデータができたらコーディング作業
4. テスト環境にて確認。最終調整
5. 問題なければ本番反映

デザイン～構築はどのくらいかかるものなの？

これはなかなか一概に応えるのが難しく、例えば組織の規模でも変わります（組織の規模が大きいと社内確認の時間がかかります）。また制作会社（制作部門）のリソース状況でも変わります。リソースが空いてないから着手は1か月後ですと言われることもあるかもしれません…。その場合急いでるなら他の業者を探して…など苦労します^^；。

さらに今回我々が行ったTOPページ改修はヘッダーやフッターも変えることもあるかもしれません。ヘッダーやフッターは下層ページにも関わってくるため、それによっても変わってきそうですね。

…というのを踏まえて…今回に限って言えば、以下のようなスケジュール感でした！

• デザイン制作・・・確認修正含め3週間
• コーディング作業・・・1週間
• 実装作業・・・1日

デザインは自社制作部門に依頼したのでリソース上このようになった形ですね。
ちなみにヘッダーフッターの変更は発生していません。

完成！ 改善ポイントのご紹介

完成してどうなったのか、気になりますよね！ということでまずは改善点を抜粋してご紹介します。

改善ポイント1：スマホブラウザになかったグローバルナビを挿入

一番目につきやすいメニュー表示である「グローバルナビ」を入れて、そこにユーザーに起こしてほしい行動である以下2点を追加しました。

• 会員登録
• 初回限定ページ

また、ヒートマップツールではランキングの商品一覧がよく見られていましたが、そもそも商品一覧を見たいユーザーが多いのでは？という仮説から商品一覧の導線もグローバルナビで確保することにしました。

改善ポイント2：運営者の思いを伝える紹介コンテンツを入れ、お店の魅力を訴求

これは競合サイトを見比べた時に足りていない要素だと感じたので入れることにしました。いかに自分の店が他店と比べて優れているか。自店の強みは何か。

自分たちが何を思って商品を仕入れ、売っているのか、商品へのこだわりなど運営者の思いを伝えるのはどの商売でも一番大事なことかもしれません。

改善ポイント3：ユーザーニーズの高い選び方を画像でよりわかりやすく

こちらも多くの競合サイトで必ず載っていることや、ヒートマップツールでもクリックがある程度あったことももちろんですが、そもそもあらゆるECサイトで“選び方“は王道的にニーズの高いコンテンツ。

パッと見て商品を選びやすい数値別の画像をTOPに入れることで選びやすく、かつ商品ページへの導線を容易にしました。

改善ポイント4：TOPからはあまり見られていないレシピやコラムをシンプルな構成に

ヒートマップツールで見たところ、商品の購入とは少し遠くなる“レシピ”“コラム”はあまりクリックされていないことが分かりました。そのため、従来はコラム記事をサムネイルとタイトルつきで複数紹介していましたが、コラム一覧への誘導リンクボタンのみにして情報を知りたいユーザーだけがコラムへ遷移できるシンプルな構造にしました。

また、レシピも同じくシンプルにしましたが、レシピは画像が魅力的なコンテンツなので、レシピ画像とレシピリンクを2つだけ用意してマヌカハニーを素敵に活用できることをビジュアルで訴求するようにしました。

効果の振り返り

改修して終わりではお金がなくなっただけになってしまいます！どのような効果があったのか、見てみましょう。GoogleAnalyticsで今回はモバイルユーザーへ向けた改修だったのでモバイルユーザーに絞って、改修後1か月と改修前1か月で測定してみました。

TOPから遷移した会員登録ページのPVが50％上昇

ユーザーにしてほしい行動として掲げていた、”会員登録”ページへの誘導として、PV数が50％上昇しました。

TOPから遷移した商品ページのPVが180％上昇

ユーザーニーズの高い商品一覧ページのPVが伸び、かつ商品一覧ページは購入に繋がるページのため効果としては良い数字ではないかと思います。これで注文が伸びる、と言う結果まで出せたら最高だったんですが、ECは一筋縄では行かず…です^^；

おわりに

今回はプチ改修した背景や改修タイミングはいつがいいのかを紹介しつつ、実際の改修はどのような要素を意識して行ったか、改修の流れと共にお届けしました！

注文を増やすのは色々な施策を組み合わせて実現できるものではありますが、その中のひとつの施策として目的のページへ誘導しやすくすることで注文しやすくする、今回のページ改善は有効だと思います。

今回のようなプチ改修は費用もそこまでかからず、自分自身も大きくリソースを取られないので、一度改善点だけでも洗い出してみてはいかがでしょうか？
それでは、今回も最後まで読んでいただきありがとうございました。