# DESIGN.md — 石見銀山 群言堂（Iwamiginzan Gungendo）

> 石見銀山 群言堂（https://www.gungendo.co.jp/）のデザイン仕様書。
> 島根県大田市大森町——世界遺産・石見銀山の麓、人口 400 人ほどの集落に本社を置く衣料・生活用品のブランド。1989 年創業（株式会社石見銀山生活文化研究所）。「根のある暮らし」を掲げ、**過疎の町に残ることそのものをブランドの主題にしている**。
> サイトの最大の特徴は **全ページが明朝体 1 書体（Zen Old Mincho）だけで組まれていること**。ヘッダー、ナビ、商品名、価格、ボタンのラベル、カートの個数バッジまで、**UI の全部が明朝**。EC サイトでこれをやり切っている例はほとんどない。
> もうひとつは **地色が白でないこと**。`#e2dfdd` という**温かみのある薄いグレージュ**がページ全体の地で、商品写真と白いカードがその上に浮く。**「紙ではなく、生成りの布の上に置いた」**質感になる。
> プラットフォームは **FutureShop（`fs-l-` / `fs-c-` のクラス接頭辞）**。テンプレート由来の部品と、独自の `gun_` 接頭辞の部品が混在する。
> 実サイトの computed style 実測（2026-07-31 取得。トップ＋服カテゴリ）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **明朝体 1 本で、EC の全部を組む。** 「読み物は明朝、UI はゴシック」という一般的な分業を**採らない**。カートボタンも価格も送料の注記も明朝で組むことで、**サイト全体が商品カタログというより一冊の本**に近い手触りになる
- **群言堂について**: 商品は藍・墨・生成りといった**低彩度の染めもの**が中心。サイトの配色もそれに合わせて、**彩度を持つのは CTA の茶色 `#875d45` ただ 1 色**。この茶は**革・土・染めの色**であって、EC でよくある「目を引くための原色」ではない
- **密度**: 中程度。商品グリッドは 3〜4 列で密だが、地色が沈んだグレージュなので**白背景の EC より視覚的にうるさくない**
- **キーワード**: Zen Old Mincho 単一、`#e2dfdd` のグレージュ地、`#875d45` の茶、`letter-spacing: normal`、7px の額縁ボーダー
- **特徴**:
  - **`font-family: "Zen Old Mincho", serif` の 1 行が全域**。和文・欧文・数字・記号のすべてがこの明朝。**電話番号「050-3503-1906」も価格も明朝の数字**で出る
  - **`letter-spacing` が全域 `normal`**。明朝体のサイトは字間を開けたくなるが、**ここは一切開けない**。Zen Old Mincho の字面がもともとゆったりしているため、追加の字送りが要らない
  - **地色 `#e2dfdd` が「白の代わり」**。カードやモーダルだけが `#ffffff` で、それが**紙として浮く**構造。**白を地色に使うと設計が壊れる**
  - **文字色が `#3a4145`**（青みのあるチャコール）。純黒でも純グレーでもなく、**わずかに青を含む**。グレージュの地に対して補色寄りに置くことで、沈んだ地の上でも文字が締まる
  - **`border: 7px solid #e8e8e8` という極太の額縁**が特徴的な部品として存在する（`radius 5px` と組む）。1px の罫ではなく**面としてのボーダー**で、写真の周りに余白代わりの枠を作る
  - **`border-radius` が 0 / 2 / 3 / 5 / 9 / 15px と細かく散っている**。FutureShop テンプレート由来の値と独自実装が混在しているため。**新規実装では 0 / 3px の 2 択に寄せる**のが原典の印象に近い
  - **影はほぼ使わない**。実測で見つかったのは `0 0 2px rgb(178,178,178)` の 1 種類だけ
  - **`font-feature-settings` は `normal`**（palt なし）

---

## 2. Color Palette & Roles

> CSS Custom Properties は**定義されていない**（FutureShop テンプレート＋独自 CSS）。以下はすべて computed style の実測値。

### Brand（ブランド）

- **Gungendo Brown** (`#875d45`): **ブランド色。サイトで唯一の彩度**。カートに入れるボタン、カート個数のバッジ、モーダルの主 CTA。**革・土・染めの茶**
- **Brown Border** (`#925e33`): 商品リスト内のボタンだけが持つ、**茶より一段黄みに寄せた縁の色**（`1px solid`）
- **Ink** (`#3a4145`): 文字色。**青みのあるチャコール**。純黒を使わない
- **Paper（地色）** (`#e2dfdd`): **ページ地色**。温かみのある薄いグレージュ。`body` に直接指定

### Surface（面）

| Role | Value | 用途 |
|------|-------|------|
| Background | `#e2dfdd` | **ページ地色**（白ではない） |
| Surface（白） | `#ffffff` | カード・モーダル・ドロワー。**地の上に浮く「紙」** |
| Surface（セクション） | `#ebe9e8` | 「新着商品」「今月のおすすめ」等のセクション帯 |
| Surface（淡） | `#f6f5f5` | ナビゲーションドロワー |
| Surface（商品リスト） | `#f7f7f7` | 商品グリッドの帯 |
| Frame Border | `#e8e8e8` | **`7px solid` の額縁ボーダー** |
| Swatch Overlay | `rgba(30, 30, 30, 0.7)` | 色番（「ぎんねず（B）」「くろ」等）のラベル下地 |

> **注**: 面が `#e2dfdd` → `#ebe9e8` → `#f6f5f5` → `#f7f7f7` → `#ffffff` の **5 段でごく浅く上がっていく**。隣の段との差が 3〜9 しかないので、**罫を引かずに面だけで区切りが成立する**。

### Semantic（意味的な色）

| Role | Value | 用途 |
|------|-------|------|
| **Primary CTA** | `#875d45` | 「カートに入れる」「購入手続きへ」 |
| **Secondary CTA** | `#667895` | **「入荷お知らせ」等の副次アクション**。青みのグレー |
| **Sale** | `#862800` | **「50%OFF」バッジ**。茶より赤に寄った暗い色 |
| Neutral CTA | `#646464` | 中立的なボタン（絞り込み等） |
| Link | `#3572b0` | ヘッダー内のテキストリンク |
| Link（商品） | `#1e5d9b` | 商品名リンク。ヘッダーより一段濃い |

- **セール色 `#862800` はブランド茶 `#875d45` の「彩度を上げて暗くした」隣**。**赤を新規に持ち込まず、ブランド茶の系統の中でセールを表現している**——ここがこのサイトの配色設計でいちばん巧い所
- **`#667895`（副 CTA）だけが寒色**。「買う（茶・暖色）」と「待つ・知らせを受け取る（青・寒色）」を**色温度で分けている**
- **成功・エラーの専用色は定義されていない**。必要なら副 CTA の `#667895` と セール色 `#862800` を流用する

### 色数のまとめ

**彩度を持つ色は 5 つだけ**（`#875d45` / `#667895` / `#862800` / `#3572b0` / `#1e5d9b`）。うち 2 つはリンク色なので、**面として塗られる色は実質 3 色**。

---

## 3. Typography Rules

### 3.1 和文フォント

- **明朝体**: **Zen Old Mincho**（Google Fonts）。**サイト全域でこれ 1 書体のみ**。ウェイトは `400` / `500` / `700` の 3 段
- **ゴシック体**: **使わない**。例外は SNS アイコン等の極小ラベル（`10px`）で、ここだけヒラギノ角ゴのスタックに落ちる

> **Zen Old Mincho について**: Zen フォントシリーズの明朝体で、**Google Fonts で配信されている数少ない本格的な日本語明朝**。「Old」の名のとおり、現代的な明朝（游明朝・Noto Serif JP）よりも**仮名が大ぶりで、横画が太め**。EC のような小さい文字でも潰れにくいのは、この字面の設計による。**Google Fonts なので、プレビューでも原典と同じ書体が再現できる**（Adobe Fonts のようなドメイン制限がない）。

### 3.2 欧文フォント

- **専用の欧文フォントを持たない**。数字も英字も **Zen Old Mincho の内蔵グリフ**で組む
- 電話番号「050-3503-1906」（19px 相当）も明朝の数字で出る。**ここに欧文サンセリフを混ぜない**のがこのサイトの一貫性

### 3.3 font-family 指定

```css
/* 全域 */
font-family: "Zen Old Mincho", serif;

/* 例外: 極小アイコンラベルのみ */
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ,
             Osaka, "MS PGothic", arial, helvetica, sans-serif;
```

```html
<!-- Google Fonts の読み込み -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;700&display=swap" rel="stylesheet">
```

**フォールバックの考え方**:
- **和文明朝 → `serif` の 2 段だけ**。游明朝・ヒラギノ明朝へのフォールバックを持たない（Google Fonts を必ず読み込む前提）
- **実装では中間の和文明朝を足しておくのが安全**:

```css
font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "游明朝", YuMincho,
             "MS PMincho", serif;
```

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

**`letter-spacing` は全域 `normal`。** 明朝体のサイトでありながら字間を一切開けない。

| Role | Size | Weight | Line Height | 用途 |
|------|------|--------|-------------|------|
| Display (h3) | 36px | **700** | 43.2px (**1.2**) | 特集の大見出し |
| Heading (h2) | 24px | **500** | 28.8px (**1.2**) | セクション見出し |
| Subheading (h3) | 19px | **700** | 26.6px (1.4) | 小見出し |
| Subheading（詰） | 19px | **700** | 22.8px (**1.2**) | 帯の中の見出し |
| Subheading（中） | 19px | **500** | 22.8px (1.2) | |
| Nav / Link | 19px | 400 | 28.5px (1.5) | カテゴリナビ |
| **Body (p)** | **16px** | **400** | **24px (1.5)** | **本文。`body` の既定値** |
| Body（読み物） | 16px | 400 | 28.8px (**1.8**) | 読みもの・説明文 |
| Product Name (h2) | 16px | **500** | 20.8px (**1.3**) | 商品名 |
| Footer Head (h3) | 16px | **500** | 22.4px (1.4) | フッター見出し |
| Body Small | 14px | 400 | 23.8px (1.7) | 補助本文 |
| Nav Small | 14px | 400 | 28px (**2.0**) | ヘッダーの小リンク |
| Utility | 13px | **700** | 19.5px (1.5) | ヘッダーのユーティリティ |
| Utility（詰） | 13px | **700** | 14.3px (**1.1**) | アイコン下のラベル |
| Badge | 12px | 400 | 18px (1.5) | モーダルのボタンラベル |
| Tag | 10px | 400 | — | 「NEW」「50%OFF」等 |
| Cart Count | **8px** | **700** | 17px | **カート個数のバッジ** |

- **ウェイトは `400` / `500` / `700` の 3 段**。**`500`（Medium）を見出しに積極的に使う**のが特徴で、`700` は「特集の大見出し」「ヘッダーのユーティリティ」といった限られた場所だけ
- **見出しの行間が 1.2 と詰まっている**（36px → 43.2px、24px → 28.8px）。明朝の縦画が揃うので、詰めても読める
- **本文は 1.5、読み物だけ 1.8**。「商品情報＝ 1.5／読みもの＝ 1.8」の 2 段構え
- **カート個数のバッジが 8px の明朝 700**。この極小サイズでも明朝を貫く

### 3.5 行間・字間

- **本文の行間**: **1.5**（16px → 24px）
- **読み物の行間**: **1.8**（16px → 28.8px）
- **見出しの行間**: **1.2 〜 1.4**
- **字間**: **全域 `normal`（0）**

**ガイドライン**:
- **明朝だからといって `letter-spacing` を開けない**。Zen Old Mincho は字面が広めなので、追加の字送りを入れると間延びする
- **見出しは 1.2 まで詰める**。明朝の縦画の並びが揃うため、ゴシックより詰めても崩れない
- **本文 1.5 は日本語としては標準的だが、読み物は 1.8 へ上げる**。用途で行間を切り替える

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

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

- 商品名（「楊柳ショートパンツ」等）は**グリッド内で 2 行に収める**前提。3 行になる長さは避ける
- 色番の「ぎんねず（B）」のような**括弧付きの表記は改行させない**

### 3.7 OpenType 機能

```css
font-feature-settings: normal;   /* 全域 */
```

- **`palt` を使っていない**。字間 `normal` と合わせて、**Zen Old Mincho の字送りをそのまま出す**方針
- 明朝体に `palt` を掛けると仮名が寄って印象が変わるため、**この書体では入れないのが正解**

### 3.8 縦書き

該当なし。

---

## 4. Component Stylings

### Buttons

**Primary（カートに入れる／購入手続きへ）**
- Background: `#875d45`
- Text: `#ffffff`
- Border: `1px solid #875d45`
- Border Radius: `3px`
- Padding: `12px 18px`
- Font: `12px` / `400`

**Primary（商品リスト内）**
- Background: `#875d45`
- Text: `#ffffff`
- Border: `1px solid #925e33` ← **縁だけ一段黄みに寄せる**
- **Border Radius: `0px`**
- Padding: `5px 10px`
- Font: `16px` / `400`

**Secondary（入荷お知らせ）**
- Background: `#667895`
- Text: `#ffffff`
- Border: `1px solid #667895`
- Border Radius: `3px`
- Padding: `12px 18px`
- Font: `12px` / `400`

**Neutral**
- Background: `#646464`
- Text: `#ffffff`
- Border Radius: `0px`
- Padding: `8px`
- Font: `16px` / `400`

**Outline**
- Background: `transparent`
- Text: `#3a4145`
- Border: `1px solid #3a4145`
- Border Radius: `0px`
- Padding: `4px 8px`
- Font: `12px` / `400`

### Badges

**Sale**
- Background: `#862800`
- Text: `#ffffff`
- Border Radius: `2px`
- Padding: `5px 7px`
- Font: `10px` / `400`

**Outline（NEW・再入荷・予約商品等）**
- Background: `transparent`（**商品写真の上に重ねるときは `#ffffff` を敷く**）
- Text: `#3a4145`
- Border: `1px solid #3a4145`
- Border Radius: `2px`
- Padding: `5px 7px`
- Font: `10px` / `400`

> **注**: 文字色も罫も `#3a4145` なので、**暗い商品写真の上に透明のまま重ねると読めない**。カード面（白）の上では透明でよいが、**写真に重ねる位置に置くなら `background: #ffffff` を敷く**。塗りのある `#862800` のセール バッジにはこの問題がない。

**Cart Count**
- Background: `#875d45`
- Text: `#ffffff`
- Border Radius: `9px`（小さな円）
- Font: `8px` / `700`

### Frame Card（額縁ボーダー）

**このサイトを特徴づける部品。**

- Background: `#ffffff` または `transparent`
- **Border: `7px solid #e8e8e8`** ← 1px の罫ではなく**面としてのボーダー**
- Border Radius: `5px`
- Padding: `0` 〜 `30px`
- Font: `16px` / `700`（見出し）／ `19px` / `400`（本文）

> **考え方**: 7px の薄いグレーの枠が、写真やコンテンツの周りに**余白代わりの縁**を作る。影を使わずに「別の層」を表現する手段。**枠の色 `#e8e8e8` は地色 `#e2dfdd` より 6 だけ明るい**ので、地の上でごく浅く浮く。

### Cards

- Background: `#ffffff`
- Border: なし（または上記の額縁ボーダー）
- Border Radius: `3px`
- Padding: `15px 20px 15px 30px` / `20px 20px 20px 30px`（**左だけ広い非対称**）
- Shadow: なし（例外は下記 Elevation）

### Inputs

- Background: `#ffffff`
- Border Radius: `0px`
- Padding: `3px 5px 3px 30px`（左 30px は検索アイコン分）
- Font: `13px`（ヘッダー検索）／ `20px`（大きい検索欄）
- Text: `#333333`

> **注**: 入力欄の文字色だけ `#333333` で、本文の `#3a4145` と違う。FutureShop テンプレート由来。**新規実装では `#3a4145` に揃える**。

### Color Swatch

- Overlay: `rgba(30, 30, 30, 0.7)`
- Text: `#ffffff`
- 商品画像の上に色番（「ぎんねず（B）」「くろ」）を重ねる

---

## 5. Layout Principles

### Container

- 商品グリッドは 3〜4 列。読み物・特集は 1〜2 列
- Padding (horizontal): カード内は `20px` 〜 `30px`（左が広い非対称）

### Spacing

寸法トークンは存在しない。実測から読み取れる刻み:

| Value | 用途 |
|-------|------|
| `5px` / `7px` / `8px` | バッジ・小ボタンの padding |
| `10px` / `12px` / `18px` | ボタンの padding |
| `20px` / `30px` | カードの padding |

### Radius

**0 / 2 / 3 / 5 / 9 / 15px と散っている**（テンプレートと独自実装の混在）。

| Value | 用途 |
|-------|------|
| `0px` | 商品リストのボタン・入力欄・アウトラインボタン |
| `2px` | バッジ |
| `3px` | 主要ボタン・カード |
| `5px` | 額縁ボーダーの部品 |
| `9px` | カート個数バッジ |
| `15px` | 丸いアイコンボタン |

> **新規実装では `0px`（入力欄・リスト内ボタン）と `3px`（ボタン・カード）の 2 択に寄せる。** バッジは `2px`。それ以外は原典の継ぎ足しなので踏襲しなくてよい。

---

## 6. Depth & Elevation

**影はほぼ使わない。** 実測で見つかったのは 1 種類だけ。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | `none` | **既定。カード・ボタン・バッジのすべて** |
| 1 | `0 0 2px rgb(178, 178, 178)` | 例外的な浮き要素（ドロップダウン等） |

- **奥行きは面色の 5 段（`#e2dfdd` → `#ebe9e8` → `#f6f5f5` → `#f7f7f7` → `#ffffff`）で作る**。隣との差が 3〜9 しかない浅い階段
- **もう 1 つの手段が `7px solid #e8e8e8` の額縁ボーダー**。影の代わりに太い枠で層を分ける

---

## 7. Do's and Don'ts

### Do（推奨）

- **`font-family: "Zen Old Mincho", serif` を全域に適用する**。ボタン・価格・バッジも明朝で組む
- **`letter-spacing: normal` を守る**（明朝でも字間を開けない）
- **ページ地色を `#e2dfdd` にする**。白は「カードの色」として取っておく
- **文字色は `#3a4145`**（青みのあるチャコール）。純黒を使わない
- **セールの色はブランド茶の系統（`#862800`）から取る**。原色の赤を持ち込まない
- **「買う」は暖色（`#875d45`）、「待つ・知らせを受け取る」は寒色（`#667895`）**で分ける
- 見出しの行間は **1.2 まで詰める**（明朝は詰めても崩れない）
- 面の階段は **`#e2dfdd` / `#ebe9e8` / `#f6f5f5` / `#ffffff`** から選ぶ
- 影の代わりに **`7px solid #e8e8e8` の額縁ボーダー**を使う
- Google Fonts から `Zen Old Mincho` の `400 / 500 / 700` を読み込む

### Don't（禁止）

- **UI をゴシック体に切り替えない**。「読み物は明朝、ボタンはゴシック」という分業をしない——それがこのサイトの唯一最大の個性
- **ページ地色を `#ffffff` にしない**。白地にすると「布の上」の質感が消え、ただの EC になる
- **`letter-spacing` を開けない**（明朝サイトでやりがちだが、Zen Old Mincho では間延びする）
- **`font-feature-settings: "palt"` を足さない**（明朝の仮名が寄って印象が変わる）
- **彩度の高い赤・緑を新規に持ち込まない**。セールは `#862800`、注意は `#667895` で足りる
- **`#875d45` 以外の彩度を CTA に使わない**（副次アクションの `#667895` を除く）
- 影でカードを浮かせない（面色 5 段と額縁ボーダーで階層を作る）
- 角丸を `5 / 9 / 15px` まで新規に増やさない（**`0` / `2` / `3px` に寄せる**）
- 入力欄の文字色に `#333333` を使わない（テンプレート由来の揺れ。`#3a4145` に揃える）
- 本文の行間を 1.2 に詰めない（見出し用の値。本文は 1.5、読み物は 1.8）

---

## 8. Responsive Behavior

### Breakpoints

**デスクトップファースト（`max-width`）が主**。`max-width: 767px` が実質の分岐点。

| Name | Query | 使用箇所数 | 説明 |
|------|-------|-----------|------|
| **Mobile** | `max-width: 767px` | **32** | **主分岐。ここで 1 カラム＋ドロワーナビに落ちる** |
| Mobile（小） | `max-width: 600px` | 2 | |
| Tablet 以上 | `min-width: 768px` | 1 | |
| Desktop | `min-width: 960px` | 1 | |

- **`max-width: 767px` と `min-width: 767px` が両方ある**（767px ちょうどが二重に当たる）。**新規実装では `767px` / `768px` で分ける**
- モバイルでは `nav.gun_sp_menu`（`#f6f5f5` の全画面ドロワー）に切り替わる

### タッチターゲット

- Primary ボタン: `18px（行）+ 12px × 2 + 1px × 2 = 44px` → **44px 基準をちょうど満たす**
- 商品リスト内ボタン: `24px + 5px × 2 + 1px × 2 = 36px` → **基準未満**。主要 CTA には使わない
- バッジ（`5px 7px` / 10px）は**押せない表示要素**なので対象外

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

- 本文 `16px` はブレークポイントで変えない
- Display（36px）はモバイルで `24px` 前後へ
- 商品名（16px / 500 / 1.3）はモバイルでも維持する（グリッドが 2 列に減るため縮める必要がない）

---

## 9. Agent Prompt Guide

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

```
Brand (CTA):      #875d45（茶。サイトで唯一の主要彩度）
CTA Border:       #925e33（商品リスト内ボタンの縁だけ）
Secondary CTA:    #667895（入荷お知らせ等。寒色）
Sale:             #862800（ブランド茶の系統。原色の赤にしない）
Neutral CTA:      #646464
Link:             #3572b0 / #1e5d9b（商品名）
Text:             #3a4145（青みのあるチャコール。純黒にしない）
Background:       #e2dfdd（グレージュ。白ではない）
Surface:          #ffffff（カード） / #ebe9e8 / #f6f5f5 / #f7f7f7
Frame Border:     7px solid #e8e8e8（radius 5px）
Swatch Overlay:   rgba(30, 30, 30, 0.7)
Font:             "Zen Old Mincho", serif   ← 全域。UI も明朝
Weights:          400 / 500 / 700
Body Size:        16px / weight 400
Line Height:      1.5（本文） / 1.8（読み物） / 1.2〜1.4（見出し）
Letter Spacing:   normal（明朝でも開けない）
Font Feature:     なし（palt を足さない）
Radius:           0px / 2px（バッジ） / 3px（ボタン・カード）
Shadow:           none（例外: 0 0 2px rgb(178,178,178)）
Breakpoint:       max-width 767px（主分岐）
```

### プロンプト例

```
石見銀山 群言堂のデザインシステムに従って、商品一覧グリッドを作成してください。
- font-family: "Zen Old Mincho", serif を全体に適用（ボタン・価格・バッジも明朝で組む）
- letter-spacing: normal（開けない） / font-feature-settings は指定しない
- ページ背景: #e2dfdd（白にしない）
- 商品カード: 背景 #ffffff / radius 3px / 影なし
- 商品名: 16px / 500 / line-height 20.8px / color #1e5d9b
- 価格: 16px / 400 / color #3a4145（明朝の数字で出す）
- 本文・説明: 16px / 400 / line-height 24px / color #3a4145
- セクション見出し: 24px / 500 / line-height 28.8px
- 「カートに入れる」: 背景 #875d45 / 文字 #ffffff / border 1px solid #875d45 /
                     radius 3px / padding 12px 18px / 12px
- 「入荷お知らせ」: 背景 #667895 / 文字 #ffffff / radius 3px（寒色で「買う」と区別）
- 「50%OFF」バッジ: 背景 #862800 / 文字 #ffffff / radius 2px / padding 5px 7px / 10px
- 「NEW」バッジ: transparent / border 1px solid #3a4145 / radius 2px
- 色番のラベルは商品画像の上に rgba(30,30,30,0.7) の下地で重ねる
- 影は使わない。層を分けたいときは border: 7px solid #e8e8e8 の額縁を使う
- ブレークポイントは max-width: 767px の 1 本
```