同じ8商品・17カラーを、品番でまとめるかカラーで割るかだけの違い（サイズは一覧の単位に使わない前提）。
現状のDRESSページは「品番別に近いが、柄違いが別商品として並んでいる」中間状態（2Way Ribbon Tunic が【FLOWER】【DOT】【CHECK】の3商品に分かれている）。
| 品番別ビュー | SKU別ビュー | |
|---|---|---|
| 1カードの単位 | デザイン（品番） | カラー |
| DRESSの表示枚数 | 6枚 | 17枚 |
| 向いている買い方 | 「どの形が好きか」から入る客。 スクロール量が少なく、形の比較がしやすい | 「この色が欲しい」で入る客。 色・柄が一覧で全部見える |
| 得られるもの | ページの見通し。品番あたりのPV/CVが集約され、デザイン単位の売れ筋判断ができる | 色の露出量。埋もれていた色に一覧上の面積が割り当たり、色別の初速が測れる |
| 失うもの | 色がスウォッチに畳まれ、一覧では小さくしか見えない | 同じ形が連続して並び、品揃えが実際より狭く見える。 1品番の評価が色数に分散する |
| 運用コスト | 品番を束ねる項目（下記1）の整備が前提 | カラーごとに主画像が必須。加えて、テーマが object-fit:contain ＋ 元画像の縦横比で描くため、比率が揃っていないとカードの高さが揃わない（下記5） |
2way-navy-flower / 2way-ribbon-tunic / 2way-ribbon-tunic-check の3商品に分かれており、システム的に同一品番と判定する手掛かりがない。
→ このモックは商品名からの推定で束ねている。本実装には custom.style_code 等のメタフィールドが要る。カラー（2件）／ color（3件）／ 色（3件）がバラバラに使われている。同じ「2Way Ribbon Tunic」の中ですら カラー と color が混在。
→ 名称が揃っていないと、SKU別ビューもカラー絞り込みも横断で組めない。WHITE(S) BLACK(S) BROWN(S) WHITE(M) … と、カラー×サイズを1オプションに詰めた形になっている。
→ 「3色展開」と表示すべきところが「6色展開」になる。SKU別ビューはカラー単位なので、放置するとこの1品番だけ3枚のはずが6枚出る。サイズは別オプションに分離が必要（モックは商品名の (S) (M) を解析して畳んでいる＝本来は不要な処理）。linear-gradient(to right, white(m), white(m)) という不正なCSS値が出力されており、ブラウザが宣言ごと破棄するためスウォッチが無色になる。
→ 3を直せば同時に解消する。モック上は正しい色で描いている。object-fit:contain ＋ 元画像の縦横比で高さが決まるため、SKU別ビューにするとこの2枚だけ丈が短くなり、行内で商品名・価格の位置が段違いになる。
→ 品番別ビューでは主画像1枚しか出ないので表面化しない、SKU別ビュー固有のコスト。撮影・書き出しの比率統一（もしくはカード側で比率固定）が要る。モックは実挙動をそのまま再現しているので、SKU別ビューで実際に段差が見える。
UIトークン（4列グリッド／row-gap 19.2px・column-gap 12px／カード幅327px／タイトル12px大文字 line-height 20.4px／価格 rgba(28,28,28,.65)／バッジ11px padding 1px 5px／スウォッチ16px／ツールバー min-height 36px 上下1px罫・件数は中央絶対配置）は、DRESS.html を1440pxで描画して採寸した実測値。
データ出典: clients/decicouture/DRESS.html（deci-couture.com/collections/dress の保存版）。DRESSコレクション本体の8商品のみを対象とし、「最近見た商品」枠の5枚は除外。画像は deci-couture.com のCDNを直接参照しているため、表示にはネットワーク接続が必要。