近畿日本鉄道（Kintetsu Railway） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 太字を使わない。 ウェイトは 400 と 500 の2段だけで、階層はサイズと色で作る。字間は body に 0.04em を1回書いて継承させ、palt を全面に当てる
• 密度: 低い。白地に 1280px のコンテナ、20px 角丸のカードと 900px（pill）のボタン
• キーワード: 400/500 の2段だけ、palt 全面、0.04em の継承、紺青の影、CI ブルー一色

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

1. font-weight は 400（114 要素）と 500（42 要素）しかない。700 は 1 要素も無い。 @font-face も Noto Sans JP の 400 と 500 の2本だけが loaded。見出しを太字にすると別物になる
2. letter-spacing は body に 0.04em を1回。 実測は 0.64px（16px × 0.04）が 147/156 要素。font-size が 14px でも 44px でも 0.64px のまま継承される。「サイズ × 0.04em」と読み替えて再実装しない
3. font-feature-settings: "palt" が 846 要素（トップ）／ 699 要素（下層）。全面適用
4. CSS Custom Properties は 0 個。 色も余白も生値で書かれている。トークンが無いこと自体が設計の実態なので、再実装では下の色表をトークン化して使う
5. 影に色が付いている。 黒ではなく rgba(5, 48, 81, α)（紺）、しかも 5px 8px 30px と X 方向に 5px ずらす。透明度だけを 0.08 / 0.1 / 0.35 と変えて3段にしている

2. Color Palette & Roles

Primary（ブランドカラー）

ブランド色は 1 色。 ナビゲーションの面、pill ボタンの面、リンク文字、アイコンがすべて #0068b7。黄色は「特急券を買う」という単一の動線にしか出てこないので、他の CTA に流用しない。

Semantic（意味的な色）

• Info Blue (#2891e1): 遅延証明書 タイルの面（運行情報バーの中で唯一明度が高い青）
• Pale Blue (#c2e0f6): 列車走行位置 タイルの面
• Steel Blue (#6094bb): デジタルきっぷ タイルの面
• Brown (#755735): 沿線まちづくりセクションの本文色（可視 1 要素）

運行情報バーは5つのタイルで色を変えている（#0068b7 / #c2e0f6 / #2891e1 / #f8b500 / #6094bb）。機能ごとに色を割り当てるのがこのサイトの流儀。

Neutral（ニュートラル）

• Text Primary (#222222): 見出し・本文。可視 52 要素
• Text Secondary (#444444): 下層リンク・小見出し。可視 14 要素
• Text Muted (#666666): 日付。可視 37 要素
• Text Footer (#888888): フッターのユーティリティリンク。可視 6 要素
• Background (#ffffff): ページの地色（pageBackground.resolved / 根拠 viewportTopBySample 3/3）
• Surface Blue 1 (#f2f8ff): 電車に乗る セクションの面
• Surface Blue 2 (#f8fbff): カードの面
• Surface Blue 3 (#deeffc): ヒーロー下の帯
• Surface Gray Blue (#edf2f8): お知らせ・ニュースリリースのセクション
• Border (#ccd2d6): 検索・お知らせ pill の枠

地色は白、セクションの面は青みのオフホワイト 4 種（#f2f8ff / #f8fbff / #deeffc / #edf2f8）。グレーの面を使わないのがこのサイトの特徴。

3. Typography Rules

3.1 和文フォント

• Noto Sans JP（@font-face は 400 と 500 の2本だけ。どちらも loaded）
• フォールバックは 游ゴシック体 → 游ゴシック → ヒラギノ角ゴ ProN → Hiragino Sans → Verdana → メイリオ
• slick（カルーセルのアイコンフォント）は status: error。トップのアイコン欠けはこれが原因で、本文の描画には影響しない

@font-face に 700 が無い。 CSS 側でも 700 を指定していないので合成太字は起きていないが、新規実装で font-weight: 700 を書くとブラウザの合成太字になり、サイトの印象が変わる。

3.2 欧文フォント

• 専用の欧文フォントを読み込んでいない。 数字・英字も Noto Sans JP のグリフで組む
• スタック中の Verdana は和文フォントが無い環境向けの保険

3.3 font-family 指定

cssbody {
  font-family: "Noto Sans JP", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic",
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", ヒラギノ角ゴシック,
               "Hiragino Sans", Verdana, メイリオ, Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;          /* → 25.6px */
  letter-spacing: 0.04em;    /* → 0.64px。子要素はこの px を継承する */
}

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

• 和文優先・Web フォント先頭。 Noto Sans JP が来なければ OS の游ゴシック → ヒラギノ → メイリオ
• 156 要素すべてがこの 1 スタック。ページ内に別系統のフォントが無い（外部ウィジェットの混入も無い）

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

html { font-size: 16px }。

サイズ分布（トップ）: 14px (50) / 16px (44) / 15px (11) / 18px (10) / 20px (6) / 26px (6) / 13px (6) / 44px (5)

ウェイト分布: 400 (114) / 500 (42)。700 は 0

階層は「サイズ ＋ 色」で作る。 見出しは 44px でも 400 のまま。太らせるのは 18〜20px のカードラベルだけ（500）。

3.5 行間・字間

• 行間は 1.60 と 1.30 の2値（トップ: 1.60 が 103 要素 / 1.30 が 43 要素）
  • 1.60 … 本文・カードラベル・セクション見出し
  • 1.30 … ニュース一覧・ナビ・リード文（行数を稼ぎたい一覧系）
• 字間は body に 1回だけ:

ガイドライン:

• body に letter-spacing: 0.04em と書き、子要素で再宣言しない
• 一覧・ナビは line-height: 1.3、読ませる文章は 1.6

3.6 禁則処理・改行ルール

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

• ニュースの見出しは line-height: 1.3 で 2〜3 行に折り返す前提

3.7 OpenType 機能

cssfont-feature-settings: "palt";   /* 846 要素（トップ）／ 699 要素（下層） */

• 全面適用。 見出しだけでなく本文・ナビ・フッターまで palt が効いている
• palt ＋ 0.04em の組み合わせが字送りの正体。片方だけでは再現できない

3.8 縦書き

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

4. Component Stylings

Buttons

Primary（青の pill）

• Background: #0068b7 / Text: #ffffff
• Border Radius: 900px（実装は 9999px ではなく 900px）
• Font: 16px / weight 500 / letter-spacing 0.64px
• Padding: 9px 25px 6px（下より上を 3px 多く取る＝和文のベースライン補正）

Outlined（白地・青枠 pill）

• Background: #ffffff / Text: #0068b7
• Border: 2px solid #0068b7 / Border Radius: 900px
• Font: 16px / weight 500 / Padding: 18px 40px

Accent（特急券＝黄色 pill）

• Background: #f8b500 / Text: #222222
• Border Radius: 900px / Font: 18px / weight 500
• Shadow: 5px 8px 30px rgba(4, 65, 102, .12)

Tile（運行情報バー）

• Background: 機能ごとに #0068b7 / #c2e0f6 / #2891e1 / #f8b500 / #6094bb
• Border Radius: 5px / Padding: 14px 15px / Font: 14〜16px / weight 400〜500

Note（お知らせ pill）

• Background: #ffffff / Border: 1px solid #ccd2d6 / Border Radius: 900px
• Padding: 15px 15px 15px 40px（左にアイコン分のアキ）/ Font: 15px / 500

Cards

• Background: #ffffff / Border: 4px solid #ffffff / Border Radius: 20px
• Padding: 35px 30px 38px
• Shadow: 5px 8px 30px rgba(5, 48, 81, .08)

Links

• 文字色は本文色のまま（#222222 / #444444）、下線は padding-bottom: 1px の境界で表現
• アイコン・矢印だけ #0068b7

5. Layout Principles

Spacing Scale

Container

• Max Width: 1280px（トップ 13 要素 / 下層 14 要素）
• モバイル向けの内側コンテナ: 345px

Grid

• gap を使っていない（実測 0 件）。余白は margin / padding で作っている

6. Depth & Elevation

影はすべて 5px 8px 30px。X に 5px ずらす。色は紺（rgba(5,48,81, α)）。

黒い影を使わない。 rgba(0,0,0,…) は 1 件も無い。

7. Do's and Don'ts

Do（推奨）

• ウェイトは 400 と 500 だけを使う。 強調はサイズと色で作る
• body に letter-spacing: 0.04em を1回だけ書く（子要素で再宣言しない）
• font-feature-settings: "palt" を全体に当てる
• 行間は読ませる文章 1.6 / 一覧 1.3 の2値に寄せる
• 影は紺 rgba(5,48,81,α) の 5px 8px 30px、濃さだけ変える
• ボタンは pill（900px）、カードは 20px、タイルは 5px の3段で角丸を使い分ける

Don't（禁止）

• font-weight: 700 を使わない（@font-face に無く、合成太字になる）
• 黄色 #f8b500 を一般の CTA に使わない（特急券の動線専用）
• 黒い影（rgba(0,0,0,…)）を使わない
• グレーの面（#f5f5f5 等）を使わない。面は青みのオフホワイトから選ぶ
• 字間を「サイズ × 0.04em」で計算し直さない（px の継承が正）

8. Responsive Behavior

Breakpoints

951px の単一ブレークポイント設計。print を PC 側のクエリに含めている（印刷時に PC レイアウトで出す）。

タッチターゲット

• pill ボタンは padding: 18px 40px で 56px 前後、運行情報タイルは 14px 15px ＋ 行送りで 44px 以上

フォントサイズの調整

• 見出しは 44px → SP では 26〜28px 相当。本文 16px・一覧 14px は据え置き

9. Agent Prompt Guide

クイックリファレンス

Primary:    #0068b7
Accent:     #f8b500（特急券の動線のみ）
Text:       #222222 / Secondary #444444 / Muted #666666
Background: #ffffff / Surface #f2f8ff, #f8fbff, #deeffc, #edf2f8
Font: "Noto Sans JP", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", Verdana, メイリオ, sans-serif
Body: 16px / line-height 1.6 / letter-spacing 0.04em（body に1回だけ）
font-weight: 400 と 500 のみ（700 は使わない）
font-feature-settings: "palt"
Radius: 900px (button) / 20px (card) / 5px (tile)
Shadow: 5px 8px 30px rgba(5,48,81,.08 | .1 | .35)

プロンプト例

近鉄のデザインシステムに従って、駅情報の検索カードを作ってください。
- font-family は上記スタック、body に letter-spacing: 0.04em を1回だけ書いて継承させる
- font-feature-settings: "palt" を全体に当てる
- 見出しは 26px / weight 400 / line-height 1.3（太字にしない）
- ラベルは 18px / weight 500
- カードは白地・radius 20px・border 4px solid #ffffff・影は 5px 8px 30px rgba(5,48,81,.08)
- 検索ボタンは #0068b7 の面・白文字・radius 900px・16px/500・padding 18px 40px
- 補助リンクは #666666、アイコンだけ #0068b7