ECの商品バリエーション選択｜画像・価格・在庫をそろえる確認表

青い商品を選んだのに、写真は白い商品のまま。サイズを変えると金額が変わるはずなのに、表示が動かない。ECの商品ページでこのような場面があると、購入者は「いま何を注文しようとしているのか」を確かめられません。問い合わせをするか、そのまま選ぶのをやめることも考えられます。

確認するのは、選択ボタンの見た目だけではありません。色とサイズの組み合わせ、対応する画像、価格、販売できる状態、カートに入る内容を一緒に見ます。この記事では、商品登録・受注・発送を担う担当者が、制作担当者と同じ画面を見ながら確認できる表を使い、直す範囲を整理します。

最初に「一つの組み合わせ」を決める

バリエーションは、同じ商品の色やサイズなどの違いを指します。たとえば「白・小」と「白・大」は、色が同じでも別の組み合わせです。画面では似て見えても、価格、在庫、発送する商品が違う場合があります。

Shopifyの公式案内も、オプション値の組み合わせをバリエーションとして説明しています。特定サービスの操作をそのまま別のECに当てはめるのではなく、組み合わせ単位で確認する考え方の参考にできます。Shopifyのバリエーション案内

まず、対象商品の色・サイズと、それを識別する管理番号を商品台帳から取り出します。「青の大きい方」といった口頭説明だけでは、商品登録担当と発送担当で違う物を思い浮かべるかもしれません。画面の名称と管理番号の対応が分かる資料を一つにします。内部の管理番号を購入者へすべて表示する必要はありません。

色名も確認します。仕入れ先の「NV」と販売画面の「ネイビー」が同じ物なら、その対応を記録します。更新時に別の担当者が見ても判断できる状態が大切です。似た名前の商品を目視で推測して画像へ結び付ける運用は避け、登録元の資料で照合します。

テスト表は、買える場合以外も用意する

次の表は、色とサイズを選ぶ商品の確認に使う設計例です。実店舗の不具合や販売実績を示したものではありません。期待する表示を先に決め、実際の表示と違う箇所を別欄に記録します。売り切れ後も予約販売する商品では、その方針に合わせて行を書き換えます。

確認する状態	画像・価格の確認	在庫と操作の確認	記録する点
色だけ選び、サイズは未選択	確定前と分かる表示か	足りない選択を案内できるか	未選択の項目名
販売できる組み合わせ	選んだ物の写真と金額か	対象の組み合わせを追加できるか	選択値と管理番号
売り切れの組み合わせ	別商品の情報へ変わらないか	買えない理由と次の選択を示すか	在庫設定と表示文
作っていない組み合わせ	販売可能な物に見せないか	売り切れと区別できるか	存在しない組み合わせ
選択後に色を変更	変更後の情報がそろうか	サイズの維持・再選択が妥当か	変更前と変更後
情報の取得に失敗	古い価格を確定情報にしないか	再試行などの案内があるか	起きた操作と時刻

全組み合わせの登録内容を照合する作業と、画面の動きを調べる作業は分けて考えます。数が多い場合、同じ処理で表示される代表例から画面確認を始めることはできます。ただし、それだけで全商品の登録が正しいと判定しないようにします。価格が違う物、画像が共通の物、在庫がない物など、条件の違いを含めて対象を決めます。

不具合の記録には、商品ページの場所、選んだ順番、期待した状態、実際の状態を残します。「画像がおかしい」だけでは再現が難しくなります。「白・小から青へ変更すると、選択欄は青・小だが写真が白のまま」のように書くと、確認する担当者が同じ操作を試せます。

写真は、選択した物との対応が分かるようにする

商品写真が変わらないことが、必ず不具合とは限りません。サイズが違っても外見が同じで、共通写真を使う場合もあります。その場合は、選択中のサイズ名が分かり、寸法を確認できる説明が近くにあるかを見ます。写真だけで大きさの違いまで伝えたことにはしません。

色が異なるのに代表写真が同じなら、画像の割当を確認します。商品全体のギャラリーへ青い写真を追加しただけで、青の選択肢へ自動で結び付くとは限りません。Shopifyの画像案内でも、バリエーションへ割り当てる画像と、ギャラリーで見られる他の画像を区別しています。自社のサービスやテーマではどう動くか、実際の表示で確かめます。Shopifyのバリエーション画像案内

写真を拡大した後や、別の角度の写真を見た後に色を変える操作も試します。最初の一枚だけ正しくても、拡大表示に以前の色が残ると迷いが生まれます。共通の説明画像やサイズ図を使う場合は、その画像が全色共通であることを説明します。写真の更新対象と共通で残す画像を分けて管理します。

撮影した色味と実物の差についての注意書きは、別の色の商品を表示してよい理由にはなりません。撮影条件や画面の見え方による差と、画像の割当間違いを区別します。商品を知る担当者が、実物や承認済みの商品資料と写真を照合する工程を残します。

画像を登録する前に、ファイル名や管理表にも商品との対応を残します。同じ「青」でも、旧仕様と新仕様で持ち手や付属品が違うなら、色名だけでは特定できません。現在販売する仕様の画像か、説明に使う旧仕様の画像かを分けます。商品名を変えた際に、以前の画像を誤って再利用しないための確認にもなります。

青・大の選択と、画像・価格・販売状態・カートを照合する設計図 — 組み合わせ単位で表示をそろえる設計例です。価格や販売状態は架空の条件です。

価格は「変わるか」より、対象と金額が合うかを見る

全サイズが同価格なら、サイズを変えても金額は変わりません。必要なのは動いた印象ではなく、選択した組み合わせの価格と一致していることです。異なるサイズだけ追加料金があるなら、変更後に何円になるのかが購入操作の前に分かるようにします。

商品一覧の「最安の価格」と、選択後の「その組み合わせの価格」は役割が違います。選択前の表示を残す場合も、確定した金額と取り違えない位置や説明にします。通常価格、割引後の価格、会員向けの価格などが重なる商品では、どの条件で見ているかを記録して確認します。

登録内容が正しくても、画面の一部だけ以前の金額が残ることがあります。上部の商品情報と、画面下に固定した購入欄を両方使っている場合は、どちらも確認します。選択を変えてすぐ操作した場合も、古い組み合わせで追加されないかを見ます。読み込み中に確定できないなら、処理中であることを示す設計が必要です。

ここで確認する商品価格と、送料を含む注文合計は同じではありません。カートで金額が違うと感じたときは、商品単価、数量、割引、送料などを分けて原因を調べます。選択欄の問題なのか、注文条件の違いなのかを確かめてから修正を依頼します。

売り切れと「その組み合わせはない」を分ける

白・大は販売しているが在庫がない場合と、青・大はもともと作っていない場合は違います。どちらもボタンを薄くするだけでは、購入者は再入荷を待てばよいのか、別のサイズを選ぶ必要があるのか判断しにくくなります。

在庫切れなら、現在購入できないことを示します。再入荷予定が確定していない場合は、予定日を作って補いません。存在しない組み合わせなら、その色では選べないサイズと分かるようにします。予約注文や受注生産を受け付ける場合は、通常在庫の商品と条件が違うことを確認できる案内へつなぎます。

選択後に別の色へ変えたとき、前のサイズを維持できない場合もあります。自動で別サイズへ置き換えると、購入者が意図せず異なる商品を選ぶおそれがあります。再選択を促すか、変更した内容を明確に伝えるか、自社の仕様を決めます。選択欄とカートに入る商品が食い違う状態を残さないことが要点です。

在庫の数字が変わる場面も、確認対象に含めます。商品を見ている間に販売可能数が減る場合、ページを開いた時点の情報だけで購入できると保証することはできません。どの操作で最新の状態を確認するかは、利用中の仕組みを実装担当者と確認します。更新できなかった場合に、以前の表示を「在庫あり」と確定させないことも確認します。

選択欄の名前と、直し方の案内をそろえる

色見本の丸だけを並べる場合も、色の名前を確認できるようにします。「選択中：青」のような文字と見た目を組み合わせると、枠の色の違いだけに頼らず状態を伝えられます。サイズの欄には何を選ぶ場所かを示し、サイズ表への案内も見つけやすくします。

W3Cのフォーム案内では、入力や選択に使う部品の目的を示すラベルと、その部品の関連付けを説明しています。名称を画面に置くだけでなく、読み上げや操作でも対応が分かるかを実装担当者に確認します。W3Cのラベル案内

必須のサイズを選ばずに進もうとした場合は、「エラーです」で終わらせず、「サイズを選択してください」と直す場所を示します。在庫情報の取得に失敗した場合は、未選択と同じ案内を出さないようにします。購入者が入力し直しても解決しない問題と、選択を補えば進める問題を区別します。

W3Cの通知に関する案内も、何が問題かと修正方法を簡潔に伝えることを重視しています。エラーを文字で示し、該当する欄へ戻れるかを確認します。色や小さな印だけで知らせる設計では、気付かない人がいることを前提に見直します。W3Cのエラー通知案内

カートまで確かめ、登録と画面の修正を分ける

商品ページで正しく見えても、カートへ追加した内容が別なら確認は終わっていません。色・サイズ・数量・単価を照合し、商品ページへ戻った後にも意図した選択が分かるかを確認します。検証環境や許可されたテスト方法を使い、実注文と混ざらない形で行います。

スマートフォンでは、選択欄、価格、購入ボタンが同時に見えないこともあります。画面を上下しても今の選択が分かるか、開いた選択肢がボタンを隠さないかを見ます。キーボード操作では、選択欄に移動し、変更し、案内を確認して先へ進めるかを試します。画面幅だけの検査で、読み上げや実機の確認まで終えたとは扱いません。

確認時の入口も記録します。商品一覧から開いた場合と、特定の色を案内するリンクから開いた場合では、最初の選択状態が異なる設計もあります。どの入口でも、表示中の物と選択欄が一致しているかを見ます。ブラウザの戻る操作や再読み込みで選択が変わる仕様なら、変わったことを購入者が確認できるかも試します。

修正依頼は、登録資料の間違いと表示処理の問題を分けると具体的になります。違う写真が登録されていれば商品登録担当へ、正しい資料なのに以前の画像が残れば実装担当へ確認を依頼します。どちらか不明なら、同じ管理番号について登録内容と表示結果を並べて調べます。

新色の追加、値上げ、販売停止、テーマやアプリの更新後にも、関係する行を再確認します。公開時だけ正しかった表ではなく、変更した担当、確認日、対象商品が残る記録にします。問い合わせや注文訂正があった場合も、実際の内容を確認して表へ反映し、根拠なく改善率を付け加えないようにします。

商品バリエーションの選びやすさは、選択肢を増やすだけでは整いません。選んだ物と写真・金額・販売状態がそろい、その内容がカートへ渡ることを一つずつ確かめます。まずは迷いが出ている一商品から、登録資料と実際の画面を並べて確認してみてください。

商品選択の表示と日々の登録方法を一緒に見直したい場合は、ECサイト制作の対応内容をご覧ください。改修の範囲や運営体制から整理する際は、ECサイト制作の要件整理ガイドも参考になります。