【カゴ落ちを防ぐ!】チェックアウトページデザイン最適化
UI・UX

【カゴ落ちを防ぐ!】チェックアウトページデザイン最適化

tomishi
tomishi
2018/07/23 03:31

訪問者がECサイト上で商品をカートに入れてもらっただけでは売上げには繋がりません。そこには「カゴ落ち」リスクがあります。「カゴ落ち」とは、ECサイトなどのショッピングサイトでユーザーが「商品をカゴに入れたまま離脱すること」を指します。今回はカゴ落ちを防ぐためのチェックアウトページデザインについて学んでいきましょう。

コンバージョン率の目安

もう殆どの方がECサイトの効果指標にコンバージョン率を取り入れていると思います。では、コンバージョン率の平均値はどれくらいなのでしょうか?それは、下記に挙げているような要因によってかなり変わってきます。

  • 製品タイプ
  • 製品平均単価
  • デバイスタイプ(携帯かパソコンか)
  • 会社サイズ
  • 業界

ただし、一般的に言われている平均コンバージョン率は1%~2%です。ですので、まだコンバージョン率のゴールが定まっていない!という場合は、まずコンバージョン率2%超えを目標に最適化を取り組んでいくことをおすすめします。

チェックアウトページデザイン最適化 3か条

1.シンプル イズ ザ ベスト

シンプルに整えられたウェブサイトを訪問したとき、おそらく多くの人が「見やすい、わかりやすい、使いやすい」と感じるのではないでしょうか?シンプルなウェブサイトはユーザー目線に立ってデザインされていることが多く、全体に統一感があります。さらに画像のレイアウト、テキストとのバランス、余白の取り方なども計算され訪問者が疲れないように配慮されています。そのため、一目見て「これは何のサイトなのか、どんなサービスがあるのか、どのようにしてサービスを受けるのか」が伝わりやすくなり、ストレスなくサイトを見ることができるのです。

そしてチェックアウトページでは、訪問者にして欲しい次のアクション、つまり「購入」ボタンへのクリックを邪魔しないようなデザインにすることです。購入アクションに繋がるボタンをCTA(Call to Action)といいます。CTAを作成するにあたっては、下記を満たしているかをチェックしてみましょう。

  • 思わずクリックしたくなるようなフレーズを用い、視覚的に目立たせる
  • 簡潔にする。単語数はなるべく少なくすること
  • ウェブページのフローに合った見やすい場所に設置する
  • ウェブページの配色と対比する色を使いながらも、全体のデザインや雰囲気に合うようにする

 

2.明白なコスト表示

「980円。安い!これを買おう!」そして、クリックしてチェックアウトページに進むと結局送料や諸費用がかかって結局1,500円かかった…。値段はあくまで例ですが、みなさんもこういうこと、一度は経験したことがあるのではないでしょうか?

それを解決するための方法はとてもシンプルです。製品ページでもチェックアウトページでも最終コストをちゃんと最初から表示することです。

送料は訪問客が購入を思いとどまる一つの要因です。そのため、送料無料にすることはコンバージョン率を上げる良い戦術となります。もしそれが難しければ、プロモーションとして期間限定で送料無料サービスの実施を検討してみると良いでしょう。

また、商品がいつ届くのかをチェックアウトページで明確にしておくことも重要です。

3.モバイル最適化

携帯でのオンラインショッピングがメジャーになりつつあるのは周知の事実です。実際、62%のスマホユーザーが過去6か月の間に携帯を使って商品をオンラインショップで購入したことがあるというデータがあります。現在のモバイルのコンバージョン率はパソコンよりもかなり低いですが、ユーザーが携帯でサイトを見たときに、チェックアウトページが一目瞭然で見やすいレイアウトになるようにモバイル最適化しておくことはとても重要です。

その際、必ずチェックアウトページに、ユーザーがいったん保留したいときのために、「ウィッシュリスト機能」を用意しておきましょう。この機能があれば、ユーザーが後でパソコンなどの他のデバイスで楽に商品を見返すことが可能になります。

まとめ

今回ご紹介したのは、あくまでも実践すべき戦略の一例です。やるべきことに圧倒されないでください。成功に必要なのは、一つ一つ確実にこなしていくことです。複数の戦略を一気に行ってしまうと、どの最適化がコンバージョン率に影響を与えたのかが分かりづらくなってしまいます。カゴ落ちを防ぐためにもバランスをとりながら対策をしてきましょう。

(参照記事)
Campaign Creators
ECommerce Checkout Page Best Practices to Boost Your Conversion Rate

わかるページ解析を

Google Analytics・Search Consoleから
わかりやすいPowerPoint・Excelレポートを生成

report
HOMEKOBITブログWEB制作・開発UI・UX【カゴ落ちを防ぐ!】チェックアウトページデザイン最適化