`だけでヒーローコピーを実装しないこと） ## 5. コンポーネントの質感 - ヘッダー・ナビゲーション: 背景は地色の半透明（`rgba(246,244,240,0.96)`、 ぼかしはかけない）・下部に1px罫線。ナビリンクは下線なし・ホバーで 文字色が青磁濃 #5f7d72 に変わり下線が現れる。予約リンクのみボタン化 （青磁濃地・白文字・角丸16px）し、本文リンクと区別する。 この下線表現は`border-bottom`（または`text-decoration`）の色つき/透明の 二値切り替えに限定し、`transform: scaleX()`等で下線が左から伸びる・ 描画されるアニメーションを追加しないこと。下線の見せ方自体に新しい 動きの種類を増やさない この「白文字」は `#ffffff` そのものを指す。§8で禁止する「純白・純黒を 地色/文字色の基本に使わない」は、あくまで**背景の地色や本文の基本文字色**に 対する制約であり、青磁濃地などのアクセント背景の上に載る反転文字 （ボタン・バッジ等）には適用しない。ボタン文字色を `var(--color-bg)` など 地色トークンに置き換えないこと - 角丸: 16px に統一（ボタン・カード面・入力欄・ステータスカードすべて共通）。 円形が必要な要素（ステップ番号・アバター・ステータスドット）のみ50%。 これらの円形要素は**背景を `var(--color-bg-soft)` で塗り、枠線を引かない** （塗り＋無枠）ことを基本とする。輪郭線のみの円（`border` で描き背景を 透過させる）は使わない。塗りの円が本テイストの「ぽってりした静かなまるさ」を 担保する要素であるため、輪郭線への置き換えは禁止事項に準じる。この3種 （ステップ番号・アバター・ステータスドット）以外に新規の円形要素 （ロゴバッジ等の装飾用サークルなど）を追加しないこと。円形は本テイストに おいて希少性が効果を生むため、種類を増やさない - 影: `box-shadow: 0 8px 32px rgba(74,69,63,0.08)` の1種類のみ。 使用箇所は「今日の診療」ステータスカードなど、**画面に1〜2箇所まで**に限定する （多用しない。影を装飾として振りまかない） - 境界線: 1px solid #ddd5c6（罫線区切りの定義リスト・表・段組の基本） - ボタン: 角丸16px・青磁濃地 #5f7d72・白文字・ホバーで墨茶 #4a453f に変化 （0.4s ease）。主ボタンは1画面に1つが基本。2つ並べて選択を迫らない - カード的要素: **3カラム角丸カード＋影＋アイコンは使わない。** 診療内容・院内紹介・ 医師/心理士紹介はすべて「罫線区切りの定義リスト（dl）」または 「境界線で仕切った縦積みの行」で構成する。影付きの浮いたカードにしない - フォーム要素: 本テンプレでは予約はフォームページ誘導のためinput/textareaは 持たないが、使う場合は地色背景・1px罫線・角丸16px・フォーカス時に 枠線が青磁濃へ変わる仕様とする - 画像の扱い: 写真は使わず、線幅1.5pxで統一した自作インラインSVG線画 （葉・湯のみ・椅子・聴診器モチーフなど）で構成する。角丸・フィルタ処理は不要 （SVG自体を柔らかい曲線で描く） - アクセント色の適用範囲: 青磁濃 #5f7d72 は「①アイコン線色 ②ボタン地 ③ホバー時の文字色 ④節番号・英字ラベルの数字部分」の4用途に限定。 杏 #d9b8a5 はステータスの「休診」表示など1点のみに限定し、 ナビ・本文・フッターには適用しない ## 6. モーション - 量: subtle - 使う動き: **0.4s ease のフェードのみ**（ヒーロー初回表示の `opacity: 0→1`）。 リンク・ボタンのホバーに伴う色/背景の変化も同じ0.4s easeで揃えるが、 これはUIの応答であり「演出」ではない（ユーザー操作なしに動くものは作らない）。 ホバーに伴う変化は「色/背景/枠線の値がその場で切り替わる」ものに限り、 位置・拡大縮小（transform）を伴う出現アニメーションは追加しない - 使わない動き: スクロール連動のフェードイン/アップ、パララックス、 数字のカウントアップ、バウンス、無限マーキー、自動カルーセル。 **静けさは動かないことで表現する** — 動きで癒しを演出しない ## 7. 写真・イラスト・図版 - 写真は使わない。線幅1.5px・青磁濃色で統一した自作インラインSVG線画で 世界観を作る（葉・湯のみ・椅子・聴診器・人物シルエットのモチーフ）。 3D・グラデーション・抽象ブロブは使わない - ヒーロー背景に**青磁の淡色の大きな円弧**を1つだけ配置する。これは埋め草の 装飾円ではなく、ヒーローから次セクションの背景色へ視覚的に連続する 「セクションを跨ぐ構造要素」として使う（1ページに1つのみ。他の場所に円形の 装飾を増殖させない） ## 8. 禁止事項（must not） - Inter / Roboto / Arial / system-ui をデフォルトで使わない（Zen Maru Gothic / Quicksand の組み合わせで組む。他の丸ゴシックへの置換もしない） - 紫〜青のグラデーション、および装飾グラデーション全般を一切使わない （背景・文字・ボタンすべて） - **backdrop-filter（グラスモーフィズム）を禁止する。** 面はすべて不透明で構成する - 3カラムの角丸カード＋影＋アイコンで「診療案内」を作らない。罫線の定義リストか 2列交互のレイアウトで構成する - box-shadow を装飾的に多用しない。影は §5 で定めた1種類・限定箇所のみ - 絵文字をアイコンとして使わない（葉・湯のみ・椅子などの線幅統一の 自作インラインSVGを使う） - パステルの多色使いをしない。色相は青磁1系統＋墨茶に絞り、杏はワンポイントのみ - ヒーローでボタンを2つ並置する定型を作らない（導線は1つに絞る） - 統計数字のカウントアップ、スクロール連動アニメ、無限マーキーを使わない （motion: subtle = フェードのみを厳守する） - 純白 #ffffff・純黒 #000000 を地色/文字色の基本に使わない （アクセント背景上の反転文字は除く。例: ボタンの白文字） - soft-saas（split-screen構図・パステル多色・幾何ゴシック）の書体・配色・構図を 流用しない。本テイストは同じ soft-depth でも書体（丸ゴシック）・色相（単色青磁）・ 構図（左右対称・非対称ヒーロー）のすべてが別物であること ## 9. 実装ノート ```css /* tokens.css — この変数セットをそのまま使うこと */ :root { --color-bg: #f6f4f0; /* 地（温かい白） */ --color-bg-soft: #e8ece6; /* 淡いセージの面（節替え） */ --color-text: #4a453f; /* 文字（墨茶） */ --color-text-weak: #746c5f; /* 弱い文字（キャプション・補足） */ --color-primary: #7d9d92; /* 主役色（くすんだ青磁） */ --color-primary-strong: #5f7d72; /* 青磁の濃色（ボタン地・アイコン・小見出し） */ --color-accent: #d9b8a5; /* 補助のくすみ杏（ワンポイントのみ） */ --color-line: #ddd5c6; /* 罫線（薄く） */ /* 変数には総称ファミリ(sans-serif)を含めない */ --font-heading: "Zen Maru Gothic"; --font-body: "Zen Maru Gothic"; --font-latin: "Quicksand"; --space-unit: 8px; --section-gap: 120px; --radius: 16px; --shadow-soft: 0 8px 32px rgba(74, 69, 63, 0.08); /* 唯一の影。淡く・大きく・低く */ --max-width: 1120px; --motion-duration: 0.4s; --motion-ease: ease; } ``` - フォント読み込み: `https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500&family=Quicksand:wght@400;500;600&display=swap` - 見出し（h1–h4）は `font-family: var(--font-latin), var(--font-heading), sans-serif;` の順で指定し、英数字を自動的にQuicksandへ振り分ける - 本文は `font-family: var(--font-latin), var(--font-body), sans-serif;` を基本とし、 `font-size: 16px; line-height: 2.1; letter-spacing: 0.05em;` を崩さない - 診療案内・院内紹介・医師/心理士紹介は `