料理教室（ナチュラル・やさしい／かわいい）

だれに向けたページか

料理を一から覚えたい20〜40代と、毎日のごはんのレパートリーを増やしたい人。 「ここなら気軽に行けそう、楽しそう」と思える、台所のにおいがするページにする。

色

文字

• 見出し：Zen Maru Gothic 700（丸ゴシック）
• 英字・数字：Fredoka 600
• 本文：Zen Maru Gothic 500・16px

ページの構成と演出

1. メインビジュアル（A09）：「きょうも、ことこと。」の大きな文字のまわりに、切り抜いたトマト・レモン・泡立て器と、オレンジ・黄の丸、ギンガムチェックの布がコラージュ。読み込み時にポンと置かれ、スクロールすると奥と手前で動く速さが違う
2. 教室について（F02）：教室の写真の後ろに、オレンジと黄の板が2枚ずれて重なる。スクロールすると奥の板ほど速く動く
3. 今月のレッスン（B02）：区画を固定したまま、4品のメニューが1品ずつ切り替わる。左上に「1／4」と進み具合の線。写真・料理名・作る時間・覚えること
4. コース：3つのコース（はじめての基本・季節のおかず・おやつとパン）。小さな写真に色の板（F02）
5. 料金・1回の流れ：4つの手順（つくる→たべる→もちかえる）
6. 体験レッスン：大きなボタン
7. アクセス・フッター

動きの決まり

• JSや GSAP が無いとき：コラージュは止まったまま、色の板は定位置、今月のレッスンは4品が縦に並ぶ。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 弾む動きは読み込み時の1回だけ
• 料金・定員・メニュー・お客様の声は見本の値。会員が本物に替える

写真（codex）

切り抜きのトマト・レモン・泡立て器／今月のメニュー4品／教室の手元、の8枚。顔は写さない。

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

• 見出しは Zen Maru Gothic、番号や英字は Fredoka
• 写真には必ず色の板を1〜2枚重ねる（オレンジか黄）。板は写真より 16〜32px ずらす
• 切り抜き写真のコラージュはトップだけ。下層は1ページに切り抜き1つまで