# DESIGN.md — 食べチョク（Tabechoku）

> 食べチョク（https://www.tabechoku.com/）のデザイン仕様書。
> 農家・漁師から直接買える**産直通販マーケットプレイス**。商品 42,363 点／生産者 11,896 軒が並ぶ。
> **ブランド色は「金茶」1 系統**。`--Color-Primary-Gold-70: #cab270`（CSS 出現 154 回）と `Gold-60: #9f8745`（138 回）の 2 段で、面と文字を使い分ける。**日本の EC で「金」を主色に据えるのは珍しく、水引・のし・熨斗紙の意匠と地続きになっている**
> **トーナルスケールを持つ**。`--Color-{Primary-Gold, Orange, Red, Blue, Green, Yellow, Gray}-{0,10,20,…,95,99,100}` の **13 段 × 7 系統**。Material 3 と同じ **「0 が黒・100 が白」** の並びで、**数字が大きいほど明るい**（Nachiguro 等の「500 が基準・900 が最暗」とは逆向き）
> **見出しに明朝が入る**。金色のセクション見出しだけ `font-family: "Noto Serif JP", serif` ＋ `color: #9f8745`。他はすべて **ヒラギノ角ゴ Pro**（**ProN ではない**）
> **`letter-spacing` を px で細かく刻む**。`.4px`（152 回）`.5px`（111 回）`.15px`（109 回）`.25px`（87 回）`.1px`（66 回）——**サイズごとに 5 段階を使い分ける**
> 実サイトの computed style 実測（2026-08-28 取得。トップ ＋ 商品一覧 `/products`）＋ `user-*.css`（731KB）の直接 grep に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **白地 ＋ 生成りの面 ＋ 金茶**。贈答・産直という文脈に合わせて、彩度の高い EC 色（赤やオレンジのセール色）を主役にせず、**金茶と生成りで「ちゃんとしたもの」の顔**を作る。オレンジは告知にだけ差す
- **食べチョクについて**: 生産者が直接出品・発送する産直通販。「生産者からチョクでお届け。」がタグライン。**商品と同じ数だけ生産者の顔が並ぶ**ため、カードには産地名（`長野県` `青森県`）とレビュー語（`嬉しい` `すごい`）のチップが多く付く
- **密度**: **高い**。商品グリッド、絞り込みチップ、産地チップ、レビュー感情チップが同居する。本文 14px / 行間 1.5 で情報量を優先している
- **キーワード**: 金茶 `#cab270`、生成り `#f5f1eb`、明朝の見出し、radius 4px、px 指定の字間、影ほぼ無し
- **特徴**:
  - **主色が 2 段の金**。**面には `#cab270`（Gold-70）、文字には `#9f8745`（Gold-60）** と役割が分かれている。金の上には必ず白文字を置く
  - **radius 4px が既定**。CSS 出現 **149 回**で最多。次が `50%`（105 回、アイコン円）、`8px`（38 回）、`16px`（38 回、チップ）。**ボタンは 4px の浅い角丸**で、ピルはチップ・バッジ専用
  - **影をほとんど使わない**。`box-shadow` の宣言は全 CSS で 12 個しかなく、うち 3 個は Bulma 既定の `0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1)`。**階層は面色（生成り `#f5f1eb` / 灰 `#f2f2f2` / `#e9e9e9`）で作る**
  - **`letter-spacing` が px 指定**。`.4px` `.5px` `.15px` `.25px` `.1px` の 5 段階を、フォントサイズごとに割り当てている。**em ではないので、サイズを変えると字間比率が崩れる**
  - **`font-feature-settings` は `normal`**。**`palt` を使わない**
  - **CSS フレームワークは Bulma**（`rgba(10,10,10,.1)` の影と `#ffdd57` が痕跡）。ただし色・角丸はほぼ全部上書きされている
  - **ブレイクポイントは 768/769px の 1 本**。`min-width: 769px` が **421 回**、`max-width: 768px` が **284 回**。他は 960/961px が 10 回程度

---

## 2. Color Palette & Roles

> 地は `#ffffff`（`pageBackground.resolved` = `rgb(255,255,255)` / 根拠 `html`）。トップ・一覧ページとも同じ。

### Brand（Primary Gold）

`--Color-Primary-Gold-*` の 13 段スケール。**数字が大きいほど明るい**（0 = 黒、100 = 白）。

| トークン | 値 | 用途 | CSS 出現 |
|---------|-----|------|---------|
| `Gold-30` | `#564101` | — | — |
| `Gold-40` | `#715c1b` | — | — |
| `Gold-50` | `#8b7533` | — | — |
| **`Gold-60`** | **`#9f8745`** | **文字色**。明朝の見出し、チップの文字、ページネーションのリンク、「初めての方へ」の帯 | **138 回** |
| **`Gold-70`** | **`#cab270`** | **面色**。ログインボタン、定期便 CTA、バッジ、タブの選択状態、ページネーションの現在ページ | **154 回** |
| `Gold-80` | `#decda2` | 淡い罫・面 | — |
| `Gold-90` | `#f0e8d5` | 淡い面 | 16 回 |
| **`Gold-95`** | **`#f5f1eb`** | **生成りの面**。「すぐに出荷」バッジ、レビュー感情チップ、お知らせ帯、産地リストの面 | **80 回** |
| `Gold-99` | `#fcfaf8` | ほぼ白の面 | — |

> **`#f5f3e9`** も実測で 34 回現れる（「すべての商品を見る」「すべての生産者を見る」の面、SNS ブロックの 5px 罫）。`Gold-95` とは別値の生成りで、**トップページ専用の `top.css` 側で定義されている**。

### Accent（告知・注意）

| 役割 | トークン | 値 | 用途 |
|------|---------|-----|------|
| **お知らせ** | `--Color-Orange-50` | **`#f45800`** | 「お知らせ」バッジの面（白文字 14px / 700）。**セールではなく告知に使う** |
| Orange 明 | `--Color-Orange-60` | `#ff711f` | ホバー |
| Alert | `--Color-Red-40` | `#c30d23` | エラー・警告の文字。19 回 |
| Alert 面 | `--Color-Red-50` | `#db3347` | 小バッジの面。16 回 |
| Bulma 既定 | — | `#ffdd57` | 一部の注意ラベル（黒文字）。20 回 |

### Neutral（`--Color-Gray-*`）

| トークン | 値 | 用途 | CSS 出現 |
|---------|-----|------|---------|
| `Gray-20` | **`#212121`** | **本文の既定色**（`body`） | 125 回 |
| `Gray-30` | `#333333` | 濃いめの文字 | — |
| `Gray-60` | **`#858585`** | 非選択のナビ・補助テキスト | 80 回 |
| `Gray-70` | `#b8b8b8` | プレースホルダ・無効 | 49 回 |
| `Gray-80` | `#d9d9d9` | 罫 | — |
| `Gray-90` | **`#ededed`** | **セカンダリボタンの面**（「新規会員登録」「すべての投稿を見る」） | — |
| `Gray-95` | **`#f2f2f2`** | 汎用の面・入力欄の地 | **181 回** |
| `Gray-99` | `#f9f9f9` | 最も淡い面（産地チップの地） | 49 回 |

実測では `#e9e9e9`（109 回）も多用され、**サイズチップ（`約1.8kg` `約5kg`）の面と罫**に使われる。`#403a39`（濃い茶褐色）はヘッダーのアイコンバッジ。

### 面色のまとめ

**白 `#ffffff` → 生成り `#f5f1eb` / `#f5f3e9` → 灰 `#f9f9f9` → `#f2f2f2` → `#e9e9e9` → `#ededed`** の 6 段。**生成りは「和・贈答」の面、灰は「機能」の面**という使い分け。

---

## 3. Typography Rules

### 3.1 和文フォント

- **ゴシック体**: **ヒラギノ角ゴ Pro**（`"Hiragino Kaku Gothic Pro"` → `"ヒラギノ角ゴ Pro W3"`）→ メイリオ → Osaka → MS Pゴシック
  - **ProN ではなく Pro**。旧字体の字形（`辻` `葛` 等）が JIS90 系になる。Apple 日本語サイトと同じ選択
- **明朝体**: **`"Noto Serif JP", serif`**。**金色のセクション見出し専用**（`color: #9f8745` ＋ `text-align: center` とセットで宣言）

### 3.2 欧文フォント

- **サンセリフ**: arial → helvetica → Lucida Grande（**和文の後ろ**）
- 一部のバッジ・アイコンに `Arial, sans-serif` 単独指定（22 回）

### 3.3 font-family 指定

```css
/* 本文・見出し（サイト全体） */
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
             Meiryo, メイリオ, Osaka, "MS PGothic",
             arial, helvetica, "Lucida Grande", sans-serif;

/* 金色のセクション見出しだけ明朝 */
font-family: "Noto Serif JP", serif;
color: #9f8745;
text-align: center;

/* 一部の小バッジ・数字 */
font-family: Arial, sans-serif;
```

**フォールバックの考え方**:
- **和文優先**。ヒラギノを先頭に置き、欧文もヒラギノの欧文グリフで組む
- **Windows 向けにメイリオ → MS Pゴシックまで下げている**レガシー寄りのスタック。ただし**先頭がヒラギノなので Mac/iOS では正しく組まれる**（メイリオ先頭のスタックとは別物）
- 明朝は **Web フォントではなく OS の Noto Serif JP に任せる**。未搭載環境では `serif`（游明朝／ヒラギノ明朝）に落ちる

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

| Role | Size | Weight | Line Height | Letter Spacing | Color | 備考 |
|------|------|--------|-------------|----------------|-------|------|
| Heading 1 | 24px | 700 | 33.6px (**1.4**) | normal | `#212121` | セクション大見出し |
| Heading 2 (明朝) | 14px | 700 | 19.6px (**1.4**) | .1px (0.007em) | **`#9f8745`** | **Noto Serif JP**。金色の小見出し |
| Heading 3 (A) | 16px | 700 | 24px (**1.5**) | .5px (**0.031em**) | `#212121` | カード見出し |
| Heading 3 (B) | 16px | 700 | 22.4px (**1.4**) | .15px (0.009em) | `#000000` | 一覧の見出し |
| Heading 4 | 16px | 600 | 25.6px (**1.6**) | .5px (**0.031em**) | `#000000` | サブ見出し。**600 を使う** |
| Body (L) | 16px | 400 | 24px (**1.5**) | .5px (**0.031em**) | `#212121` | 説明文 |
| Body | **14px** | 400 | 21px (**1.5**) | .5px (**0.036em**) | `#212121` | **`body` の既定** |
| Body (loose) | 14px | 400 | 22.4px (**1.6**) | .25px (0.018em) | `#000000` | 商品説明 |
| Body (bold) | 14px | 700 | 19.6px (**1.4**) | .1px (0.007em) | `#212121` | 強調 |
| Label | 14px | 700 | 14px (**1.0**) | .5px | `#ffffff` / `#212121` | ボタンのラベル |
| Caption | 13px | 600 | 19.5px (**1.5**) | .5px (**0.038em**) | `#000000` | 補足 |
| Caption (S) | 12px | 600 | 18px (**1.5**) | .5px (**0.042em**) | `#9f8745` | 金色の注記 |
| Chip | 12px | 700 | 18px (**1.5**) | .4px (**0.033em**) | 面による | バッジ・チップ |
| Micro | 11px | 400 | 15.4px (**1.4**) | .5px (**0.045em**) | `#000000` | 最小の注記 |
| Micro (chip) | 10px | 600 | — | .5px (**0.05em**) | `#000000` | サイズチップ |

### 3.5 行間・字間

- **本文の行間**: **1.5**（14px → 21px）。商品説明は **1.6**（14px → 22.4px）
- **見出しの行間**: **1.4〜1.5**
- **字間**: **px 指定で 5 段階**。CSS 中の出現順に `.4px`（152 回）／`.5px`（111 回）／`.15px`（109 回）／`.25px`（87 回）／`.1px`（66 回）／`0`（47 回）

  | px 値 | 主な適用サイズ | em 換算 |
  |-------|--------------|---------|
  | `.5px` | 10〜16px の本文・ラベル | 0.031〜0.05em |
  | `.4px` | 12px のチップ | 0.033em |
  | `.25px` | 14px の商品説明 | 0.018em |
  | `.15px` | 16px の見出し | 0.009em |
  | `.1px` | 14px の太字・明朝見出し | 0.007em |

  **小さい文字ほど em 換算で字間が広がる**設計（10px で 0.05em、16px で 0.009em）。**px のまま移植すると比率が壊れる**ので、em に換算してから使うこと

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

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

- 商品名・生産者名はユーザー入力。カード内は 2 行で省略する前提で組む
- 産地表記（`愛知県 名古屋市`）は**全角スペースではなく半角スペース ＋ 改行**で 2 行にする

### 3.7 OpenType 機能

```css
font-feature-settings: normal;   /* palt を使わない */
```

- **`palt` を適用しない**。代わりに `letter-spacing` を px で細かく調整している

### 3.8 縦書き

該当なし。

---

## 4. Component Stylings

### Buttons

**Primary（ログイン / すべての定期便を見る）**
- Background: **`#cab270`**（Gold-70）
- Text: `#ffffff`
- Padding: `12px 10px`（ヘッダー） ／ `16px`（本文中の大ボタン）
- Border Radius: **`4px`**
- Font Size: `14px`（小） / `16px`（大） ／ Weight: `700` ／ Letter Spacing: `.5px`
- Shadow: なし

**Secondary（新規会員登録 / すべての投稿を見る / カテゴリー一覧を見る）**
- Background: **`#ededed`**（Gray-90）
- Text: `#212121`
- 他は Primary と同一（padding / radius / サイズ / ウェイト）
- **形を変えず、面を金 → 灰に落として優先度を下げる**

**Outline（食べチョクとは？ / 食べチョク基準 / 品質保証について）**
- Background: `#ffffff` ／ Text: `#000000`
- Border: `1px solid #dddddd` ／ Border Radius: **`8px`**
- Padding: `0 20px` ／ 16px / 700 / `.5px`

**Text CTA（すべての商品を見る / すべての生産者を見る）**
- Background: `#f5f3e9`（生成り） ／ Text: `#000000` ／ Border Radius: **`0px`**
- Padding: `13px 16px` ／ 14px / 700 / `.5px`

**Ribbon（初めての方へ）**
- Background: **`#9f8745`**（Gold-60。**文字色として使う金を、ここだけ面に使う**）
- Text: `#212121` ／ Border Radius: **`9px 0 0`**（左上だけ丸める帯）
- Padding: `8px 8px 8px 12px` ／ 14px / 400

### Chips / Badges

| 種別 | 面 | 文字 | Radius | Padding | Size |
|------|----|------|--------|---------|------|
| トレンド | `#cab270` | `#ffffff` | **`20px`**（ピル） | `8px 12px` | 12px / 700 / `.4px` |
| グランプリ受賞商品 | `#cab270` | `#ffffff` | `16px` | `4px 8px` | 12px / 700 / `.4px` |
| お知らせ | **`#f45800`** | `#ffffff` | `4px` | `4px 8px` | 14px / 700 / `.1px` |
| すぐに出荷 | `#f5f1eb` | `#000000` | `20px` | `4px 6px` | 10px / 700 / `.5px` |
| レビュー感情（嬉しい / すごい） | `#f5f1eb` | **`#9f8745`** | `14px` | `0 8px 0 0` | 12px / 600 / `.5px` |
| サイズ（約1.8kg） | `#e9e9e9` | `#000000` | `16px` ＋ `1px solid #e9e9e9` | `0 8px` | 10px / 600 / `.5px` |
| 産地（長野県） | `#f9f9f9` | `#212121` | **`28px`** ＋ `1px solid #e9e9e9` | `10px 14px` | 14px / 700 / `.5px` |

### SNS Buttons

- Background: `#ffffff` ／ Text: `#222222` ／ Border Radius: **`30px`**
- Padding: `6px 6px 6px 18px` ／ 13px / 700
- **枠線だけ各 SNS のブランド色**：X `#000000` ／ Instagram `#d92938` ／ Facebook `#1877f2` ／ LINE `#06c755`

### Filter Controls（一覧ページ）

- 変更 / 決定: `#cab270` 塗り・白文字・radius **`24px`**・`1px 6px`・12px / 600
- リセット: `#ffffff` 地・`#cab270` 文字・`1px solid #cab270`・radius `24px`
- 並び替えセレクト: `#ffffff` ＋ `1px solid #e9e9e9`・radius `4px`・padding `10px`
- 見出し（表示条件 / カテゴリー）: `#f5f1eb` の面・`#212121`・radius `0`・padding `12px`・14px / 600

### Tabs（商品 / 生産者）

- 選択: `#cab270` 塗り・白文字・**`8px 8px 0 0`**（上だけ丸める）・padding `12px 52px 10px`
- 非選択: `#ffffff` 地・`#9f8745` 文字・同じ radius

### Pagination

- 現在ページ: `#cab270` 塗り・白文字・`1px solid #cab270`・radius `4px`・12px / 700
- 他ページ: 透明・`#9f8745` 文字・`1px solid #cab270`・radius `4px`・12px / 400

### Inputs

- Background: `#f2f2f2`（Gray-95） ／ Text: `#000000`
- Border Radius: `4px` ／ Font Size: `14px` ／ `line-height: normal`
- Placeholder: `#b8b8b8`（Gray-70）

### Cards

- Background: `#ffffff` ／ Border Radius: `4px` または `8px`
- Border: `1px solid #e9e9e9`
- Shadow: 原則なし。強調したいときのみ `2px 2px 6px rgba(0,0,0,.15)`

---

## 5. Layout Principles

### Radius Scale

| Value | 出現 | 用途 |
|-------|------|------|
| **`4px`** | **149 回** | **ボタン・カード・入力欄・バッジ。既定** |
| `50%` | 105 回 | アイコンの円・アバター |
| `8px` | 38 回 | アウトラインボタン・大きめのカード |
| `16px` | 38 回 | チップ |
| `20px` | 15 回 | ピル型チップ |
| `12px` | 12 回 | 中サイズ |
| `10px` | 12 回 | 中サイズ |
| `0` | 10 回 | セクション帯 |

### Container

- Max Width: **`1240px`**（5 回）／ `1200px`（2 回）／ `1000px`（1 回）
- 記事系の狭いブロック: `700px` / `600px` / `500px` / `400px`

### Breakpoints（CSS の実出現）

| Query | 出現 |
|-------|------|
| `min-width: 769px` | **421 回** |
| `max-width: 768px` | **284 回** |
| `max-width: 960px` | 10 回 |
| `min-width: 961px` | 9 回 |
| `min-width: 1239px` | 4 回 |
| `max-width: 414px` | 4 回 |

**768/769px の 1 本が実質の分岐点。**

---

## 6. Depth & Elevation

**影の宣言は全 CSS で 12 個しかない。** 階層は面色と 1px の罫で作る。

| Level | Shadow | 出現 | 用途 |
|-------|--------|------|------|
| 0 | `none` | 6 回 | 既定 |
| 1 | `0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1)` | 3 回 | **Bulma 既定**。ドロップダウン |
| 2 | `2px 2px 6px rgba(0,0,0,.15)` | 2 回 | 浮かせたカード |
| 2' | `2px 2px 5px rgba(0,0,0,.2)` | 2 回 | フローティング要素 |
| — | `inset 0 0 0 2px #9f8745` | 1 回 | **選択状態の内側 2px 罫**（金） |

**カードに影を付けない。** 代わりに `1px solid #e9e9e9` の罫か、生成り `#f5f1eb` の面で区切る。

---

## 7. Do's and Don'ts

### Do（推奨）

- **面には `#cab270`（Gold-70）、文字には `#9f8745`（Gold-60）** を使い分ける。金の面には必ず白文字
- **radius は 4px**。チップ・バッジだけ 16〜28px のピルにする
- **主 CTA `#cab270` / 副 CTA `#ededed`** と、形を変えずに面色だけで優先度を落とす
- **金色のセクション見出しには `"Noto Serif JP", serif`** を当てる（食べチョクらしさの核）
- 面は **白 → 生成り `#f5f1eb` → 灰 `#f2f2f2` / `#e9e9e9`** の順に重ねる
- **`letter-spacing` はサイズごとに 5 段階**（`.1px` / `.15px` / `.25px` / `.4px` / `.5px`）。移植するときは **em に換算**する
- 影を使わず、`1px solid #e9e9e9` の罫で区切る
- オレンジ `#f45800` は**告知（お知らせ）にだけ**使う

### Don't（禁止）

- **金を面と文字で取り違えない**。`#9f8745` を大きな面に塗ると重く、`#cab270` を白地の文字にするとコントラストが足りない（例外は「初めての方へ」の帯のみ）
- **トーナルスケールの向きを間違えない**。`Gold-70` は `Gold-60` より**明るい**（0 が黒、100 が白）。他システムの「数字が大きいほど濃い」と逆
- **ピルをボタンに使わない**（ボタンは 4px、ピルはチップ専用）
- **カードに影を付けない**
- **`palt` を有効にしない**（`font-feature-settings: normal`）
- **ヒラギノ角ゴ ProN を指定しない**（このサイトは **Pro**）
- オレンジや赤をセール色として広く使わない（**贈答の顔が崩れる**）
- 日本語本文に `line-height: 1.2` 以下を使わない（本文は 1.5、商品説明は 1.6）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Small Mobile | ≤ 414px | チップの折り返しを調整 |
| Mobile | ≤ 768px | 1 カラム。ヘッダーはハンバーガー ＋ 検索 |
| Desktop | ≥ 769px | **主レイアウト**。左サイドに絞り込み、右に商品グリッド |
| Wide | ≥ 961px / ≥ 1239px | コンテナ 1240px まで拡張 |

### タッチターゲット

- ヘッダーの主ボタンは `padding: 12px 10px` ＋ 14px 行高 ＝ **約 38px**。**モバイルでは `padding: 16px` の大ボタン（約 48px）を使う**

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

- 本文 14px は据え置き（**もともと小さめ**）。見出し 24px は 18〜20px 相当へ縮める

---

## 9. Agent Prompt Guide

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

```
Primary Color: #cab270  （面 / Gold-70）
Primary Text:  #9f8745  （文字 / Gold-60）
Accent:        #f45800  （お知らせのみ / Orange-50）
Text Color:    #212121  （補助は #858585）
Background:    #ffffff  （面 #f5f1eb 生成り / #f2f2f2 灰 / 罫 #e9e9e9）
Font:          "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
               Meiryo, メイリオ, Osaka, "MS PGothic",
               arial, helvetica, "Lucida Grande", sans-serif
Serif:         "Noto Serif JP", serif  （金色の見出しのみ）
Body Size:     14px / line-height 1.5 / letter-spacing .5px (0.036em)
Radius:        ボタン 4px / チップ 16〜28px / アウトライン 8px
Shadow:        なし（罫 1px solid #e9e9e9 で代替）
palt:          off
```

### プロンプト例

```
食べチョクのデザインシステムに従って、産直商品のカードグリッドを作成してください。
- 主 CTA「カートに入れる」は面 #cab270・白文字・radius 4px・16px/700・letter-spacing .5px
- 副ボタン「あとで見る」は同じ形のまま面を #ededed・文字 #212121 に落とす
- セクション見出しは "Noto Serif JP", serif ／ color: #9f8745 ／ 中央揃え
- 商品名は 16px/700/line-height 1.5/letter-spacing .15px、
  生産者名は 14px/400/line-height 1.5/letter-spacing .5px、色は #212121
- 産地チップは #f9f9f9 の地に 1px solid #e9e9e9・radius 28px・14px/700
- レビューの感情チップ（嬉しい・すごい）は #f5f1eb の地に文字 #9f8745・radius 14px・12px/600
- カードに影は付けず、1px solid #e9e9e9 の罫で区切る
- 本文フォントは "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, … （ProN ではない）
- font-feature-settings は normal（palt を使わない）
```