# DESIGN.md — 開化堂（かいかどう / Kaikado）

> 開化堂（https://www.kaikado.jp/japanese/）のデザイン仕様書。
> 明治8年（1875年）創業、京都の手作り茶筒司。130種以上の工程を手仕事で継ぐ「最高級茶筒司」の公式サイト（WordPress ベース）。
> 最大の特徴は **明朝体（ヒラギノ明朝 Pro W3）＋極細ウェイト 200**、**行間 1.9〜2.2 の非常に広い余白**、そして色数を **銅の色 `#9d805f` ただ一色に絞った**設計。ボタンは面を持たず「1px の銅線で囲った角ゼロの矩形」だけ。写真は銅の茶筒を主役に、地は温かみのあるオフホワイト〜白。
> 実サイトの computed style 実測（2026-07-22 取得）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **静けさと余白**。装飾・影・彩色をほぼ排し、銅の質感と手仕事の写真だけに語らせる。工芸品のショーケースというより「間（ま）」を見せる設計
- **開化堂について**: 京都・河原町の茶筒司。銅・真鍮・ブリキの筒を手作業で仕上げ、経年で色が深まる道具を作る。その「時間をかけて育てる」思想を、余白の多い明朝組版で表現している
- **密度**: きわめて低密度。1 画面＝1 ビジュアル＋数行の明朝テキスト。スクロールごとに大判の製品写真がゆっくり切り替わる
- **キーワード**: ヒラギノ明朝、極細ウェイト200、銅色 #9d805f、行間2.0、余白、角ゼロ、線ボタン、単色、工芸
- **特徴**:
  - 書体は **ヒラギノ明朝 Pro W3 の一系統**。ゴシックは UI の極一部（キャプション等）を除きほぼ使わない
  - ウェイトは **200（極細）が本文とリンクの既定**。見出しでも 400（Regular）止まりで、太字（700）はほぼ登場しない
  - 有彩色は **銅色 `#9d805f` のみ**。それ以外は白・オフホワイト・グレー（#333 のテキスト、#ccc の補助）
  - **`letter-spacing: 0.8px`（≒ 0.05em）がほぼ全要素に効く**。明朝を広めに送って静謐さを出す
  - 本文の **`line-height` は 2.0 前後（p は 2.2）**。日本語明朝を読みやすく、かつ余白を稼ぐ
  - ボタンは **面色なし・radius 0・1px solid 銅線**の一種類のみ（「さらに詳しく」「商品一覧へ」）
  - ロゴは黒の毛筆＋朱の落款印。有彩色として朱赤も限定的に登場する

---

## 2. Color Palette & Roles

> 実測値。CSS Custom Properties は WordPress のプリセット（`--wp--preset--color--*`）が並ぶが、ブランド専用の色変数は定義されていない。有彩色は事実上 `#9d805f`（銅）ただ一色で、各要素に直接指定されている。

### Brand

- **Kaikado Copper** (`#9d805f`): 唯一のブランドカラー。銅の茶筒そのものの色（くすんだ黄銅／ブロンズ）。リンク文字、線ボタンの枠と文字、区切りのアクセントに使う。純度の高い金ではなく、経年で沈んだ銅の色である点が重要
- **Seal Red** (`#a4331f` 目安): ロゴの落款印に使う朱赤。UI では使わず、ブランドマーク内のみに限定

### Neutral（背景・面）

- **White** (`#ffffff`): 基本のページ背景（`html`。`--wp--preset--color--white`）
- **Warm Off-White** (`#f2efe9` 目安): 製品写真の背景に広がる温かみのある地。UI 面ではなく撮影ライティングによるが、サイト全体の空気感を決める
- **Text Charcoal** (`#333333`): 本文・見出しの標準テキスト色。純黒 `#000000` は避け、やわらかい炭色を使う
- **Caption Grey** (`#cccccc`): 補助ラベル・英字キャプションなど最小テキスト

### Semantic

- 実サイトに独立したエラー／警告色は存在しない（フォーム UI が最小限のため）
- 実装が必要な場合は無彩色基調を崩さない範囲で `#a4331f`（落款の朱）をエラーに転用し、成功・強調は `#9d805f` を流用する

---

## 3. Typography Rules

> 全要素が同一の明朝スタックを継承する単一書体設計。**極細ウェイト 200・行間 2.0 前後・letter-spacing 0.05em** の三点が開化堂の静けさを作っている。

### 3.1 和文フォント

- **明朝体（主役）**: ヒラギノ明朝 Pro W3 → Hiragino Mincho Pro → serif
- **ゴシック体（補助）**: 一部の英字キャプション・システム UI で Arial 系に落ちる程度で、和文ゴシックは積極採用しない

### 3.2 欧文フォント

- **セリフ**: ヒラギノ明朝内蔵の欧文グリフ（明朝と調和させる）
- **サンセリフ**: Arial（ごく一部の数字・英字キャプション）
- 欧文専用の Web フォントは読み込んでいない

### 3.3 font-family 指定

```css
/* 本文・見出し共通（明朝の単一スタック） */
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
```

**フォールバックの考え方**:
- 和文明朝を先頭に置き、Windows 環境では serif（＝多くは MS 明朝／游明朝）に素直に落とす
- 明朝が出ない環境で本文がゴシックにならないよう、必ず末尾を `serif` にする
- 游明朝を明示的に挟みたい場合は `"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, serif` に拡張する

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

| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|------|--------|-------------|----------------|------|
| Heading (h2) | ヒラギノ明朝 | 26px | 400 | 1.17 (30.4px) | 0.03em | セクション見出し |
| Heading (h3) | ヒラギノ明朝 | 24px | 400 | 1.0〜1.27 | 0.03em | 小見出し |
| Sub (h4) | ヒラギノ明朝 | 16px | 400 | 1.9 (30.4px) | 0.05em | ラベル的見出し |
| Body | ヒラギノ明朝 | 16px | 200 | 1.9 (30.4px) | 0.05em | 標準本文 |
| Body (段落) | ヒラギノ明朝 | 16px | 200 | 2.2 (35.2px) | 0.05em | `<p>` の読み物本文 |
| Link / List | ヒラギノ明朝 | 15〜17px | 200 | 2.0〜2.15 | 0.05em | ナビ・リスト |
| Caption | ヒラギノ明朝 | 13〜14px | 200〜700 | 1.0〜1.5 | 0.06em | 補助・英字 |

- 見出し（h2/h3）は **weight 400**、本文・リンク・リストは **weight 200** が既定。ウェイトの落差は小さく、サイズと余白で階層を作る

### 3.5 行間・字間

- **本文の行間 (line-height)**: **1.9〜2.2**（`<p>` の読み物は 2.2、ナビ・リストは 1.9〜2.0）。日本語明朝を非常に広く組む
- **見出しの行間**: 1.0〜1.3（26px/30.4px ≒ 1.17）と締める
- **字間 (letter-spacing)**: **0.8px 固定（16px 基準で 0.05em）**。サイズによらず 0.8px の実値が効くため、小さい文字ほど相対的な字間は広くなる

**ガイドライン**:
- 明朝本文は 1.9 以上を推奨。開化堂の「間」を再現するには 2.0 前後が最適
- letter-spacing は `0.05em` 相当を全体に。締めすぎると静けさが失われる
- 太字を使わず、サイズと余白で強弱を作る（weight 200↔400 の範囲に留める）

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

```css
/* 推奨設定（明朝の読み物向け） */
overflow-wrap: break-word;
line-break: strict;      /* 厳格な禁則 */
word-break: normal;
```

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

### 3.7 OpenType 機能

```css
font-feature-settings: normal;   /* 実サイトは palt を明示適用していない */
```

- 実測では **`font-feature-settings: normal`**（`palt` オフ）。明朝のベタ組みをそのまま活かし、字詰めは letter-spacing の均等送りで統一している
- 見出しで詰めたい場合のみ `"palt" 1` を局所適用してよいが、本文はベタ組みを保つ

### 3.8 縦書き

- ロゴ・一部の見出しで縦組みの意匠を用いる（京都・工芸の文脈）。本文 UI は横組み
- 縦組みを再現する場合:

```css
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
```

---

## 4. Component Stylings

### Buttons

開化堂のボタンは **面を持たない線ボタン一種類のみ**。CTA は「さらに詳しく」「商品一覧へ」といった控えめな文言で、銅線で囲う。

**Primary（＝唯一のボタン：線ボタン）**
- Background: `transparent`
- Text: `#9d805f`（銅）
- Border: `1px solid #9d805f`
- Border Radius: `0`（角を立てる）
- Padding: `12px 0`（横 padding は文脈で可変。左右いっぱいに引く場合が多い）
- Font: ヒラギノ明朝, 16px, weight 200
- Letter Spacing: `0.05em`

**Hover の考え方**
- 反転（bg `#9d805f` ／ text `#ffffff`）を静かに行う程度。強い影やスケールは付けない

### Inputs

- Background: `#ffffff`
- Border: `1px solid #cccccc`（下線のみのミニマル実装でも可）
- Border (focus): `1px solid #9d805f`
- Border Radius: `0`
- Padding: `10px 12px`
- Font: ヒラギノ明朝, 16px, weight 200
- Text Color: `#333333`

### Cards

- Background: `#ffffff`（または写真そのもの）
- Border: なし（罫線を使う場合は `1px solid #eeeeee`）
- Border Radius: `0`
- Padding: `24px`
- Shadow: なし（フラット。Depth セクション参照）
- 画像を主役にし、テキストは写真の下に明朝で小さく添える

---

## 5. Layout Principles

### Spacing Scale

| Token | Value |
|-------|-------|
| XS | 8px |
| S | 16px |
| M | 24px |
| L | 40px |
| XL | 64px |
| XXL | 120px |

余白は広めに取り、セクション間は XL〜XXL を使って「間」を作る。

### Container

- Max Width: 1200px 目安（写真は全幅ブリードも多用）
- Padding (horizontal): 24〜40px

### Grid

- Columns: 12（実運用は 1〜3 カラムの素朴な構成）
- Gutter: 24〜40px
- 製品一覧は写真中心のシンプルなグリッド。カード装飾を足さない

---

## 6. Depth & Elevation

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | none | 既定。ほぼ全要素がフラット |
| 1 | `0 2px 8px rgba(0,0,0,0.06)` | 使う場合のみ。ドロップダウン等 |
| 2 | `0 8px 24px rgba(0,0,0,0.08)` | モーダル・カート等の限定用途 |

- 開化堂は基本 **影を使わない**。奥行きは余白と写真の陰影で表現する

---

## 7. Do's and Don'ts

### Do（推奨）

- 明朝スタックの末尾を必ず `serif` にする
- 本文の line-height は 1.9〜2.2 に取り、余白をたっぷり与える
- 有彩色は銅 `#9d805f` に絞り、他は無彩色でまとめる
- ボタンは面色なし・角ゼロ・銅線で統一する
- テキスト色は `#333333`。純黒を避ける

### Don't（禁止）

- 明朝の代わりにゴシックを本文に使わない（世界観が崩れる）
- 太字（weight 700）で強調しない。サイズと余白で階層を作る
- 銅以外の彩色（青・緑等）をアクセントに足さない
- 角丸（radius）や影を付けてボタンを「今風」にしない
- line-height を 1.5 以下に詰めない（静けさが失われる）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム。写真は全幅 |
| Tablet | 768–1024px | 2 カラム |
| Desktop | > 1024px | 2〜3 カラム＋広い余白 |

### タッチターゲット

- 最小サイズ: 44px × 44px。線ボタンは padding を縦に確保してタップ領域を担保

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

- モバイルでも本文 16px を維持（明朝は小さくしすぎると細さで可読性が落ちる）
- 見出しは 26px → 20〜22px 程度に縮小。line-height は据え置きで余白を保つ

---

## 9. Agent Prompt Guide

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

```
Primary Color: #9d805f   （銅 / 唯一のアクセント）
Text Color:    #333333
Background:    #ffffff（写真背景は温かいオフホワイト #f2efe9）
Font:          "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif
Body Size:     16px
Body Weight:   200
Line Height:   1.9〜2.2
Letter Spacing:0.05em
Button:        面なし / 1px solid #9d805f / radius 0
```

### プロンプト例

```
開化堂のデザインシステムに従って、製品紹介ページを作成してください。
- フォント: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif（本文 weight 200）
- 本文サイズ 16px / line-height 2.0 / letter-spacing 0.05em / 色 #333333
- 背景は白、写真を主役に全幅で配置し余白を広く取る
- アクセントは銅色 #9d805f のみ。リンクと線ボタンに使う
- ボタンは面色なし・角ゼロ・1px solid #9d805f、文言は「さらに詳しく」
- 影・角丸・太字は使わず、サイズと余白だけで階層を作る
```