墨と余白 Ink and Negative Space

DESIGN.md

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

https://3pt.co.jp/design-library/md/sumi-to-yohaku/DESIGN.md

# DESIGN.md — 墨と余白 / sumi-to-yohaku

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

## 1. コンセプト

余白を「足りない部分」ではなく「主役」として設計する。墨一色の濃淡と明朝の
大小だけで格を出し、色を一切足さない。1画面に伝えることは1つだけ。静けさで
高級感を語る、日本の設（しつら）えの作法をWebに移す。

**キーワード**: 余白 / 墨 / 静謐 / 間（ま） / 一期一会
**この見た目が向く場面**: 高級和食・料亭・旅館・工芸・茶・作家もの・ギャラリー

## 2. タイポグラフィ

- 和文見出し: Zen Old Mincho / ウェイト 500〜900（大判の主見出しのみ 900、
  節見出しは 500。ウェイトの落差そのものが「墨の濃淡」の役割を果たす）
- 和文本文: Zen Old Mincho / ウェイト 400 / サイズ 16px / 行間 2.2 / 字間 0.08em
- 欧文・数字: Cormorant Garamond（節番号・英字ラベル・営業時間の数字に使う。
  常に和文より小さく、字間 +0.28em の小文字/スモールキャップで控えめに添える。
  Cormorant の細さと明朝の縦画がそろうことで一体感が出る。**Inter に置換しない**）
- 見出しスケール: 大判ディスプレイ 88px（縦書き時は 72px 基準で字間 +0.32em）/
  h2 節見出し 30px / h3 20px / 本文 16px（モバイルはディスプレイ 44px / h2 24px）
- 特記: 主張は「大きさ」でつくり「太さ」で締める。字間はゆったり（見出し +0.14em、
  縦書きは +0.3em 以上）。1文を短く切り、体言止めを基調に。感嘆符・三点リーダの
  多用をしない。英字ラベルは 11px・字間 +0.28em・小文字（例: kaiseki ／ since 1998）

## 3. カラー

**色は使わない。** 墨（黒）の濃淡と生成りの地だけで構成する monochrome。
彩度のある色を1色も入れないことがこのテイストの生命線。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（余白の白） | #f7f5f0（温かい生成り白） | 65% |
| 地（節替え） | #efece4 | — |
| 濃墨（大判見出し・最も強い要素） | #171512 | 5%以下 |
| 墨（本文） | #2e2a25 | 25% |
| 薄墨（弱・キャプション・英字） | #6e685e | — |
| 淡墨（罫線・境界） | #d0cabf | — |

- 配色ルール: 彩度を持つ色（青・朱・金など）を一切追加しない。強調は「色」ではなく
  「墨の濃さ」と「文字の大きさ」でつける。最も濃い濃墨 #171512 は大判見出しと
  筆致1本にだけ使い、多用して黒くしない。純黒 #000000・純白 #ffffff は使わない

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

- コンテンツ最大幅: 1000px（本文カラムは 620px まで絞る。行長を短く保つ）
- セクション間余白: 上下 200px 基準（モバイルでも 120px 以上）。**余白を怖がらない。
  空白を線や飾りで埋めない**
- グリッドの性格: 中央の1本道を基本に、要素は意図的に左右どちらかへ寄せる
  （完全な左右対称の中央寄せにしない）。整列の拠り所として細い縦罫を1本だけ使ってよい
- ヒーローの構成（centered-stage）: ファーストビューは1メッセージに集中させる。
  主コピーは**縦書き**（writing-mode: vertical-rl）で画面のやや左または右に立て、
  周囲を大きく空ける。**「中央寄せ見出し＋サブコピー＋ボタン2つ」の定型を作らない。**
  ボタンは置かず、英字ラベルと細い縦罫だけを添える
- 各節の頭に「節番号（Cormorant、例: 壱 / 01）＋短い和文見出し＋英字ラベル」を
  小さく置く。見出しは大きく、説明文は最小限に

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 透明地・墨文字・下線なし。ナビリンクはホバーで
  文字の下に淡墨の細線が伸びる（幅0→100%、0.4s）。本文リンクとは別扱いにし、
  ナビには墨色のみ使う（このテイストにアクセント色は存在しない）
- 角丸: 0px（すべて直角）/ 影: 使わない（立体を作らない。平面で構成する）/
  境界線: 1px solid #d0cabf。太い枠線で囲わない
- ボタン: 原則ボタンを使わず、テキストリンク＋細い下線で誘導する。どうしても必要なら
  背景なし・下に1pxの墨罫・字間 +0.2em の小文字ラベルとし、ホバーで罫線が
  左から引かれ直す（塗り反転はしない）
- カード的要素: 面や影で囲わない。区切りは横1本の淡墨罫線（1px）と余白だけで示す
- 献立・リスト: 品名（和文）と補足（薄墨・小）を横罫線で1行ずつ区切る。価格や数字は
  Cormorant。中黒やドットリーダで埋めず、余白で対応させる
- フォーム要素: input / textarea は地色背景・下線1px（#d0cabf）のみ（囲み枠を作らない）・
  角丸0・フォーカスで下線が墨 #2e2a25 に太る（1px→1.5px）。プレースホルダは薄墨
- 画像の扱い: 使う場合はモノクロ〜低彩度に寄せ、角丸なし・枠なし・影なし。
  写真は1画面に1点まで、周囲をたっぷり空けて「掛物」のように見せる
- アクセント色の適用範囲: **アクセント色は無い。** 目立たせたい要素は
  濃墨＋大サイズで対応する

## 6. モーション

- 量: rich（このテイストは「静けさの中の所作」として動きを設計に含める。
  ただし速さ・派手さではなく、遅さ・間で魅せる）
- 使う動き:
  - 筆致（SVGの一筆）をロード時に 2.4s かけてゆっくり描く（stroke-dashoffset）
  - スクロール進入で opacity 0→1・translateY(24px)→0 を 1.0s ease-out で。
    複数要素は 120ms ずつ遅らせて、墨が滲むように順に現れる
  - 背景の大きな淡い漢字1字を、スクロールに対して 0.15 倍の速さで縦に流す
    （パララックス。opacity 0.04 以下、pointer-events: none）
- 使わない動き: バウンス、拡大縮小、自動カルーセル、光る/明滅、高速スライドイン、
  数字カウントアップ。動きは常に「ゆっくり・一度だけ」
- prefers-reduced-motion 時はすべて停止し、筆致は最初から描画済みで表示する

## 7. 写真・イラスト・図版

- 原則、写真に頼らず「明朝の組版・余白・墨の濃淡」で成立させる
- 装飾は「墨の一筆（SVGパス）」を1サイトに1〜2本まで。円相（○）・桜・扇・和柄の
  クリップアート素材は使わない（既製の「和風あしらい」はAIっぽさの温床）
- 写真を使う場合はモノクロ寄せの実物写真（料理・器・素材・手元）のみ。
  イラスト・3D・グラデ抽象画像は使わない

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / Noto Sans / Helvetica を使わない（明朝＝Zen Old Mincho で組む）。
  「細いサンセリフを中央に置いた薄いグレーのミニマル」は最も避けたい擬似ミニマルなので作らない
- 彩度のある色を1色も足さない（青・朱・金・緑など。monochrome を厳守）
- グラデーションを一切使わない。box-shadow を使わない。border-radius は常に 0
- 純黒 #000000・純白 #ffffff を使わない（墨は #171512〜#2e2a25、地は生成り）
- 中央寄せの定型ヒーロー（見出し＋サブコピー＋ボタン2つ）を作らない
- 余白を装飾で埋めない（区切り線の乱用・ドット・小さな飾り罫を散らさない）
- 円相・桜・扇・和柄などの既製「和風あしらい」素材や絵文字をアイコンに使わない
- 情報を詰め込まない。1セクション1メッセージを守る（密度で勝負しない）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f7f5f0;       /* 温かい生成り白（純白は使わない） */
  --color-bg-alt: #efece4;   /* 節替えの淡い地 */
  --color-ink: #171512;      /* 濃墨。大判見出しと筆致にだけ使う */
  --color-text: #2e2a25;     /* 本文の墨（濃墨よりわずかに軽い） */
  --color-text-weak: #6e685e;/* 薄墨。英字ラベル・キャプション */
  --color-rule: #d0cabf;     /* 淡墨の罫線 */
  /* 変数には総称ファミリ(serif)を含めないこと（フォールバック連結が壊れる） */
  --font-heading: "Zen Old Mincho";
  --font-body: "Zen Old Mincho";
  --font-latin: "Cormorant Garamond";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1000px;
  --measure: 620px;          /* 本文カラムの最大幅。行長を短く保つ */
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,400&family=Zen+Old+Mincho:wght@400;500;700;900&display=swap`
- 本文の font-family は `var(--font-latin), var(--font-body), serif` の順に指定する
  （英数字が自動で Cormorant になる）
- 縦書きは `writing-mode: vertical-rl`。モバイル（768px以下）では横書きに戻し、
  ディスプレイ見出しのサイズを 44px 程度まで落として余白を確保する
- 筆致は `<path>` の `stroke-dasharray/‑dashoffset` を JS で 0 に遷移させて描く。
  reduced-motion 時は dashoffset を初めから 0 にする