Nikkei (nikkei.com) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 日本経済新聞 電子版（NIKKEI Digital）公式サイト。

1. Visual Theme & Atmosphere

• デザイン方針: 新聞・出版の延長として テキスト密度の極致。装飾を排し、見出しサイズの段階的差別化（27px / 24px / 22px / 20px / 18px / 16px）と font-weight 700 で情報優先順位を視覚化する
• 密度: 高い。1スクリーンに大量の見出し・記事タイトルを並べ、読者がスキャンできる新聞紙面の構造をデジタルで再現
• キーワード: Information-Dense, Text-First, Newspaper Heritage, System Font Stack, Editorial Hierarchy

2. Color Palette & Roles

Color Roles

新聞らしい 重層的なブルー と、明確な購読 CTA オレンジ が共存する独特の配色:

• #003E70（ネイビー）: ログイン・契約者向けの企業色
• #F58700（オレンジ）: 新規購読の "お申し込み" — ターゲットを明確に分けるためログインとは色を変える
• #326691（ダスティブルー）: 一般的なリンク色。新聞らしい落ち着き

State Colors

「LIVE中」表示の #EB1400（コーラルレッド寄りの朱）はピル型 + 16px radius で目立たせる、これもデジタル時代の新聞らしい emergency 設計。

3. Typography Rules

3.1 和文フォント

css/* メインの body 用スタック（驚くべきことに和文フォント明示なし） */
font-family:
  -apple-system,
  "system-ui",
  "Segoe UI",
  Roboto,
  Oxygen,
  ...sans-serif;

特徴: Nikkei のメイン body は 和文フォントを明示しない OS システム UI フォント主体のスタック。日本語は OS 標準（macOS の Hiragino、Windows の 游ゴシック等）に任せる方針。

ただし旧 ヘルプページ等のレガシー領域では伝統的な指定:

cssfont-family:
  "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro",
  "ＭＳ Ｐゴシック",
  ...sans-serif;

3.2 欧文フォント

• -apple-system / system-ui / Segoe UI / Roboto / Oxygen という多 OS のシステムフォント混在 stack
• Web フォントは使わない（パフォーマンス・新聞らしい中立性を重視）

3.3 font-family 指定（まとめ）

css/* メイン nikkei.com */
font-family:
  -apple-system,
  "system-ui",
  "Segoe UI",
  Roboto,
  Oxygen,
  Ubuntu,
  "Helvetica Neue",
  Arial,
  sans-serif;

/* ヘルプページ等のレガシー領域 */
font-family:
  "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro",
  "ＭＳ Ｐゴシック",
  Osaka,
  ...sans-serif;

フォールバックの考え方:

• メインはシステムフォントを最優先 = 各 OS のネイティブな読書体験を尊重
• 和文フォントを明示しないことで、Web フォントロード遅延・FOIT を完全回避
• レガシーページのみ伝統的な指定が残る

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

新聞らしく 多段階の見出しスケール を駆使する。

3.5 行間・字間

• letter-spacing: 全要素 normal — 新聞らしいベタ組徹底
• line-height:
  • 記事本文系: ×1.65（23.1 / 14, 19.8 / 12）— やや広め
  • 見出し: ×1.35〜1.5
  • 大型 hero: ×1.35（37.8 / 28, 36.45 / 27）— 詰め気味
  • 横並びナビ: ×1.0〜1.65

特徴: Nikkei は letter-spacing をデザインツールとして使わない。純粋にシステムフォントのデフォルトメトリクスのみで組む。

3.6 禁則処理・改行ルール

明示的指定なし。ブラウザデフォルトに任せる。

3.7 OpenType / 特殊機能

• font-feature-settings: normal
• palt 不使用

3.8 縦書き

Web 版は横書きのみ。

4. Component Stylings

Buttons

Subscribe CTA

• Background: #F58700（オレンジ）
• Color: #FFFFFF
• Border Radius: 2px
• Font Size: 12px / 700

Login Button

• Background: #003E70（ネイビー）
• Color: #FFFFFF
• Border Radius: 2px
• Font Size: 12px / 700

Feedback CTA

• Background: #0068BC
• Color: #FFFFFF
• Border Radius: 2px
• Font Size: 14px / 400 or 700

Service Nav Button

• Background: #FAFAFA
• Color: #333
• Border Radius: 2px

LIVE Indicator

css.live-pill {
  background: #EB1400;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  line-height: 13px;
  padding: 2px 8px;
  border-radius: 16px;
}

Tab / Section Header

特徴的な装飾: "もっと見る" ボタンに border-radius: 2px 2px 0px 0px（上の角だけ丸い）が使われる。タブ風の表現。

Article Card

• 画像 + 見出し（700）+ 引き出し（400 / #5C5C5C）+ 日付（12px / #757575）
• カード自体に明示的な border は持たず、罫線で区切る新聞紙面風

Header

• Sticky ヘッダー
• ロゴ + ナビ + 検索 + ログイン/購読 CTA
• 細密で情報量の多い設計

5. Layout Principles

Container

• 大規模なグリッドレイアウト
• メイン記事 + サイドバー + フッターの3カラム以上

Grid (Article List)

• 1〜4 カラムの可変グリッド
• 大記事は 1 カラム、小記事は 4 カラム以上に並ぶ

Border Radius

• 全体的に 2px（最小限の角丸） + LIVE ピルの 16px が例外
• タブ風要素は 2px 2px 0px 0px

6. Depth & Elevation

明示的な box-shadow は控えめ。ヘッダーに薄い shadow がある程度で、基本フラット。新聞紙面のように奥行きを使わない。

7. Do's and Don'ts

Do（推奨）

• font-family は OS システム UI フォント主体（-apple-system, system-ui, Segoe UI, Roboto）
• 和文フォントは 明示しない（OS デフォルトに任せる）
• 見出しは 段階的サイズ差（27/24/22/20/18/16）+ font-weight 700 でヒエラルキを表現
• 購読 CTA は オレンジ #F58700、ログインは ネイビー #003E70 でターゲットを色分け
• リンクは落ち着いた #326691（ダスティブルー）
• LIVE 表示は #EB1400 + radius 16px ピル で目立たせる
• letter-spacing は 全要素 normal でベタ組
• 装飾を排し、情報密度 を最優先する

Don't（禁止）

• Web フォントを読み込まない（OS フォント優先）
• letter-spacing をいじらない
• 派手なシャドウ・グラデーションを使わない（新聞らしさを損なう）
• リンク色を多色に分けない（ナビは #003E70、リンクは #326691、購読は #F58700 の3色を厳守）
• 大型バナー的なヒーローを置かない（紙面構造を保つ）
• box-shadow で奥行きを作らない

8. Responsive Behavior

明示的なブレークポイントは抽出データに含まれず。記事密度の高さから、モバイルでは1カラム、タブレット以上で2〜3カラム化が標準的。

Breakpoints（推奨）

9. Agent Prompt Guide

クイックリファレンス

# Brand
Subscribe Orange:   #F58700   ← "お申し込み" CTA
Login Navy:         #003E70   ← "ログイン" CTA
CTA Blue:           #0068BC   ← フィードバック等
Link Blue:          #326691   ← 通常リンク・skip link
LIVE Red:           #EB1400   ← LIVE 表示

# Text
Text Primary:       #333333
Text Sub:           #5C5C5C
Text Caption:       #757575

# Typography
Font:               -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, sans-serif
Body:               16px / 400 / lh 24px (×1.5) / ls normal
Hero Article H2:    27px / 700 / lh 36.45px (×1.35)
Article Lead:       22-24px / 700 / lh ×1.5
Article Standard:   18-20px / 700 / lh ×1.5
Compact List:       16px / 700 / lh 24px (×1.5)
Body Excerpt:       14px / 400 / lh 23.1px (×1.65) / color #5C5C5C
Caption:            12px / 400 / lh 19.8px (×1.65)
letter-spacing:     全 normal（新聞らしいベタ組）

# Components
Subscribe CTA:      bg #F58700 / radius 2px / 12px 700
Login Button:       bg #003E70 / radius 2px / 12px 700
LIVE Pill:          bg #EB1400 / radius 16px / 13px 700 / lh 13px
Tab "もっと見る":   border-radius 2px 2px 0 0

プロンプト例

日経電子版のデザインシステムに従って、ニュース一覧ページを作成してください。

- font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, sans-serif
- 和文フォントは明示しない（OS デフォルトに任せる）
- ヒーロー記事 H2: 27px / 700 / line-height 36.45px (×1.35) / color #333
- 主要記事: 24px / 700 / line-height 36px (×1.5)
- 標準記事: 20px / 700 / line-height 30px (×1.5)
- 引き出し: 14px / 400 / line-height 23.1px (×1.65) / color #5C5C5C
- 購読 CTA: bg #F58700 / color #fff / radius 2px / 12px 700
- ログイン: bg #003E70 / color #fff / radius 2px / 12px 700
- LIVE 表示: bg #EB1400 / color #fff / radius 16px / 13px 700 / lh 13px
- リンク: color #326691（ダスティブルー）
- letter-spacing: 全 normal
- 装飾を排し、情報密度を優先する新聞紙面風レイアウト
- 1スクリーンに大量の見出しを並べ、サイズ差で優先順位を視覚化

新聞デジタル化のリファレンスとして

Nikkei の設計は 「テキストを読ませる UI」のリファレンス として参考価値が高く:

• Web フォントを使わないパフォーマンス最優先
• letter-spacing 0 のベタ組
• 5〜6段階の見出しサイズで紙面構造を再現
• リンク色を機能別に分けるアフォーダンス
• 装飾を徹底的に排した情報優先設計

これらは情報密度が要求される業務系ダッシュボード・社内ツール・ナレッジベース等にも応用可能。