花屋（かわいい／ナチュラル・やさしい）

だれに向けたページか

誕生日や記念日に花を贈りたい人と、自分の部屋に花を飾ってみたい20〜40代。 「花屋に入るのって緊張する」を「かわいい、寄ってみたい」に変えるページにする。

色

区切りの背景色（D01）：ピンク #ffd6de／クリーム #ffe9c7／若葉 #e3f2d9／さんご #fbd0c9。 どの色の上でも、本文・補足・赤い文字が 4.5 以上になることを計算で確かめた。 背景が変わるときは、色の板（F02）の色も変数 --plate1・--plate2 で一緒に切り替える。

文字

• 見出し：Kiwi Maru（丸くやわらかい明朝）
• 英字の飾り：Pacifico（筆記体。1区切りに1語まで）
• 本文：Zen Maru Gothic 16px

ページの構成と演出

1. メインビジュアル（A09）：切り抜いた花束・チューリップ・バラ・鉢植えと、色の丸・花びらの図形がコラージュ。スクロールすると、奥のものはゆっくり、手前のものは速く動く。読み込み時に1回だけ、ふわっと咲くように出る
2. お店のこと（F02）：店先の写真の後ろに、ピンクと黄緑の板が2枚。スクロールで板がずれる（奥ほど速く）
3. 今週のお花：季節の花のカード4枚
4. 花束とギフト（F02）：ギフトの写真と色の板。予算別の3つ
5. ミニレッスン（F02）：レッスンの写真と色の板
6. ご注文の流れ・アクセス
7. フッター

区切り2〜5に入るたびに、ページ全体の背景色がクリーム→若葉→さんご→ピンクと変わる（D01）。

動きの決まり

• JSや GSAP が無いとき：コラージュは止まったまま、区切りはそれぞれの背景色で並ぶ、色の板はずれた位置で止まる。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• ふわっと出る動きは読み込み時の1回だけ。揺れ続けるものは置かない

写真（codex）

切り抜きの花束・チューリップ・バラ・鉢植え／店先／花束を作る手／ギフト／レッスン、の8枚。顔は写さない。

会員が本物に替えるもの

価格（〇,〇〇〇円）・レッスンの日程・住所・電話・営業時間は見本の値。

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

• 1区切りに1つの背景色。となり合う区切りは別の色
• 写真には色の板を1〜2枚。板は右下にずらす
• 筆記体の英字は1区切りに1語まで