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

このファイルは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（ブランドカラー）

濃紺と明るい青は「濃淡」ではなく「役割」。 #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（面）

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 フォントの調達

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 倍で読む。

ウェイトは 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 の倍数で組まれている。

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

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

6. Depth & Elevation

• 影は 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

主分岐は 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