美容皮膚科（高級感／シンプル）

だれに向けたページか

シミ・赤み・毛穴が気になり、強い勧誘のない落ち着いたクリニックを探している30〜50代。 派手な宣伝より「静かで、ちゃんと説明してくれそう」と感じさせる。白と余白を主役にする。

色

文字

• 英字・ロゴ：Cormorant Garamond（細め・字間を広く）
• 見出し：Zen Old Mincho
• 手書きのひとこと：Klee One
• 本文：Noto Sans JP 16px・行の高さ 2.0

ページの構成と演出

1. 開幕（A04）：最初は温かい白の幕にロゴ「SHIRAE」だけ。写真がぼかしから少しずつにじみ出て、幕が消え、ロゴは小さくなりながらヘッダーの左上に溶け込む（1回だけ・2.4秒以内。2回目以降の表示では省く）
2. ごあいさつ：短い言葉と余白
3. 治療：シミ・赤み・毛穴・たるみの4つを、細い線の表で
4. ビフォー・アフター（G02）：中央の縦線をドラッグ（キーボードでも動く range）。横に治療内容・費用・回数・リスクと副作用を必ず並べる（医療広告の決まり。会員は本物の症例と説明に替える）
5. 医師・スタッフ（B07）：画面を止めたまま、医師→看護師→カウンセラーの写真が切り替わり、手書きのひとことが書かれるように出る。右に「1／3」
6. 料金の目安：表
7. ご予約・アクセス・フッター

動きの決まり

• JSや GSAP が無いとき：幕は出ない（最初から写真とロゴ）。ビフォー・アフターは2枚が左右（スマホは上下）に並ぶ。スタッフは縦に3人並ぶ。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」。ビフォー・アフターのつまみだけは動かせる（自分で動かす操作なので）
• 揺れる・回る動きはしない。動くのはぼかしと透明度と写真の切り替えだけ

医療広告で気をつけること（会員に必ず伝える）

• 患者さんの体験談は載せない（医療広告ガイドラインで禁止）。だから B07 は「医師・スタッフのひとこと」に使っている
• ビフォー・アフターの写真には、治療内容・費用・期間・回数・リスク・副作用を同じ画面に書く
• 「最高」「必ず」などの言葉は使わない。料金は税込で書く
• 料金・症例・医師の経歴は見本の値（〇〇）。会員が本物に替える

写真（codex）

受付／肌の寄り（前・後）／医師・看護師・カウンセラー（顔は写さない）／施術室／化粧品、の8枚。

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

• 見出しは「英字（Cormorant）＋日本語（Zen Old Mincho）」の2段。太字は使わない
• 黒い面は1ページに1回まで。ほかは白と細い線だけ
• 治療のページには、費用・リスク・副作用の枠を必ず置く