京王電鉄（Keio Corporation） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: html のルートが 10px。 rem がそのまま「px ÷ 10」になる設計。字間は body の 0.4px を全要素に継承させ、palt は使わない
• 密度: 低い。白地に 1280px、影 1 種類（0 4px 24px rgba(0,25,65,.12)）だけでカードを浮かせる
• キーワード: ルート 10px、紺 ＋ マゼンタの2色、palt なし、影は1種類、Oswald の数字

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

1. html { font-size: 10px }。 body も 10px。すべての rem が ×10 で計算される（1.4rem = 14px）。16px 前提で読み替えると全サイズが 1.6 倍ずれる
2. letter-spacing は body の 0.4px を継承（可視 216 / 233 要素）。10px × 0.04em の結果を、14px でも 50px でも 0.4px のまま受け継ぐ。大きい見出しほど相対的に詰まって見えるのがこのサイトの字面
3. font-feature-settings は 0 件。 palt を使っていない。字送りは letter-spacing の継承だけで作る
4. ブランドは紺 #0f3675 ＋ マゼンタ #d6007f の2色。 紺が構造（ナビ・アイコン・見出し）、マゼンタが強調（あなた・タグ・チケットレスサービス）
5. 影は 1 種類しかない。 0 4px 24px rgba(0,25,65,.12) が 123 要素。黒ではなく紺を薄めた影で、ヘッダー・カード・パネルすべてが同じ深さ

CSS Custom Properties は 0 個（トップ・下層とも）。色も余白も生値。再実装では下の表をトークン化して使う。

2. Color Palette & Roles

Primary（ブランドカラー）

色の役割分担が明確。 紺＝構造・信頼（運行情報、ナビ、ボタンの枠）、マゼンタ＝人・生活（ヒーローのコピー中の「あなた」だけ、記事のカテゴリタグ）。マゼンタを面で広く使わない（最大でもタブとボタン1つ分）。

Semantic（意味的な色）

• Cyan (#0175ab): 座席指定列車（京王ライナー）の帯（可視 1 要素）
• Slate (#27455c): 画像上のオーバーレイ（可視 8 要素）

Neutral（ニュートラル）

• Text Primary (#333333): 本文・ナビ。可視 96 要素で最多
• Text Heading (#222222): カード見出し・記事タイトル。可視 34 要素
• Text Muted (#555555): 日付・説明文。可視 13 要素
• Background (#ffffff): ページの地色（pageBackground.resolved / 根拠 viewportTopBySample 2/3）
• Surface Cool (#eff3f6): 固定サイドメニュー（遅延証明書）の面
• Surface Dark (#333333): フッターの面（可視 44 要素）
• Border Light (#cccccc): 区切り線（可視 20 要素）
• Surface Pale Blue (#cddcf2): グローバルナビのホバー面

グラデーション（セクション見出し）

css/* 「暮らす」「おでかけ」などのセクション帯 */
background-image: linear-gradient(-30deg, #f8edf4, #e8f4fb);

マゼンタ寄りの桜色 → 紺寄りの水色。ブランド2色をそれぞれ極端に薄めて -30deg でつないでいる。

外部由来（採用しない）

• #000088: OneTrust（クッキー同意）のボタン。可視 7 要素。クッキー設定 OK 全てのクッキーを受け入れる など。サイトの色ではない
• #3860be: 同 CMP のリンク色 / 検索ウィジェットのアイコン面
• CMP のテキストは 13.008px 0.13008px font-weight: 600 とこのサイトに存在しない値で出る。分布にこの半端な数値が出たら CMP と判断してよい

3. Typography Rules

3.1 和文フォント

• Noto Sans JP 一本（@font-face は 300 / 400 / 500 / 700 の4本。4本とも loaded）
• フォールバックは sans-serif のみ。 OS 和文（ヒラギノ・游ゴシック・メイリオ）を並べていない

font-weight: 100 を 1 要素で指定している（フッターのコピーライト）。@font-face に 100 は無いので、実際には最も近い 300 で描かれる。設計意図ほど細くならない。新規実装で 100 を当てない。

3.2 欧文フォント

• Oswald（@font-face は 300 / 400 / 500 / 700 を宣言しているが、loaded は 400 だけ）
• 用途は TOPICS の見出しと 01 02 … の連番（可視 9 要素）。300 / 500 / 700 を指定しても 400 で出る

3.3 font-family 指定

csshtml { font-size: 10px; }          /* ← rem は px ÷ 10 */

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;                 /* 1.0rem */
  line-height: 1.15;               /* → 11.5px */
  letter-spacing: 0.4px;           /* 子要素はこの px を継承する */
  color: #333333;
}

/* 連番・英字見出し */
font-family: Oswald, sans-serif;   /* 実効ウェイトは 400 のみ */

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

• Web フォント1本 ＋ sans-serif。 Noto Sans JP が落ちると OS 既定に飛ぶ割り切った構成
• Windows の游ゴシック問題は「そもそも游ゴシックを使わない」ことで回避している（収録サイトで初出の解き方）

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

html が 10px なので、CSS 上の rem は「表示 px ÷ 10」。

サイズ分布（トップ）: 16px (83) / 14px (69) / 18px (30) / 15px (12) / 13px (6) / 12px (4) / 17px (4) / 50px (4)

ウェイト分布: 400 (144) / 500 (84) / 700 (2) / 100 (1) → 見出し・ナビ・ラベルは 500、本文と一覧は 400。700 はほぼ使わない（お知らせ の見出し 1 要素のみ）

3.5 行間・字間

• 行間は 1.40 と 1.60 の2値（1.40 が 140 要素 / 1.60 が 84 要素）

  • 1.40 … 見出し・ナビ・カードラベル（1〜2 行で収まるもの）
  • 1.60 … 運行情報・ニュース本文・説明文（読ませるもの）

• body の 1.15 は継承の起点で、可視テキストには使われていない

• 字間は body に 1回だけ:

ガイドライン:

• body に letter-spacing: 0.4px を1回書き、子要素で再宣言しない
• em に読み替えない。 px のまま継承させるのがこのサイトの設計
• palt を足さない（実測 0 件。足すと見出しの字面が変わる）

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• ヒーローのコピーは あなた とあたらしいあしたへ を span で分割して色を変える（改行では分けない）

3.7 OpenType 機能

css/* 使っていない */

• font-feature-settings は 0 件（トップ・下層とも）。palt も tnum も当てていない

3.8 縦書き

該当なし（実測 0 要素）。

4. Component Stylings

Buttons

Outlined（紺枠・白地）— 主力

• Background: #ffffff / Text: #333333
• Border: 1px solid #0f3675 / Border Radius: 8px
• Padding: 20px 45px 20px 35px（右にアイコン分のアキ）
• Label: 16px / weight 500 / letter-spacing 0.4px（ラベルは内側の要素で #0f3675）

Reload（小さい紺枠）

• Border: 1px solid #0f3675 / Border Radius: 8px / Padding: 5px 15px / Font: 12px / 400

Circle（ヒーローの丸ボタン）

• Background: #0f3675 / Text: #ffffff / Border Radius: 50%
• 中のラベルは 16px / 500 の2行組み（京王の / 取り組み）

Tag（記事カテゴリ）

• Background: #ffffff / Text: #d6007f / Border: 1px solid #d6007f
• Border Radius: 36px（pill）/ Padding: 0 15px 1px / Font: 12px / 400

Tab（エリア切替）

• Background: #d6007f / Text: #ffffff
• Border Radius: 12px 12px 0 0（上だけ角丸）/ Padding: 5px 15px / Font: 14px / 400
• 対になるパネルは 0 12px 12px（下だけ角丸）

Cards

• Background: #ffffff / Border Radius: 12px
• Shadow: 0 4px 24px rgba(0,25,65,.12)（サイト唯一の影）
• 見出しは 18〜22px / weight 500 / #222222、説明は 15px / 400 / #555555

Fixed Side Menu（画面右の固定メニュー）

• Background: #eff3f6（通常）/ #0f3675（強調＝京王アプリ）
• Padding: 20px 5px / Font: 10px / 400（縦に積む）

5. Layout Principles

Spacing Scale

Container

• Max Width: 1280px（トップ 15 要素 / 下層 11 要素）
• 記事幅: 810px

Grid

• gap は 0 20px（8 要素） が最多。次いで 0 15px / 10px 8px
• % 指定の gap も併用（0 5% / 0 4% / 0 3% / 0 2%）

6. Depth & Elevation

深さの段差を作らない設計。 浮いているものは全部同じ高さ。新規実装でも段を増やさない。 （0 0 18px rgba(0,0,0,.2) が 1 件あるが、これは CMP のバナー）

7. Do's and Don'ts

Do（推奨）

• html { font-size: 10px } を前提に rem を書く（1.4rem = 14px）
• body に letter-spacing: 0.4px を1回だけ書いて継承させる
• 見出し・ナビ・ラベルは weight 500、本文・一覧は 400
• 行間は 1.4（見出し・ラベル）／ 1.6（読ませる文章） の2値
• 影は 0 4px 24px rgba(0,25,65,.12) の1種類だけ
• 角丸は カード 12px / ボタン 8px / タグ 36px / 丸ボタン 50%
• マゼンタは文字・枠・タブの帯まで。面で広く使わない

Don't（禁止）

• font-feature-settings: "palt" を足さない（実測 0 件）
• font-weight: 100 や Oswald の 300/500/700 を指定しない（読み込まれておらず、意図どおりに出ない）
• 字間を em に読み替えない（0.4px の px 継承が正）
• #000088 を使わない（クッキーバナーの色で、サイトの色ではない）
• 影を2段以上に増やさない
• font-family に游ゴシック・ヒラギノを足さない（このサイトは Noto Sans JP 一本）

8. Responsive Behavior

Breakpoints

961px を主、1200px を副とする2段構え。さらに 349px 未満の小型端末を個別に見ている。

タッチターゲット

• 主力ボタンは padding: 20px 45px 20px 35px で 60px 前後
• 固定サイドメニューは 20px 5px ＋ 縦組みラベル

フォントサイズの調整

• 見出しは 50〜52px → SP では 28〜32px 相当。本文 16px / 一覧 14px は据え置き

9. Agent Prompt Guide

クイックリファレンス

Primary:    #0f3675（紺・構造）
Accent:     #d6007f（マゼンタ・強調）
Text:       #333333 / Heading #222222 / Muted #555555
Background: #ffffff / Surface #eff3f6 / Footer #333333
Font: "Noto Sans JP", sans-serif（数字・英字見出しは Oswald 400）
html { font-size: 10px }  ← rem は px ÷ 10
Body: 16px (1.6rem) / line-height 1.4（本文 1.6）/ letter-spacing 0.4px（body に1回だけ）
font-feature-settings: なし（palt を使わない）
Radius: 12px (card) / 8px (button) / 36px (tag) / 50% (circle)
Shadow: 0 4px 24px rgba(0,25,65,.12) の1種類のみ

プロンプト例

京王電鉄のデザインシステムに従って、路線のお知らせ一覧を作ってください。
- html { font-size: 10px } を前提に rem で書く（1.4rem = 14px）
- font-family は "Noto Sans JP", sans-serif のみ。palt は当てない
- body に letter-spacing: 0.4px を1回だけ書いて継承させる
- 見出しは 22px / weight 500 / line-height 1.4 / #222222
- 一覧の日付と本文は 14px / weight 400 / line-height 1.6 / #555555
- カードは白地・radius 12px・影は 0 4px 24px rgba(0,25,65,.12)（この1種類だけ）
- カテゴリタグは白地・#d6007f の文字と 1px 枠・radius 36px・12px/400
- 「一覧を見る」ボタンは白地・1px solid #0f3675・radius 8px・padding 20px 45px 20px 35px