# DESIGN.md — ウェルスナビ（WealthNavi）

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

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **青 2 色と pill だけで組む。** 濃紺 `#004d94` と明るい青 `#0984e3` の対が、そのまま「口座開設」と「無料診断」という 2 つの導線に対応している。角は全部 `border-radius: 100px`
- **密度**: 低い。本文は 16〜20px、見出しは 28〜40px と大きく、行間も 1.6。初めて投資に触れる人に読ませる前提の組み
- **キーワード**: 水色、濃紺、pill、Noto Sans JP 単一、字間ゼロ

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

1. **字間に一切手を入れない。** `letter-spacing: normal` がトップで可視 191 要素中 **173 要素**、下層（運用パフォーマンス）では **134 要素中 134 要素＝全部**。さらに **`font-feature-settings` は 0 件**（`palt` を 1 要素も使っていない）、スタックに `YakuHanJP` のような約物サブセットも無い。**Noto Sans JP の既定の字送りをそのまま出す**
2. **青が 2 色あって、それが CTA の主従そのもの。** `#004d94`＝口座開設（申し込み）、`#0984e3`＝無料診断（手前の一歩）。ヘッダー・本文中・フッター前と、**同じ 2 色の対が形を変えて 3 回繰り返される**。色の意味が導線の意味と 1 対 1 になっている
3. **CSS Custom Properties が 0 個。** `root` を `62.5%`（10px）に落としているが `rem` 設計は無く、サイズはすべて px で各所に直接書かれている。**`body` に置いてあるのは `line-height: 1.15` というリセットだけ**で、本文の 1.6 も見出しの 1.4 も要素側で上書きしている

**`body { line-height: 1.15 }` が実装の癖として効いている。** この値は本文用ではなくリセットで、行間を書き忘れた要素（ナビ・ボタン・リストの素のテキスト）に**そのまま残る**。実測でトップ 70 要素 / 下層 81 要素が 1.15 のまま。**真似るなら「1.15 は既定ではなくリセット」と理解した上で、テキストブロックには必ず 1.6 か 1.4 を明示すること。**

---

## 2. Color Palette & Roles

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

| 役割 | 実装値 | 実測 |
|------|--------|------|
| **Navy（主 CTA）** | **`#004d94`** | **面 8 要素 / 文字 7 要素**。`口座開設` ボタン、グローバルナビの見出し文字、下層ページの h1 |
| **Blue（副 CTA・リンク）** | **`#0984e3`** | **面 6 要素 / 文字 5 要素**。`無料診断` ボタン、`ログイン`、本文中のテキストリンク、`STEP 1` ラベル |
| **Sky（ヒーロー面）** | `#4eb0f7` | ヒーローセクションの地色（高さ 476px）。`#8ed2ff` の `::before` が重なる |

> **濃紺と明るい青は「濃淡」ではなく「役割」。** `#004d94` は**お金を預ける操作**、`#0984e3` は**試す・見る操作**。新規に 3 つ目のボタンを作るときは、どちらの性質かを決めてから色を選ぶ。**中間の青を足さない。**

### Semantic（意味的な色）

- **Danger** (`#ee0f3e`): 詐欺注意の告知（可視 2 要素）。本文より 1 段だけ太く（700）して赤にする。背景は白のまま、帯にしない
- **Accent Warm** (`#fb8600`): 体験談カードの `投資経験なし` バッジ面（radius 50px）
- **Accent Teal** (`#0cb7b7`): 同 `投資経験あり` バッジ面。**オレンジとティールは属性の対で、良し悪しの意味は無い**
- **Accent Gold** (`#bca47a`): `預かり資産` `運用者数` の実績ラベル（可視 2 要素）
- **Success**: 専用色を持たない。成功の表現は青（`#0984e3`）に寄せる

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

- **Text Primary** (`#333333`): 本文・見出し。**トップ 92 / 下層 78 要素**で最多。純黒は使わない
- **Text Strong** (`#282828`): カード見出し・`詳しく見る`（14 / 10 要素）。`#333333` よりわずかに濃い**実装上の第 2 の黒**
- **Text Secondary** (`#666666`): 注釈・免責（32 / 15 要素）
- **Text Muted** (`#888888`): 日付・条件の但し書き（1 / 12 要素）
- **Text on Dark** (`#ffffff`): 塗り CTA の文字（24 / 9 要素）
- **Hero Yellow** (`#ffe81a`): ヒーローの「はじめやすく」を 1 文字ずつ色替えしている箇所（12 要素）。**UI 色ではない**
- **Background** (`#ffffff`): ページ背景（`pageBackground.resolved` = `rgb(255,255,255)` / 根拠 `body`。4 幅すべてで同じ）

### Surface（面）

| 面 | 実装値 | 用途 |
|----|--------|------|
| Surface Blue | `#e2f2fd` | 下層（運用パフォーマンス）の主要ブロック。可視面積が最大 |
| Surface Blue Light | `#dff1fc` | セキュリティ・アプリ訴求の面 |
| Surface Gray | `#f0f3f5` | `おすすめコンテンツ` / `長期運用シミュレーション` |
| Surface Gray Cool | `#f1f5f9` | 体験談の年収ラベル |
| Surface Warm | `#ffeeda` | 体験談カード（投資経験なし） |
| Surface Mint | `#cdefef` | 体験談カード（投資経験あり） |
| Surface Sky | `#93ddff` | `ウェルスナビが選ばれる理由` の見出し帯 |

---

## 3. Typography Rules

### 3.1 和文フォント

- **ゴシック体**: **Noto Sans JP 一本**。可視 183 要素（トップ）/ 126 要素（下層）。明朝体は使わない
- OS フォント（游ゴシック・ヒラギノ）へのフォールバックは `sans-serif` のみ。**和文の具体名を 1 つも書いていない**ので、Web フォントが落ちると環境依存になる。真似るなら和文のフォールバックを足すこと（→ 7. Don'ts）

### 3.2 欧文フォント

- **Roboto**: **数字専用**。`STEP 01 / 02 / 03`、`2.4` `3.3` といった倍率の大きい数字だけ（可視 8 要素）。文章には使わない
- 本文中の欧文・数字は **Noto Sans JP の欧文グリフ**で出る

### 3.3 font-family 指定

```css
/* 本文・UI（実サイトの実装） */
font-family: "Noto Sans JP", sans-serif;

/* 強調したい数字のみ */
font-family: Roboto, sans-serif;
```

**Web フォントの調達**

| 書体 | 取得元 | 宣言ウェイト | `document.fonts` | 実測の可視 |
|------|--------|-------------|------------------|-----------|
| Noto Sans JP | Google Fonts **旧 `css?family=` API** | 300 / 400 / 500 / 700 / 900 | **400 / 500 / 700 が `loaded`** | 183 要素 |
| Noto Sans JP (300) | 同上 | — | `unloaded` | **0 要素** |
| Noto Sans JP (900) | 同上 | — | `unloaded` | **0 要素** |
| Roboto | Google Fonts `css2` (`ital,wght@0,500;0,700;1,700`) | 500 / 700 / 700italic | 500 / 700 が `loaded` | 8 要素 |

> **300 と 900 は URL に書いてあるが 1 要素も使われていない。** `document.fonts` でも `unloaded` のままなので実ファイルは取りに行っていないが、**CSS のリクエストは 5 ウェイト分で発行される**。新規実装では **400 / 500 / 700 の 3 本だけ**に絞ってよい。
> なお `css?family=Noto+Sans+JP&display=swap`（ウェイト指定なし）が**もう 1 本重複して読まれている**。これは実装の取りこぼしで、真似る必要はない。

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

`html` / `body` は 4 幅（1440 / 1200 / 834 / 375px）すべてで **10px 固定**。流体（vw / clamp）も SP での縮小も無い。**`rem` は 10 倍で読む。**

| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|------|--------|-------------|----------------|------|
| Display | Noto Sans JP | 40px | 700 | 1.40 (56px) | normal | 下層ページの h1。色は `#004d94` |
| Heading 1 | Noto Sans JP | 36px | 700 | **1.60 / 1.40** | normal | セクション見出し（可視 7 要素） |
| Heading 2 | Noto Sans JP | 34px | 700 | 1.40 | normal | 手順の見出し `5つの質問に答えるだけ` |
| Heading 3 | Noto Sans JP | 28px | 700 | **1.60 / 1.40** | normal | カード見出し（可視 13 要素） |
| Lead | Noto Sans JP | 20px | 400 | 1.60 (32px) | normal | 見出し直下の説明（可視 6 要素） |
| Body | Noto Sans JP | 16px | 400 | 1.60 (25.6px) | normal | 本文（可視 27 要素） |
| UI / Nav ★ | Noto Sans JP | **14px** | **700** | 1.15 (16.1px) | normal | **最多 71 要素**。グローバルナビ、色は `#004d94` |
| Button (header) | Noto Sans JP | 12px | 400 / 500 | 1.00 (12px) | normal | ヘッダーの pill。高さ 36px |
| Button (本文) | Noto Sans JP | 16px (ラベル) / 28px (主語) | 700 | — | normal | 2 行組の大型 CTA |
| Caption | Noto Sans JP | 14px | 400 | 1.60 (22.4px) | normal | 注釈。色 `#888888` |
| Small | Noto Sans JP | 12px | 400 | 1.60 (19.2px) | normal | 免責。色 `#666666` |
| Number | **Roboto** | 45px / 71px | 700 | — | **-1.42px / -1.89px** | 倍率の数字だけ個別に詰める |

**ウェイトは 400 / 500 / 700 の 3 段しかない。** 可視分布はトップが 700 (89) / 400 (88) / 500 (14)、下層が 400 (79) / 700 (40) / 500 (15)。**500 はヘッダーの `無料診断` `ログイン` と下層のラベルだけ**に使う、ごく狭い役。600 / 900 は 1 要素も無い。

### 3.5 行間・字間

- **本文の行間**: **1.60**（16px → 25.6px、20px → 32px、14px → 22.4px）。可視 67 / 41 要素
- **見出しの行間**: **1.40**（28px → 39.2px、34px → 47.6px、40px → 56px）。可視 14 / 7 要素
- **ただし 36px と 28px の見出しには 1.60 のものもある**（36px → 57.6px、28px → 44.8px）。**1.4 と 1.6 が見出しの中で混在している**ので、どちらかに揃えたいなら **1.4 を選ぶ**（枚数が少なく、見出しとして締まる）
- **`body` の 1.15 はリセット。** 10px / 11.5px。行間を書かなかった要素に残り続ける（可視 70 / 81 要素）
- **本文の字間**: **`normal`**。トップ可視 191 要素中 173、下層は 134 要素中 134。**0.04em も入れない**

**例外は 2 種類だけ。**

```css
/* ヒーローのロゴタイプ（1 文字ずつ span で色替えしている箇所） */
letter-spacing: 0.8px;   /* 40px に対して 0.02em 相当。可視 13 要素 */

/* Roboto の大きい数字だけ、個別にネガティブカーニング */
letter-spacing: -1.42px; /* "2" "1" */
letter-spacing: -1.89px; /* "0" */
letter-spacing: -9.94px; /* "." 小数点の前後を詰める */
letter-spacing: 0.63px;  /* "5" */
```

> **この負の値を「設計」と読まないこと。** 1 文字ずつ手で詰めた数字のカーニングで、**再利用できる段ではない**。新しい数字を組むときは `normal` から始める。

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

```css
/* 実サイトは word-break / overflow-wrap / line-break を一切指定していない（body で 0 件）。
   ブラウザ既定（日本語は行末どこでも折り返し、JIS X 4051 の既定禁則）に任せている。 */
```

- **`word-break: auto-phrase` も使っていない。** 改行位置は折り返し任せで、見出しは `<br>` と `<span>` で手で割っている
- 長い英数字（`WealthNavi` `NISA` `MUFG`）が行をはみ出す恐れがある箇所では `overflow-wrap: break-word` を足してよい。実サイトに無いのは、該当する長語が出てこないため
- **行頭禁止**: `）」』】〕〉》、。，．・：；？！`
- **行末禁止**: `（「『【〔〈《`

### 3.7 OpenType 機能

```css
/* 実サイトの実装: 指定しない */
```

- **`font-feature-settings` は可視 0 件。`palt` も `tnum` も使っていない。**
- 金額・利回り・日付が並ぶサイトだが、**数値の桁揃え（`tnum`）すら入れていない**。表組みで数字を縦に揃えたい場合は `font-variant-numeric: tabular-nums` を足す余地がある（実サイトには無い、という前提で追加すること）
- **`palt` を後から足さない。** 字間 `normal` と組み合わせた今の見え方が設計なので、`palt` を入れるとナビと見出しの印象が変わる

### 3.8 縦書き

```css
/* 該当なし */
```

`writing-mode` は実測 0 件。縦組みは 1 箇所も無い。

---

## 4. Component Stylings

### Buttons

**Primary（口座開設 = 申し込み）**

- Background: `#004d94`
- Text: `#ffffff`
- Border Radius: **`100px`**（pill）
- ヘッダー版: Font Size 12px / Weight 400 / 高さ 36px / padding 0（高さで中央寄せ）
- 本文版: 2 行組。ラベル `16px / 700`（例: `お申し込みは最短3分`）＋ 主語 `28px / 700`（`口座開設`）、`padding: 0 80px 0 92px`

**Secondary（無料診断 = 試す）**

- Background: `#0984e3`
- Text: `#ffffff`
- Border Radius: `100px`
- ヘッダー版: Font Size 12px / **Weight 500** / 高さ 36px
- 本文版: Primary と同じ寸法で色だけ違う

**Tertiary（テキストリンク）**

- Background: `transparent`
- Text: `#0984e3`（ヘッダーの `ログイン` は 12px / 500）
- 下線は付けない。本文中のリンク（`こちら`）は `#0984e3` のまま下線なし

> **ボタンは面 2 色 × 寸法 2 種（36px のヘッダー pill / 2 行組の大型 pill）の 4 パターンだけ。** 枠線のみのボタン（outlined）は 1 件も無い。

### Badges

- 体験談の属性バッジ: `12px / 700 / #ffffff`、面 `#fb8600`（投資経験なし）/ `#0cb7b7`（投資経験あり）、**`border-radius: 50px`**
- リスク許容度のタブ: `10px / 500`、`border-radius: 4px`、選択中は面 `#0984e3` に白文字

### Cards

- Background: `#ffffff` または上記 Surface のいずれか
- Border: なし（罫線でカードを囲まない）
- Border Radius: **`24px`**（カード）/ **`56px`**（下層の大型ブロック）
- Shadow: 原則なし（→ 6. Depth & Elevation）
- 上辺だけ丸めるパターンあり: `border-radius: 24px 24px 0px 0px`（体験談カードの画像部）

### Inputs

> **実測した 2 ページに入力欄が存在しない。** ヘッダーの検索も、資料請求フォームも下層にある。下の値は本文 CTA の寸法から導いた**推奨**で、実サイトの計測値ではない。

- Background: `#ffffff`
- Border: 1px solid `#cccccc`
- Border (focus): 2px solid `#0984e3`
- Border Radius: `8px`（本サイトの radius で唯一「角丸らしい角丸」の値）
- Padding: 12px 16px
- Font Size: 16px

**フォーカスリング**: **実サイトは設計していない。** `a` にフォーカスを当てるとブラウザ既定の `rgb(0, 95, 204) auto 1px` が出る。**新規実装では `outline: 2px solid #0984e3; outline-offset: 2px` を明示すること**（→ 7. Don'ts）。

---

## 5. Layout Principles

### Spacing Scale

`gap` の実測から 8 の倍数で組まれている。

| Token | Value | 実測 |
|-------|-------|------|
| XS | 12px | gap 3 件 |
| S | 16px | gap 2 件 |
| M | **24px** | **gap 6 件＝最多**。カードグリッドの既定 |
| L | 40px | gap 1 件 |
| XL | 56px | 行方向の gap |
| XXL | 64px / 72px | セクション内の大きな間 |

### Container

- **Max Width: 1024px**（実測 10 要素で最多）。本文・カードグリッドはここに収まる
- Wide: **1440px**（全幅セクションの上限。2 件）
- Narrow: 820 / 872 / 880px（説明文のカラム）、1010px（フッター）
- Padding (horizontal): 20px（モバイル）/ 40px（デスクトップ）

### Grid

- Columns: 3（`ウェルスナビが選ばれる理由`、手順 STEP 1–3）/ 2（体験談、本文 CTA の対）
- Gutter: **24px**

### Border Radius

| 値 | 件数 | 用途 |
|----|------|------|
| **`100px`** | **10** | **すべてのボタン（pill）** |
| `56px` | 4 | 下層の大型ブロック |
| `50px` | 2 | 属性バッジ |
| `24px` | 3 | カード |
| `8px` | 3 | STEP のカード |
| `4px` | 2 | リスク許容度のタブ |

> **「ボタンは pill、面は 24px、小さいものは 4〜8px」の 3 段。** 迷ったら pill を選ぶ。

---

## 6. Depth & Elevation

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | `none` | **既定。カードもセクションも影を持たない** |
| 1 | `0 5px 10px rgba(0, 0, 0, 0.13)` | **実測で唯一の影（2 要素）**。グローバルナビのドロップダウン |

- **影は 1 種類しか無い。** 階層は**淡い面色**（`#e2f2fd` / `#f0f3f5` / `#ffeeda`）で表す
- `filter: drop-shadow()` / `text-shadow` は 0 件。ヒーローの白文字も影を敷かず、**地色（`#4eb0f7`）とのコントラストだけで成立させている**

---

## 7. Do's and Don'ts

### Do（推奨）

- **`letter-spacing: normal` のまま組む。** このサイトの字面は「詰めない・空けない」で成立している
- **ボタンは `border-radius: 100px`。** 高さが変わっても値は 100px のまま（十分大きいので常に pill になる）
- **CTA を置くときは「申し込み（`#004d94`）」か「試す（`#0984e3`）」かを先に決める。**
- **テキストブロックには `line-height` を必ず明示する**（本文 1.6 / 見出し 1.4）。書かないと `body` の 1.15 が残る
- 階層は影ではなく**淡い青の面**（`#e2f2fd`）で作る
- 本文の文字色は `#333333`。注釈は `#666666`、さらに弱い情報は `#888888`

### Don't（禁止）

- **`palt` を足さない。** 実サイトは 0 件で、入れるとナビと見出しの字面が別物になる
- **`font-weight: 600` や `900` を使わない。** 400 / 500 / 700 の 3 段しか無い。900 は Google Fonts の URL に書いてあるが `unloaded` で、指定しても**合成太字**になる
- **中間の青（`#0066cc` など）を足さない。** 青は 2 色で役割が決まっている
- **`font-family` を `"Noto Sans JP", sans-serif` のまま流用しない。** 実サイトの実装はこうだが、**和文の具体名が 1 つも無い**ので Web フォントが落ちると環境依存になる。正しくは `"Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif` のように和文のフォールバックを足す
- **フォーカスリングをブラウザ既定のままにしない。** 実サイトは `outline: auto` だが、`#0984e3` の 2px で明示すること
- **Roboto の負の `letter-spacing`（`-1.42px` `-9.94px`）を他の数字にコピーしない。** 1 文字ごとの手詰めで、再利用できる値ではない
- テキストの色に `#000000` を使わない（本サイトは `#333333`）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 実測の出現回数 |
|------|-------|---------------|
| Small Phone | ≤ 343px | 8 件（小型端末のはみ出し対策） |
| Mobile | ≤ 768px | 14 件 |
| Tablet | ≥ 769px / ≥ 828px | 12 / 13 件 |
| **Desktop** | **≥ 1024px** | **98 件＝主分岐** |
| Wide 調整 | ≤ 1200px ほか | 2 件 |

> **主分岐は `min-width: 1024px`。** モバイルファーストで書かれていて、デスクトップの指定を `min-width` で足していく構造。`max-width: 343px` の 8 件は iPhone SE 幅でのはみ出し対策。

### ルートサイズ

- **`html` / `body` は 4 幅すべてで 10px / `line-height: 11.5px` / `letter-spacing: normal` のまま。** 流体（vw / clamp）も SP での縮小も**無い**
- 見出し（h1 20px / h2 15px のセマンティック要素）も 4 幅で変化しない。**サイズの切り替えはセクションごとの CSS クラス側で行っている**

### タッチターゲット

- ヘッダーの pill ボタンは**高さ 36px**。**WCAG の 44px を下回る**ので、新規実装では 44px 以上を確保すること
- 本文中の大型 CTA は 2 行組で十分な高さがある

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

- デスクトップ 36px の見出しは、モバイルでは 24〜28px 相当に落とす（実サイトも `max-width: 768px` のブロックで個別に縮めている）
- 本文 16px はモバイルでも 16px のまま下げない

---

## 9. Agent Prompt Guide

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

```
Primary Color (申し込み): #004d94
Primary Color (試す):     #0984e3
Text Color:               #333333
Text Secondary:           #666666
Background:               #ffffff
Surface:                  #e2f2fd
Font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif
Body Size: 16px
Line Height: 1.6（本文）/ 1.4（見出し）
Letter Spacing: normal（絶対に変えない）
Button Radius: 100px
Card Radius: 24px
Shadow: none（唯一の影は 0 5px 10px rgba(0,0,0,.13)）
Container: 1024px
```

### プロンプト例

```
ウェルスナビのデザインシステムに従って、資産運用プランの比較カードを 3 枚作ってください。

- フォント: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif
- letter-spacing は normal のまま。palt も足さない
- 本文 16px / line-height 1.6、カード見出し 28px / 700 / line-height 1.4
- ウェイトは 400・500・700 だけ使う（600 / 900 は使わない）
- カードは border-radius 24px、罫線なし、影なし。面は #e2f2fd
- 各カードの下に CTA を 1 つずつ:
  申し込み系は #004d94、試す系は #0984e3、どちらも border-radius 100px の白文字
- 文字色は #333333、注釈は #666666
- コンテナ幅 1024px、カード間の gap は 24px
- フォーカス時は outline: 2px solid #0984e3; outline-offset: 2px
```