Storefront ホームヒーロー比率・表示モード補足仕様

背景

ホームヒーローの表示比率と表示モードは、WordPress で差し替える画像や動画の制作物に直接影響するため、実装都合ではなく仕様として固定する。

決定事項

1. ホームヒーローは PC / モバイルで別比率を正本とする。
2. ホームヒーローは通常 1 枚表示のカルーセルとし、一定以上の desktop 幅では 3 枚表示へ切り替える。
3. WordPress のメインバナー用素材は、以下の比率を維持して制作する。

比率の正本

PC

• 比率: 2048:663
• 実装上の指定: sm:aspect-[2048/663]
• 用途: sm 以上のホームヒーロー表示

モバイル

• 比率: 751:485
• 実装上の指定: aspect-[751/485]
• 用途: sm 未満のホームヒーロー表示

表示モード

• ホーム画面の HomeHero は auto 表示を正とする。
• 複数素材がある場合でも、1 枚ずつ切り替えるカルーセルとして表示する。
• auto は desktop 幅が 1280px 以上、かつスライドが複数ある場合に サブ メイン サブ の 3 枚表示へ切り替える。
• 3 枚表示時も各スライドの PC 比率 2048:663 は維持し、各スライド幅を 70dvh 由来の上限内へ収める。

表示期間

• WordPress の display_period.start_at / display_period.end_at を使って公開期間を制御する。
• start_at のみ設定時は、その日時以降に表示する。
• end_at のみ設定時は、その日時まで表示する。
• 両方未設定時は常時表示する。
• 境界は包含とし、start_at <= 現在時刻 <= end_at の間を表示対象とする。
• ACF の date_time_picker が返す Y-m-d H:i は JST として解釈する。

運用ルール

• WordPress の media.image.desktop は PC 比率 2048:663 に合わせる。
• WordPress の media.image.mobile はモバイル比率 751:485 に合わせる。
• 比率が異なる素材を登録する場合、Storefront は object-cover によりトリミング表示されるため、重要要素は安全領域内に配置する。
• 比率変更が必要になった場合は、実装変更の前に本ファイルを更新して合意を残す。

対象実装

• apps/storefront/src/components/home/home-hero.tsx
• apps/storefront/src/components/pages/home-page-content.tsx
• apps/storefront/src/lib/cms/content/hero-slides.ts

更新日

• 2026-04-20