「購入の入り口」「カート画面」のカゴ落ち対策はどうする？実際のサイト改修事例をご紹介

プチ改修、はじめに着手すべき「購入導線」

前回は、ECサイトの大規模な改修（リニューアル）の前にぜひ導入すべきプチ改修のターゲットとして、「カート」「顧客情報入力」「決済方法選択」「確認画面」といった要素から成り立っているカート以降のページ群である「購入導線」がオススメである旨、事例を交えてお伝えしました。

▶詳細は、第2回「まずは「購入導線」から。顧客情報入力ページのプチ改修」も合わせてご覧ください！

購入導線において、「確認画面」→「決済方法選択」→「顧客情報入力」といったように、「購入完了」画面＝CV(Conversion：コンバージョン)画面・コンバージョン画面に近い画面から順番にプチ改修を行うことで効果的にCVR（Conversion Rate：コンバージョンレート）を高めていくことが可能と考えています。

前回は「顧客情報入力欄」をプチ改修した事例をご紹介しましたので、今回は、「顧客情報入力」画面のひとつ手前、「カート」画面のプチ改修について、課題点と実際の改修事例をご紹介します。

カゴ落ち対策の要として、「カート」画面を重要視されている方も多いのではないでしょうか。「カート」画面は購入導線の入り口にあたりますので、商品を検討中のユーザーが購入したいと思ったタイミングで手続きをすぐ進められるデザインにしておく必要があります。

しかし、一口に「カゴ落ち対策」と言っても様々な手段があり、具体的な対策案についてはそれぞれのECサイトに合った手法を検討する必要があります。ここでは、ECサイト改善の切り口から実際の改修事例と進め方をお伝えします。

「カート」画面の課題・カゴ落ち対策のプチ改修ポイント

まず、当社がお客様のプチ改修をお手伝いしてきた中で、よく見受けられた課題点をご紹介します。

上の画像は当社がプチ改修のお手伝いをしたお客様サイトにおける改修前のカートデザインを図式化したものです。
皆様のECサイトでもカートがこのようなデザインになっているケースは多いのではないでしょうか。カゴ落ち対策の観点から、まず以下3点のプチ改修ポイントに着目してみましょう。

①ユーザーが離脱してしまう導線はないか

ヘッダーのロゴやナビゲーション、フッターなど、ECシステムの共通テンプレートによりリンクが設置されている部分があります。これらのリンクから、一定の割合のユーザーが偶発的に購入導線を外れてしまう現象が発生します。
対策としてヘッダーのアイコンを非表示化する、ロゴのリンクをカットするなどのプチ改修が望ましいです。

②ユーザーを迷わせる情報はないか

「カート」画面で注意しなければならないのは、ユーザーに見せる情報の内容についてです。
この画像では、ヘッダー直下に「キャンペーン実施中！」のバナーがありますが、ユーザー全員を対象としたキャンペーンではない場合、ユーザーがキャンペーン対象に該当するかどうかを確認するために購入を思いとどまってしまうケースも出てくると考えられます。
こうした状況を避けるためには一度高まった購入のモチベーションを削ぐことがないよう、プチ改修でキャンペーンバナー自体を非表示化することが良いと考えられます。（ただしプチ改修によって「キャンペーンが適用されています」という文言を追加したり、個別の商品に対して「キャンペーン対象商品」と表示したりすることは、勿論購入の後押しになるためオススメです。）

また、赤文字の文言のように、ユーザーが取るべきアクションが不明瞭なものにも気を付ける必要があります。
この場合「どうしたら在庫が確保されるのか」をユーザーに示すことで購入アクションにつながりやすくなります。そのため、「在庫は注文受付後に確保しますので、お早めにご購入ください。」といった文言にプチ改修で修正をするのがよいでしょう。

③購入手続きを進めるための導線は明確か

例としているECサイトは、会員登録後にログインしてから商品を購入できるようになっていたため、購入手続きを進めるリンクボタンに「ログインする」と記載されております。しかしこれでは特に新規のユーザーにとって分かりづらく、またボタン自体もグレーの無彩色で目立たないので、見過ごしてしまうユーザーも少なからず出てくると考えられます。
この点もプチ改修により、リンクボタンの文言を「購入手続きに進む」などとし、さらにECサイトのイメージカラーで色を付けていただく等の修正を行うことでCVR向上の効果が期待できます。

ここまでは「カート」画面の課題になりがちなポイントを見てきましたが、皆様のECサイトでも当てはまる点がございましたら、参考になれば幸いです。

次からは、実際に当社がお手伝いしたカゴ落ち対策のプチ改修事例をご紹介したいと思います。

「カート」画面のプチ改修（１）　離脱導線・不要情報のカットと購入導線の明確化

一つ目は、前述の３つの課題点を踏まえてプチ改修を行った例です。
こちらもカートデザインを図式化したもので見てみましょう。

①ユーザーの偶発的な離脱を防ぐため、ヘッダーやフッターを中心に他のページへのリンクを最小限となるよう、アイコンの非表示化やaタグ（ページにリンクを表示させるための記述）の無効化を行いました。

②ヘッダー直下のキャンペーンバナーや注意書きが記載されていた部分は削除し、カート内商品の合計金額表示と購入手続きボタンを設置しました。このプチ改修により、カート内商品の種類が増えるほど購入手続きを進めるボタンが下の方に移動してしまうという課題も解消することができました。

③購入手続きボタンをブランドのイメージカラーで目立たせ、文言も「購入手続きに進む」に変更。購入導線への誘導を強化しました。

この改修前の旧画面と改修後の新画面の2パターンでABテストを実施し、CV数、受注単価、売上金額の指標を軸として検証を行いました。
結果、新画面の方が受注単価が高まり、売上金額が約5%向上。画面改修する運びとなりました。

「カート」画面のプチ改修（２）　購入の後押しになるポイント訴求

もう一点、カゴ落ち対策に効果を発揮したプチ改修をご紹介します。ポイント制度を導入されているECサイトで、「カート」画面でポイントを訴求した例です。

上の画像は先ほど行った3点のプチ改修のあと、さらにポイントを訴求する２回目のプチ改修を行った例です。

こちらのECサイトではポイント制度の認知が進んでいない課題があり、2回目のプチ改修でポイント利用についての説明を追加しました。現在の保有ポイントと、ポイント利用後の価格を明示して、ユーザーの購入を後押しする目的です。
なお、一定額以上で送料無料となる制度がある場合は、送料無料訴求を行っていただくこともCVR向上効果が期待できてオススメです。

1回目の改修と同じく、改修前の旧画面と改修後の新画面の２パターンでABテストを行いました。結果、再び売上金額が約5%上回る成果を出すことができ、こちらも画面改修を行うに至りました。

2回のABテストを通じて、プチ改修前の旧画面と比較すると、改修後の新画面は「1.05 × 1.05 = 1.1025」、すなわち売上を約10%増やすことができたことになります。このように、プチ改修1回分で改善できる数値はわずかでも、回数を重ねることで大きな成果につながることがお分かりいただけるかと思います。

以上、今回はサイト改修の切り口から、カゴ落ち対策としてのプチ改修事例をお伝えしました。

【次回予告】
次回は、「購入導線より前の回遊導線」のプチ改修についてお伝えします。「カート」画面以降の購入導線が基本的に一本道であるのに対して、回遊導線ではECサイトに訪れたユーザーが自由にページ間を行き来することが可能です。このような回遊導線において、どのような課題があるのか、そしてどのように対策を講じるのか、今回までと同様に事例を交えながらご紹介していきます。

筆者プロフィール

決済業界のリーディングカンパニーであるGMOペイメントゲートウェイでは、スタートアップをはじめ大規模企業様まで、企業規模にかかわらず、成長を応援する決済サービスを提供しています。
事業規模や業態に応じてご要望にお応えできるように3つのサービスを用意し、マーケティング支援サービスも提供しています。決済手段の選択に迷われたらまずはお問い合わせください。

マーケティング支援サービスについてはこちら

営業担当と話しながら進めたい方はこちら

とりあえず触ってみたい方はこちら

オンラインで始めたい方はこちら

※本コンテンツはECZineにて連載中の「売上成長に効く！ ECサイトのプチ改修」を再編集したものです
※本コンテンツ内容の著作権は、GMOペイメントゲートウェイ株式会社に属します。