ピアノ教室（高級感／ナチュラル・やさしい）

だれに向けたページか

子どもに本物の音楽を習わせたい親と、大人になってから「いつか弾きたかった」をかなえたい人。 にぎやかさより、グランドピアノの前に座ったときの静けさを伝える。白い部屋と黒いピアノの2色で品よく。

色

文字

• 英字：Cormorant Garamond（細い 500・斜体も使う）
• 見出し：Zen Old Mincho 700
• 本文：Zen Kaku Gothic New 400・16px・行の高さ 2.0

ページの構成と演出

1. メインビジュアル（A05）：白い画面の下から、グランドピアノの写真がゆっくりせり上がる。写真の上の縁は霧のようにぼけて白に溶ける（mask-image）。写真のうしろに「Shirabe」の大きな英字が、グレーから黒へのグラデで浮かぶ。スクロールすると写真はもう少し上がり、英字は薄くなる
2. ごあいさつ（E07）：丸く切り抜いた「鍵盤の上の手」の写真の外周を、英字の輪（SHIRABE PIANO SCHOOL・LESSONS FOR ALL AGES）が囲む。スクロールに合わせて輪がゆっくり回る
3. 鍵盤の帯：CSS だけで描いた白鍵・黒鍵の帯（飾り）
4. コース（C01）：黒い面。縦にスクロールすると、4つのコース（こども・小中学生・大人のはじめて・発表会と受験）が横に流れる。下に進み具合の細い線。スマホとJSなしは指で横に送る
5. レッスンについて：ピアノの中（弦とハンマー）の縦長写真と、先生のことば。レッスンの流れ3つ
6. 月謝：表（金額は〇〇）
7. 体験レッスン（E07 もう一度）：大きなボタンのまわりを「TRIAL LESSON」の円い文字がゆっくり回る
8. アクセス・フッター

動きの決まり

• JSや GSAP が無いとき：写真は最初から定位置、英字は濃いまま、輪の文字は止まったまま、コースは指で横に送れる。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」。体験ボタンの輪も止める
• 回るのは小さな輪の文字だけ。画面全体は回さない・揺らさない
• 月謝・生徒数・発表会の回数・先生の経歴は見本の値。会員が本物に替える

写真（codex）

グランドピアノのある白い部屋／鍵盤の上の手／子どもの後ろ姿／大人の手元／発表会のホール／レッスン室／ピアノの中、の7枚。顔は写さない。

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

• 見出しは「Cormorant Garamond の英字（斜体）＋ Zen Old Mincho の日本語」の2段
• 黒い面は1ページに1回まで（フッターは除く）。ほかは白とグレーの面だけ
• 円い文字の輪は1ページに1つまで（体験レッスンの入口に使う）