# DESIGN.md — 玉川堂（GYOKUSENDO）

> 玉川堂（https://www.gyokusendo.com/）のデザイン仕様書。
> 1816 年（文化 13 年）創業、新潟県燕市。一枚の銅板を鎚で叩き縮めて器に成形する「鎚起銅器」を 200 年以上つくり続ける工房で、国の無形文化財に指定されている。
> 最大の特徴は、**サイト全体を Morisawa の明朝系ディスプレイ書体「りょう Display PlusN」（`ryo-display-plusn`）一本で組み、`font-feature-settings: "palt"` と `letter-spacing: 0.06em` と `line-height: 2.0` をすべてグローバルに効かせる**こと。さらに **見出しを weight 300（Light）、本文を weight 500（Medium）** と、通常とは逆のウェイト関係で階層をつくる。地は白 `#ffffff`、メニュータイルとフッターは黒 `#000000`、KV は工房写真に `rgba(0,0,0,0.3)` の暗幕。
> 実サイトの computed style 実測（2026-07-28 取得。トップページ）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **明朝一本で、静かに、細く**。ゴシックを一切使わず、サイト全体を明朝系ディスプレイ書体で組む。見出しほど細く（weight 300）、行間は隅々まで 2.0。銅器の「打つ」という行為の静けさを、字面の余白で表す
- **玉川堂について**: 200 年続く鎚起銅器の工房。EC よりも「工房を訪ねる」「使い込んで育てる」体験の紹介が中心で、サイトのコピーも「打つ。時を打つ。」のような短い詩的な一行が軸になる
- **密度**: 低密度。KV は工房の全画面写真。以下は黒タイルのメニュー、お知らせ、フッターと縦に積むだけで、1 画面あたりの要素数を絞る
- **キーワード**: 明朝一本（りょう Display PlusN）、weight 300 の見出し、行間 2.0 グローバル、palt グローバル、ls 0.06em、白と黒の二値、角丸 0
- **特徴**:
  - **和文も欧文も `ryo-display-plusn` 一書体**。ナビ・見出し・本文・フォーム・フッターまですべてこれ。**欧文フォントを別に指定していない**ため、`English` `1816` などのラテン文字も明朝のラテングリフで組まれる
  - **`font-feature-settings: "palt"` がグローバル**。見出しだけでなく本文にも掛かる。明朝の字面の空きを全面的に詰めたうえで、`letter-spacing: 0.06em` で均一に開き直すという二段構え
  - **`line-height: 2.0` がグローバル**。16px→32px、14px→28px、28px→56px、12px→24px と、本文系はすべて ×2.0。**見出しだけが 1.1** に締まる
  - **ウェイトの関係が逆転している**。見出し（48px / 24px / 18px）は **300（Light）**、本文・ナビ・リストは **500（Medium）**。サイズと太さが逆方向に動くことで、大きな見出しが軽く、静かに見える
  - **色は白と黒の二値**。彩度を持つ色を UI に持ち込まず、色は銅器の写真（赤銅・紫金・黒味銅・栗色）が担当する
  - **メニューは黒ベタのタイル**。写真の上に `#000000` の面を置き、白の明朝で「玉川堂について」「玉川堂の歴史」「玉川堂の技術」と並べる
  - **角丸は全域 0**。アウトラインボタンも 1px の直線の矩形

---

## 2. Color Palette & Roles

> 実測値。UI に使われる色は**白・黒とグレー 4 段だけ**。ブランドカラーと呼べる有彩色を持たず、銅の色は写真が受け持つ。

### Base（地）

- **Background** (`#ffffff`): ページ地色。純白
- **Ink** (`#000000`): 本文・見出しの基本テキスト色。**メニュータイルとフッターの面色でもある**
- **KV Overlay** (`rgba(0,0,0,0.3)`): KV の工房写真に重ねる暗幕。白のロゴと「English / 簡体中文 / 繁體中文 / オンラインショップ」を読ませるための 30% の黒

### Neutral（文字・罫）

- **Text on Dark** (`#ffffff`): 黒タイル・フッター上の文字
- **Sub Text** (`#333333`, rgb 51,51,51): サブメニューのリンク（「玉川堂について」等の下層項目）
- **Caption** (`#666666`, rgb 102,102,102): 著作権表記・注釈。フォーム入力欄の文字色
- **Muted** (`#999999`, rgb 153,153,153): アウトラインボタン（「一覧を見る」）の文字色。**押せることを示しつつ主張しない灰**
- **Border** (`#cccccc`, rgb 204,204,204): アウトラインボタンの罫・区切り線
- **Gray** (`#aaaaaa`, rgb 170,170,170): スライダーの非活性インジケータ

### Brand（ブランド）

- **玉川堂は UI 上のブランドカラーを持たない**。ロゴマーク（鎚目の円）とロゴタイプ「Gyokusendo 1816」は白または黒の単色で使う
- ブランドの色は**銅の経年色**そのもの。赤銅（`#7b3f2e` 目安）・紫金（`#4a2a2a` 目安）・黒味銅（`#2b2320` 目安）・栗色（`#5c3a25` 目安）は**写真と商品説明の中で示すものであり、UI の面色や罫に使わない**

### Semantic（意味的な色）

- 意味色を持たない。状態は文言と罫線の有無で示す
- **Danger／Error**: フォームで必要な場合のみ暖色の赤（`#a83a2e` 目安。銅の赤に近い落ち着いた赤を選ぶ）
- **Info**: `#333333` の文字＋ 1px の罫線で代用する

---

## 3. Typography Rules

> **明朝系ディスプレイ書体「りょう Display PlusN」一本**でサイト全体を組む。`palt` / `letter-spacing: 0.06em` / `line-height: 2.0` がすべてグローバルに効き、**見出しは weight 300、本文は weight 500** と太さの関係が逆転する。

### 3.1 和文フォント

- **明朝体**: **りょう Display PlusN**（`ryo-display-plusn`／Morisawa、Adobe Fonts 経由で配信）。大きなサイズでの表示を想定した明朝系ディスプレイ書体で、線のコントラストが強く、横画が細い
- **ゴシック体**: **使わない**。ナビも本文もフォームもすべて明朝
- **ウェイト**: **300（Light）／400／500（Medium）／700** の 4 段を使う。主役は **300（見出し）と 500（本文）**

### 3.2 欧文フォント

- **欧文専用のスタックを持たない**。`ryo-display-plusn, serif` のみで、ラテン文字は**明朝書体に内蔵されたラテングリフ**で組まれる
- そのため `English` / `GYOKUSENDO` / `1816` といった欧文も和文と同じ字面のトーンで並ぶ
- 例外はフォームの `input[type=email]` で、`"Open Sans", "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif` に落ちる。**これは実装上の取り残しであり、再現時は `ryo-display-plusn` に揃えること**
- **preview.html での注記**: `ryo-display-plusn` は Morisawa の Adobe Fonts 配信書体で、ローカルの preview.html では表示できない。プレビューでは **Google Fonts の "Noto Serif JP"（weight 300 / 500）** を代替に用いる。**weight 300 が使えることが代替選定の決め手**で、玉川堂の設計の核である「見出しを Light で組む」を再現できる書体は Google Fonts の日本語明朝では限られる（Shippori Mincho / Zen Old Mincho は 400 以上のみ）。実装時は必ず `ryo-display-plusn` を読み込むこと

### 3.3 font-family 指定

```css
/* サイト全体（唯一の指定） */
font-family: ryo-display-plusn, serif;

/* グローバル */
font-feature-settings: "palt";
letter-spacing: 0.06em;    /* 16px に対し 0.96px */
line-height: 2.0;          /* 16px に対し 32px */
font-weight: 500;          /* 本文の既定 */
```

**フォールバックの考え方**:
- **1 書体 ＋ `serif` のみ**という最小構成。和欧を分けず、多言語（簡体中文・繁體中文）ページも同じ指定で通す
- **ウェイトは `font-weight` で切る**（`300` / `400` / `500` / `700`）。ファミリー名の切り替えは行わない
- フォールバックが `serif` だけなので、**書体が読み込めなかったときは OS の明朝（游明朝 / ヒラギノ明朝）に落ちる**。ゴシックに落ちない設計になっている

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

| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|------|--------|-------------|----------------|------|
| Display | りょう Display PlusN | 48px | **300** | **1.1** (52.8px) | 0.02em (0.96px) | `h2`「打つ。時を打つ。」 |
| Menu Title | りょう Display PlusN | 28px | 500 | **2.0** (56px) | 0.034em (0.96px) | 黒タイルの見出し「玉川堂について」 |
| Heading 2 | りょう Display PlusN | 24px | **300** | **1.1** (26.4px) | 0.04em (0.96px) | `h3`「お知らせ・催事情報」 |
| Heading 3 | りょう Display PlusN | 18px | **300** | **1.1** (19.8px) | 0.053em (0.96px) | `h4`「玉川堂メールマガジン お申込」 |
| Body / Nav | りょう Display PlusN | 16px | 500 | **2.0** (32px) | **0.06em** (0.96px) | `body` 既定 |
| Nav (Sub) | りょう Display PlusN | 16px | 500 | 1.25 (20px) | 0.06em | ヘッダーの言語切替 |
| Logo Link | りょう Display PlusN | 16px | **300** | 1.0 (16px) | **0.1em** (1.6px) | 「鎚起銅器 玉川堂 - GYOKUSENDO」 |
| Body Small | りょう Display PlusN | 14px | 500 | **2.0** (28px) | 0.069em (0.96px) | 段落・リストの標準 |
| Menu Desc | りょう Display PlusN | 14px | 500 | 1.5 (21px) | 0.069em | 黒タイル内の説明文 |
| Submenu | りょう Display PlusN | 14px | 400 | 1.43 (20px) | 0.069em | ドロップダウンの項目 `#333333` |
| Button | りょう Display PlusN | 13px | 500 | 2.46 (32px) | 0.03em (0.39px) | 送信ボタン |
| Caption | りょう Display PlusN | 12px | 500 | **2.0** (24px) | 0.08em (0.96px) | 著作権表記 `#666666` |
| Outline Button | りょう Display PlusN | 16px | **700** | — | 0.06em | 「一覧を見る」`#999999` |

- **`letter-spacing` は px 固定の 0.96px**。基準サイズが変わっても px 値が変わらないため、**小さい文字ほど em 換算で字間が広くなる**（16px→0.06em、12px→0.08em、48px→0.02em）。これがサイト全体の「小さい文字ほど開いて見える」印象をつくっている
- **見出しは 300、本文は 500**。サイズが大きいほど細く、小さいほど太い

### 3.5 行間・字間

- **行間 (line-height)**: **本文系はすべて 2.0**（16px→32px / 14px→28px / 12px→24px / 28px→56px）。**見出しだけが 1.1**（48px→52.8px / 24px→26.4px / 18px→19.8px）。中間の値をほとんど使わない**二極構造**
- **字間 (letter-spacing)**: **グローバルに 0.96px 固定**。em 換算では 0.02em（48px）〜 0.08em（12px）に分布する。ロゴリンクのみ 1.6px（0.1em）と別扱い
- **`font-feature-settings: "palt"` がグローバル**。本文にも掛かる

**ガイドライン**:
- **行間 2.0 と weight 300 の見出しがセット**。片方だけ真似すると印象が変わる（行間だけ 2.0 にして見出しを 700 にすると、ただの重い明朝サイトになる）
- **見出しの行間 1.1 は攻めた値**。48px の明朝を 1.1 で組めるのは、見出しが 1〜2 行の短いコピーに限られているから
- 明朝で 14px の本文を成立させているのは **行間 2.0 ＋ palt ＋ 0.96px の字間**の 3 点セット。どれか 1 つでも外すと小さい明朝が読みづらくなる

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

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

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

- 「打つ。時を打つ。」のような句点で切るコピーは、**句点の直後で改行させない**。`palt` が効いているため句点の後ろの空きが詰まり、行頭に来ると特に目立つ

### 3.7 OpenType 機能

```css
font-feature-settings: "palt";   /* グローバル。本文にも掛ける */
letter-spacing: 0.96px;          /* palt で詰めた分を px 固定で開き直す */
```

- **`palt` をサイト全体（本文含む）に掛けるのは、日本語サイトとしては強い選択**。明朝は仮名の字面が小さく、そのままでは約物まわりの空きが目立つため、いったん全面的に詰める
- **詰めたうえで `letter-spacing: 0.96px` を均一に足す**。「palt で不均一な空きをならし、letter-spacing で一定量だけ開き直す」という二段構えが玉川堂の字面の作り方
- `lnum` などの数字指定は行っていない。「1816」「200 年」といった数字も書体既定のまま

### 3.8 縦書き

- 該当なし。UI・記事とも横組み
- 商品名（「鎚起銅器 湯沸 鎚目 木蓋」等）や工房紹介で縦組みを使う場合は `writing-mode: vertical-rl; text-orientation: mixed;`。明朝一本の設計とは相性がよい

---

## 4. Component Stylings

### Buttons

**Outline（主要 CTA）**
- Background: `transparent`
- Text: `#999999`
- Border: `1px solid #cccccc`
- Padding: `15px`
- Border Radius: **`0px`**
- Font: りょう Display PlusN / 16px / **weight 700** / ls 0.06em
- 例: 「一覧を見る」
- **玉川堂の CTA は主張しない**。文字色まで灰に落とし、罫線も薄い `#cccccc`。押せることだけを示す

**Form Submit**
- Background: `#000000`
- Text: `#ffffff`
- Padding: `0 24px`（行高 32px で高さを確保）
- Border Radius: **`0px`**
- Font: 13px / weight 500 / ls 0.03em (0.39px)

### Menu Tiles（黒ベタのタイル）

- Background: `#000000`（写真の上に重ねる）
- Text: `#ffffff`
- Border Radius: **`0px`**
- 構成: 見出し（28px / weight 500 / **行間 2.0**）＋ 説明文（14px / weight 500 / 行間 1.5）
- 例: 「玉川堂について」「玉川堂の歴史」「玉川堂の技術」「商品一覧」「お手入れ」「人間国宝　玉川宣夫」
- **サイトのナビゲーションの主役**。ヘッダーのメニューではなく、この黒タイルの一覧が導線になる

### Inputs

- Background: `#ffffff`
- Border: `1px solid #cccccc`
- Border (focus): `1px solid #000000`
- Border Radius: **`0px`**
- Padding: `12px 14px`
- Font: りょう Display PlusN / 14〜15px / weight 500 / ls 0.06em
- Text Color: `#343434` / Placeholder: `#999999`
- **実サイトの `input[type=email]` は Open Sans に落ちているが、これは実装漏れ**。明朝に揃えること

### Cards（お知らせ・商品）

- Background: `#ffffff`
- Border: なし、または `1px solid #cccccc`
- Border Radius: **`0px`**
- 構成: 写真 → 日付（14px / `#666666`）→ タイトル（16px / weight 500 / 行間 2.0）
- Shadow: なし

### Header / Footer

- **Header**: KV の上に透過で重なる。ロゴ（左、白 16px / weight 300 / ls 0.1em）＋ 言語切替とオンラインショップ（右、白 16px / weight 500）
- **Footer**: 面色 `#000000`、文字 `#ffffff`。中にメールマガジン申込（`h4` 18px / weight 300）と著作権表記（12px / `#666666` / 行間 2.0）

---

## 5. Layout Principles

### Spacing Scale

| Token | Value |
|-------|-------|
| XS | 8px |
| S | 15px |
| M | 24px |
| L | 40px |
| XL | 80px |
| XXL | 120px |

- 実測のパディングは `15px`（ボタン）を中心に、セクション間は 80〜120px の大きな余白を取る
- **行間 2.0 が空間の基本単位**。16px 本文なら 1 行 = 32px で、余白もこの倍数に寄せると縦のリズムが揃う

### Container

- Max Width: **KV は全幅ブリード**（1440px のビューポート全域）
- コンテンツセクションは概ね **1100〜1200px**
- 読み物カラムは **720px 前後**
- Padding (horizontal): 24〜40px

### Grid

- Columns: 黒タイルのメニューは 3 カラム、お知らせは 1 カラムのリスト、商品一覧は 3〜4 カラム
- Gutter: 24px
- **「全画面の工房写真 → 黒タイルのメニュー → 白地のお知らせ → 黒フッター」という白黒の交互構成**

---

## 6. Depth & Elevation

実測ではすべての要素が `box-shadow: none`。**玉川堂は影を使わない**。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | none | 既定。すべての要素 |
| 1 | none（面色差で表現） | カード。白地 `#ffffff` と黒タイル `#000000` の二値で分離 |
| 2 | `1px solid #cccccc` | ボタン・入力欄。**影の代わりに 1px の罫線** |
| 3 | `rgba(0,0,0,0.3)` のオーバーレイ | KV の写真に重ねる暗幕。文字を読ませるための唯一の重ね合わせ |

- **奥行きは「白 `#ffffff` × 黒 `#000000`」の二値**でつくる。中間のグレー面を持たない
- 鎚起銅器の写真そのものが強い陰影を持つため、UI 側で影を足すと画面が濁る

---

## 7. Do's and Don'ts

### Do（推奨）

- **サイト全体を明朝系ディスプレイ書体（りょう Display PlusN）一本で組む**。ナビもフォームもゴシックに逃がさない
- **`font-feature-settings: "palt"` と `letter-spacing: 0.96px`（0.06em 相当）をグローバルに掛ける**。palt で詰めてから均一に開き直す
- **本文系の行間は 2.0、見出しは 1.1** の二極で組む
- **見出しは weight 300、本文は weight 500**。サイズが大きいほど細く組む
- 色は白と黒の二値に絞り、グレーは `#333333` / `#666666` / `#999999` / `#cccccc` の 4 段だけ使う
- CTA は `1px solid #cccccc` のアウトライン・文字色 `#999999`。**主張させない**
- ナビゲーションの主役は黒ベタのタイル（写真＋ `#000000` の面＋白の明朝）にする
- 角丸は全域 0。影は使わず、罫線と面の二値で階層を作る
- 銅の色（赤銅・紫金・黒味銅・栗色）は**写真と商品説明でのみ示し、UI の面色や罫に使わない**

### Don't（禁止）

- **ゴシック体を混ぜない**。ナビ・ボタン・フォームまで明朝で通すことがこのブランドの前提
- **本文の行間を 1.7 以下にしない**。明朝の 14px を成立させているのは行間 2.0 ＋ palt ＋ 字間の 3 点セットで、行間だけ詰めると一気に読みづらくなる
- **見出しを太くしない**。48px を weight 700 で組むと、静けさが失われて別のブランドになる
- `palt` を外さない（明朝の約物まわりの空きが目立つ）。逆に `letter-spacing` を 0 に戻すのも不可（palt で詰めた分だけ窮屈になる）
- 角丸・影・グラデーションを足さない
- 有彩色を UI に持ち込まない。CTA を目立たせたくなっても、色ではなく余白と位置で解決する
- 中間グレーの面（`#f5f5f5` のようなカード面）を作らない。**白と黒の二値**を崩さない
- フォームだけ `Open Sans` にしない（実サイトの取り残しを再現しない）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム。ヘッダーはハンバーガー（`navbar-toggle`）に格納、黒タイルは縦積み |
| Tablet | 768–1024px | 2 カラム。Bootstrap 系のグリッドを使用 |
| Desktop | > 1024px | 3 カラムの黒タイル＋全幅 KV |

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG基準）
- アウトラインボタンは `padding: 15px` ＋ 行間 2.0 で高さ 46px 前後が確保される

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

- 本文 16px は据え置き。段落 14px もモバイルで下げない（明朝は小さくすると急に読みづらくなる）
- Display 48px → モバイルでは 28〜32px。**ただし weight 300 と行間 1.1 は維持する**
- Menu Title 28px → 20〜22px
- **行間 2.0 と字間 0.96px はモバイルでも変えない**。この 2 つがブランドの字面の芯

---

## 9. Agent Prompt Guide

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

```
Background:     #ffffff   （純白）
Ink:            #000000   （文字・黒タイル・フッターの面）
KV Overlay:     rgba(0,0,0,0.3)
Sub Text:       #333333   （サブメニュー）
Caption:        #666666   （著作権・日付）
Muted:          #999999   （アウトラインボタンの文字）
Border:         #cccccc   （罫・ボタンの枠）
Font:           ryo-display-plusn, serif    ← 和文・欧文ともこれ 1 書体のみ
Weight:         300（見出し） / 400（サブメニュー） / 500（本文・ナビ） / 700（アウトラインボタン）
Body Size:      16px（既定） / 14px（段落）
Line Height:    2.0（本文系すべて） / 1.1（見出しのみ）
Letter Spacing: 0.96px 固定（16px で 0.06em、12px で 0.08em、48px で 0.02em）
Feature:        font-feature-settings: "palt"（グローバル。本文にも掛ける）
Radius:         0px（全域）
Shadow:         none（1px solid #cccccc の罫線で代替）
CTA:            transparent + 1px solid #cccccc + color #999999 + padding 15px + weight 700
```

### プロンプト例

```
玉川堂（GYOKUSENDO）のデザインシステムに従って、商品紹介のページを作成してください。
- 和文も欧文も ryo-display-plusn（無ければ serif）の 1 書体だけで組む。ゴシックは一切使わない
- font-feature-settings: "palt" と letter-spacing: 0.96px をサイト全体に掛ける
  （palt で詰めてから均一に開き直す二段構え）
- line-height は本文系すべて 2.0、見出しだけ 1.1 の二極にする
- 見出しは font-weight 300（Light）、本文とナビは 500（Medium）。大きい見出しほど細く組む
- 地は白 #ffffff、文字は #000000。中間グレーの面は作らない
- グレーは #333333（サブメニュー） / #666666（日付・著作権） / #999999（ボタン文字） /
  #cccccc（罫）の 4 段だけ使う
- ナビゲーションは写真の上に #000000 のベタタイルを置き、白の明朝で見出し 28px（行間 2.0）＋
  説明 14px（行間 1.5）を組む
- CTA は transparent + 1px solid #cccccc + 文字色 #999999 + padding 15px + weight 700。目立たせない
- KV は工房写真に rgba(0,0,0,0.3) の暗幕を重ね、白のロゴと言語切替を載せる
- 角丸は全域 0px。影は使わず、1px の罫線と白黒の二値で階層を作る
- 銅の色（赤銅・紫金・黒味銅）は写真と商品説明でのみ示し、UI の面色や罫には使わない
```