心療内科（綺麗系／ナチュラル・やさしい・高級感）

だれに向けたページか

眠れない・気分が落ちる・動悸がする、でも「心療内科に行くのはこわい」と迷っている人と、その家族。 静かな場所だと感じてもらい、初診の流れと予約の仕方を落ち着いて読ませる。急がせる言葉は使わない。

色

黒い面の上の文字は #e8e8e4（13.70）、補足は #a8a8a2（7.04）。写真は彩度を落として（grayscale(.55)）色をそろえる。

文字

• 見出し：Noto Serif JP 300／500（細い明朝）
• 英字・番号：Cormorant Garamond 300（イタリックも）
• 本文：Noto Sans JP 400 16px・行の高さ 2.0

ページの構成と演出（PCでは左から右へ7枚）

1. 01 メインビジュアル（A04）：最初は白い幕の中央に「しじま心療内科」だけ。写真が幕の奥からにじみ出て、名前は小さくなりながら左上のロゴの位置に溶け込む（1.6秒・1回だけ）。全面の写真の上に大きなコピー「眠れない夜のことから、話しませんか。」と予約ボタン
2. 02 ごあいさつ：縦長の写真と短い文
3. 03 こんなとき：症状の一覧（細い線の表）
4. 04 初診の流れ（B04）：全画面のカーテンの写真の中で、小窓だけが「予約→受付→お話→次の予定」と入れ替わる。PCでは横に進む量で、スマホでは縦のスクロールで替わる
5. 05 院内（C02）：Swiper。写真が円柱の内側に貼られたように、外側ほど奥へ傾いて流れる
6. 06 診療時間・料金：表
7. 07 予約・アクセス：黒い面。予約ボタンと電話
8. フッター（架空の注記）

動きの決まり

• JSや GSAP が無いとき・スマホ：7枚は縦に並ぶ。A04 の幕は出ない（最初から写真とコピー）。B04 の小窓は4つの段として縦に並ぶ。Swiper は指で送れる横並び
• prefers-reduced-motion のとき：横に動くのをやめて縦並びにし、幕・たわみ・自動送りも止める
• 動きはゆっくり（power2.inOut）。画面を回さない。たわみの角度は 18度まで（酔わないように）

スライドの作り方

Swiper（vendor/swiper-bundle.min.js・MIT）。点・矢印・キーボード・自動送り（「止める」ボタン）。たわみは Swiper の progress から各写真の rotateY と translateZ を計算して付ける。JSなしは overflow-x: auto の横並び。

写真

新しく作る：相談室（メイン）／カーテン（B04 の大きな写真）／待合室。 写真庫から：016 お茶を持つ手・休憩室／002 受付。全部 grayscale で色をそろえる。人の顔は写さない。

会員が本物に替えるもの

診療時間・料金・電話番号・住所・医師の名前はすべて見本の値（〇〇）。会員が本物に替える。医療広告のきまり（効果をうたわない・体験談を載せない）に合わせ、お客様の声は載せない。

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

• 下層は横に動かさない（読むページなので縦並び）。見出しに「01」のような番号と細い線だけ受け継ぐ
• 色は白・グレー・黒だけ。差し色を足さない
• 急がせる言葉（今すぐ・限定）を使わない