エステ・スパ（高級感／ナチュラル）

だれに向けたページか

仕事や子育てで張りつめている30〜50代の女性。「何をしてくれるか」より「どんな気持ちで帰れるか」で選ぶ人。 湯気のように、ゆっくり静かに見せる。急かす言葉や派手な割引は置かない。

色

こげ茶の面の上の文字は #e9d5bd（11.0）か白。

文字

• 見出し：Zen Old Mincho（500・700）
• 英字：Cormorant Garamond（イタリックも使う）
• 手書きのひとこと：Klee One
• 本文：Zen Kaku Gothic New 16px・行の高さ 2.0

ページの構成と演出

1. メインビジュアル（演出① A05）：生成りの画面の下から、施術室の写真がゆっくりせり上がる。写真の下の縁は霧のようにぼけて背景に溶ける（mask-image）。写真の上に、こげ茶→キャラメルのグラデの大きな「SAYU」が浮かび上がる
2. ことば（演出② E02）：店の考え方の文章。読み進めると、灰色の文字が1字ずつこげ茶に染まっていく。「なにもしない時間」など強調句だけキャラメル色
3. メニュー：フェイシャル／ボディ／ヘッドの3つ。写真とやわらかい角丸
4. お客様の声（演出③ B07）：PCでは左の写真を画面に止め、右の声を読み進めると写真が別の人に切り替わる。写真の上に手書き（Klee One）のひとことが、書くように左から現れる。スマホは写真と声が組で縦に並ぶ
5. ご予約：こげ茶の面にボタン
6. アクセス・フッター

動きの決まり

• JSや GSAP が無いとき：写真は最初からせり上がった位置、店名は最初から見える、文字は最初からこげ茶、声は写真と組で縦に並ぶ。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 動きはどれもゆっくり（1.2秒以上）。弾む・揺れる動きは使わない
• お客様の声・料金は見本の値。会員が本物に替える（声は本人の許可を取る。効果を言い切る書き方はしない）

写真（codex）

施術室・声の3人（窓辺の後ろ姿／お茶を持つ手／デイベッドでくつろぐ後ろ姿。肌を出した背中は画像の生成で断られた）・オイル・温めた石・休憩室、の7枚。顔は写さない。

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

• 見出しは Zen Old Mincho、上に Cormorant の小さな英字を1行
• こげ茶の面は1ページに1回まで。写真の下の縁は霧のぼかしで背景に溶かす
• 手書き（Klee One）は、ひとことだけに使う（本文に使わない）