陶芸教室（カッコイイ系・LP）

だれに向けたページか

30〜50代。カルチャー教室の「ゆるい体験」では物足りず、ちゃんと技術を身につけたい人。 かっこよく、本気で、でも誠実に。ゴールは「体験レッスン」の予約。

色

文字

• 見出し：Zen Antique（大きく。黒地に白）
• 英字：Oswald 600（大文字・字間広め）
• 本文：Noto Sans JP 16px

ページの構成と演出

1. メインビジュアル（A09・コラージュ）：「土を、本気で。」の巨大な文字に、切り抜きの茶碗と花入れ、二色刷りのろくろの写真、深紅の丸と帯が重なる。スクロールすると奥と手前が違う速さで動く。読み込み時は左右から鋭く滑り込む（弾まない）
2. 悩み：3つの悩みを、深紅の細い線の箱で
3. 解決：「独学では届かない所まで、手を添えて。」
4. 特長（F05）：01・02・03 の巨大な数字の中に、二色刷りの写真がはまる。横に説明
5. 作品（scroll-snap）：生徒さんの作品を横に送る。写真は深紅×黒の二色刷り、触れると元の色に戻る
6. 入会までの流れ（B06）：4枚のカードがスクロールで付箋のように積み重なる。タブ（見出し）は少しずつ右にずれて並び、上に重なっても全部のタブが読める。CSS の position: sticky だけ
7. 声：3件
8. 料金：体験・月2回・月4回（明るい区切り）
9. よくある質問
10. 申し込み：深紅の面にフォーム

• 申し込みボタンはヘッダー・メインビジュアル・特長のあと・料金のあと・フォームの5か所。スマホは画面の下に固定

動きの決まり

• JSや GSAP が無いとき：コラージュは止まったまま。付箋タブは CSS だけなので、JSなしでも積み重なる
• prefers-reduced-motion のときはコラージュも止まる
• 動きは速く鋭く（0.4〜0.8秒・power4.out）。弾む動きは使わない

写真

新しく作る：ろくろを挽く手（wheel）／深紅の茶碗の切り抜き（bowl）／赤い釉の花入れの切り抜き（vase） 写真庫から：001 カフェの手びねりの器（cup）／009 和菓子の器（plate）／009 職人の手（craft）

数字・料金

料金・在籍人数・お客様の声は見本の値（〇〇）。会員が本物に替える。特長の 01〜03 は番号なので替えなくてよい。

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

• 黒地が基本。明るい区切りは1ページに1回まで（料金・表など読ませる所）
• 写真は深紅×黒の二色刷りにそろえる（.duo を付ける）
• 見出しは Zen Antique、英字の添え字は Oswald
• 演出は1ページに1つまで