WEB制作

KNOWLEDGE

カート離脱を防ぐデザインの工夫|どの段階で、何を理由に離れているか

  • #WEB制作

SHARE

カート離脱への対策として、まずボタンの色や文言から手をつけることがあります。しかし離脱は1つの現象ではありません。カートに入れた直後に離れる人と、支払い情報の入力で離れる人では、理由がまったく違います。

同じ「離脱」でも、原因が送料の表示なのか、会員登録の要求なのか、決済手段の不足なのかで打ち手は変わります。デザインで解決できるのは一部で、残りは条件そのものの問題です。ここを混ぜると、直しても数値が動きません。

この記事では、カート投入から購入完了までを4段階に分け、それぞれの離脱理由と、デザインで解決できる範囲を整理します。

この記事でわかること

・カート離脱を4段階に分けて原因を特定する

・各段階で起きる離脱の理由

・デザインで解決できる範囲と、できない範囲

・送料と追加費用の見せ方

・会員登録を求めるかどうかの判断

・改善の優先順位

4段階に分けて原因を特定する

段階 離脱の主な理由 デザインで解決できるか
カート投入の直後 とりあえず入れただけ、比較検討中 一部。次の行動を示せる
カート画面 送料や合計金額を見て考え直す 一部。見せる順序を変えられる
情報入力 項目が多い、会員登録を求められる できる。項目と手順の設計
決済 使いたい決済手段がない できない。手段そのものの追加が必要

最初にやるのはどの段階で落ちているかの計測です。段階ごとの通過率が分からないまま改善すると、動いていない場所に手を入れることになります。

4行目はデザインでは解決できません。決済手段の不足は、選択肢を増やす以外の対処がないためです。ここが原因なら、デザインの改修に費用をかけても数値は動きません。

先にやるのは段階別の通過率の計測。デザインの改修はその後。

決済手段の不足はデザインでは直らない。

カート画面で起きること

最も改善の余地が大きいのがこの段階です。ここで初めて合計金額が確定するため、想定との差が離脱を生みます。

問題 起きること 対処
送料がここで初めて出る 想定外の金額に感じる 商品ページで送料の条件を先に示す
送料無料の条件が分かりにくい あと少しで無料になることに気づかない 「あと◯円で送料無料」を表示する
合計金額が探しにくい 確認のために視線が動く 合計を目立つ位置に固定する
数量変更がしにくい 操作を諦める その場で変更できるようにする
次の手順が分からない どこを押せばよいか迷う 進むボタンを1つに絞る
削除ボタンが目立つ 誤って消す 進む動線を優先し、削除は控えめに

1行目が最も影響します。送料をカート画面まで隠す構成は、そこまでの検討時間を無駄にさせます。商品ページの段階で条件(地域別、金額別)を示しておくほうが、最終的な離脱は減ります。

2行目は逆方向の打ち手です。無料になる条件まであと少しであることを示すと、買い足しにつながる場合があります。

情報入力の段階

ここはデザインで最も改善できる段階です。項目数と手順の見せ方で通過率が変わります。

  1. 入力項目を減らす:配送に不要な項目は削る
  2. 郵便番号から住所を補完する:入力量が大幅に減る
  3. 残りの手順を示す:あと何段階で終わるか分かるようにする
  4. エラーをその場で示す:送信後にまとめて出さない
  5. 入力内容を保持する:戻ったときに消えないようにする
  6. 入力欄の文字を読める大きさにする:スマートフォンで確認する

5番目は見落とされます。入力途中で商品を確認しに戻り、そこで内容が消えると、多くの人はそこで離脱します。戻る操作は起きる前提で設計してください。

フォームそのものの改善点は入力フォームの離脱率を改善するデザインの工夫で詳しく扱っています。カート以外の問い合わせフォームにも共通する内容です。

会員登録を求めるかどうか

方式 利点 欠点 向いている状況
会員登録を必須にする 顧客情報が蓄積する 初回購入の離脱が増える リピートが前提の商材
登録なしで購入できる 初回の離脱が減る 再購入時に再入力が必要 単発購入が多い商材
購入後に登録を案内する 両立できる 登録率は下がる 多くの場合これが無難

3行目が現実的な選択です。購入を完了させることを優先し、完了画面で登録を案内する。この順序なら、初回の離脱を増やさずに顧客情報も得られます。

リピートが前提の商材でも、初回から登録を必須にする合理性は限定的です。買ってもらえなければ、蓄積する情報もありません。

改善の優先順位

費用に対する効果の順で並べると、次のようになります。

  1. 段階別の通過率を計測する:どこで落ちているか確定させる
  2. 送料の条件を商品ページに出す:カートでの想定外をなくす
  3. 入力項目を削る:削るだけなので費用が小さい
  4. 会員登録を必須から外す:設定の変更で済むことがある
  5. 決済手段を追加する:費用と手間はかかるが効果は大きい
  6. デザインの調整:ボタンや配色は最後

多くの場合、最も費用をかけずに効果が出るのは3番目と4番目です。デザインの調整を最初にやると、効果が小さいうえに原因も特定できません。

EC全体の改善の順序はECサイトのデザインで購入率を上げる方法|段階別の改善手順で扱っています。カートはその中の一部です。

費用が小さく効果が大きいのは、入力項目を削ることと会員登録を外すこと。

デザインの調整は最後でよい。

よくある失敗

段階を分けずに対策する

どこで落ちているか分からないまま直すことになります。通過率の計測を先に行ってください。

送料をカート画面まで隠す

そこまでの検討時間を無駄にさせます。商品ページで条件を示してください。

会員登録を必須にする

初回購入の離脱が増えます。購入後に案内する順序に変えてください。

入力内容が戻ると消える

商品を確認しに戻る操作は必ず起きます。内容を保持する設計にしてください。

ボタンの色から手をつける

効果が小さく、原因も特定できません。最後に回してください。

よくある質問

カート離脱率の目安はありますか

業種と商材で大きく変わるため、外部の平均値は基準になりません。自社の過去の数値と比べてください。段階別の通過率を数か月記録すれば、自社の基準ができます。

かご落ちメールは有効ですか

有効な場合がありますが、送信には連絡先の取得が前提です。会員登録なしで購入できる設計と両立させる場合、どの段階で連絡先を取るかを設計する必要があります。

スマートフォンとパソコンで対策は変わりますか

入力の負担が大きく違うため、優先度が変わります。スマートフォンでは項目数と入力欄の大きさが特に効きます。表示の切り替え幅の決め方はレスポンシブデザインのブレイクポイントの決め方|端末ではなく、崩れる幅で決めるを参照してください。

決済手段はどこまで増やすべきですか

客層が使う手段を優先してください。増やすほど手数料と管理の手間が増えます。離脱の理由として決済が挙がっているかを先に確認してから追加してください。

文言の調整はどのくらい効きますか

入力の迷いを減らす文言は効きます。入力例、必須項目の理由、次に何が起きるかの説明などです。考え方はマイクロコピーとは?CVRを動かす短い文章の書き方を参照してください。

まとめ

カート離脱への対策は、離脱を1つの現象として扱うと空振りします。カート投入の直後、カート画面、情報入力、決済。この4段階で離脱の理由はまったく違い、打ち手も変わります。先にやるべきは段階別の通過率の計測です。

カート画面で最も影響が大きいのは送料です。ここで初めて合計金額が確定するため、想定との差が離脱を生みます。商品ページの段階で送料の条件を示しておくほうが、最終的な離脱は減ります。情報入力の段階では、項目を削ること、郵便番号から住所を補完すること、戻ったときに内容が消えないことが効きます。

会員登録については、購入を完了させることを優先し、完了画面で案内する順序が現実的です。買ってもらえなければ蓄積する情報もありません。そしてデザインの調整は最後で構いません。費用が小さく効果が大きいのは、入力項目を削ることと会員登録を必須から外すことです。

当社ではホームページ制作において、購入導線の設計と改善をご相談いただけます。自社サイトの点検を進めたい場合は、資料をダウンロードのうえご活用ください。

SHARE