# DESIGN.md — ダイニー（dinii）

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

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: オレンジ1色と9段のグレースケールで組む飲食店向け SaaS。角丸 4px の小さい面を大量に並べ、影をほとんど使わない。見出しは太く詰めて「殴る」
- **密度**: 高い。可視テキストはトップ 511 要素・下層 414 要素。本文 12px の注記が最多（114 要素）という、情報量で押す構成
- **キーワード**: オレンジ、0.04em、ベタな角丸4px、影なし、9段グレー

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

1. **`letter-spacing: 0.04em` を「要素ごとに」当てている。** `body` は `normal` なのに、実測の字間は **12px→0.48px / 14px→0.56px / 15px→0.6px / 16px→0.64px / 18px→0.72px / 20px→0.8px / 24px→0.96px / 11px→0.44px** と**すべて font-size の 4%**。サイズに比例して px が変わる＝**継承ではなく各要素が `em` を持っている**（下記 3.5）
2. **行間は `1.50` の一本槍。** トップは **420 / 511 要素**、下層は **336 / 414 要素**が 1.50。日本語サイトとしては詰まった値を、ほぼ全要素で揃えている
3. **ヒーロー見出しに `font-weight: 900` を当てているが、読み込んでいる Noto Sans JP は可変フォントの `400..700`。** `店舗が増えても、経営の目が届く。` の 900 と、キャンペーン帯の 900（計 2 要素）、`800`（9 要素）は**いずれもレンジ外で、実際には 700 相当にクランプされて描画される**
4. **影が実質ゼロ。** トップで `rgba(0,0,0,0.05) 0 4px 12px` が **1 要素だけ**、下層は **0 種**。段差は影ではなく**地色（`#F7FAFC` / `#F2F7FF` / 白）の切り替え**で作る

**`font-feature-settings: "palt"` は 1 要素も無く、CSS 全文の `palt` 出現も 0 回。** 縦組みも 0 件。

**サイトは WordPress 製**（CSS が `wp-content/themes/service-website/`）。CSS Custom Properties は 83 個あるが、**自社トークンは 23 個**で、残り 60 個は WordPress / Gutenberg（49）と WordPress admin（11）の既定値。**`--wp--preset--*` を自社の色として採用しないこと。**

---

## 2. Color Palette & Roles

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

| 役割 | 実装値 | 変数 | 実測 |
|------|--------|------|------|
| **dinii Orange** | **`#FF7500`** | `--color-orange` | **面 10 要素・文字 19 要素**。`ダイニーの解決策` の帯、番号 `1.` `2.` `3.`、下層の強調語 |
| Orange Light | `#FF8C00` | — | 下層の見出し面 **8 要素**（`売上の最大化` 等）と番号 `01` `02` `03` |
| **CTA Red（グラデ）** | **`linear-gradient(#F15D96, #FF3D70 23.56%, #FF0047 42.31%, #D70228)`** | — | **`お問い合わせ` ボタン専用・3 要素**。ブランド色ではなく CTA 専用 |
| CTA Orange（グラデ） | `linear-gradient(181deg, #FBA75C 0%, #FF841B 37%, #FF7500 68%, #E9730F 100%)` | — | 下層の `お問い合わせ` **2 要素** |
| Attention | `#FF0046` | `--color-attention` | `NEW` ラベルの文字、注意喚起 |

> **CTA は単色ではなくグラデーション。** 面を `#FF7500` のベタで塗るのは**セクション帯**で、**ボタンは4段のグラデ**。この使い分けを守ると実サイトの印象になる。

### Service Accent（サービス別の識別色・宣言はあるが可視 2 要素ずつ）

| 変数 | 値 | 用途 |
|------|----|------|
| `--color-yellow` | `#F9AA00` | サービスアイコン |
| `--color-green` | `#00BE1E` | サービスアイコン |
| `--color-purple` | `#9600D2` | サービスアイコン |
| `--color-blue` | `#0019EB` | サービスアイコン（**可視 4 要素**） |
| `--color-emerald` | `#008200` | サービスアイコン |
| `--color-management` | `#2E8BFF` | 経営管理（**可視 2 要素**） |
| `--color-shukyaku` | `#E93D80` | 集客（**可視 2 要素**） |
| `--color-system` | `#245EF2` | システム系の表示 |

> 9 サービスを色で見分けさせる設計。**面積は小さく、アイコンとラベルにしか使わない。**

### Neutral（9 段グレースケール）

| 変数 | 値 | 実測 |
|------|----|------|
| `--color-black` | **`#282828`** | **本文・見出し。可視 139 要素（トップ）/ 86 要素（下層）** |
| `--color-s9` | `#3F4042` | **面として 52 要素（トップ最多）**。事例カードの `顧客インタビュー` 帯 |
| `--color-s8` | `#57595C` | — |
| `--color-s7` | **`#6F7175`** | **文字色として 163 要素（トップ）/ 159 要素（下層）で最多**。フッターリンク・補助テキスト |
| `--color-s6` | `#888A8F` | — |
| `--color-s5` | `#A0A3A8` | — |
| `--color-s4` | `#B8BBC2` | — |
| `--color-s3` | `#D0D4DB` | 罫線 |
| `--color-s2` | `#E9EDF5` | 淡い罫線・面 |
| `--color-s1` | **`#F2F7FF`** | **ヒーローの地色（可視 15 要素）。青みのある最淡色** |
| `--color-s0` | **`#F7FAFC`** | **セクションの地色（可視 3 要素だが面積が大きい）** |
| `--color-bluegray` | **`#56698F`** | **リンク色・`NEW` ラベルの面（26 要素）**。青系のリンクをこの色で出す |
| `--color-white` | `#FFFFFF` | 文字 90 要素・面 |

- **Background**: ヒーローは **`#F2F7FF`**、下層は **`#F7FAFC`**（`pageBackground.resolved` はトップ `rgb(242,247,255)` / 下層 `rgb(247,250,252)`。どちらも `viewportTopBySample` 根拠）
- **`body` の `background-color` は `rgba(0,0,0,0)`**（透明）。地色はセクション側で塗る設計なので、**`body` に白を書かず、セクションで `#F7FAFC` / `#FFFFFF` を切り替える**
- Q&A の `Q.` ラベル: `#172D57`（8–9 要素）

---

## 3. Typography Rules

### 3.1 和文フォント

- **ゴシック体（唯一）**: **Noto Sans JP**（Google Fonts・**可変フォント `wght@400..700`**）
- 明朝体は使わない

### 3.2 欧文フォント

- **サンセリフ（本文の欧文）**: **Noto Sans**（Google Fonts・可変 `wght@400..700`）。**和文より先に置かれている**
- **サンセリフ（見出し・番号）**: **Poppins**（Google Fonts・500 / 600 / 700）。`Benefits` `Function` `Support System`、番号 `01` `02` `03`（トップ 24 要素 / 下層 18 要素）
- **数字（キャンペーン）**: `DIN 2014`（**2 要素のみ**。`40万円` の数字）。`@font-face` を持たないため**環境に無ければ落ちる**

> **`Poppins` の 600 は `@font-face` が `unloaded` のまま**（500 と 700 は `loaded`）。**600 を指定しないこと。**

### 3.3 font-family 指定

```css
/* 本文・UI（既定）— 実サイトの宣言そのまま */
font-family: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial,
             "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
             メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;

/* 欧文見出し・番号 */
font-family: Poppins, sans-serif;
```

**フォールバックの考え方**:
- **欧文優先の二層**。`Noto Sans`（欧文）→ `Noto Sans JP`（和文）の順で、数字と英字を Noto Sans に寄せる
- **フォールバックが長い。** Web フォントが落ちたときのために ヒラギノ → メイリオ → ＭＳ Ｐゴシック まで積んである。**`ＭＳ Ｐゴシック` は Windows の旧環境向けで、現行環境では到達しない**。新規実装では省いてよい
- 実測は **トップ 483 / 511 要素・下層 396 / 414 要素**がこの1スタック。**書体の使い分けをほぼしない設計**

> **`body` の computed value は `"Hiragino Kaku Gothic ProN"` 1 つだけ**に見えるが、これは**宣言ではなくブラウザ既定**（フォールバックが書かれていない＝CSS が `body` に `font-family` を与えていない）。**実体は上のスタックが 483 要素に当たっている。** `body` の値を見て「ヒラギノのサイト」と読まないこと。

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

| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|------|--------|-------------|----------------|------|
| **Hero Heading（PC）** | Noto Sans JP | **70px** | **900 →実際は 700** | **1.25** (87.5px) | **2.1px（0.03em）** | `店舗が増えても、経営の目が届く。` **字間だけ 0.03em と例外** |
| Hero Heading（SP） | 同上 | **36px** | **700** | 1.25 (45px) | 1.44px (0.04em) | 375px 時。**PC とは別の要素**（`__spTitle`） |
| Section Heading | 同上 | **32px** | 700 | 1.40 (44.8px) | **1.28px** (0.04em) | `店舗数が増えるたびに…` |
| Section Heading (SP) | 同上 | 24px | 700 | 1.40 (33.6px) | 0.96px | 375px 時 |
| Lead | 同上 | 20px | 700 | 1.50 | **0.8px** (0.04em) | `❶ コストを下げる` |
| Eyebrow (EN) | Poppins | 20px | 800 | 1.50 | 0.8px | `Benefits` `Function` |
| Card Heading | Noto Sans JP | 18px | 700 | 1.40 | **0.72px** (0.04em) | 機能名・事例タイトル |
| **Body** | 同上 | **16px** | 400 | **1.50** (24px) | **0.64px** (0.04em) | **本文** |
| Body Long | 同上 | 16px | 400 | **1.80** | 0.64px | 長文の説明（12 要素） |
| Nav / Button | 同上 | **14px** | 700 | 1.50 (21px) | **0.56px** (0.04em) | グローバルナビ・CTA |
| Service Label | 同上 | 15px | 700 | 1.50 | 0.6px | メガメニューのサービス名 |
| **Caption** | 同上 | **12px** | 400 | 1.50 (18px) | **0.48px** (0.04em) | **注記・タグ。実測で最多（114 要素）** |
| Micro | 同上 | 11px | 400 | 1.50 | 0.44px | フッターのサービス名（52 要素） |
| Number (EN) | Poppins | 60px | 800 | 1.00 | — | 下層の `01` `02` `03` |

> **サイズは 11 / 12 / 14 / 15 / 16 / 18 / 20 / 24 / 32 の 9 段。** 奇数サイズ（11 / 15）を実際に使っているのが特徴。

### 3.5 行間・字間

#### 字間 — `0.04em` を要素ごとに当てる

実測した `letter-spacing` の px 値は、**すべて font-size × 0.04**：

| font-size | letter-spacing | 件数（トップ） |
|-----------|----------------|--------------|
| 11px | 0.44px | 52 |
| 12px | **0.48px** | **112（最多）** |
| 14px | 0.56px | 84 |
| 15px | 0.6px | 18 |
| 16px | 0.64px | 35 |
| 18px | 0.72px | 60 |
| 20px | 0.8px | 59 |
| 24px | 0.96px | 30 |
| 32px | 1.28px | — |

> **`body` の `letter-spacing` は `normal`。** つまり **`0.04em` は継承ではなく、要素ごとに書かれている**。
> **唯一の例外がヒーロー見出し**で、70px に対して **2.1px ＝ `0.03em`** と**他より詰めている**（大きい字ほど字間が目立つための調整）。SP 版（36px）は 1.44px ＝ 0.04em に戻る。
> **これを `body` に 1 回書く実装に置き換えてはいけない。** `em` を `body` に書くと **body の font-size（16px）× 0.04 = 0.64px が全サイズに固定継承**され、12px の注記が相対的に空きすぎる。**実サイトはサイズに比例させている。**
> 例外は数字（`3,000` `2,000`）の **`normal`（13 要素）**。数字だけ字間を足さない。

#### 行間 — 1.50 で統一

| 値 | 件数（トップ / 下層） | 用途 |
|----|---------------------|------|
| **1.50** | **420 / 336** | **既定。本文・ナビ・ラベルほぼ全部** |
| 1.00 | 35 / 44 | 1行で収まるラベル |
| 1.40 | 27 / 24 | 見出し |
| **1.80** | 12 / 9 | **長文の説明段落だけ広げる** |
| 1.65 | 11 / — | 図中のキャプション |
| 1.25 | 1 | ヒーロー見出し |

**ガイドライン**:
- **行間は 1.50 を既定にする。** 見出しは 1.40 に詰め、**長い説明文だけ 1.80 に広げる**
- **字間は `0.04em` を要素に書く**（`body` に書かない）。数字には足さない

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

```css
/* 実測: body の既定値 */
word-break: normal;
overflow-wrap: normal;
line-break: auto;
```

- `line-break` の指定は無し（`auto`）。`word-break: auto-phrase` も**不使用**（CSS 全文で 0 回）
- CSS 全文の `word-break` 宣言は **1 回**だけ。**改行制御をほとんど CSS に委ねていない**
- 代わりに **HTML 側で改行位置を決めている**（見出しの `店舗が増えても、` / `経営の目が届く。` は実測でも 2 行に分かれたテキストノード）

### 3.7 OpenType 機能

```css
/* このサイトは palt を使わない */
font-feature-settings: normal;
```

- **`palt` は 1 要素も無く、CSS 全文にも 0 回**。字詰めは `letter-spacing` だけで作る

### 3.8 縦書き

該当なし（`writing-mode: vertical-rl` は 0 件）。

---

## 4. Component Stylings

### Buttons

**Primary（CTA・グラデーション）**
- Background: `linear-gradient(#F15D96, #FF3D70 23.56%, #FF0047 42.31%, #D70228)`
- Text: `#FFFFFF`
- Border Radius: **4px**
- Font Size: 14px / Weight **700** / Letter Spacing **0.56px**
- Line Height: 1.50

**Secondary（白地・枠）**
- Background: `#FFFFFF`
- Text: `#FF0046`（または `#282828`）
- Border Radius: **4px**
- Font Size: 14–18px / Weight 700 / Letter Spacing 0.04em

**Section CTA（オレンジのベタ面）**
- Background: `#FF7500`
- Text: `#FFFFFF`
- Border Radius: 4px / Font Size 16px / Weight 700

**Dark（ヘッダー右端）**
- Background: `#282828` / Text `#FFFFFF` / Radius 4px / 14px / Weight 700

### Badges

- **`NEW`**: Background `#56698F`、Text `#FFFFFF`、Radius **2.71px**、小サイズ
- **業種タグ（`#居酒屋` `#1~5店舗`）**: 12px / Weight 400 / Letter Spacing 0.48px、Radius 2px

### Cards

- Background: `#FFFFFF`
- Border Radius: **8px**（説明カード 29 要素 / Q&A 17 要素）
- Shadow: **原則なし**（トップで `rgba(0,0,0,0.05) 0 4px 12px` が 1 要素のみ、下層は 0 種）
- 段差は**地色の切り替え**（`#F7FAFC` ↔ `#FFFFFF` ↔ `#F2F7FF`）で作る

### Radius の分布

| 値 | 件数（トップ） | 用途 |
|----|--------------|------|
| **4px** | **165** | **ボタン・小さい面。既定** |
| 8px | 29 | カード |
| 50% | 26 | 円形アイコン |
| 2px | 24 | タグ |

> **角丸は 4px が圧倒的。** 迷ったら 4px。

---

## 5. Layout Principles

### Spacing Scale（gap の実測）

| Token | Value | 実測件数 |
|-------|-------|---------|
| XS | **10px**（`normal 10px` ＝ 列方向のみ） | 37 / 34 |
| S | **12px** | 17 / 18 |
| M | **24px** | 4 / 3 |
| L | 32px | 2 |
| XL | 40px | 8（下層） |
| XXL | 52px | 3 |

### Container

- **Max Width: 1152px**（トップ 7 回・下層 **15 回**で最多）
- 併用: **1000px**（7 回）、1120px、1360px
- カード: 312px / calc(50% - 12px)

### Grid

- カードは 2〜3 列。gap は 10px または 12px と**狭い**

---

## 6. Depth & Elevation

| Level | Shadow | 用途 | 実測 |
|-------|--------|------|------|
| **0** | **`none`** | **ほぼすべての要素** | トップ 510 / 511、下層 414 / 414 |
| 1 | `rgba(0,0,0,0.05) 0 4px 12px` | キャンペーン帯 | **1 要素のみ** |

> **このサイトは影で階層を作らない。** 影を足すと別物になる。**面（白 / `#F7FAFC` / `#F2F7FF`）と罫線（`#D0D4DB` / `#E9EDF5`）で段を作る。**

---

## 7. Do's and Don'ts

### Do（推奨）

- `letter-spacing: 0.04em` を**要素ごとに**書く（`body` には書かない）
- 行間は **1.50** を既定に、見出し 1.40、長文 1.80
- 角丸は **4px**（ボタン・小面）／ **8px**（カード）
- 地色は **`#F7FAFC`**（セクション）／ **`#F2F7FF`**（ヒーロー）／ 白を切り替える
- 文字色は **`#282828`**（本文）／ **`#6F7175`**（補助）／ **`#56698F`**（リンク）
- `お問い合わせ` ボタンは**グラデーション**にする

### Don't（禁止）

- **`font-weight: 800` / `900` を書かない。** 可変フォントのレンジが `400..700` なので 700 にクランプされる（実サイトのヒーロー見出しがそれ）
- **`Poppins` の 600 を使わない**（`unloaded`）
- **影を足さない。** 段差は地色と罫線で作る
- **`palt` を足さない**
- `body` に `letter-spacing: 0.04em` を書かない（12px の注記が空きすぎる）
- 数字（価格・店舗数）に字間を足さない（実サイトは `normal`）
- `--wp--preset--*` の色を自社トークンとして扱わない

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 実測件数（トップ / 下層） |
|------|-------|------------------------|
| **Mobile** | **≤ 768px** | **213 / 255** |
| **Tablet** | **≤ 1024px** | **90 / 110** |
| Desktop | ≥ 1025px | 5 / 15 |
| Wide | ≤ 1140px / ≤ 1200px | 3 / 4 |

> **`max-width` の宣言が圧倒的に多い（デスクトップ基準で下へ上書きする設計）。** モバイルファーストではない。

### ルートは固定

- **`html` / `body` は 4 幅（1440 / 1200 / 834 / 375px）すべて 16px 固定**。`rem` 換算は常に 16px 基準
- **見出しだけメディアクエリで切り替わる**: セクション見出し 32px（1025px 以上）→ **375px で 24px**。字間も 1.28px → 0.96px と **0.04em のまま追従する**
- **ヒーロー見出しは PC と SP で別の要素を出し分けている**（`h1.TopHeroMid__title` = 70px / weight 900 と、`h1.TopHeroMid__spTitle` = 36px / weight 700）。**同じ要素をリサイズしているのではない**ので、文言を変えるときは 2 箇所直す必要がある

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG基準）

---

## 9. Agent Prompt Guide

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

```
Primary Color: #FF7500
CTA: linear-gradient(#F15D96, #FF3D70 23.56%, #FF0047 42.31%, #D70228)
Text Color: #282828 / 補助 #6F7175 / リンク #56698F
Background: #F7FAFC（セクション）/ #F2F7FF（ヒーロー）/ #FFFFFF
Font: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif
Body Size: 16px
Line Height: 1.5
Letter Spacing: 0.04em（要素ごとに書く）
Radius: 4px（ボタン）/ 8px（カード）
Shadow: なし
Container: 1152px
font-weight: 400 と 700 のみ
```

### プロンプト例

```
ダイニーのデザインシステムに従って、導入事例の一覧カードを3枚作成してください。
- フォント: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif
- 本文 16px / line-height 1.5 / letter-spacing 0.04em（要素ごとに指定）
- カードのタイトル: 18px / weight 700 / letter-spacing 0.72px
- タグ（#居酒屋 など）: 12px / weight 400 / letter-spacing 0.48px
- カード: 背景 #FFFFFF、角丸 8px、影なし。セクションの地色は #F7FAFC
- カード上部の帯: 背景 #3F4042、白文字 12px で「顧客インタビュー」
- 末尾の CTA ボタン: グラデーション linear-gradient(#F15D96, #FF3D70 23.56%, #FF0047 42.31%, #D70228)、白文字 14px / weight 700、角丸 4px
- font-weight は 400 と 700 だけ使う（800/900 は禁止）
- palt は使わない。コンテナ幅 1152px、カード間の gap は 12px
```