静けさのクリニック Quiet Clinic

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/seijaku-clinic/DESIGN.md

# DESIGN.md — 静けさのクリニック / seijaku-clinic

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

「怖くない医療」の静けさ。丸い書体とくすんだ緑一色で、深呼吸できる待合室のような
時間をつくる。かわいさに逃げず、医療機関としての信頼と両立させる。**動かないこと**
と**単色に絞ること**で、静けさを演出ではなく構造として成立させる。

**キーワード**: 静けさ / まるい / 青磁 / 余白 / 信頼
**この見た目が向く場面**: 心療内科・カウンセリング・鍼灸整体・産婦人科・
歯科・福祉施設など、「不安なく足を運んでほしい」対人ケア業種

## 2. タイポグラフィ

- h1は必ずヒーローの挨拶文に1回だけ使用し、他要素に転用しない
- 和文見出し: Zen Maru Gothic / ウェイト 500（太らせすぎない。ぽってりではなく静かなまるさ）
- 和文本文: Zen Maru Gothic / ウェイト 400 / サイズ 16px / 行間 2.1 / 字間 0.05em
- 欧文・数字: Quicksand（電話番号・時刻・英字ラベル・見出し内の英数字はすべてこちらで組む。
  `font-family: var(--font-latin), var(--font-body), sans-serif;` の順で指定し、
  和文はZen Maru Gothicへ自動フォールバックさせる）
- 見出しスケール: h1 32px / h2 24px / h3 17px（比率を大きく取らない）。
  モバイルは h1 26px。**h1でも32pxを超えない** — 声を張らないタイポグラフィ
- 特記: 見出しの字間はわずかに開ける程度（+0.03em）。本文の行間2.1・字間0.05emは
  「ゆっくり読める」ための必須値であり、詰めない。英字ラベルは12px・字間+0.16emで、
  節番号（2桁）とセットにして「型組みの一部」として使う（機械翻訳のeyebrowにしない）

## 3. カラー

低彩度・単一色相（青磁）＋墨茶＋ワンポイントの杏。純白・純黒・ビビッドカラーは一切使わない。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #f6f4f0（温かい白） | 60% |
| 背景（セクション替え） | #e8ece6（淡いセージの面） | — |
| テキスト（主） | #4a453f（墨茶） | 30% |
| テキスト（弱） | #746c5f | — |
| アクセント（主役） | #7d9d92（くすんだ青磁） | 8%前後 |
| アクセント（濃・文字上） | #5f7d72（青磁の濃色。ボタン地・アイコン・小見出し） | — |
| 補助色（くすみ杏） | #d9b8a5 | 1点のみ（例: 休診時のステータスドット） |
| 罫線・境界 | #ddd5c6 | — |

- 配色ルール: 色相は青磁1系統のみで濃淡を作る。杏 #d9b8a5 は「ワンポイントのみ」
  （1画面に1箇所が目安）とし、面（背景）には使わない。全色とも彩度を落として使う
  （鮮やかな緑・原色のビビッドカラーへ寄せない）
- 純白 #ffffff・純黒 #000000・信号色（赤/黄/緑の原色）を使わない

## 4. レイアウト・余白

- コンテンツ最大幅: 1120px / 左右対称のシングルカラムを基本に、
  ヒーローと院内紹介のみ左右2カラム（1fr 1fr）
- セクション間余白: 120px 基準（上下とも）。モバイルは80pxに縮小
- グリッドの性格: 左右対称・中央寄せの穏やかなグリッド。要素を詰め込まず、
  1セクション1メッセージに絞る（airy）
- 診療時間表: 罫線は**横罫（`border-bottom`）のみ**とし、縦罫は引かない（表全体を
  箱状のグリッドで囲まない）。1px・薄色（#ddd5c6）、セルの上下パディングを広く取り
  （20px以上）、他の罫線区切りの定義リストと同じ「横一線」の質感で統一する。
  四辺を罫線で囲む一般的なテーブル表現にしないこと
- 「初めての方へ」: 番号付き（01〜04・decimal-leading-zero）の段階を縦一列に、
  1段ごとに64px以上の余白を空けて配置する。横並びのステップカードにしない
- ヒーローの構成: **左右対称の定型（特大見出し＋サブコピー＋ボタン2つ並置）を作らない。**
  左に2文までの静かな挨拶文（コピー）、右に「今日の診療」状態カード
  （曜日別の診療時間を参照して動的に開院/休診を表示）＋予約導線ボタン1つのみ、
  という非対称の型で組む。ボタンを2つ並べない
- この挨拶文は必ず`<h1>`要素としてマークアップし、§2で定めたh1のスタイル
  （32px・欧文はQuicksand混植・モバイル26px）で組むこと。ページ内で`<h1>`は
  この挨拶文のみとし、他の全セクション見出しは`<h2>`から開始する（見出し階層の
  先頭を省略し、装飾用の`<p>`だけでヒーローコピーを実装しないこと）

## 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;` を崩さない
- 診療案内・院内紹介・医師/心理士紹介は `<dl>` または罫線区切りの `<div>` 行で構成し、
  角丸カード＋box-shadowの3カラム構成を作らない
- この円弧レイヤーは、ヒーロー単体ではなく**ヒーローセクションとその直後の
  最初のコンテンツセクションを共通の親要素（例: `.hero-band`）でラップし、
  その共通親に `position: relative; overflow: hidden;` と円弧の `inset:0`
  レイヤーを置くこと**。ヒーロー単体に `overflow:hidden` で閉じ込めると、
  円弧が次セクションの背景へ連続せず、§7で定義した「セクションを跨ぐ構造要素」
  の効果が失われるため、実装上必ず2セクションを跨ぐ親要素を用意すること
- ヒーローの円弧は `<svg>` の `<circle>` 1つを `position:absolute; inset:0;` の
  レイヤーに置き、fillを `--color-bg-soft` などパレット内の色に限定する
  （新規の色を追加しない）