Storefront 商品カード画像比率補足仕様

背景

Storefront では商品詳細のメイン画像、サムネイル、compact product card は正方形で表示している一方、標準の商品カード (ProductCard) のみ 4:3 表示だった。商品画像の制作ルールと公開面の見え方を揃えるため、標準商品カードも正方形へ統一する。

仕様

1. Storefront の標準商品カード (ProductCard) に表示する商品画像は、常に正方形 1:1 を正本とする。
2. 実装上の指定は aspect-square とする。
3. 商品一覧、商品カルーセル、関連商品など ProductCard を利用する表示箇所は、正方形の商品画像表示を前提とする。
4. 比率が異なる素材を登録した場合、Storefront は object-cover により正方形枠へ収める。

対象範囲

• Storefront の ProductCard
• 商品一覧、カルーセル、関連商品など ProductCard 利用箇所
• 当該カードで利用する Product / ProductVariant の featuredAsset

運用メモ

• 見切れて困る要素は四辺へ寄せず、主要被写体は中央寄せで制作する。
• 旧来の 4:3 素材を流用する場合も、正方形トリミングで破綻しない余白を確保する。
• 比率変更が必要になった場合は、実装変更の前に本ファイルを更新して合意を残す。