化粧品ブランド（高級感）

だれに向けたページか

少し値の張る美容液を、自分のために選びたい30〜50代。成分と使い心地をきちんと知ってから買いたい人。 最初の数秒で「上質」が伝わり、商品とお客様の声をじっくり読ませる。

色

文字

• 英字：Bodoni Moda（細い線と太い線の差が大きい書体）
• 見出し：Noto Serif JP 600
• 手書きのひとこと：Zen Kurenaido
• 本文：Noto Sans JP 400・16px

ページの構成と演出

1. メインビジュアル（A02）：最初は赤い美容液のしずくの寄りの写真が画面いっぱい。スクロールすると写真が縮んで縦長のアーチの窓に収まり、その中央に切り抜きの美容液の瓶が浮かぶ。最後に左から「BLOOM」、右から「WITHIN」が入ってくる。倍率は 2.2→1 と控えめ
2. 紅のはなし（E01）：画面幅いっぱいの「紅」の一字（スマホは「紅」、PCは「紅 BENI」）の形に、ピンクと赤のクリームの写真をくり抜く。スクロールすると中の写真が流れる
3. 商品：3つ（美容液・クリーム・口紅）。並べた写真＋値段は〇〇
4. お客様の声（B07）：PCでは左に人物の写真を固定し、右の声を読み進めると写真が人ごとに切り替わる。写真の上に手書きのひとこと（Zen Kurenaido）が出る。スマホとJSなしは、写真と声が人ごとに縦に並ぶ
5. 成分と約束：紅花エキス・香料なし など（暗い面）
6. オンラインストアへ：大きなボタン
7. フッター

動きの決まり

• JSや GSAP が無いとき：写真は最初からアーチの窓、瓶と単語も定位置、お客様の声は縦に並ぶ。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 拡大縮小は 2.2 倍まで。固定する長さは画面1.2枚ぶんまで（酔わせない）
• 値段・お客様の声・成分の割合は見本の値。会員が本物に替える。化粧品の効能の言い方は、薬機法の範囲に会員が直す

写真（codex）

しずくの寄り／切り抜きの瓶／お客様3人（肩・手・後ろ姿）／クリームの質感／商品3つ、の7枚。顔は写さない。

下層ページを作るときの決まり

• 見出しは「Bodoni Moda の英字＋ Noto Serif JP の日本語」の2段
• 赤（--c-red）はボタンと細い線だけ。面に使うのは桜色と暗い面
• 暗い面は1ページに1回まで