サイズ・バリアント選択付きクロスセルのUX

はじめに

「いいな」と思った提案商品を、いかに手間なくカートへ入れてもらうか。
ここでつまずくと、せっかくの提案も追加につながりません。

アパレル・ギア系のECでは、多くの商品にサイズや色といったバリアントがあります。提案枠に「カートに入れる」ボタンを置くだけでは足りず、サイズ選択まで枠の中で完結させる必要があるんです。この記事では、そのワンステップ追加のUI設計と、在庫によるフィルタリングを解説します。

バリアントがある商品の難しさ

「カートに入れる」だけでは足りない

サイズのない商品なら、提案枠のボタン一つでカートに入れられます。しかしアパレルやギアは、サイズや色を選ばないと購入が確定しません。ここで別の商品ページへ遷移させてしまうと、お客様は元の流れから外れ、そのまま戻ってこないことが多いんです。

提案が目に留まった瞬間の熱量は、時間とともに冷めます。だからこそ、選択から追加までを枠の中で一気に終わらせることが大事になります。

遷移のたびに離脱が増える

「提案を見る → 商品ページへ移動 → サイズを選ぶ → カートに戻る」という多段のステップは、一つ挟むごとに離脱を生みます。特にカート画面でのクロスセルは、購入手続きの途中です。別ページへの移動は、購入そのものを中断させるリスクにもなります。

枠内で完結するワンステップ追加

提案枠でサイズを選ぶ

解決策はシンプルで、提案枠の中にサイズ選択を組み込むことです。お客様は気になった商品のサイズをその場で選び、「追加」を押すだけ。ページ遷移は一切ありません。カート画面なら購入手続きを止めず、商品ページなら閲覧の流れを止めずに買い足せます。

小さな枠の中でも、サイズのボタンを押しやすい大きさで並べ、選択中の状態がひと目で分かるようにしました。

そのままカートに反映

サイズを選んで追加ボタンを押すと、ページ全体をリロードせずにカートへ反映します。カートの中身が保たれたまま「1点増えた」ことだけがすっと伝わるので、お客様は安心して買い物を続けられます。

在庫に応じたフィルタリング

在庫切れサイズを見せない

サイズを選べても、そのサイズが在庫切れでは意味がありません。選んだ後に「在庫がありません」と言われるのは、最もがっかりさせるパターンです。そこで、在庫のあるサイズだけを選択肢に出すフィルタリングを入れました。買えないものは最初から見せない、という考え方です。

全サイズが在庫切れの商品は、そもそも提案枠に出さないようにしています。無駄な期待を持たせないことも、UXの一部だと考えています。

提案の鮮度を保つ

在庫は刻々と変わります。提案枠に表示する時点での在庫状況を反映し、売り切れたサイズや商品が残り続けないようにしました。これにより、提案枠は常に「いま買えるもの」だけが並ぶ状態になります。

追加後のフィードバック

追加が成功したことは、明確に、けれど控えめに伝えます。派手な画面遷移や大きなポップアップは、購入の流れを乱します。ボタンの表示が「追加しました」に変わる、カートの点数がさりげなく増える、といった小さなフィードバックで十分です。お客様が「ちゃんと入った」と確認できれば、それでいいんです。

まとめ

バリアントのある商品のクロスセルは、「選ぶ」と「追加する」の間の摩擦をどれだけ減らせるかが勝負です。今回のポイントは次の通りでした。

• サイズ選択を提案枠に組み込み、ページ遷移なしで完結させる
• 在庫のあるサイズだけを見せ、選んだら必ず買える状態にする
• リロードせず、控えめなフィードバックで購入の流れを止めない

なぜカートでの提案が効くのかは「ついで買い」を設計するカートクロスセルで、提案商品を選ぶ運用の仕組みは管理UIとCSV一括運用で解説しています。全体像はクロスセル運用のハブ記事をご覧ください。