青々（せいせい） Seisei Tea

DESIGN.md

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

# DESIGN.md — 青々（せいせい） / seisei-tea

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

## 1. コンセプト

淹れたての煎茶の、青い静けさ。和の伝統色を「賑やかさ」ではなく「設え」として使う
和モダン。金の飾りも雲紋も筆文字も使わない。面と余白と縦書きだけの禁欲で、
一杯の茶に向き合う時間の質を語る。

**キーワード**: 静けさ / 設え / 単一茶園 / 縦書き / 禁欲
**この見た目が向く場面**: 日本茶・和菓子・器・料理店の献立・伝統工芸のD2Cブランド

## 2. タイポグラフィ

- 和文見出し: Shippori Mincho / ウェイト 500（本文は 400）。**縦書きを左パネルの
  ブランド名・一句に用いる**（`writing-mode: vertical-rl`）。明朝の静けさが核
- 和文本文: Shippori Mincho / ウェイト 400 / サイズ 16px / 行間 1.95 / 字間 0.03em
- 欧文・数字: Outfit（ブランド表記 SEISEI・湯温・秒数・価格・年号など**すべての
  数値**に使う。**字間は必ず +0.14em**。明朝の静と、ジオメトリックな現代の
  コントラストがこのテイストの核。Inter に置換しない）
- 見出しスケール: h1（左パネル・縦書き）46px / h2 30px / hero-line（右カラム先頭の
  「一煎目 — 80℃、40秒。」に相当する淹れ方一行の導入文）22〜30px・**既定30px**
  （セクションh2と同一サイズを既定とし、文言が長くなる場合のみ22pxまで縮めてよい）
  / セクション頭の英字ラベル 11px
  （モバイルは h1・haiku とも `horizontal-tb` に切り替え、h2 24px）
- 特記: 和文の地の文と欧文の数値を並べるとき、**数値は必ず Outfit・藍色 #2b4a66**
  で組む（本文の茶green #3e5c41 と色分けし、視覚的にも書体的にも二重にコントラスト
  をつける）。英字ラベル（eyebrow）は「節番号＋罫線＋英字ラベル＋和文見出し」という
  型組みの一部としてのみ使う（機械的な直訳ではなく、番号システムの一部）。
  **英字ラベル自体の文字色は弱文字色を用いる（生成り地では #5c6b5c、深緑地では
  #cadbc7）。藍 #2b4a66 は§3の通り数値・データの文字専用であり、節番号（算用数字）
  には藍を使ってよいが、英字ラベル（eyebrow）の文字色には使わない**（数値と装飾
  ラベルの役割を色で混同しないための区別）。
  キャッチは体言止め・断定で短く。「〜を、もっと。」型の空虚コピーを書かない

## 3. カラー

wa-traditional。生成りを基調に、深く沈んだ茶green・若竹・藍・朱の点の5色のみ
（線・弱文字はこの5色からの派生とする）。**若竹は「面」専用で文字色にしない**
（後述コントラスト実測の通り AA 未達のため）。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 生成り（ベース地） | #f6f1e4 | 55% |
| 茶green・深緑（左パネル地／本文文字） | #3e5c41 | 25% |
| 若竹（意味を持たない純粋な飾り罫のみ。文字色にもUI境界にも使わない） | #87a68a | 5%以下 |
| 藍（数値・データの文字専用） | #2b4a66 | 10% |
| 朱（点。**ページ全体で1箇所のみ・排他**） | #b64129 | 1%未満 |
| 生成り地の弱文字 | #5c6b5c | — |
| 深緑地の弱文字・UI境界（左パネル用） | #cadbc7 | — |

**実測コントラスト（WCAG相対輝度比。両方向）**
- 生成り地 × 茶green文字 = **6.62:1**（本文）
- 深緑地 × 生成り文字 = **6.62:1**（左パネル反転）
- 生成り地 × 藍文字 = **8.19:1**（数値・リンク）
- 生成り地 × 朱文字 = **4.93:1**（唯一の点。AA適合するが単体使用に限定）
- 生成り地 × 弱文字#5c6b5c = **5.02:1**
- 深緑地 × 弱文字#cadbc7 = **5.15:1**（2026-07-11 revise: 旧#bcd0be=4.59:1はAA理論値
  ぎりぎりだったため明度を上げ再実測。11px極小トラッキング文字での実質マージンを確保）
- 若竹地 × 茶green文字 = 2.79:1（**AA未達**）／若竹地 × 生成り文字 = 2.37:1（**AA未達**）
  ／深緑地 × 若竹の罫 = 2.79:1（**UIコンポーネント3:1未達**）
  → この理由で若竹は文字にも、意味を持つUI境界（ホバー時の下線・枠線など）にも使わない。
  **意味を持たない純粋な飾り罫**（.leaf .idx-vertの脇に添える1pxの数え罫のみ）に限定する

- 配色ルール: 朱は「1画面1点まで・排他」を**ページ全体でも1箇所のみ**に厳格化する
  （茶葉リストのうち被覆栽培の一種だけに「今季の一点」の印として使用。他のどこにも
  朱を再利用しない）。若竹は**意味を持たない純粋な飾り罫**としてのみ使い、絶対に
  文字色にも、状態を伝えるUI境界（ホバー・フォーカス等）にもしない。状態を伝える境界は
  必ず#cadbc7以上のコントラストを持つ色に限定する。緑を明るい黄緑
  （オーガニック感）にしない。金・雲紋・筆文字を
  一切使わない（和モダン=金の飾りという手癖を明確に排除）

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

- **split-screen**。左35%固定＝深緑の面（`position: sticky; top:0; height:100vh`）に
  縦書きのブランド名・季節の一句・ナビ。右65%＝本文がスクロールする。境界線には
  被覆栽培の「覆いの際」を表す `.shade-seam` を使う
- 右カラムの内容は max-width 640px に収め、明朝の縦長の行間で読ませる
- セクション間余白: 上下 118px 基準（airy）。要素間は 8px の倍数
- 各節の頭に「節番号（Outfit・藍）＋若竹の短い罫＋英字ラベル＋和文見出し」を置く
- **ヒーローの型を外す**: 左の固定面がそのままヒーロー。右カラムの先頭は
  「一煎目 — 80℃、40秒。」のような淹れ方の一行から始める。**ボタンを置かない**
  （中央寄せ特大見出し＋ボタン2つの定型を作らない）。定期便への誘導はナビと
  ページ末尾のテキストリンクのみに限定する
- モバイル（900px以下）は上下分割に畳む。左パネルは静的な横並びブロックになり、
  縦書きは横書きに切り替える（§9にコード例）

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

- ヘッダー・ナビゲーション: 左パネル内蔵のナビのみ（別建てのヘッダーを作らない）。
  リンクは深緑地に生成り文字、下線なし。ホバーで**下線が現れ、太さも1pxから2pxへ**
  変わる（文字色は変えない）。下線色は#cadbc7（5.15:1、UI非文字コントラスト3:1を
  余裕でクリア）。2026-07-11 revise: 旧実装は若竹#87a68a（深緑地に対し2.79:1で
  UI非文字コントラスト3:1未達）を使っていたため差し替えた
- 角丸: 0px（全要素直角）/ 影: 使わない（box-shadow 禁止）/ 境界線: 1px solid
  （生成り地では #b6bdab、深緑地では #6a886d）
- ボタン: **原則作らない。** 誘導はすべてテキストリンク＋1px下線（藍色）。
  ホバーで文字色が藍に変わる
- リスト（茶葉）: カードや角丸・影を使わず、横罫線で1件ずつ区切る。各件の左に
  縦書きの和数字（壱/弐/参/肆、茶green文字色）を小さく添え、その左端に若竹の
  1px罫（意味を持たない純粋な飾り＝数え罫）を添える（Outfitの算用数字ではなく、
  縦書きテーマを右カラムにも一貫させるための和数字。2026-07-11 revise: 和数字の
  文字色に若竹#87a68a（茶green地に対し2.79:1でAA未達）を使っていたため茶green
  #3e5c41（6.62:1）に差し替え、若竹は文字ではなく左端の飾り罫としてのみ残した）
- 表（淹れ方）: 罫線のみのシンプルな表。ヘッダ行は太い罫（茶green）で区切り、
  数値セルはすべて Outfit・藍・字間+0.14em・tabular-nums で桁を揃える
- 定義リスト（茶園・定期便の事実情報）: ラベル列固定幅＋横罫線区切り。
  数値部分のみ Outfit・藍で色分けする
- フォーム要素: 本デモでは使用しない（定期便の申込みはテキストリンクの誘導まで）
- 画像の扱い: 写真・イラストを使わない（flat-minimal・ornament=写真非依存）。
  茶葉の「水色」は色見本を作らず、必ず**言葉**（山吹を帯びた淡い黄緑、等）で描写する
  （パレット外の色を増やさないため）
- アクセント色の適用範囲: 朱はページ全体で1箇所のみ。若竹は下線・区切り・小さな点。
  藍は数値・データ・リンクの文字色専用。この3色を面（大面積の背景）に使わない

## 6. モーション

- 量: subtle。**左の固定面（深緑パネル）は一切動かさない**。右カラムのみ、
  役割差のあるフェードで出現する
- 使う動き（役割で3段階に差をつける。一律フェードにしない）:
  - `.reveal-primary`（hero行・各 h2 見出し）: opacity/translateY(14px)→0、
    0.7s ease-out。最も長く・大きく動く「主役」
  - `.reveal-secondary`（sec-head・導入文）: opacity/translateY(10px)→0、
    0.55s ease-out・0.1s delay。中間の「地の文」
  - `.reveal-row`（茶葉カード・表の行・定義リストの行）: opacity/translateY(8px)→0、
    0.4s ease-out・0〜0.28sの短い階段ディレイ。最も短く・小さく動く「支える要素」
- 使わない動き: パララックス、数字カウントアップ、マーキー、カルーセル、
  バウンス、左パネルのアニメーション（左パネルは固定=完全に静止）
- `prefers-reduced-motion: reduce` 時はすべて即時表示（transition なし）

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

- 写真・イラストを一切使わない（flat-minimal）。色面・1px罫線・余白・タイポ
  （縦書きを含む）だけで構成する。装飾のための抽象図形（ブロブ・3D・グラデ）も
  使わない。アイコンは使わず、区切りは罫線と余白のみで表現する

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

- Inter / Roboto / Arial / Noto Sans を使わない（Shippori Mincho / Outfit で組む）
- **「和モダン＝金の飾り＋雲紋＋筆文字」を作らない**（金属色・雲文様パターン・
  筆文字フォント・水墨の飛沫演出を一切使わない。このテイストは面と余白のみで語る）
- **緑を明るい黄緑（オーガニック風）にしない**。茶greenは常に沈んだ深緑 #3e5c41。
  若竹 #87a68a も「淡く」使い、鮮やかな黄緑に彩度を上げない
- **若竹を文字色にも、状態を伝えるUI境界（ホバー下線・フォーカス枠など）にも使わない**
  （§3実測の通り文字色2.79/2.37:1・UI境界2.79:1のいずれもAA/3:1未達。意味を持たない
  純粋な飾り罫としてのみ使う）
- **朱をページ全体で複数箇所に使わない**（1箇所のみの排他使用。装飾として散らさない）
- グラデーションを一切使わない（背景・文字・ボタンすべて）。box-shadow・
  backdrop-filter（グラスモーフィズム）を使わない
- border-radius を使わない（常に 0）。角丸カード＋影の3カラム構成を作らない
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
  ボタン（塗りの角丸/直角ボタン）自体を基本的に作らない（誘導はテキストリンクのみ）
- 写真・既製イラスト・絵文字・既製アイコンセットを使わない
- 左の固定パネルにスクロール連動アニメーションを付けない（完全に静止させる）
- **縦書き（`writing-mode: vertical-rl`）で自由文を流し込むブロック（`.haiku`・
  `.brand h1.mark`等）に、`<br>`なしの長い一続きの文字列を流し込まない**（季節の
  一句・キャッチフレーズは必ず5-7-5等の意味の区切りごとに`<br>`を挿入し、ブラウザの
  自動折り返しに委ねない。総文字数の上限と改行ルールは§9参照）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f6f1e4;          /* 生成り */
  --color-bg-alt: #efe7d3;
  --color-green: #3e5c41;       /* 茶green 深緑。左パネル地・本文文字 */
  --color-bamboo: #87a68a;      /* 若竹。意味を持たない純粋な飾り罫のみ（文字色・UI境界にしない） */
  --color-indigo: #2b4a66;      /* 藍。数値・データの文字専用 */
  --color-vermillion: #b64129;  /* 朱の点。ページ全体で1箇所のみ */

  --color-text: var(--color-green);
  --color-text-weak: #5c6b5c;
  --color-on-green: #f6f1e4;
  --color-on-green-weak: #cadbc7;  /* 5.15:1（2026-07-11: #bcd0be=4.59:1から明度調整） */

  --color-line: #b6bdab;
  --color-line-dark: #6a886d;

  --font-latin: "Outfit";
  --font-heading: "Shippori Mincho";
  --font-body: "Shippori Mincho";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1240px;
  --aside-width: 35%;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&family=Shippori+Mincho:wght@400;500;600&display=swap`
- 数値は必ず `.num { font-family: var(--font-latin); font-weight:500; letter-spacing:0.14em;
  color: var(--color-indigo); font-variant-numeric: tabular-nums; }` を通す

**split-screen（左固定・縦書き。35/65の非対称比、境界線は`.shade-seam`）**
```css
.split { display: grid; grid-template-columns: 35% 65%; }
.aside {
  position: sticky; top: 0; height: 100vh;
  background: var(--color-green); color: var(--color-on-green);
}
.brand h1.mark {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 46px; letter-spacing: 0.22em;
}
.haiku {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-heading); font-size: 16px;
  line-height: 2.3; letter-spacing: 0.16em;
  color: var(--color-on-green-weak);
  height: 190px;             /* 目安。実際は .aside の余白から逆算して固定値を決める */
  column-gap: 24px;          /* 折り返し列同士の安全マージン（24px以上を厳守） */
  max-width: 180px;          /* 2〜3列で収まる上限。.brand・ナビと重ならないための上限 */
}
```

**縦書き自由文（`.haiku`・`.brand h1.mark`等、vertical-rlで自由文を流し込む
全ブロック）の文字数上限・改行ルール**

- **文字数上限の計算式**: `height ÷ (font-size × line-height) ≒ 1列あたりの字数`。
  例: height 190px、font-size 16px、line-height 2.3 の場合、
  190 ÷ (16 × 2.3) ≒ 5.2 → **目安1列あたり6〜7字**。季節の一句・キャッチフレーズは、
  読点・かっこ書きの読み仮名を含めた**総文字数がこの1列あたり字数の2〜3列分
  （目安 約12〜20字）に収まる長さに収める**。業種が変わり文言が長くなる場合は、
  先に `height` を広げるか文言を削るかを決め、自動折り返しの列数超過に任せない
- **手動改行の必須化**: 一句は必ず意味の区切り（5-7-5等のフレーズ単位）ごとに
  `<br>` を挿入し、ブラウザの自動折り返しに委ねない。1つの `<br>` もない長い
  一続きの文字列を vertical-rl ブロックに流し込むことを禁止する（§8参照）。例:
  ```html
  <p class="haiku">新茶の香<br>山を渡りて<br>一椀に</p>
  ```
- **折り返し時の安全マージン**: `.haiku` には `column-gap`（24px以上）と、
  折り返しが2〜3列になっても隣接要素（ブランド名・英字表記・ナビ）と重ならない
  ための `max-width`（または `.aside` 側で十分な余白）を必ず設定する
- **検証手順**: 実装後、一句を意図的に2〜3列に折り返る長さの文言に差し替え、
  実ブラウザの描画で `.brand h1.mark`・英字表記・ナビ等の隣接要素と重ならない
  ことを目視確認する（自動テスト・スクリーンショット無しでの申告のみで済ませない）

**モバイル：上下分割に畳む（900px以下で縦書き→横書きに切替）**
```css
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .aside {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap;
  }
  .brand h1.mark, .haiku {
    writing-mode: horizontal-tb;   /* 縦書き→横書き */
    height: auto; font-size: 26px;
  }
}
```

**役割差フェード（一律フェードにしない）**
```css
.reveal-primary   { transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal-secondary { transition: opacity .55s ease-out .1s, transform .55s ease-out .1s; }
.reveal-row       { transition: opacity .4s ease-out, transform .4s ease-out; }
/* reveal-row のみ JS 側で (i % 5) * 0.07s の短い階段ディレイを付与する */
```

- 判定は実際の祖先背景で行うこと（クラス名を安全リストとして機械的に信用しない）。
  例えば `.on-green-weak` という名の変数でも、実際に生成り地の上に置かれていれば
  AA未達になりうるため、実装時は必ず背景色とセットで確認する


## ヘッダーロゴ（2026-09-15追加）

ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。