コンテンツにスキップ

Storefront ご契約ブランド画像比率補足仕様

背景

ホーム画面の「ご契約ブランド一覧」と商品一覧上部のブランド紹介は、Vendure collection の featuredAsset をブランド導線の主画像として表示する。ブランドごとに元画像サイズがばらついても 見え方を揃えるため、画像比率は実装都合ではなく仕様として固定する。

仕様

  1. Storefront ホームの「ご契約ブランド一覧」と商品一覧上部のブランド紹介は、当該ブランド collection に現在の顧客から見える商品が1件以上ある場合のみ表示する。
  2. 表示するブランド画像は、常に横長 3:1 を正本とする。
  3. 実装上の指定は aspect-[3/1] とする。
  4. Vendure collection の featuredAsset は、3:1 を前提に制作・登録する。
  5. Storefront は object-contain3:1 枠内に全体を表示する。比率が異なる素材を登録した場合も見切らず表示するが、余白が出るため素材側を 3:1 に揃える。
  6. local mock と Vendure seed のブランド画像 source は、同じく 3:1 の専用素材を使う。

対象範囲

  • Storefront ホームの「ご契約ブランド一覧」
  • 商品一覧上部のブランド紹介
  • 上記 2 画面で利用する Vendure collection featuredAsset

関連導線

ヘッダーの商品メニュー、検索ポップオーバー、商品一覧・検索サイドバーのブランド導線も、同じく「表示制御で許可されていること」と「現在の顧客から見える商品が1件以上あること」を満たすブランド collection だけを表示する。商品カタログ root のブランド一覧画面は廃止済みで、導線として復活させない。詳細な導線別の表示条件は ホームヒーローのキャンペーン連動仕様 を参照する。

運用メモ

  • ブランド画像の差し替え時は、見切れて困る要素を左右端に寄せない。
  • local / staging の seed 更新では apps/vendure-server/static/assets/seed/brands/ 配下の 1200x400 素材を collection featuredAsset として登録する。
  • 比率変更が必要になった場合は、実装変更の前に本ファイルを更新して合意を残す。