# DESIGN.md — 鶴屋吉信（つるやよしのぶ）

> 享和3年（1803年）創業、京都・西陣の京菓匠 鶴屋吉信の公式サイト（https://www.tsuruyayoshinobu.jp/）のデザイン仕様書。
> 「『ヨキモノ』を創る」を掲げ、代表銘菓「柚餅」「京観世」「つばらつばら」を軸に、直営店・茶寮・オンラインショップを案内する。
> 最大の特徴は **見出しに DNP 秀英明朝 Pr6N、本文にシステムフォント**という**明朝＋システムゴシックの二層構造**。和文 Web フォントを本文に使わず、**見出しだけを明朝で立てる**。
> そして **`letter-spacing` がほぼ全テキストで `0.09375em`（= 3/32）に固定**されている。**サイズが変わっても字間比率が変わらない**、極めて統率された組版。
> 色は **黒と白の 2 色のみ**。有彩色は「ページの先頭へ戻る」の `#666666` すら含めて事実上ゼロで、**面は写真が担い、UI は 1px の黒罫だけで区切る**。
> 影は **`em` 基準**で書かれており、**文字サイズに追従して大きさが変わる**（PC 実測で 9px〜40.5px のバリエーション）。
> 実サイトの computed style 実測（2026-08-18 取得。トップページ + 店舗を探すページ）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **菓子の写真を主役に置き、文字は明朝で静かに添える**。UI 部品を持たず、罫線と余白だけで構造を作る
- **鶴屋吉信について**: 220 年余りの京菓子屋。**淡い水色・生成りの背景で撮られた菓子写真**がサイトの色そのもので、CSS 側は色を持たない
- **密度**: 低密度・カタログ型。1 セクション 1 テーマで、**左右 70px の内側パディング**を取って窮屈にしない
- **キーワード**: DNP 秀英明朝 Pr6N、システムフォント本文、ls 0.09375em、黒白 2 色、1px の黒罫、em 基準の影、radius 0
- **特徴**:
  - **見出しは明朝、本文はゴシック**。見出し・ナビ・ボタンラベルは `dnp-shuei-mincho-pr6n`（Adobe Fonts）、本文・キャプション・ニュースは `-apple-system, "system-ui", Arial, sans-serif`。**和文の Web フォントは明朝 1 書体だけ**
  - **`letter-spacing` が全サイズで `0.09375em`**。36px → 3.375px、24px → 2.25px、20px → 1.875px、17px → 1.59375px、15px → 1.40625px、14px → 1.3125px。**すべて同じ比率**。日本語サイトでこの精度で字間を統一している例は珍しい
  - **秀英明朝を weight 400 / 500 / 600 の 3 段階で使う**。見出しは 400、店名・リンクは 500。**700 を使わない**ため、明朝の細さが保たれる
  - **色を持たない**。CSS 変数は無く、実測で現れる色は `#000000` `#ffffff` `#666666`（TOP へ戻るボタン）`rgba(0,0,0,.07)`（入力欄の面）`rgba(0,0,0,.25)`（淡い罫）だけ
  - **`border-radius` は事実上 0**。実測で radius を持つのは 2px が 2 箇所のみ。ボタン・カード・画像すべて角のまま
  - **バッジが「面」ではなく「下線」**。ニュースのカテゴリ（トピックス／イベント／店舗／重要）は **10.5px のテキストに `border-bottom: 1px solid #000`** を引くだけ。塗りチップを使わない
  - **影が `em` 基準**。`0 0 1em rgba(0,0,0,.05), .27em .27em .33em rgba(0,0,0,.075)` 相当の **2 枚重ね**で、**要素の font-size に比例して影のサイズが変わる**
  - **ブレークポイントが 1024px と 1280px の 2 つだけ**（モバイルファースト）。コンテナ最大幅は **1600px** と広い
  - **文中リンクは `text-decoration: underline`**。ニュース見出しはすべて素の下線で示す

---

## 2. Color Palette & Roles

> CSS Custom Properties は定義されていない。すべて直値。実装側で変数化する場合は以下の名前を使う。

### Base（サイトの色はこれだけ）

- **Ink** (`#000000`): **本文・見出し・罫線のすべて**。鶴屋吉信は**純黒**を使う（グレーに逃がさない）
- **Paper** (`#ffffff`): ページ地色・カードの面・ヘッダーの面

### Neutral（数少ない中間色）

- **Gray Button** (`#666666`): **「ページの先頭へ戻る」の面だけ**に使う。サイトで唯一の「塗られた UI」
- **Field** (`rgba(0, 0, 0, .07)`): 検索入力欄の面。**枠線ではなく薄い面で入力欄を示す**
- **Hairline Soft** (`rgba(0, 0, 0, .25)`): 淡い区切り罫（8 箇所）
- **Hairline** (`#000000` / 1px): **主役の罫線**（72 箇所）。セクションの区切り・バッジの下線・カードの境界すべてがこれ

### Photo（色は写真が持つ）

- サイトの印象色（**淡い水色 `#d9ebee` 付近、生成り `#f6f1e4` 付近**）は**すべて商品写真の背景**であって、CSS の値ではない
- **実装で「ブランドカラー」を CSS に起こさないこと**。面を塗りたくなったら、まず写真を敷けないか考える

### Semantic（意味的な色）

- 意味色は**定義されていない**。「重要」というニュースカテゴリすら**黒＋下線**で表す
- 実装でエラー表示等が必要な場合も、**赤を足すより「太らせる／罫で囲む」を優先**する。どうしても必要なら `#b00` 程度の低彩度に留める

---

## 3. Typography Rules

> **見出し＝秀英明朝（Web フォント）／本文＝システムフォント**の二層構造。**字間は全サイズ 0.09375em で固定**。`palt` は使わない。

### 3.1 和文フォント

- **明朝体**: **DNP 秀英明朝 Pr6N**（`dnp-shuei-mincho-pr6n` / Adobe Fonts）
  - 見出し（h2 / h3）、ナビゲーション、店名、リンクラベルに使う
  - **weight は 400 / 500 / 600 の 3 つを読み込む**。実測で使われているのは **400（大見出し）と 500（小見出し・リンク・店名）**
- **ゴシック体**: **和文の Web フォントを持たない**。`-apple-system, "system-ui", Arial, sans-serif` で **OS の既定和文（macOS: ヒラギノ角ゴ / Windows: 游ゴシック等）にそのまま落とす**
- **明朝を「読ませる本文」には使わない**。秀英明朝は**見出し・固有名詞・リンクラベル**に限定し、説明文はゴシックで組む

### 3.2 欧文フォント

- **セリフ**: 秀英明朝スタックの 2 番目に **Georgia** を置く。「IRODORI」「TOKYO MISE」「tubara cafe」等の欧文店名は **Georgia で組まれる**
- **サンセリフ**: `-apple-system` → `system-ui` → **Arial**。本文中の英数字はここに落ちる
- 等幅フォントの指定はない

### 3.3 font-family 指定

```css
/* 見出し・ナビ・店名・リンクラベル（明朝） */
font-family: dnp-shuei-mincho-pr6n, Georgia, "Yu Mincho",
             "Hiragino Mincho ProN", YuMincho, serif;

/* 本文・キャプション・ニュース（システムフォント） */
font-family: -apple-system, "system-ui", Arial, sans-serif;

/* グローバル */
letter-spacing: .09375em;        /* ★ サイズを問わずこの比率 */
font-feature-settings: normal;   /* palt は使わない */
```

**フォールバックの考え方**:

- **明朝は「欧文 → 和文」の順**。`dnp-shuei-mincho-pr6n`（和欧両方を持つ）→ **Georgia**（欧文セリフ）→ `Yu Mincho` / `Hiragino Mincho ProN` / `YuMincho` → `serif`
  - **Georgia を 2 番目に置く**ことで、Adobe Fonts が落ちても**欧文だけは端正なセリフを維持する**
  - ヒラギノは **ProN**（Pro ではない）
- **ゴシックは OS 任せ**。游ゴシックやヒラギノを名指しせず、`-apple-system` / `system-ui` に委ねる**軽量志向**。写真の読み込みを優先する判断
- Adobe Fonts が使えない環境では、**秀英明朝の代替に Shippori Mincho / Zen Old Mincho** を置くと印象が近い（`Noto Serif JP` は字面が大きく、やや現代的になる）

### 3.4 文字サイズ・ウェイト階層

| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|------|--------|-------------|----------------|------|
| Page Title | **明朝** | **42px** | 400 | 1.5 (63px) | **0.09375em (3.94px)** | 下層ページの見出し「店舗を探す」 |
| Section Head | **明朝** | **36px** | 400 | 1.5 (54px) | **0.09375em (3.375px)** | 「特集」「ロングセラー・定番」「直営店」 |
| Sub Head | **明朝** | 24px | 400 | 1.5 (36px) | 0.09375em (2.25px) | 「ご利用用途」 |
| Store Name (on photo) | **明朝** | 22px | **500** | 1.2 (26.4px) | **0.136em (3px)** | 白文字で写真に重ねる店名 |
| Card Title | **明朝** | 20px | **500** | 1.0–1.2 (20–24px) | 0.09375em (1.875px) | 「本蕨」「鶴屋吉信」 |
| Nav / Link | **明朝** | 18px | **500** | 1.3 (23.4px) | 0.09375em (1.6875px) | 「公式オンラインショップでお買い物」 |
| Small Head | **明朝** | 17–18px | **500** | 1.2 (20.4–21.6px) | 0.03125–0.09375em | 「創立/創業/周年記念」「オリジナル焼印」 |
| News Title | ゴシック | 17px | 400 / **600** | **1.71 (29.14px)** | 0.09375em (1.59375px) | 「直営店舗の営業日時のお知らせ」 |
| Body | ゴシック | 16px | 400 | 1.0 (16px) | normal | `body` 既定（実質リセット用） |
| Store Row | ゴシック | 15px | 400 | 1.29 (19.29px) | 0.09375em (1.40625px) | 店舗一覧の行 |
| Text | ゴシック | 14px | 400 | **1.71 (24px)** | 0.09375em (1.3125px) | 商品説明・ニュース本文 |
| Meta | ゴシック | 14px | **600** | 1.2 (16.8px) | 0.09375em | 「すべての特集」「すべての最新情報」 |
| Copyright | ゴシック | 14px | **600** | 1.0 (14px) | 0.0625em (0.875px) | © 2026 Tsuruya Yoshinobu |
| Chip Label | ゴシック | 13px | **600** | 1.5 (19.5px) | 0.09375em | 「関西」「関東」「都道府県で探す」 |
| Sub Label | ゴシック | 12.75px | 400 | 1.71 (21.86px) | 0.125em (1.59375px) | 「ご来店のお客様へ」 |
| Category Tag | ゴシック | **10.5px** | 400 | 1.7 (17.85px) | **0.125em (1.3125px)** | 「トピックス」「イベント」。**下線付き** |

- **明朝側は 400 と 500 だけ**。600 は読み込まれているが実測では現れない
- **ゴシック側は 400 と 600**。**700 を使うのは prefecture 見出し（14.4px / 700 / 黒地に白）1 箇所だけ**
- **行間は 1.5（明朝の見出し）と 1.71（ゴシックの本文）の 2 系統**。書体で行間を切り替えている

### 3.5 行間・字間

- **字間は `0.09375em`（= 3/32）が全体の基準**。36px の見出しから 10.5px のタグまで、**同じ比率で組む**
  - 例外 1: **写真に重ねる店名は 0.136em（3px / 22px）** — さらに開く
  - 例外 2: **カテゴリタグ・小ラベルは 0.125em** — 小さい文字はやや強めに開く
  - 例外 3: **`body` と汎用リンクは `normal`** — スタイルが当たっていない素の状態
- **明朝の見出しは行間 1.5**、**ゴシックの本文は 1.71**
- **写真に重ねる店名だけ行間 1.2** に詰める（2 行組を想定）
- `palt` は使わない

**ガイドライン**:

- **字間を「px で覚えない」**。0.09375em という**比率**で持ち、サイズが変わっても自動追従させる
- **明朝に太いウェイトを当てない**。500 までに留めることで、220 年の店の落ち着きが保たれる
- **本文を明朝にしない**。読ませる文はシステムゴシック、見出しは明朝、という役割分担を守る

### 3.6 禁則処理・改行ルール

```css
overflow-wrap: break-word;
word-break: normal;
line-break: strict;
```

**禁則対象**:

- 行頭禁止: `）」』】〕〉》、。，．・：；？！`
- 行末禁止: `（「『【〔〈《`

- 「【募集終了】」「『ヨキモノ』」のような**隅付き括弧・二重かぎ括弧が頻出**する。`word-break: break-all` は使わない
- 「京観世・観世井」「創立/創業/周年記念」のように**中黒とスラッシュで並記**する見出しが多い。**スラッシュの前後で折り返させない**
- 「IRODORI 京都駅八条口」「tubara cafe」など**欧文店名 ＋ 和文地名**の組み合わせを割らない

### 3.7 OpenType 機能

```css
font-feature-settings: normal;   /* 全ページ共通 */
```

- **`palt` を掛けない**。秀英明朝の字面をそのまま使い、**開く方向（0.09375em）にだけ調整**する
- 明朝で `palt` を有効にすると句読点が詰まりすぎ、**老舗の落ち着いた印象が失われる**

### 3.8 縦書き

**縦組みは使わない。** `writing-mode` の指定は全ページで 0 件（ロゴの「鶴屋吉信」は画像）。

---

## 4. Component Stylings

> **塗りボタンがほぼ存在しない**。ボタンは「テキスト ＋ 罫線」でできている。

### Buttons

**Text Button（サイトの標準）**

- Background: `#ffffff`（＝地色。実質塗らない）
- Text: `#000000`
- Border: なし（親ブロックの 1px 罫で囲む）
- Border Radius: **`0`**
- Padding: `14px 17.5px`（「すべての特集」「すべての最新情報」）
- Font: ゴシック 14px / **600** / ls 0.09375em

**Chip Button（絞り込み）**

- Background: `#ffffff` / Text: `#000000` / Border Radius: `0`
- Padding: `9.75px 6.5px`（トップ） / `15px 30px`（店舗ページ）
- Font: ゴシック 13〜15px / **600** / ls 0.09375em
- 例: 「関西」「関東」「都道府県で探す」「個人のお客様」「法人・団体のお客様」

**Prefecture Header（サイト唯一の黒ベタ）**

- Background: **`#000000`** / Text: `#ffffff`
- Border Radius: `0` / Padding: `10.8px`
- Font: ゴシック 14.4px / **700**（サイトで唯一の 700）
- 例: 店舗検索結果の「関東」「関西」の帯

**Back to Top（サイト唯一のグレー塗り）**

- Background: **`#666666`** / Text: `#ffffff`
- Border Radius: `0` / Padding: `9px 18px`
- Font: ゴシック 12px / **600**

**Mincho Link（明朝のリンク導線）**

- Background: `transparent` / Text: `#000000`
- Font: **明朝 18px / 500 / lh 1.3 / ls 0.09375em**
- Padding: `13.5px 0`（**上下だけ空けて、下に罫を敷く**）
- 例: 「公式オンラインショップでお買い物」（ヒーロー右上）

### Badges / Tags（面ではなく下線）

**Category Tag**

- Background: **なし**
- Text: `#000000`
- **Border Bottom: `1px solid #000000`**
- Padding: `0 5.25px`
- Font: ゴシック **10.5px** / 400 / lh 1.7 / **ls 0.125em**
- 例: 「トピックス」「イベント」「店舗」「重要」「つばらつばら30周年」「お知らせ」
- **塗りチップを使わない**のが鶴屋吉信のバッジ。**下線 1 本で分類を示す**

### Cards（商品・店舗）

- Background: `#ffffff`
- Border Radius: **`0`**（**画像も角丸なし**）
- Border: 1px solid `#000000`（囲む場合） / 使わない場合は罫で区切るだけ
- 構成: 写真 → 商品名（**明朝 20px / 500**）→ 説明（ゴシック 14px / 400 / lh 1.71）
- Padding: `0 0 24px`（画像直下に文字を置き、下だけ空ける）
- Shadow: 下記 Depth 参照（**em 基準**）

### Inputs

- Background: **`rgba(0, 0, 0, .07)`**（**枠線ではなく薄い面で示す**）
- Border: なし
- Border Radius: `0`（実測 2px が 2 箇所）
- Font: 15.2〜16px / 400 / **ls -0.38px（-0.025em。入力欄だけマイナス字間）**
- Text: `#000000`
- 例: サイト内検索・オンラインショップ検索
- **入力欄だけ字間がマイナス**になる（入力文字を詰めて表示領域を稼ぐ）

### Section Heading（見出しの置き方）

- 明朝 36px / 400 / lh 1.5 / ls 0.09375em
- **Padding: `0 70px`**（左右に大きく内側余白を取ってから見出しを置く）
- 見出しの下に罫を引かず、**余白だけで本文と分ける**

---

## 5. Layout Principles

### Spacing Scale

実測値から起こしたスケール。

| Token | Value | 用途 |
|-------|-------|------|
| XS | 5px | 店舗リンクのパディング |
| S | 12px | カード内の下余白 |
| M | 20–25px | ブロックの内側余白 |
| L | 40.5px | セクション見出しの左右（SP） |
| XL | **54px** | セクションの上余白 |
| XXL | **70px** | **見出しブロックの左右パディング（PC）** |

- **70px の左右余白**が鶴屋吉信の余裕を作っている。狭めない

### Container

- Max Width: **`1600px`**（一般的な 1200px より広い。**写真を大きく見せるため**）
- Padding (horizontal): `70px`（見出しブロック） / `40.5px`（SP）
- 中央寄せ: `margin-inline: auto`

### Grid

- 商品・店舗は **2〜4 カラム**（画面幅に応じて増減）
- 罫線は **1px solid #000** で区切る（72 箇所）
- **gap ではなく罫で区切る**箇所が多い。カード同士を離しすぎない

---

## 6. Depth & Elevation

**影は `em` 基準の 2 枚重ね。要素の font-size に比例して大きさが変わる。**

```css
box-shadow:
  0 0 1em rgba(0, 0, 0, .05),               /* 全方向の淡い滲み */
  .267em .267em .333em rgba(0, 0, 0, .075); /* 右下へのわずかなずれ */
```

| 基準 font-size | 実測される影 | 用途 |
|---------------|-------------|------|
| 9px | `0 0 9px rgba(0,0,0,.05), 2.4px 2.4px 3px rgba(0,0,0,.075)` | 小さいラベル |
| 9.75px | `0 0 9.75px …, 2.6px 2.6px 3.25px …` | 店舗カード |
| 10.5px | `0 0 10.5px …, 2.8px 2.8px 3.5px …` | **最頻出（37 箇所）**。商品カード |
| 12px | `0 0 12px …, 3.2px 3.2px 4px …` | 特集カード |
| 15px | `0 0 15px …, 4px 4px 5px …` | 大きめのカード |
| 40.5px | `0 0 40.5px …, 10.8px 10.8px 13.5px …` | **ヒーロー級のブロック** |

- **影の色は 2 種類固定**：`rgba(0,0,0,.05)`（滲み）と `rgba(0,0,0,.075)`（ずれ）。**どちらも極めて薄い**
- **右下に 0.267em ずらす**のが特徴。真下ではなく斜めに落とす
- **`px` で書き直さないこと**。`em` のまま持てば、SP でフォントを縮めたときに影も自動で小さくなる

---

## 7. Do's and Don'ts

### Do（推奨）

- **見出しは明朝（秀英明朝）、本文はシステムゴシック**の二層を守る
- **`letter-spacing` は `0.09375em` を既定にする**（px ではなく em で持つ）
- **明朝のウェイトは 400 / 500 まで**。太らせない
- **バッジは塗らず、`border-bottom: 1px solid #000` で示す**
- **`border-radius: 0`** を全要素に適用する
- **影は `em` 基準の 2 枚重ね**で書く（`0 0 1em rgba(0,0,0,.05), .267em .267em .333em rgba(0,0,0,.075)`）
- **入力欄は枠線ではなく `rgba(0,0,0,.07)` の面**で示す
- **見出しブロックの左右に 70px の余白**を取る
- 色を足したくなったら、**まず写真を敷けないか考える**

### Don't（禁止）

- **本文に明朝を使わない**（読み疲れる。明朝は見出し・固有名詞・リンクラベル限定）
- **ブランドカラーを CSS に起こさない**。サイトの色味は写真が持っている
- **`palt` を掛けない**。字間は開く方向にだけ調整する
- **角を丸めない**。ボタン・カード・画像すべて radius 0
- **塗りチップのバッジを作らない**（下線 1 本で示す）
- **明朝に `font-weight: 700` を当てない**（合成太字になり字面が潰れる）
- **字間を px でハードコードしない**。サイズ違いで比率が崩れる

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | **< 1024px** | 既定（モバイルファースト）。1 カラム、見出しの左右余白を 40.5px に |
| Tablet / Desktop | **≥ 1024px** | `screen and (min-width: 1024px)`。多カラム化 |
| Wide | **≥ 1280px** | `screen and (min-width: 1280px)`。見出しの左右 70px、コンテナ 1600px |
| Print | `print` | 印刷用スタイルを持つ |

- **ブレークポイントは実質 2 つ**。中間の細かい分岐を持たない

### レイアウトの切り替え

- 見出しの左右パディング: `70px` → `40.5px`
- 商品グリッド: 3〜4 カラム → 2 カラム → 1 カラム
- ナビ: 横並び → **全画面メニュー**（「メニュー」「閉じる」は白文字）
- **影は `em` 基準なので、フォントを縮めれば自動で小さくなる**（別途の指定不要）

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG基準）
- チップボタンの実測は `9.75px 6.5px` パディング＋13px。**SP では上下 14px 以上に増やして 44px を確保する**

### フォントサイズの調整

- 見出し: `42px` → 28px、`36px` → 24px 程度
- **本文 14px / lh 1.71 は下げない**
- **字間 0.09375em は SP でも維持する**（em 指定なのでそのまま追従する）

---

## 9. Agent Prompt Guide

### クイックリファレンス

```
Text Color:   #000000   （純黒を使う）
Background:   #ffffff
Hairline:     #000000 1px  ／ 淡い罫は rgba(0,0,0,.25)
Field:        rgba(0, 0, 0, .07)
Gray Button:  #666666   （TOP へ戻るのみ）

Font (見出し): dnp-shuei-mincho-pr6n, Georgia, "Yu Mincho", "Hiragino Mincho ProN", YuMincho, serif
Font (本文):   -apple-system, "system-ui", Arial, sans-serif

Letter Spacing: .09375em   ★全サイズ共通
Line Height:   1.5（明朝の見出し） / 1.71（ゴシックの本文）
palt:          使わない
Border Radius: 0
Shadow:        0 0 1em rgba(0,0,0,.05), .267em .267em .333em rgba(0,0,0,.075)
Container:     1600px / 左右パディング 70px
Breakpoint:    1024px, 1280px
```

### プロンプト例

```
鶴屋吉信のデザインシステムに従って、商品一覧セクションを作成してください。

- 見出しは明朝: dnp-shuei-mincho-pr6n, Georgia, "Yu Mincho", "Hiragino Mincho ProN", YuMincho, serif
  36px / font-weight: 400 / line-height: 1.5 / letter-spacing: .09375em / padding: 0 70px
- 本文はシステムフォント: -apple-system, "system-ui", Arial, sans-serif
  14px / 400 / line-height: 1.71 / letter-spacing: .09375em
- 商品名は明朝 20px / font-weight: 500（700 は使わない）
- カテゴリタグは面を塗らず、10.5px のテキストに border-bottom: 1px solid #000 / padding: 0 5.25px / letter-spacing: .125em
- border-radius はすべて 0。色は #000 と #fff のみ（ブランドカラーを追加しない）
- カードの影は em 基準: box-shadow: 0 0 1em rgba(0,0,0,.05), .267em .267em .333em rgba(0,0,0,.075)
- 検索入力欄は枠線を使わず background: rgba(0,0,0,.07) / letter-spacing: -0.025em
- コンテナは max-width 1600px。1024px 未満で 1 カラム、見出しの左右余白を 40.5px に落とす
- font-feature-settings は normal（palt を掛けない）
```