銅版画の紅茶商 Copperplate Tea Merchant

DESIGN.md

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

https://3pt.co.jp/design-library/md/douban-tea/DESIGN.md

# DESIGN.md — 銅版画の紅茶商 / douban-tea

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

## 1. コンセプト

19世紀の博物図譜・銅版画の趣で組む紅茶商。**クロスハッチングの細密な自作SVG線画**が
主役で、写真もアイコンフォントも使わない。くすんだ多色、図版番号のある誌面、
段組と回り込みを持つ誌面構成で、大人の静けさと知的な佇まいを作る。
picture-book-warm（丸ゴシック・フラットな温かいイラスト絵本）とは対極にある——
本作は角のある明朝と、線密度だけで陰影を作る硬質な版画線画で組む。

**キーワード**: 銅版画 / 図譜 / ハッチング / 誌面 / 静けさ
**この見た目が向く場面**: 専門小売（茶・コーヒー・酒・香辛料等の嗜好品）・工芸品店・
博物館/資料館のミュージアムショップ・大人向けギフトブランド

## 2. タイポグラフィ

- 和文見出し: Shippori Mincho / ウェイト 500
- 和文本文: Shippori Mincho / ウェイト 400 / サイズ 16px / 行間 1.85 / 字間 0.01〜0.02em
- 欧文・数字: EB Garamond（品名・図版番号・年号・価格に使用。**Inter や游ゴシック系に
  置換しない**）。品名や学名風の表記（例: <em>Camellia sinensis</em>）は必ずitalicで組む
- 見出しスケール: h1（ヒーロー社名）40px / モバイル、52px / デスクトップ。
  h2（節見出し）28px / モバイル、34px / デスクトップ。本文相当のラベル 12〜14px
- 特記: 図版キャプションは「Fig. N — 和名、産地の形容」の図譜様式で統一する
  （§9にコード例）。キャッチコピーは具体語・断定で短く、「〜を、もっと。」型の
  空虚コピーを書かない。丸ゴシック体・丸みの強い書体を一切使わない（排他）

## 3. カラー

生成り・茶墨・くすみ青鼠・くすみ臙脂・灰緑の5色系列のみ。**ビビッドカラー・
純白・純黒を追加しない（排他）**。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース・生成り） | #f5f2ea | 60% |
| 背景（節替え） | #ece5d5 | — |
| テキスト（主・茶墨） | #443c34 | 30% |
| テキスト（弱・茶墨弱） | #6b6055 | — |
| 罫線（表の横罫） | #cfc4ac | — |
| くすみ青鼠（塗り・ハッチング専用） | #7d8a96 | 3%程度 |
| くすみ青鼠（文字用濃色） | #54606d | — |
| くすみ臙脂（塗り・ハッチング専用） | #9a6a6a | 3%程度 |
| くすみ臙脂（文字用濃色） | #7a4f4f | — |
| 灰緑（塗り・ハッチング専用） | #8a9382 | 3%程度 |
| 灰緑（文字用濃色） | #57624f | — |

- 配色ルール: くすみ青鼠・くすみ臙脂・灰緑の生値は**イラストのハッチング塗り専用**
  （背景 #f5f2ea に対しそれぞれ 3.16:1 / 4.04:1 / 2.85:1 で本文文字には不可）。
  茶葉の産地ごとの見分け（涼系＝青鼠、濃厚系＝臙脂、中国種＝灰緑）に使い、
  面（背景パネル）としては使わない。文字として使う場合は必ず `-text` 版を使う
- 純白 #ffffff・純黒 #000000・紫〜青のグラデーション・信号色（赤緑黄の装飾利用）を
  一切使わない
- 実測コントラスト（対 #f5f2ea 生成り／対 #ece5d5 節替え）:
  茶墨 9.67:1 / 8.62:1、茶墨弱 5.47:1 / 4.88:1、青鼠文字 5.74:1 / 5.12:1、
  臙脂文字 6.14:1 / 5.47:1、灰緑文字 5.75:1 / 5.13:1（すべてWCAG AA 4.5:1以上）。
  ボタン（茶墨地 #443c34 に生成り文字 #f5f2ea）は 9.67:1

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

- コンテンツ最大幅: 1160px / 左右パディング 24px（デスクトップは32px）
- セクション間余白: 上下56px基準 / 要素間は8pxの倍数
- グリッドの性格: **editorial**。誌面のように段組・図版と本文の回り込み・
  ページ柱（丁付け）を持つ。厳格な12カラムグリッドには乗せない
- 各節の頭に「丁◯ — 節名（漢数字の丁付け）」＋「英字の節ラベル（小型大文字）」の
  running-head（ページ柱）を置く。これは装飾ではなく**書物の柱・丁付けという
  実在の書誌要素の再現**であり、機械翻訳のeyebrowとは性質が異なる
  （丁は連番・英字ラベルは節固有で全節共通の翻訳調にしない）
- 節見出し直下の導入文は、幅760px以上で2カラムの段組（`column-count: 2`）に組む
- ヒーローの構成: 図譜の扉。**中央寄せにしない**。左に大きな茶樹の銅版画（図譜枠付き）、
  右に社名・キャッチ・本日の量り売り3種の小さな表、下にCTAボタン1つのみ。
  「特大中央見出し＋サブコピー＋ボタン2つ」の定型を作らない
- 図譜（茶葉紹介）は、代表2種を**回り込み（float）の特集プレート**として大きく扱い、
  残りを`grid-template-columns: repeat(auto-fit, minmax(210px, 1fr))`の
  コンパクトな一覧グリッドに収める

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

- ヘッダー・ナビゲーション: 生成り地・下線なし。ナビリンクは本文と同じ茶墨色、
  ホバーで下線が出る（border-bottom、0.2s）。本文中のリンクと同じ扱いでよい
- 角丸: 0px（常に直角）/ 影: box-shadow を一切使わない / 境界線: 図譜枠（§7参照）と
  表の横罫（1px, `--color-line`）のみ
- ボタン: **ページ全体でヒーローの1個のみ**。茶墨地＋生成り文字、直角、
  ホバーで地と文字が反転（0.2s ease）。他の節では「テキスト＋下線＋→」の
  テキストリンクのみを使い、塗りボタンを増やさない
- カード的要素: 角丸カード＋影は作らない。図譜プレートは図譜枠（二重罫）で
  囲い、コンパクト一覧はグリッドの余白のみで区切る（背景の面替えをしない）
- 表（量り売り表・帳面のブレンド記録）: 横罫のみ（縦罫を引かない）。価格・号数・
  年月は EB Garamond の等幅数字寄りの字形で右揃えまたは列頭揃え
- フォーム要素: 本デモには入力フォームを置いていない（注文は電話番号のテキスト
  表示のみ）。フォームを追加する場合は生成り背景・1px茶墨罫線・角丸0・
  フォーカス時に罫線がくすみ臙脂文字色に変わる、のルールを踏襲する
- 画像・イラストの扱い: 写真は使わない。すべて自作インラインSVGの線画＋
  クロスハッチングで統一する（§7・§9）
- アクセント色の適用範囲: 青鼠・臙脂・灰緑は「イラストのハッチング塗り」
  「figキャプションの産地区分の視覚差」の2用途に限定する。ボタンやリンクの
  地色として使わない

## 6. モーション

- 量: subtle。**役割差フェードのみ**。イラスト（`.illust` を含むSVG要素）は
  一切アニメーションさせない——版画は動かない、という前提を貫く
- 使う動き: 見出し（0.7s ease）→ 導入文（0.6s ease, 0.08s遅延）→ 個々の行・
  カード（0.45s ease, 0.06s刻みの階段ディレイ、最大6段でクランプ）という
  役割ごとの速度差のみ。リンク・ボタンのホバー色反転は0.2s ease
- 使わない動き: パララックス、数字のカウントアップ、自動カルーセル、
  マーキー、イラストのフェードイン/スケール/回転、均一な一括フェード

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

- 写真は使わず、すべて**銅版画（エッチング）風の自作インラインSVG線画**で統一する
- 陰影はfillのベタ塗りを使わず、**線の密度（クロスハッチング）**で作る。
  SVGの`<pattern>`で0.8〜1.2pxの平行線・交差線を定義し、`clipPath`で形状内に
  絞り込んで塗る（§9にコード例）。丸くて太いフラットイラスト（Corporate Memphis
  的な塗り絵風）を禁止する（排他）
- モチーフは茶葉の枝・茶樹・急須と碗・天秤（量り売り）・帆船（通信販売）の5種。
  産地ごとに青鼠・臙脂・灰緑の3色でハッチングの色みを変え、視覚的な見分けを作る
  （アウトラインの線自体は常に茶墨色で統一し、色は陰影の塗りにのみ乗せる）
- 図譜枠（唯一の飾り罫）: すべての図版を二重罫（外側1.5px・内側0.5px、
  ともに茶墨色）で囲む。**この二重罫の図譜枠だけを、ページ全体で唯一の
  装飾罫として使う**（§9にコード例）。それ以外の飾り罫（波線・ドット罫・
  リボン等）を足さない

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

- Inter / Roboto / Arial / system-ui / 游ゴシック をデフォルトで使わない
  （Shippori Mincho / EB Garamond で組む）
- 丸ゴシック体（Zen Maru Gothic 等、丸みの強い書体）を一切使わない
  （picture-book-warm との混同を避けるための排他事項）
- グラデーションを一切使わない（背景・文字・ボタンすべて）。box-shadow を使わない
- border-radius を使わない（常に0。角丸カード・角丸ボタンを作らない）
- 「アンティーク風＝セピア＋飾り罫の乱用」に逃げない。飾り罫は図譜枠（二重罫）
  **1種類のみ**とし、波線・リボン・レース模様等の追加装飾罫を足さない（排他）
- イラストはfillのベタ塗りで陰影をつけない。陰影は必ずクロスハッチング
  （線の密度）で表現する。丸くて太いフラットな塗り絵イラストを作らない（排他）
- イラストにアニメーション（フェードイン・ホバー変形・回転）を付けない
  （版画は動かない、を厳守）
- 純白 #ffffff・純黒 #000000・ビビッドカラー・信号色の装飾利用を使わない
- 絵文字をアイコンとして使わない（アイコンが必要なら自作の線画SVGで統一する）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
  CTAボタンはページ全体でヒーローの1個のみとし、他節では増やさない
- 数字のカウントアップ・自動カルーセル・マーキー・パララックスを使わない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f5f2ea;
  --color-bg-alt: #ece5d5;
  --color-ink: #443c34;
  --color-ink-weak: #6b6055;
  --color-line: #cfc4ac;

  --color-blue: #7d8a96;        /* 塗り専用 */
  --color-blue-text: #54606d;   /* 文字用濃色 */
  --color-crimson: #9a6a6a;     /* 塗り専用 */
  --color-crimson-text: #7a4f4f;/* 文字用濃色 */
  --color-sage: #8a9382;        /* 塗り専用 */
  --color-sage-text: #57624f;   /* 文字用濃色 */

  --font-heading: "Shippori Mincho";
  --font-body: "Shippori Mincho";
  --font-latin: "EB Garamond";

  --space-unit: 8px;
  --radius: 0;
  --max-width: 1160px;
  --gutter: 32px;

  --frame-outer: 1.5px solid var(--color-ink);
  --frame-inner: 0.5px solid var(--color-ink);
  --frame-gap: 7px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Shippori+Mincho:wght@400;500;600&display=swap`

**① クロスハッチング（陰影の生成）** — fillのベタ塗りを禁止し、必ずこの手法で塗る。
`<pattern>`はページ内で一度だけ定義し、全イラストで共有する:

```html
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <defs>
    <!-- 薄い陰影: 単方向の平行線 -->
    <pattern id="hatch-l" width="5" height="5" patternUnits="userSpaceOnUse">
      <line x1="0" y1="5" x2="5" y2="0" stroke="currentColor" stroke-width="0.8"/>
    </pattern>
    <!-- 中間の陰影: 交差線（クロスハッチ） -->
    <pattern id="hatch-m" width="5" height="5" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="5" y2="5" stroke="currentColor" stroke-width="0.9"/>
      <line x1="5" y1="0" x2="0" y2="5" stroke="currentColor" stroke-width="0.9"/>
    </pattern>
    <!-- 濃い陰影: 密なクロスハッチ -->
    <pattern id="hatch-d" width="3" height="3" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="3" y2="3" stroke="currentColor" stroke-width="1"/>
      <line x1="3" y1="0" x2="0" y2="3" stroke="currentColor" stroke-width="1"/>
    </pattern>
  </defs>
</svg>
```

形状の輪郭は必ず `stroke="var(--color-ink)"` で描き、陰影部分だけを
`clipPath` で切り取った `<rect fill="url(#hatch-m)">` を重ねる。
`currentColor` は「そのrectを内包する要素のCSS color」を参照するため、
イラストをラップする要素に `color: var(--color-crimson-text)` 等を
指定すれば、輪郭は茶墨のまま陰影の色みだけ変わる:

```html
<svg class="illust tint-crimson" viewBox="0 0 160 160">
  <!-- 輪郭（常に茶墨） -->
  <path d="M80,14 C114,34 130,78 96,132 ..." fill="var(--color-bg)"
        stroke="var(--color-ink)" stroke-width="1.2"/>
  <!-- 陰影（clipPathで葉の内側だけに絞ってhatchを重ねる） -->
  <rect x="80" y="14" width="56" height="130"
        clip-path="url(#clip-leaf-a)" fill="url(#hatch-m)"/>
</svg>
```

```css
.illust { color: var(--color-ink); }              /* 既定は輪郭と同色系 */
.illust.tint-crimson { color: var(--color-crimson-text); }
.illust.tint-blue    { color: var(--color-blue-text); }
.illust.tint-sage    { color: var(--color-sage-text); }
```

**② 図譜枠（唯一の飾り罫）**:

```css
.plate-frame { border: var(--frame-outer); padding: var(--frame-gap); background: var(--color-bg); }
.plate-frame__inner { border: var(--frame-inner); padding: 12px; }
```

```html
<div class="plate-frame">
  <div class="plate-frame__inner">
    <svg class="illust tint-sage" viewBox="0 0 160 160">…</svg>
  </div>
</div>
```

**③ 図譜キャプション（Fig. N 様式）**:

```css
.fig-caption { font-size: 14px; }
.fig-caption .fig-no,
.fig-caption .fig-name { font-family: var(--font-latin), serif; font-style: italic; }
```

```html
<p class="fig-caption">
  <span class="fig-no">Fig. 3</span> — ウバ、<span class="fig-name">高地産</span>
</p>
```

**④ 役割差フェード（モーション）**:

```css
[data-reveal] { opacity: 0; transform: translateY(10px); }
[data-reveal].in-view { opacity: 1; transform: translateY(0); }
[data-reveal="heading"] { transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal="lede"]    { transition: opacity 0.6s ease 0.08s, transform 0.6s ease 0.08s; }
[data-reveal="row"]     { transition: opacity 0.45s ease, transform 0.45s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
```

JSは `IntersectionObserver` で `data-reveal="row"` にだけ `transitionDelay` を
`(index % 6) * 0.06s` で階段状に付与する。`.illust` はこのobserverの対象に
含めない（イラストは常に不透明・不動のまま表示する）。

- コントラスト判定は**クラス名の安全リストではなく、実際の祖先背景**を見て行うこと。
  本パターンでは `--color-bg` / `--color-bg-alt` の生成り系の上にしか文字を
  置かないため判定は単純だが、将来的に暗色パネルを追加する場合は必ず
  そのパネル色との実測コントラストを新たに測ること