Storefront 商品カルーセルのカード幅補足仕様¶
背景¶
Storefront の商品カルーセル (ProductCarousel) は、各ブレークポイント内で
grid-cols-N（各列 1fr）を用いてコンテナ幅を等分していたため、画面幅が広がる
ほどカードも比例して伸び続けていた。さらに 1 ページの商品数が既定列数より少ない
場合は列数を実カード数へ合わせていたため、商品 1 件のときカードが全幅へ広がり、
少数件のときも極端に大きく表示されていた。
公開面の見え方を安定させるため、カードサイズを画面幅に連動させず、上限幅で固定する。
仕様¶
ProductCarousel（ホームのカスタム商品リスト / もう一度買う、商品詳細の関連商品 / 最近チェックした商品、カートのおすすめ商品など、カルーセル表示の正本）の各カードは、 track 単位で上限幅を固定する。実装上はminmax(0, <maxCardWidth>)を用いる。- 上限幅 (
maxCardWidth) はカード種別ごとに定める。 - 詳細カード (
displayMode="detailed"): 280px - コンパクトカード (
displayMode="compact"): 200px - 1 行の商品数が上限幅より広い容器に収まる場合、余白はカード列を中央寄せ
(
justify-center) で吸収し、カードを引き伸ばさない。 - 列数はそのページの実カード数を基準にしつつ最低 1 へ正規化し、商品 1 件でも 全幅へ広がらないようにする。
- カート側カラムやモバイルなど容器が上限幅より狭い場合は、
minmaxの下限 0 により カードが縮んで収まる（横はみ出しを起こさない）。
対象範囲¶
- Storefront の
ProductCarousel/HorizontalProductList - ホーム（注目商品・おすすめ商品・もう一度買う）
- 商品詳細（関連商品・最近チェックした商品）
- カートのおすすめ商品
受け入れ観点¶
- 商品 1 件のカルーセルでも、カードが全幅へ広がらず上限幅で表示されること。
- 商品が少数（例: 3 件）でも、カードが極端に大きくならず上限幅で揃い、余白は中央寄せ で吸収されること。
- 超ワイド画面でも詳細カード幅が 280px / コンパクトカード幅が 200px を超えないこと。
- カート側カラムやモバイルなど狭い容器でも、横スクロール・はみ出しが発生しないこと。
運用メモ¶
- 本仕様は「少数件のときカードを広げて行を埋める（旧『中間幅では詳細カードを 3 列に して横幅を確保する』）」という従来挙動を意図的に置き換えるもの。少数件時に カードを引き伸ばす実装へ戻さないこと。
- 上限幅は
max-w-7xl(1280px) 容器内の desktop 自然幅にほぼ一致させており、通常画面の 見た目は概ね不変で、超ワイド画面と少数件時にのみ頭打ちになる。 - 商品画像比率は別途 2026-04-storefront-product-card-square-ratio.md を、商品詳細の最近チェックした商品の表示条件は 2026-03-storefront-recently-viewed-products.md を、ホームの「もう一度買う」の表示条件は 2026-06-storefront-home-reorder-list.md を正本とする。
- 上限幅・列数の変更が必要になった場合は、実装変更の前に本ファイルを更新して合意を残す。