ダンス教室（ポップ・元気）

だれに向けたページか

子どもの習いごとを探している親と、大人になってから踊ってみたい人。 「楽しそう！」と一瞬で気分が上がるページにする。きちんと感より、にぎやかさ。

色

色の面の上の文字は、どれも --c-ink（濃い紺）か白で、コントラスト 4.5 以上を確かめる。

文字

• 見出し：Dela Gothic One（日本語も英字もこれ）
• 本文：M PLUS Rounded 1c（丸ゴシック）16px

ページの構成と演出

1. メインビジュアル（演出①）：「おどろう、」「LET'S DANCE」の大きな文字に、切り抜いたダンサー3人とスニーカー、色の図形が重なるコラージュ。スクロールすると、重なりの奥と手前で動く速さが違う（視差）。読み込み時はポンと弾んで出てくる
2. 斜めの文字の帯（演出②）：クラス名が斜めに流れ続ける
3. 教室について（演出③）：スタジオの写真が、次の区切りの境目をまたいで置かれる
4. クラス紹介（演出④）：4クラスそれぞれに色があり、スクロールして次のクラスに入るとページ全体の背景がその色に変わる
5. 時間割・料金
6. 体験レッスン：回るステッカー（「体験 無料」）つきの大きなボタン
7. アクセス・フッター

動きの決まり

• JSや GSAP が無いとき：コラージュは止まったまま、クラスはそれぞれの色の帯で並ぶ。全部読める
• prefers-reduced-motion のときは、文字の帯とステッカーも止まる
• 弾む動きは読み込み時の1回だけ。ずっと揺れ続けるものは置かない（帯とステッカー以外）

写真（codex）

切り抜きのダンサー3人とスニーカー／スタジオ／キッズクラス／大人クラス、の7枚。顔は見せない（後ろ姿・帽子・髪で隠れる）。

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

• 見出しは Dela Gothic One。少し傾けたラベル（-3度）を1ページに1つまで
• 色の面は、1区切りに1色。となり合う区切りは別の色にする
• 切り抜き写真は、区切りの境目をまたいで置く