コンテンツにスキップ

Storefront デザイン調整（2026-02）

目的

  • 対象: トップページ / 商品一覧ページ / 共通ヘッダー / 共通フッター（PC・モバイル）。
  • 画像ベースの改修方針に合わせ、構造・余白・情報設計を優先して調整する。

追加仕様（確定）

  • ブランドデータ未整備期間は、トップページ「ご契約ブランド」を実データ表示せず、プレースホルダー枠を表示する。
  • 契約ブランド判定API（visibleCollectionIds）は先行で実装するが、現フェーズのUIには接続しない。
  • 商品カタログの collection 導線は /products?collection=<slug> を正本とする。
  • 商品カタログの階層導線は、brands 親 collection 配下で 第2階層をブランド、その子 collection を 第3階層のグループ として扱う。
  • ブランド collection を選択した商品一覧では、第3階層グループごとに商品を束ねて表示する。グループの表示順は Vendure Collection の position を正本とし、Dashboard 上の並び順と一致させる。どの第3階層にも属さない商品は、一覧末尾に 「その他」 セクションとして表示する。
  • /products?collection=<slug> の商品カード表示順は Vendure Dashboard のコレクション別商品カード表示順を正本にする。並び順の単位は Product ではなく ProductVariant で、Storefront は対象 variant を 1 件だけ持つ商品カードとして表示する。サブコレクションを直接表示する場合、表示対象の商品カード集合はサブコレクション自身の所属 variant に限定し、手動の商品カード表示順だけを最も近い親コレクションから継承する。サブコレクション自身に手動の商品カード表示順が設定されている場合は、親よりサブコレクション自身の順番を優先する。
  • ブランド collection 配下の第3階層は、商品一覧メインカラムのグループ見出しと左サイドバーのアコーディオン2階層表示の両方に使う。第3階層をクリックした場合は同一 /products?collection=<child-slug> へページ遷移し、画面上部へ戻る通常のページ表示として扱う。
  • ブランド collection の商品一覧では、ページネーションと「このページで x 件を表示中」の件数バナーを表示しない。件数が多いグループは同一ページ内の もっと見る で追加表示する。
  • もっと見る の初期表示数と追加単位は表示幅に合わせる。PC 幅は 3列 x 3行 = 9件、タブレット幅は 2列 x 3行 = 6件、スマートフォンの1列リスト表示は 1列 x 6行 = 6件 を単位とする。ボタン上に残件数や総件数は表示しない。
  • キーワード検索は /search?q=... を正本とし、必要に応じて collection を追加絞り込みとして併用する。
  • ナビゲーション文言は CMS（WordPress メニュー）を正本とし、見た目のみ画像準拠で調整する。
  • フッター SNS リンクは CMS 値を優先し、公式 URL が設定されている行だけ を表示する。
  • フッター SNS リンクは socialList が未取得・空配列・無効行のみ、または example.com 系のプレースホルダー URL しか含まない場合、何も表示しない。
  • SNS の iconUrl は未知のSNS種別または custom 用のアイコンとして扱い、既知の LINE / Instagram / YouTube は固定アイコンを優先する。
  • WordPress バナーは location（例: home, products）で取得先を分ける。旧スキーマでは home 互換を維持する。
  • 共通ヘッダーはスマホ表示（sm 未満 = 640px 未満）でのみ、主行（ロゴ・検索・カート）だけを画面上部に固定（sticky）する。スクロールするとパスワード通知・顧客情報バー・配送告知バナー・ナビは固定せず自然に上へ流れ、主行の背面へ消える（畳んで隠すのではなく非追従でスクロール退避させる）。PC 表示（sm 以上）は従来どおり通常フローで固定しない。
  • 実装上、position: sticky は親要素の高さ内にしか効かないため、主行だけをページ全体に固定できるよう Header は単一 <header> で全体を包まず、各ブロック（主行の sticky な <header> と、非 sticky な顧客情報バー / 告知バナー / ナビ）を兄弟要素として並べる。静止時の見た目は従来と同一。

備考

  • 上記は既存の元仕様書（PDF/Excel）を変更せず、Storefront 改修で合意した追加要件として扱う。