スマホで服の色違いやサイズを見比べながら、どれを選ぼうか少し迷っている買い物中の人

商品ページ改善作成2026-06-30 17:00約8分

バリエーションの見せ方｜色・サイズで迷わせない選び方の設計

「色は気に入った。でも、このサイズで合うのかな…」お客さんはカートの一歩手前で、選択ボタンの上にカーソルを止めたまま固まります。そして、在庫があるのかないのかも分からないまま、そっとページを閉じてしまう。

商品が悪いわけでも、品ぞろえが足りないわけでもありません。「どれを選べばいいか」が伝わっていないだけです。今日は、色やサイズのバリエーションを「迷わず選べて、そのまま買える」形に整える見せ方を、一緒に作っていきましょう。

結論：バリエーションは「全部見せる」より「選びやすく見せる」が正解です。
選択ボタンは見て分かる形（色なら色見本、サイズなら表）にし、在庫切れは隠さず「入荷待ち」と分かるように出し、選んだ瞬間に画像と価格がその色・サイズに切り替わる。この3点だけで、迷いによる離脱（買う直前で離れること）はぐっと減ります。

いま何が起きているか

色やサイズが複数ある商品ページでは、お客さんは「気に入るかどうか」だけでなく、「どの色・どのサイズにするか」というもう一段の判断を求められます。ここでつまずくと、せっかく欲しいと思ってもらえても、注文の一歩手前で止まってしまいます。

よくあるのは、こんな見せ方です。

色がボタンの文字だけ（「ネイビー」「カーキ」）で、実際の色が想像できない。
サイズがS・M・Lとだけ並び、自分がどれに当たるのか判断材料がない。
売り切れの選択肢が押せるのに、選ぶとエラーになる。あるいは黙って消えていて、お目当ての色が「無いのか、もともと無いのか」分からない。
色を選んでも、上の大きな写真が最初のままで切り替わらない。

どれも、お客さんに「自分で確かめる作業」を押しつけている状態です。この小さな手間が積み重なると、面倒になって離脱したり、カゴ落ち（カートに入れたのに買わずに離れること）につながったりします。

ここで一度、用語をやさしく置いておきます。色やサイズ違いを含めた一つひとつの商品管理の単位をSKU（色やサイズ違いまで分けた商品の数え方）と呼びます。たとえば3色×4サイズなら12SKU。この12通りを「全部見せる」のではなく、お客さんが迷わず自分の1つにたどり着けるように並べ直すのが、今日のテーマです。

バリエーションの見せ方を、見て分かる選択・在庫を正直に・選ぶと切り替わる、の3点で並べた図 — 迷わせないバリエーション設計の3点。「見える選択肢→正直な在庫→連動して切替」の順で整える。

具体例：迷わせないバリエーションの見せ方（3つの設計）

そのまま手を動かせるように、3つに分けました。順番に整えるだけで、選びやすさが変わります。

① 選択肢は「見て分かる形」にする 文字のボタンだけでなく、目で確かめられる情報を添えます。

色：実物に近い色見本（スウォッチ）を小さく並べる。ボタンの文字だけより、ひと目で選べます。微妙な色味は写真でも補う。
サイズ：S・M・Lの並びに加えて、サイズ表（実寸）へすぐ飛べるようにする。「身長◯cmならMが人気」のような目安が一言あると、はじめての人でも選びやすくなります。
選択肢が多すぎて縦に長くなる場合は、よく出る色・サイズを上に置くなど、並び順にも気を配ります。

② 在庫切れは「隠さず・正直に」見せる 売り切れの選択肢を黙って消すと、お客さんは「自分の欲しい色は無いのかも」と勘違いして離れます。おすすめは、選択肢自体は残しつつ「入荷待ち」「再入荷お知らせ」と分かるように出すこと。

押せそうで押せないボタンにせず、「在庫切れ」「入荷待ち」とはっきり表示する。
可能なら再入荷お知らせの登録を置く。今は買えなくても、次の機会と、お客さんとの接点を残せます。
「残り◯点」と出す場合は、事実に基づいた数だけにします。煽るために実際と違う数を見せるのは、景品表示法の観点でも避けます。

③ 選んだら、画像・価格・在庫が「連動して切り替わる」 色を選んだら上のメイン画像もその色に変わる。サイズで価格が違うなら、選んだ瞬間に価格が更新される。この連動があるだけで、「自分が今、何を買おうとしているか」が一致して、安心して購入ボタンを押せます。逆に、選んでも何も変わらないと、「これで合ってる？」という小さな不安が残ります。

文章にすると、整える順番はこう並びます。

設計	やること	ねらい
①見える選択肢	色は色見本、サイズは実寸表を添える	ひと目で選べる
②正直な在庫	売り切れは隠さず「入荷待ち」表示＋再入荷通知	勘違いの離脱を防ぐ
③連動して切替	選ぶと画像・価格・在庫が切り替わる	「これで合ってる」を作る

※ ここで挙げた見せ方は考え方の一例です。使っているカート（ネットショップの仕組み）によって、できる範囲や設定方法は変わります。まずは売れ筋の1商品で、色見本とサイズ表だけでも試してみてください。

やりがちな注意点（誠実に伝えるために）

選んでもらいたい気持ちが先に立つと、つい無理が出ます。ここは気をつけましょう。

実物と違う色に見せない。画面の色は環境で変わるので、「画面によって色味が異なる場合があります」の一言を添えると、色の思い違いによる返品を減らせます。
「残りわずか」を煽りに使わない。実在しない在庫数や、常に「残り1点」と出し続ける見せ方は、信頼を損ね、景品表示法でも問題になり得ます。数字を出すなら事実に基づいて。
サイズの目安は「断定」しない。「Mなら絶対に合う」ではなく、実寸と着用の目安を示し、最後はお客さんが選べるようにします。返品・交換のルールも併せて分かりやすくしておくと安心です。

あなたへの影響

色やサイズが見て選べるようになると、選択の手間が減り、注文の一歩手前での離脱（買う直前で離れること）を防げます。そのまま購入率（CVR、商品ページの買われやすさ）の底上げにつながります。
在庫切れを正直に見せ、再入荷お知らせを置くと、「今は買えない人」との接点が残ります。次の販売機会を取りこぼしません。
画像・価格が連動して切り替わると、「思っていた色と違った」という行き違いが減り、返品・問い合わせの手間も小さくできます。
選びやすいページは、同じアクセス・同じ広告費でも成果が変わります。値引きをせずにできる改善です。

明日やること

売れ筋の商品を1つ選び、いまの選択ボタンをお客さんの目で見直す。色が文字だけ／サイズの目安が無い／売り切れがどう見えるかを書き出す。
色は色見本、サイズは実寸表を添える。サイズには「身長◯cmならMが人気」など、選ぶ目安を一言だけ加える。
売り切れの選択肢を「入荷待ち」表示＋再入荷お知らせに変える。色を選ぶとメイン画像が切り替わるかも確認し、切り替わらなければカートの設定を見直す。

バリエーションの見せ方は、お客さんを急かす道具ではありません。たくさんの選択肢の中から、「あなたにはこれが合いそうですね」とそっと差し出す——そんな気持ちで整えると、押しつけがましくないのに、ちゃんと「これにしよう」が増えていきます。まずは1商品、色見本とサイズ表から始めてみませんか。

チェックリスト

色は色見本（スウォッチ）で、見て分かるようにしている
サイズは実寸表へすぐ飛べる／選ぶ目安を一言添えている
よく出る色・サイズを上に置くなど並び順に気を配っている
売り切れの選択肢を黙って消さず「入荷待ち」と分かるようにしている
再入荷お知らせの登録を置いている（可能な場合）
色を選ぶとメイン画像が切り替わる
サイズで価格が違う場合、選ぶと価格が更新される
「残りわずか」を事実に基づかず煽りに使っていない
「画面により色味が異なる場合があります」など色の注意書きがある