商品ページで購入ボタンが灰色になっていると、買い手には「なぜ押せないか」が分かりません。サイズなどが未選択なのか、商品が欠品しているのか、販売期間外なのか、購入条件に合わないのか。原因ごとに表示する言葉と次の操作を変えることが、購入を妨げる理由を正しく伝える第一歩です。
まず、押せない条件を実際のカートで調べる
商品担当と運用担当に、どの状態でボタンが無効になるかを確認します。未選択の項目、在庫がない商品の扱い、販売開始・終了時刻、ログインや配送先などの条件を一つずつ試します。表示だけを見て「欠品だろう」と決めると、実際には必要な色を選んでいなかった、という原因を見逃します。端末やブラウザーによる不具合で押せない場合もあるため、正常な購入条件を満たした商品で操作テストを行います。
GOV.UK Design Systemのボタンの案内は、無効なボタンが分かりにくくなる点を挙げ、必要な場合だけ使うよう勧めています。通販の商品ページでも、無効な見た目だけに説明を任せず、理由が読める位置に文字を置きます。ボタンを押せる状態にして選択不足を伝える方式なら、どの項目を直すかを具体的に示します。
未選択なら、選ぶ場所まで案内する
サイズや色を選ばないと買えない商品なら、「サイズを選ぶと購入できます」のように必要な操作を明記します。複数項目があるなら、足りない項目をその場で示します。ボタンだけを灰色にすると、在庫切れと誤解されることがあります。入力後は案内が現在の選択に合わせて変わるか、選択肢を戻したときも正しく伝わるかを試します。
選択不足を送信時に検出する設計では、W3Cの入力エラーの解説が示すように、どの項目が不足したかを文字で伝えます。色だけで示さず、商品名や選択欄のそばで内容が分かるようにします。
欠品と販売期間外は、次の選択肢を変える
欠品なら「在庫切れ」と明記し、入荷予定が確認済みならその範囲で知らせます。入荷通知や予約購入の機能が実際にある場合だけ、その操作へ案内します。Shopifyの在庫設定の案内でも、在庫がない商品の購入を止めるか、販売を続けるかは設定によって異なります。自社の販売方針を確かめずに「予約できます」と書かないことが大切です。
販売開始前と終了後も区別します。開始予定が確定しているなら、その日時や再確認方法を示せます。終了後に再販売の予定がないなら、待てば買えるように見せないようにします。期間の表示と実際のカート制御に時差がないか、開始直前・終了直後を含めて確認します。
購入条件があるなら、ボタンより前で知らせる
会員だけ、特定地域への配送だけなどの条件で購入できないなら、商品説明や配送案内で先に知らせます。ボタンの近くには、その商品で該当する理由と、ログインや対象地域の確認など次にできる操作を示します。条件を満たしても押せない場合は、購入不可の文言を増やすのではなく動作を調べます。現行カートの条件と操作結果が共有されていなければ、原因別の文言を決める前に実機で確かめます。
栗の予約と商品選択の記事は売る商品の組合せ、相談ボタンの記事は案内を置く場所が中心です。本稿は、商品ページで購入操作が止まった理由の説明です。Bämの通販の改善相談では、実際の購入手順を試し、表示を直す箇所とカートの設定・機能に関わる箇所を分けて整理します。
参考資料
- GOV.UK Design System：Button
- Shopify Help Center：Selling out of stock products
- W3C WAI：Understanding Error Identification
- Bäm：通販で売れない方への改善相談
資料確認日：2026年9月26日。個別サイトのカート条件と操作テストは未提示のため、表示例は特定サイトの現状を示しません。
