純喫茶の憂愁 Kissa Melancholy

DESIGN.md

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

https://3pt.co.jp/design-library/md/kissa-melancholy/DESIGN.md

# DESIGN.md — 純喫茶の憂愁 / kissa-melancholy

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

## 1. コンセプト

昭和の純喫茶が持つ、夜の帳のような落ち着き。飴色の照明、ビロードの椅子、
古いメニュー帳のノスタルジーを「暗い高級感」として組む。焦茶の地に、ビロード緑の面、
飴色は罫線と見出しの点使いだけ。派手さでなく、五十年変わらないことの重みで魅せる。

**キーワード**: 憂愁 / 純喫茶 / ビロード / メニュー帳 / 静夜
**この見た目が向く場面**: 喫茶店・バー・小料理屋・老舗旅館・古書店など、
夜と時間の積み重ねを物語る業種。昼の明るさや効率を訴求する業種には不向き

## 2. タイポグラフィ

- 和文見出し: Shippori Mincho B1 / ウェイト 700（オールド明朝の濃い見出し）
- 和文本文: Shippori Mincho / ウェイト 400
- 欧文・数字: Spectral（従属欧文。見出しには使わない。価格・年号・電話番号など
  数字が主役の箇所にのみ充てる。EB Garamond は使わない — 姉妹テイスト
  letterpress-sincerity と欧文書体を分けて識別性を保つ）
- 見出しスケール: h1（ヒーロー店名）58px / h2（節見出し）30px / h3（メニュー小見出し）19px
  （比率は級数の跳躍で決める。厳密な等比数列にしない。モバイルは h1 42px）
- 特記: 価格の数字は `font-variant-numeric: oldstyle-nums` でオールドスタイル数字にし、
  本文の明朝と喧嘩しない柔らかい字形にする。本文の字間は 0.05em、見出しは 0.08〜0.14em で
  ゆったり組む。「〜を、もっと。」型の空虚コピーを書かない。すべて具体語（豆の種類・
  火入れの時刻・席数・年号）で書く

## 3. カラー（dark-luxury）

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #2b211a（深い焦茶） | 55% |
| 背景（節替え） | #332821（やや明るい焦茶） | — |
| 面（ビロード緑パネル） | #3e4a3a | 10%程度（引用・パネルに限定） |
| テキスト（主） | #efe3cd（クリーム） | 30% |
| テキスト（弱） | #c9b99a（薄クリーム） | — |
| アクセント（飴色） | #b98d4f | 5%以下・点と罫線のみ |
| 罫線（汎用） | rgba(185,141,79,0.32) | — |

- 配色ルール: 飴色は**罫線・見出しの点使い・アイコン線画・価格文字・年号**にのみ使う。
  「面（背景の塗り）で多用しない」。飴色を大面積の塗りにしない（バッジ・ボタン背景も不可）。
  ビロード緑は面として使ってよいが、パネル1〜2箇所（本文中の引用ボックス等）に限定し、
  ページ全体を緑で覆わない。紫〜青のグラデーション・発光（box-shadowでの光彩）は禁止
- **実測コントラスト（両方向・WCAG AA 4.5:1以上を確認）**:
  - クリーム #efe3cd on 焦茶 #2b211a → **12.39:1**
  - クリーム #efe3cd on 節替え焦茶 #332821 → **11.28:1**
  - クリーム #efe3cd on ビロード緑 #3e4a3a → **7.37:1**
  - 薄クリーム #c9b99a on 焦茶 #2b211a → **8.16:1**
  - 薄クリーム #c9b99a on ビロード緑 #3e4a3a → **4.85:1**
  - 飴色 #b98d4f on 焦茶 #2b211a（罫線ラベル・価格文字として） → **5.23:1**
  - 飴色 #b98d4f on ビロード緑 #3e4a3a → **3.11:1**（AA通常文字4.5:1未達。
    → **飴色の文字はビロード緑パネルの上では使わない**。ビロード緑パネル上の文字は
    必ずクリーム/薄クリームを使う。飴色はビロード緑パネル上では罫線・枠線としてのみ使用可）
  - クリーム #efe3cd on 飴色 #b98d4f → **2.37:1**（不合格）→ **飴色を面として使う場合、
    その上の文字は必ず焦茶 #2b211a を使う**（焦茶 on 飴色は5.23:1で合格）。
    クリーム文字を飴色の面に乗せることは禁止

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

- コンテンツ最大幅: 880px（一般セクション）／ 640px（品書き・帳面状のセクション。
  実物のメニュー帳のような狭い版面にすることで密度を高く見せる）
- **single-column: 一本道の縦積み。** 入店（ヒーロー）→ 品書き → 店内のこと → 店の歴史 →
  営業案内、の順で一直線に読ませる。横スクロールや複数カラムの並列構成を作らない
- セクション間余白: 96px 基準（モバイルは64px）/ 要素間は 8px の倍数
- 節の頭は**英字eyebrowを使わず**、飴色の菱形フラリッシュ（罫線＋菱形の区切り記号）＋
  和文見出し＋短いリード文、の3点で組む（§9にコード例）
- ヒーローの構成: **マッチ箱のラベルとして組む。** 中央に飴色の二重罫の枠（外枠と内枠の
  間に隙間を空けた「二重罫」。CSSの `border-style: double` は使わない）、四隅に写真コーナー風の
  飾り折れマーク。枠の中に、王冠の線画エンブレム・「純喫茶」の肩書き・店名・創業年を
  縦に積む。枠の外に本日の営業時間を一行、さらにその下に電話番号と品書きへの誘導を
  テキストリンクとして横に並べる。**ボタンは使わない。** 中央寄せだが「特大見出し＋
  サブコピー＋ボタン2つ」の定型ヒーローにしない（§9にコード例）

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

- ヘッダー・ナビゲーション: 焦茶地・クリーム文字・下線なし。ナビリンクはホバーで
  飴色に変わり、下線が飴色で出る（0.2s）。本文リンクと同じ挙動（下線ホバーのみ）で統一する
- 角丸: 0px（全要素直角。矩形の罫線と枠だけで構成する）/ 影: 使わない（box-shadowで
  発光・立体を作らない）/ 境界線: 1px。罫線は基本 `rgba(185,141,79,0.32)` の薄い飴色、
  ヒーローと品書きの枠だけは彩度そのままの飴色 `#b98d4f` を使う
- ボタン: **本テイストでは主要導線にボタンを使わない。** 誘導はすべて下線付きテキスト
  リンク（ホバーで飴色の下線）。やむを得ずボタンが必要な場合も、塗りボタンではなく
  1px罫線＋クリーム文字の枠ボタンに限定し、ホバーで罫線が飴色に変わる程度に留める
- カード的要素: 角丸カード＋影のグリッドを作らない。区切りは**罫線**（品書きの点線
  リーダー、店の歴史の横罫）または**ビロード緑の面パネル**（引用・見どころの強調1箇所）
  のいずれかで表現する
- **品書き（メニュー帳）の点線リーダー組み**: 品名と価格の間を点線で結ぶ、メニュー帳の
  定型。全体を1px飴色の二重罫（外枠＋内枠）で囲み、帳面のページのように見せる
  （§9にコード例必須）
- フォーム要素: 本デモには使用しないが、追加する場合は input/textarea は焦茶地・
  1px薄飴色罫線・角丸0・フォーカス時に罫線が彩度そのままの飴色 `#b98d4f` に変わる。
  背景を白にしない
- 画像の扱い: 写真は使わない方針（§7）。図版を使う場合は角丸なし・影なし・
  彩度を落とした単色トーン。装飾フィルタ（セピア一括がけ等）をかけない
- アクセント色（飴色）の適用範囲: 許される用法は
  ①罫線・枠線 ②節見出しのフラリッシュ・王冠エンブレムの線画 ③価格の数字・年号
  ④ホバー時の下線・文字色 の4つに限定。**面（塗り背景）としての多用・信号色的な
  バッジ塗りには使わない**

## 6. モーション

- 量: **static（一切動かさない）**。letterpress-sincerity 等で使われる
  IntersectionObserver によるフェードインを**使わない**。`scroll-behavior: smooth` も
  使わない（アンカークリック時の慣性スクロールも動きとみなし、`auto` にする）
- 許される最小の動き: リンク・ナビのホバー時の下線色/文字色の変化のみ（0.2s ease）。
  それ以外のtransitionを追加しない
- 使わない動き: スクロール連動フェード、パララックス、カウントアップ、カルーセル、
  タイプライター、ホバーでのtranslateY（カードが持ち上がる動き）。**「静けさ」は
  モーションの不在そのもので表現する**

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

- 写真は使わない。図版はすべて自作インラインSVGの線画（1〜2.5px罫、飴色 or クリーム）
  で統一する。**絵文字は一切使わない**
- 使用する自作SVG: ①王冠の線画エンブレム（店名「王冠」と直接結びつく固有のマーク。
  ヘッダー・ヒーロー・フッターで再利用） ②写真コーナー風の「角の飾り折れ」
  （ヒーローの二重罫枠、四隅のみ） ③節見出しの菱形フラリッシュ（罫線＋菱形）
- 網点（halftone dot）は使わない。**showa-retro-pop との排他事項**（本テイストは
  「静かな夜」、showaは「朱藍の賑やかな大衆文化」であり網点はshowa固有の意匠のため）

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

- Inter / Roboto / Arial / system-ui を使わない（Shippori Mincho B1 / Shippori Mincho /
  Spectral で組む）
- 紫〜青の装飾グラデーションを一切使わない（背景・文字・ボタンすべて）。
  box-shadowによる発光（glow）を使わない
- 網点（halftoneパターン）を使わない。網点は showa-retro-pop 固有の意匠であり、
  本テイスト（静かな夜のビロード緑）と混同してはならない
- 墨黒×真鍮の線画アイコンセットのような「モダンな工房」の意匠にしない
  （dark-atelier固有の言語）。本テイストは古紙とメニュー帳の郷愁であり、
  ノイズ質感は letterpress よりも粗く暗めに、飴色は罫線に偏らせて区別する
- 飴色 #b98d4f を面（大きな塗り背景・ボタン塗り・バッジ塗り）として多用しない。
  罫線・点・数字に限定する
- IntersectionObserverによるスクロールフェードイン、smooth scrollを使わない
  （motion: static を厳守。letterpress-sincerity の`.fade`パターンを流用しない）
- 「レトロ喫茶＝セピアフィルタ＋手書きフォント」に逃げない。書体は明朝の規律を守り、
  質感はSVGノイズと罫線の設計で作る。手書き風フォントを使わない
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
  ヒーローは必ずマッチ箱ラベルの二重罫枠として組む
- 絵文字・既製アイコンセットをアイコンに使わない（自作インラインSVG線画のみ）
- クリーム文字を飴色の面（塗り背景）に乗せない（実測2.37:1で不合格。§3参照）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #2b211a;
  --color-bg-alt: #332821;
  --color-velvet: #3e4a3a;
  --color-text: #efe3cd;
  --color-text-weak: #c9b99a;
  --color-accent: #b98d4f;
  --color-rule: rgba(185, 141, 79, 0.32);
  /* 変数には総称ファミリ(serif)を含めないこと */
  --font-heading: "Shippori Mincho B1";
  --font-body: "Shippori Mincho";
  --font-latin: "Spectral";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 880px;
  --max-width-narrow: 640px;
}
```

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

### 品書き（メニュー帳）の点線リーダー組み — 必須パターン

```html
<ul class="menu-list">
  <li class="menu-item">
    <span class="name">ブレンド（自家焙煎・深煎り）</span>
    <span class="leader"></span>
    <span class="price">¥550</span>
  </li>
  <li class="menu-item">
    <span class="name">王冠特製ブレンド</span>
    <span class="leader"></span>
    <span class="price">¥650</span>
    <span class="desc">豆を三種、店主の勘で配合。苦みの奥に軽い酸味を残します。</span>
  </li>
</ul>
```

```css
.menu-item {
  display: flex;
  flex-wrap: wrap;              /* descを強制改行させるために必須 */
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
}
.menu-item .leader {
  flex: 1;                       /* 品名と価格の間を伸縮する点線が埋める */
  border-bottom: 1px dotted var(--color-accent);
  height: 0.9em;
  margin: 0 2px;
}
.menu-item .price {
  font-family: var(--font-latin), serif;
  font-variant-numeric: oldstyle-nums;
  white-space: nowrap;
  text-align: right;
}
.menu-item .desc {
  flex-basis: 100%;              /* flex-wrapと組み合わせて必ず次の行に落とす */
  font-size: 12.5px;
  color: var(--color-text-weak);
}
```

### ヒーロー: マッチ箱ラベルの二重罫枠 — 必須パターン

```html
<div class="matchbox">
  <div class="matchbox-outer">
    <svg class="corner corner--tl"><use href="#icon-corner"/></svg>
    <svg class="corner corner--tr"><use href="#icon-corner"/></svg>
    <svg class="corner corner--br"><use href="#icon-corner"/></svg>
    <svg class="corner corner--bl"><use href="#icon-corner"/></svg>
    <div class="matchbox-inner">
      <p class="hero-label">純喫茶</p>
      <h1 class="hero-title">王冠</h1>
      <span class="hero-est">創業 昭和四十二年 — EST. 1967</span>
    </div>
  </div>
</div>
```

```css
.matchbox-outer { border: 1px solid var(--color-accent); padding: 8px; position: relative; }
.matchbox-inner { border: 1px solid var(--color-accent); padding: 48px 32px 40px; }
/* 外枠と内枠の間に padding の隙間を作ることが「二重罫」の要。
   border-style: double（1要素で2本線）は使わない */
.corner { position: absolute; width: 22px; height: 22px; color: var(--color-accent); }
.corner--tl { top: -1px; left: -1px; }
.corner--tr { top: -1px; right: -1px; transform: rotate(90deg); }
.corner--br { bottom: -1px; right: -1px; transform: rotate(180deg); }
.corner--bl { bottom: -1px; left: -1px; transform: rotate(270deg); }
```

```html
<!-- 角の飾り折れ（写真コーナー風の自作マーク）。defsに一度だけ定義しuseで再利用 -->
<symbol id="icon-corner" viewBox="0 0 22 22">
  <path d="M1 21 V8 L8 1 H21" fill="none" stroke="currentColor"
        stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
```

### 節見出しの菱形フラリッシュ（英字eyebrowの代わり）

```html
<svg width="64" height="12" class="sec-flourish" aria-hidden="true">
  <use href="#icon-flourish"/>
</svg>
<h2>品書き</h2>
```

```css
/* symbol定義: 罫線—菱形—罫線。英語の機械翻訳ラベルを使わず、
   和文タイポグラフィの中だけで階層と間を作る */
```

- 動きは一切JSを必要としない（IntersectionObserver等のスクリプトを書かない）。
  `html { scroll-behavior: auto; }` を明示し、アンカーリンクの慣性スクロールも避ける