ベーカリー（かわいい／やさしい）

だれに向けたページか

近所に住む家族、通勤前に寄る人、週末の朝ごはんを楽しみにしている人。 「明日の朝、行ってみよう」と思わせる。焼きたての匂いがしそうな、明るくてやわらかいページにする。

色

区切りごとの背景色（D01）：クリーム #fff8ec → バター #ffe8a3 → あんず #ffd0a1 → 小麦 #fbe3c0 → クリーム。 どの色の上でも、文字は --c-ink・--c-text だけを使う（コントラスト 7 以上を計算で確かめた）。

文字

• 見出し：Kiwi Maru（500）
• 筆記体の一語：Yellowtail（SVG の文字を線で描いてから塗る）
• 本文：Zen Maru Gothic 16px

ページの構成と演出

1. メインビジュアル（A09＋E05）：クロワッサン・メロンパン・食パン・あんぱんの切り抜きと、丸い色の図形・麦の穂のコラージュ。スクロールすると奥と手前で動く速さが違う。見出し「まいにち、焼きたて。」の上に筆記体の「Good morning」が一筆書きで描かれ、「朝7時OPEN」のシールがポンと弾む
2. ことりについて：こねる手の写真。区切りに入ると背景がクリームに
3. きょうのパン（D01＋E05）：背景がバター色に変わる。「Today's bread」が描かれ、4つのパンのカード。クロワッサンに「人気No.1」のシール
4. 焼き上がり時間（D01）：背景があんず色に。時刻の表と、窯の写真
5. 朝ごはんセット（D01）：背景が小麦色に。イートインの写真
6. お店の案内：背景がクリームに戻る。お店の写真・地図の場所
7. フッター

動きの決まり

• JSや GSAP が無いとき：コラージュは止まったまま、筆記体は最初から塗られた状態、シールも最初から出ている。区切りはそれぞれの背景色の帯で並ぶ。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 弾む動きは画面に入ったときの1回だけ。揺れ続けるものは置かない
• 値段・時刻は見本の値（〇〇）。会員が本物に替える

写真（codex）

切り抜きのクロワッサン・メロンパン・食パン・あんぱん（切り抜き）／お店の中／こねる手／窯／朝ごはん、の8枚。顔は写さない。

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

• 見出しは Kiwi Maru。筆記体の一語（Yellowtail）は1ページに1つまで
• 区切りの背景色は上の5色から選び、となり合う区切りは別の色にする
• シールは1画面に1つまで