ヨガスタジオ（ナチュラル・やさしい）

だれに向けたページか

運動は久しぶりで、ジムは気後れする30〜50代。肩こりや眠りの浅さが気になっている人。 ページを読んでいるあいだに、呼吸がゆっくりになるようにする。速い動き・強い色は使わない。

色

文字

• 見出し：Klee One 600（手書きに近い、やわらかい字）
• 英字：Cormorant Garamond（斜体）
• 本文：Zen Kaku Gothic New 400・16px・行の高さ 2.0

ページの構成と演出

1. 色の雲（D03）：ページのうしろ全体に、ぼかした若葉・黄緑・ミントの丸が4つ。数十秒かけて、ゆっくり形と位置を変える（CSS の @keyframes。透明度は低め）
2. メインビジュアル（A03）：最初は画面いっぱいのスタジオの写真。スクロールすると、写真がまわりに余白のある角丸のカードに縮み、うしろの色の雲が見えてくる。見出し「ほどけて、ととのう。」は写真の上
3. 葉音の考え（E02）：短い文章が、最初は薄い灰色。読み進める（スクロールする）と1字ずつ濃く染まる。「がんばらない」「呼吸」など強調する句だけ緑になる
4. クラス：朝ヨガ・やすらぎヨガ・はじめてのヨガ。半透明の白いカード（雲が透ける）
5. 時間割・料金
6. レッスンのあと：ハーブティーと道具の写真。手ぶらで来られること
7. 体験レッスン・アクセス・フッター

動きの決まり

• JSや GSAP が無いとき：写真は最初から角丸のカード、文章は最初から濃い色（強調句は緑）。色の雲は CSS だけで動く。全部読める
• prefers-reduced-motion のときは、色の雲も止め、ほかも「動かない版」
• 動きはどれもゆっくり（色の雲は1周 30秒以上）。速い動き・弾む動きは使わない
• 料金・時間割・お客様の声は見本の値。会員が本物に替える

写真（codex）

スタジオ／朝ヨガ／やすらぎヨガ／はじめてのクラス／道具／ハーブティー、の6枚。顔は写さない。

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

• 見出しは Klee One、英字の添え字は Cormorant Garamond の斜体
• 色の雲はどのページにも敷く（.clouds をそのまま使う）
• 写真は角を 24px 丸める。濃い緑の面は1ページに1回まで