動物病院（ナチュラル・やさしい／かわいい）

だれに向けたページか

犬や猫と暮らす家族。はじめての予防接種、ちょっと元気がないとき、近くで相談できる先を探している人。 「ここなら、うちの子も怖がらなさそう」と思える、やわらかいページにする。

色

文字

• 見出し：Kiwi Maru（500）
• 本文：Zen Maru Gothic 16px・行の高さ 1.95
• 英字：Quicksand（700）

ページの構成と演出

1. メインビジュアル（E07）：診察台で犬を診る写真を、大きな丸に切り抜く。丸の外周に沿って「KOMOREBI ANIMAL HOSPITAL ・ 犬・猫・うさぎ ・」の文字が並び、スクロールに合わせてゆっくり回る。左に「ちいさな家族の、かかりつけ。」
2. のぞく犬（演出② G01）：画面の右下の隅から、切り抜いた柴犬が顔を出している。区切りが変わるたびに、吹き出しのひとことが変わる（「はじめまして！」「ちゅうしゃ、こわくないよ」など）。犬の顔の上に吹き出しを重ねない。右上の×で吹き出しを閉じられる。スマホでは5秒で自動でしまう
3. 病院について（演出③ F01）：写真が、緑の区切りと生成りの区切りの境目をまたいで置かれる。区切りの縁は葉っぱのような波の形
4. 診療案内：一般診療・予防・健康診断・歯みがき指導の4つ。丸いアイコン（自作SVG）
5. はじめての方へ：持ちもの・流れ。猫の切り抜きが境目にすわる（F01 をもう1回）
6. 診療時間・アクセス
7. フッター

動きの決まり

• JSが無いとき：のぞく犬は顔を出すだけで、吹き出しは出さない（閉じられない吹き出しを置かないため）。GSAP が無くても、吹き出しの切り替えは動く。弧の文字は止まる。写真は境目をまたいだ位置で止まる。全部読める
• prefers-reduced-motion のときは、弧の文字は止まり、犬は顔を出したまま
• 犬はスマホでは小さく（幅90px）。本文やボタンにかぶるときは吹き出しを閉じられる。ページの一番下（フッター）に来たら引っこむ
• 診療時間・料金・獣医師の名前は見本の値（〇〇）。会員が本物に替える

写真（codex）

切り抜きの柴犬・切り抜きの猫・診察・診察室・待合室・子猫を抱く手・外観、の7枚。人の顔は写さない。

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

• 見出しは Kiwi Maru、上に Quicksand の小さな英字
• のぞく犬は全ページに出してよいが、ひとことはそのページの区切りに合わせて書く
• 写真は区切りの境目をまたいで置き、区切りの縁は葉っぱの波の形にする