# DESIGN.md — ヤマキ（YAMAKI）

> このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。
> セクションヘッダーは英語、値の説明は日本語で記述しています。
> 実測日: 2026-10-16 / 対象: `https://www.yamaki.co.jp/`, `/corporate/`

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **純黒の太字（weight 700）が既定で、差し色は社章の赤 1 色。** 字詰めも字空けもせず、素のまま組む。かつお節屋の素朴さを、加工していない組版で出している
- **密度**: 中程度。商品カードを 8px の角丸と薄い影で並べ、1 枚ずつ独立させる
- **キーワード**: 純黒、weight 700 が既定、ヤマキ赤、字間 normal、`break-all`

**このサイトの核心は4つある。**

1. **`font-weight: 700` が最多**（可視 106 / 205 要素）。見出しだけでなく**ナビ・商品名・カテゴリ名まで太字**で、400 は本文 80 要素のみ。**「太字が既定、細いのが例外」**という珍しい構え
2. **字詰めを一切しない。** `font-feature-settings` の宣言が CSS 全文で **0 件**（`palt` も `halt` も無い）。`letter-spacing` も **`normal` が 146 / 205 要素**で最多
3. **`body` に `word-break: break-all` が当たっている**（6 幅すべてで確認）。日本語の禁則処理を無効にして、**行末で単語・熟語の途中でも折り返す**設定。意図的かどうかに関わらず、再現すると改行位置が変わる
4. **ルート（`html` 10px / `body` 16px）は 6 幅すべて完全固定なのに、見出しだけが `3.4667vw` の全域流体。** `h3` は 1440px で 49.92px、375px でちょうど 13px まで連続して縮む

CSS Custom Properties は実質 0 個（2 個のうち 1 個は Swiper の既定値）。**設計トークンは存在しない。**

---

## 2. Color Palette & Roles

### Primary（ブランドカラー）

| 役割 | 実装値 | 実測 |
|------|--------|------|
| **ヤマキ赤** | **`#e60012`** | **面 6 要素 / 文字 11 要素**。CTA ボタンの塗り、`ブランドサイト別` `カテゴリー別` の見出し、社章。**このサイトで唯一の彩度のある色** |

> **赤は 1 色だけ。** `#e60012` は日本の企業ロゴで広く使われる標準的な赤（DIC 系）。ホバー用の濃い赤は用意されていない。

### Neutral（ニュートラル）

- **Text Primary** (`#000000`): 本文・見出し・ナビ。**可視 182 要素**。**このサイトは純黒で組む**（`#333333` に逃げない）
- **Text on Dark** (`#ffffff`): 赤面の上のテキスト（可視 9 要素）
- **Background** (`#ffffff`): ページ背景（`pageBackground.resolved` = `rgb(255,255,255)`）
- **Surface** (`#f8f8f8`): ニュース欄・ブランド一覧の面（**可視 15 要素**）
- **Border** (`rgba(0,0,0,.16)`): カードの枠（**下層で可視 9 要素**）。**黒の 16%**
- **Border 2** (`#cccccc`): 区切り線（可視 6 要素）
- **Hero Veil** (`rgba(250,246,239,.8)`): **ヒーローのコピーを載せる生成りの半透明帯**。純白ではなく、わずかに黄みのある紙色

### 外部ウィジェット由来（実装しない）

- `#3174c3`（Cookie 同意バナーの `同意する`）、`#202020`（同バナー本文）、`#0066cc`（同リンク）は **Cookie 同意バナーの色**
- 同バナーだけが `-apple-system, "system-ui", "ヒラギノ角ゴ Pro W3", … メイリオ, Meiryo` という**別のフォントスタック**を持つ（可視 4 要素）。**サイト本体の書体ではない**

---

## 3. Typography Rules

### 3.1 和文フォント

- **ゴシック体**: **Noto Sans JP**（Google Fonts）。**可視 201 要素**でサイトのほぼ全部。400 / 500 / 700 の 3 ウェイトがすべて `loaded`
- **明朝体**: 使わない。セリフ系の和文は 2 ページとも可視 0 要素

### 3.2 欧文フォント

- 専用の欧文書体は**読み込んでいない**。英数字も Noto Sans JP が担当する
- フォント要求は **44 件、すべて `fonts.gstatic.com`**。`@font-face` の宣言は 373 件あるが、これは Noto Sans JP の `unicode-range` サブセット分割によるもの（正常）

### 3.3 font-family 指定

```css
/* 実サイトの宣言をそのまま */
font-family: "Noto Sans JP", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, sans-serif;
```

**ただし游ゴシックのフォールバックに Medium が入っていない。** Noto Sans JP が落ちた Windows では Regular に当たり、本文が細く出る。正しくは Medium を先に置く:

```css
/* 正しい並び（Windows で Medium を拾わせる） */
font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium",
             游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, sans-serif;
```

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

| 役割 | サイズ | ウェイト | 行間 | 字間 | 実測 |
|------|--------|---------|------|------|------|
| **ヒーローのコピー** | **48px** | **700** | — | **2.4px**（= .05em） | `鰹節への愛情と、誇りを胸に百年。`。**実テキスト。画像ではない** |
| **セクション見出し h3** | **49.92px**（1440px） | 700 | 1.7 | normal | **`3.4667vw` の全域流体**（下表） |
| 中見出し h2 | 24px | 700 | 1.25 | **2.4px**（= **.1em**） | |
| カード見出し | 18px | 700 | 1.44 | 0.9px（= .05em） | 可視 20 要素 |
| ナビ | 14px | 700 | 1.4 | 0.56px（= .04em） | 可視 35 要素 |
| 本文 | 16px | **400** | 1.58 | 0.8px（= .05em） | 読み物のみ 400 |
| 商品名 | 10px | 700 | 1.3 | **-0.6px**（= **-.06em**） | **小さい文字だけ詰める**。可視 13 要素 |
| ユーティリティ | 12px | 500 | — | 1.2px（= .1em） | 可視 75 要素で最多 |
| カテゴリ注記 | 9px | 700 | — | normal | 可視 12 要素 |

**ウェイトは 700 が既定**（可視 106 要素）。400 は本文 80 要素、500 はユーティリティナビ 18 要素。**600 は Cookie バナーの 1 要素のみで、設計には存在しない。**

### 3.5 行間・字間 — 原則は `normal`、例外だけ `em` で当てる

```css
/* body には何も書かない */
letter-spacing: normal;   /* 可視 146 / 205 要素 */
```

**CSS の宣言は全部で 44 箇所しかない:**

| 宣言 | 箇所数 | 実測 px | 用途 |
|---|---|---|---|
| `.05em` | **16** | 18px→0.9px / 48px→2.4px / 16px→0.8px | 見出し・コピー |
| `0` | 15 | — | 明示的に `normal` に戻す |
| `.1em` | 5 | 24px→2.4px / 12px→1.2px | 中見出し・ユーティリティ |
| `.08em` | 2 | 16px→1.28px | 特集バナー |
| **`-0.056em`** | 2 | — | **詰める方向** |
| **`-0.06rem`** | 2 | **-0.6px**（`html` 10px 基準） | **商品名（10px）。サイズ非依存の絶対値** |
| `.07em` / `.04em` | 各 1 | — | |

- **符号が両方向にある。** 見出しは空け（`.05em` / `.1em`）、小さい商品名は詰める（`-0.06rem` / `-0.056em`）
- `-0.06rem` は **`rem` 宣言**なので `html: 10px` を基準にした **-0.6px の絶対値**。フォントサイズを変えても追従しない。**`em` に読み替えない**

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

```css
body { word-break: break-all; }   /* ★6 幅すべてで確認 */
```

- **日本語の禁則処理を無効にする設定。** 行末で熟語・単語の途中でも折り返す
- 結果として、句読点が行頭に来たり、漢字熟語が割れたりする
- **再現するときは、この 1 行を書くかどうかで改行位置が変わる。** 日本語の組版として推奨はできないが、**実サイトの見え方を再現するには必要**

```css
/* 一般的な日本語組版に直すなら */
body { word-break: normal; overflow-wrap: anywhere; }
```

#### 行間

- `body` の `line-height` は **`normal`**（宣言なし）。各ブロックが自分で宣言する
- 最頻値は **1.58**（可視 51 要素）、次いで **1.3**（37 要素）、**1.25**（15 要素）
- CSS の宣言は `1.5` / `1.25` / `1.7` / `1.8` / `1.3` が各 3〜5 箇所と**散らばっており、共通の基準値が無い**
- **`body` が `normal` なので、本文ブロックでは必ず `line-height` を宣言する**（書かないとブラウザ既定の約 1.2 で詰まる）

### 3.7 OpenType 機能

**このサイトは `font-feature-settings` を一切使っていない**（CSS 全文で宣言 **0 件**、可視要素 0）。

- **`palt` も `halt` も足さないこと。** Noto Sans JP の既定の字送りのまま組むのがこのサイトの設計
- 約物の多い商品名（`ヤマキ 『めんつゆ』` `ヤマキ割烹白だし®`）でも詰めない。**詰める代わりに `letter-spacing: -0.06rem` を当てている**

### 3.8 縦書き

該当なし。`writing-mode` が `horizontal-tb` 以外の要素は **2 ページとも 0 要素**。縦組みは使わない。

---

## 4. Component Stylings

### Primary Button（赤の面）

```css
background: #e60012;
color: #000000;            /* ★赤面の上が黒文字（白ではない）*/
font-size: 16px;
font-weight: 400;
line-height: normal;
letter-spacing: normal;
border-radius: 10px;
border: none;
```

> **赤の面に黒い文字を載せるのがこのサイトの実装。** コントラスト比は約 3.1:1 で WCAG AA（4.5:1）を満たさない。**新規実装では白文字（`#ffffff`）にすることを推奨する**が、実サイトの見え方を再現するなら黒のまま。

### Secondary Button（枠線のみ）

```css
background: transparent;
color: #000000;
font-size: 16px;
font-weight: 400;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 8px;
```

### Product Card

```css
background: #ffffff;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px 0px;   /* ★可視 41 要素。このサイトの主役の影 */
```

- カード内の商品名は **10px / weight 700 / letter-spacing -0.6px**

### 角丸の実測

| 値 | 可視要素数 | 用途 |
|---|---|---|
| **8px** | **32** | **商品カード・枠線ボタン（主役）** |
| 50% | 7 | 丸いアイコン |
| 5px | 6 | レシピのサムネイル |
| 10px | 3 | 赤の CTA ボタン |

**24px / 16px の角丸は Cookie バナー由来。実装しない。**

---

## 5. Layout Principles

- ヒーローは**全幅の写真**の上に、**生成りの半透明帯（`rgba(250,246,239,.8)`）**を右半分に敷いてコピーを載せる
- 商品・レシピは**カードのグリッド**。1 枚ずつ 8px の角丸と薄い影で独立させる
- ニュース欄・ブランド一覧は **`#f8f8f8` のベタ面**で区切る

---

## 6. Depth & Elevation

**影は 1 種類をほぼ全部に使う。**

```css
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px 0px;   /* ★可視 41 要素 */
```

- **`0 1px 2px` という極端に浅い影。** カードを紙のように 1mm だけ持ち上げる
- グローバルナビのボタンだけ `rgba(0,0,0,.16) 0 2px 6px`（1 要素）とわずかに深い
- **色は黒 16% で統一**。そのまま写す
- `rgba(0,0,0,.15) 0 0 2px, rgba(0,0,0,.3) 0 2px 10px` は Cookie バナーの影。実装しない

---

## 7. Do's and Don'ts

### Do

- **本文も見出しも純黒 `#000000`** で組む
- **weight 700 を既定にする。** 本文（400）の方が例外
- **字間は `normal` が原則。** 見出しだけ `.05em` / `.1em`、10px の商品名だけ `-0.06rem`
- カードは **`border-radius: 8px` ＋ `0 1px 2px` の浅い影**
- 枠線は **`rgba(0,0,0,.16)`**
- **本文ブロックには必ず `line-height` を宣言する**（`body` が `normal` なので、書かないと行が詰まる）

### Don't

- **`font-feature-settings` を書かない。** このサイトは `palt` も `halt` も使っていない（CSS 全文で 0 件）
- **字間を `em` で一律に配らない。** 既定は `normal`
- **`-0.06rem` を `em` に読み替えない**（`rem` 宣言＝ `html: 10px` 基準の絶対値 -0.6px）
- **影を深くしない。** `0 1px 2px` の浅さがこのサイトの質感
- **ルートを流体にしない。** `html` / `body` は 6 幅すべて固定で、流体なのは**見出しだけ**
- **赤 `#e60012` 以外の差し色を足さない**
- Cookie バナーの書体（`-apple-system` / メイリオ系）を**サイトの書体と取り違えない**

---

## 8. Responsive Behavior

### ルートは完全固定

| 幅 | `html` | `body` | `word-break` |
|---|---|---|---|
| 1440 / 1200 / 834 / 768 / 767 / 375px | **10px**（全幅同一） | **16px**（全幅同一） | `break-all`（全幅同一） |

### 見出しだけが全域流体（`3.4667vw`）

| 幅 | `h3` の `font-size` | 行間（1.7 追従） |
|---|---|---|
| 1440px | **49.92px** | 84.864px |
| 1200px | 41.6px | 70.72px |
| 1024px | 35.4987px | 60.3477px |
| 834px | 28.912px | 49.1504px |
| 768px | 26.624px | 45.2608px |
| 767px | 26.5893px | 45.2019px |
| 375px | **13px**（ちょうど） | 22.1px |

- **式は全幅で `font-size: 3.4667vw` の 1 本**。ブレークポイントによる切り替えが無く、**375px でちょうど 13px に着地する**（375 × 0.034667 = 13.0）。**モバイル設計幅は 375px**
- `line-height: 1.7` は無単位なので自動で追従する
- **ルートが固定なので `rem` では追従しない。** 見出しに `vw` を直接書く必要がある

---

## 9. Agent Prompt Guide

このサイトの見た目でUIを作るときは、次を守る。

1. 書体は **Noto Sans JP**（400 / 500 / 700）。游ゴシックのフォールバックには **Medium を Regular より前**に置く
2. **weight 700 を既定**にする。本文だけ 400
3. 文字色は **純黒 `#000000`**、差し色は **`#e60012` 1 色**だけ
4. **`letter-spacing` は `normal` が既定**。見出し `.05em` / `.1em`、10px の商品名のみ `-0.06rem`
5. **`font-feature-settings` は書かない**（実サイトに 0 件）
6. カードは **8px の角丸 ＋ `rgba(0,0,0,.16) 0 1px 2px`** の浅い影
7. **`html: 10px` / `body: 16px` は固定。見出しだけ `3.4667vw`** で流体にする
8. **本文ブロックに `line-height` を必ず書く**（`body` は `normal`）
9. 実サイトの見え方を再現するなら `body { word-break: break-all }`。**一般的な日本語組版に直すなら `normal` にする**