はじめに
あわせ買いの提案枠を作ったのに、クリックはされるのに追加までいかない。アパレルやギアを扱うECサイトでは、この差の多くがサイズ選択で生まれています。提案枠に「カートに入れる」ボタンを置いても、サイズや色を選ばないと購入は確定しないからです。
この記事では、提案枠の中でサイズを選んでそのまま追加できるUI（バリアント選択付きのワンステップ追加）と、在庫のあるサイズだけを選択肢に出す仕組みを説明します。ページ遷移をどこまで減らせるか、そして選んだサイズが確実に買える状態をどう保つか。この2点が中心です。
サイズや色がある商品は追加の途中で止まりやすい
「カートに入れる」ボタンだけでは完結しない
サイズのない商品なら、提案枠のボタン一つでカートに入れられます。ところがアパレルやギアの多くは、サイズや色といったバリアント（同じ商品の中の選択肢）を選ばないと購入が成立しません。ボタンを押した結果として商品ページへ移動する作りだと、ユーザーは元の流れから外れます。
商品ページに着いた時点で、目に入るのは大きな商品画像と説明文です。提案枠で「これも良さそう」と思った気持ちは、この時点でいったん途切れます。そのまま別の商品を見に行く人も出てきます。
ページを移動するたびに人が減る
「提案を見る → 商品ページへ移動 → サイズを選ぶ → カートに戻る」。この4段階は、一つ挟むごとに一定の割合で離脱が起きます。特にカート画面でのクロスセルは、購入手続きの途中です。別ページへの移動は、追加を諦めさせるだけでなく、購入そのものを中断させる可能性があります。
提案 → 商品ページ → サイズ選択 → カートへ戻る。段階が多く、途中で離脱が起きやすい
枠内でサイズを選び、その場で追加。購入の流れを止めずに1点増やせる
図の違いは、ユーザーが動く回数です。左は4回、右は1回。この差がそのまま追加率の差になります。
提案枠の中でサイズを選んで追加する
サイズ選択を枠に組み込む
やったことはシンプルで、提案枠の中にサイズ選択を組み込みました。ユーザーは気になった商品のサイズをその場で選び、追加ボタンを押すだけ。ページの移動は一切ありません。カート画面なら購入手続きを止めず、商品ページなら閲覧の流れを止めずに買い足せます。
小さい枠でも押しやすい形にする
提案枠は商品ページやカートの一部なので、使えるスペースが限られます。それでもサイズのボタンは指で押せる大きさを確保し、選択中のサイズがひと目で分かるように色と枠線で区別しました。スマートフォンで見たときに隣のボタンを押してしまう、という状態は避けたいところです。
選択肢が多い商品では、サイズをまとめて折り返し表示にして、枠の高さが伸びすぎないように調整しています。
ページを読み込み直さずにカートへ反映する
サイズを選んで追加ボタンを押すと、ページ全体を読み込み直さずにカートへ反映します。カートの中身はそのまま保たれ、点数と合計金額だけが変わります。画面が真っ白になって組み直される、という動きがないので、ユーザーは自分がどこにいるかを見失いません。
担当者が選んだおすすめ商品が並ぶ
在庫のあるサイズだけが選べる状態
ページ遷移なしでカートへ反映される
中身を保ったまま点数と金額だけが変わる
この4段階は、すべて同じページの中で完結します。ユーザーから見ると「選んで押した」という一動作です。
買えないものを最初から見せない
在庫のあるサイズだけを選択肢に出す
サイズを選べても、そのサイズが品切れでは意味がありません。選んだ後に「在庫がありません」と表示されるのは、ユーザーの体験として最も良くないパターンです。そこで、在庫のあるサイズだけを選択肢に出すようにしました。買えないものは最初から見せない、という考え方です。
在庫の状況は提案枠を表示する時点で確認しているので、売り切れたサイズが選択肢に残り続けることはありません。
全サイズ品切れの商品は枠に出さない
一つもサイズが残っていない商品は、そもそも提案枠に表示しないようにしています。並んでいる商品が全部買えない、という状態は、枠そのものへの信頼を下げます。提案枠に並んでいるのは、いま買えるものだけ。この前提が保たれていると、ユーザーは選択肢を疑わずに見られます。
買えないものは見せない
在庫によるフィルタリングは、追加率とユーザーの満足度の両方に効きます。選んだサイズが必ず買えるという前提があると、追加ボタンを押すまでの迷いが減ります。
追加できたことをどう伝えるか
追加が成功したことは、はっきりと、しかし控えめに伝えます。派手な画面の切り替えや大きなポップアップは、購入の流れを止めてしまいます。ボタンの表示が「追加しました」に変わる、カートの点数がさりげなく増える。このくらいの小さな変化で十分です。ユーザーが「ちゃんと入った」と確認できれば目的は果たせています。
逆に、何も変化がないと不安になって同じボタンを何度も押す人が出ます。伝えないのも伝えすぎるのも、どちらも追加の妨げになります。
表の4つは、どれも「選ぶ」と「追加する」の間にある手間を減らすための工夫です。
まとめ
バリアントのある商品のクロスセルは、選んでから追加するまでの手間をどれだけ減らせるかで結果が変わります。今回のポイントは次の3つでした。
- サイズ選択を提案枠に組み込み、ページ遷移なしで追加まで終わらせる
- 在庫のあるサイズだけを見せ、選んだら必ず買える状態にする
- ページを読み込み直さず、控えめなフィードバックで購入の流れを止めない
カートで提案が効く理由や、提案する商品を決める運用については、次の記事で解説しています。