Storefront ご契約ブランド画像比率補足仕様¶
背景¶
ホーム画面の「ご契約ブランド一覧」と商品一覧上部のブランド紹介は、Vendure collection の
featuredAsset をブランド導線の主画像として表示する。ブランドごとに元画像サイズがばらついても
見え方を揃えるため、画像比率は実装都合ではなく仕様として固定する。
仕様¶
- Storefront ホームの「ご契約ブランド一覧」と商品一覧上部のブランド紹介は、当該ブランド collection に現在の顧客から見える商品が1件以上ある場合のみ表示する。
- 表示するブランド画像は、常に横長
3:1を正本とする。 - 実装上の指定は
aspect-[3/1]とする。 - Vendure collection の
featuredAssetは、3:1を前提に制作・登録する。 - Storefront は
object-containで3:1枠内に全体を表示する。比率が異なる素材を登録した場合も見切らず表示するが、余白が出るため素材側を 3:1 に揃える。 - 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素材を collectionfeaturedAssetとして登録する。 - 比率変更が必要になった場合は、実装変更の前に本ファイルを更新して合意を残す。