JR西日本（West Japan Railway） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: JR ブルー 1 色と、その反転。 塗りは #0065b1、それ以外は白地に黒文字（#111111）。装飾色を持たず、色が増えるのは「状態」を示すときだけ
• 密度: 高い。トップの最初の 1 画面に、グローバルナビ・運行情報 6 区分・重要なお知らせ・ヒーローが同時に載る。運行状況が最優先という情報設計
• キーワード: JR ブルー、palt グローバル、0.05em 継承、pill、2 世代の同居

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

1. body に 3 つ書いて、あとは全部継承させる。 letter-spacing: 0.05em（= 0.8px）、line-height: 1.7、font-feature-settings: "palt" 1 の 3 つを body, html に 1 回だけ書く。結果、0.8px が可視 205 要素中 155 要素、palt が 749 要素に効いている。子要素で字間を再宣言しないのが実装の構え
2. border-radius は 8 種類あるが、設計上は 2 つしかない。 14px / 18px / 20px / 34px / 62px / 13px / 12px / 9999px は**すべて pill（要素の高さの半分）**で、値が違うのは高さが違うからにすぎない。本物の角丸は 24px のカードだけ
3. 下層ページは 2018 年版の別デザインシステムで、サイズが 16/13 倍に膨らんでいる。 /company/info/ 配下は common.css?date=20180820 を読み、body { font-size: 81.25% }（= 13px）を基準にした .text10〜.text19 という % スケールで組まれている。ところが新デザインの CSS が body を 16px に差し替えたため、p, li, dt, dd, th, td { font-size: 107.692% } が 16 × 1.07692 = 17.2308px で出る。意図は 14px、実装は 17.23px
4. フォーカスリングだけオレンジ。 #ff7600 の solid 2px。サイト中が青なので、フォーカスを青にすると埋もれるという判断。青いサイトを作るときに真似る価値がある

CSS Custom Properties は 0 個（トップ・下層とも total: 0）。トークンは持たず、値はすべて CSS に直接書かれている。

2. Color Palette & Roles

Primary（ブランドカラー）

青が 4 つある。 #0065b1 / #0068b4 / #0068b7 / #0075d3 は目視では区別できない近さで、これは設計ではなく 2 世代の CSS が同居した結果。 新規実装では #0065b1 に統一すること。 既存ページと並べるときだけ、4 つあることを前提にする。

Semantic（意味的な色）

運行情報のステータスは色ではなく SVG アイコンで表す。

• 記号は文字ではなく <img> の SVG。 テキストは区間名（北陸エリア 15px / letter-spacing: 0.75px / #111111）だけで、色を持たない
• Warning Surface (#fff7dd): 重要なお知らせ の帯。border-radius: 0 0 24px 24px で下だけ丸める
• 色覚に依存しない設計。 状態はアイコンの形で分かるようになっており、文字色は常に #111111。この構えをそのまま守ること

カテゴリバッジ

いずれも 12px / 500 / letter-spacing: 0.8px、border-radius: 12px（= pill）。バッジの面は淡い色にして文字は黒のままで、白抜きにしない。

Neutral（ニュートラル）

• Text Primary (#111111): 本文・見出し。トップ 146 / 下層 45 要素で最多。#000000 でも #333333 でもない
• Text on Blue (#ffffff): 塗りボタン・見出し帯の文字（48 / 37 要素）
• Text Legacy (#333333): 下層のパンくずだけ（4 要素）。2018 年版 CSS の名残
• Surface Gray (#f2f2f2): 下層の定義表（th）の面（16 要素）
• Surface Gray Cool (#f2f3f5): 下層のパンくずバー（4 要素）
• Divider (#d6d6d6): グローバルナビの区切り（li::before）
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body。トップ・下層とも同じ）

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP。Google Fonts の可変フォント（wght@100..900）を読み込み、document.fonts で loaded。可視 186 要素（トップ）/ 90 要素（下層）
• 明朝体は使わない
• OS フォントへのフォールバックは ヒラギノ角ゴ ProN → BIZ UDPGothic → メイリオ → Meiryo → sans-serif

3.2 欧文フォント

• Inter。Google Fonts の可変フォント（wght@100..900）、loaded。MOBILITY LIFE SERVICE INFRASTRUCTURE SOLUTIONS などの英字見出し専用（可視 19 要素）
• 本文中の数字・英字は Noto Sans JP の欧文グリフで出る

3.3 font-family 指定

実サイトの CSS（assets/css/common.css）はこうなっている:

css@charset "UTF-8";
body, html {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
               "BIZ UDPGothic", "メイリオ", Meiryo, sans-serif;
  font-size: 62.5%;
  line-height: 1.6;
  font-feature-settings: "palt" 1;
}

実際のバイト列では、和文のフォント名が文字化けしている。 @charset "UTF-8" と書いてあるのに "ヒラギノ角ゴ ProN" と "メイリオ" の部分だけ Shift_JIS のまま配信されており、ブラウザは "�q���M..." という読めない名前として受け取る（computed style にもそのまま出る）。 実害は出ていない。 化けた名前の直後に ASCII の別名（"Hiragino Kaku Gothic ProN" / Meiryo）が置いてあるので、フォールバックはそこで拾われる。だから 10 年気づかれずに残っている。 真似るなら ASCII 名だけで書くこと。 和文名はあってもなくても動くが、エンコーディング事故の種になる。

css/* 正しく書き直したもの（新規実装はこちら） */
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic",
             Meiryo, sans-serif;

/* 欧文見出し */
font-family: Inter, "Helvetica Neue", Arial, Roboto, sans-serif;

もう 1 つの「宣言 ≠ 実装」: 上の CSS は body, html の両方に font-size: 62.5% と line-height: 1.6 を書いているが、実測は html 10px / body 16px / line-height 1.7（27.2px ÷ 16px）。後続のルールが body を上書きしている。数値は上の宣言ではなく、下の表の実測値に従うこと。

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

html は 4 幅（1440 / 1200 / 834 / 375px）すべてで 10px 固定。body も 16px 固定で、流体（vw / clamp）は無い。

ウェイトは 700 / 400 / 500 の 3 段。 可視分布はトップが 700 (115) / 400 (77) / 500 (13)。Noto Sans JP も Inter も可変フォント（100〜900）なので任意の値が出せるが、実際に使っているのは 3 つだけ。

3.5 行間・字間

• 行間は 1.7 を body に書いて継承させる。 16px → 27.2px。可視 130 要素（トップ）/ 49 要素（下層）が 1.70、見出しの 1.71 も同じ系列（端数は px 丸め）
• 例外: 事業領域の説明が 1.60（16 要素）、グローバルナビの一部が 1.51、運行情報の補助リンクが 1.40
• 字間は 0.05em（= body 16px で 0.8px）を body に 1 回書くだけ。 可視 205 要素中 155 要素が 0.8px

これは「px 宣言」ではなく「em 宣言 → px 継承」。 body の 0.05em が 0.8px に計算され、その px 値が子へ降りる。だから 13px のキャプションも 47px のヒーローコピーも同じ 0.8pxになる（サイズに比例しない）。 DESIGN.md を読んだエージェントが 0.05em を各要素に書くと別物になる（47px の見出しなら 2.35px になってしまう）。body に 1 回だけ書くこと。

個別に宣言している例外は 3 つだけ:

cssletter-spacing: 0.75px;  /* 運行情報の区間名（6 要素）15px に対して 0.05em */
letter-spacing: 0.9px;   /* 福知山線のステートメント（3 要素）18px に対して 0.05em */
letter-spacing: 0.6px;   /* コンセプトムービーのキャプション（3 要素）12px に対して 0.05em */
letter-spacing: normal;  /* グローバルナビの第 1 階層（38 要素）— 字間を切っている */

例外の 3 つはどれも「そのサイズでの 0.05em」。 つまり比率としては同じで、px 継承だと揃わない箇所だけ書き直している。比率は常に 0.05em と覚えればよい。

3.6 禁則処理・改行ルール

css/* 実サイトは word-break / overflow-wrap / line-break を body で指定していない。
   見出しの改行は <br> で手で割っている。 */

• word-break: auto-phrase は使っていない。
• JR WEST BUSINESS INFRASTRUCTURE SOLUTIONS のような長い英字見出しは Inter で 1 行に収める前提。折り返しが起きる幅では <br> を入れている
• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

css/* body, html に 1 回だけ */
font-feature-settings: "palt" 1;

• palt をサイト全体に効かせている。 実測 749 要素（トップ）/ 231 要素（下層）。例外なし
• -webkit-font-feature-settings も併記されている（古い WebKit 対応）
• tnum は使っていない。 運行情報の時刻や IR の数値も palt のまま
• palt を外さないこと。 字間 0.05em と palt の組み合わせで今の字面ができている。片方だけ真似ると詰まりすぎる／空きすぎる

3.8 縦書き

css/* 該当なし */

writing-mode は実測 0 件。

4. Component Stylings

Buttons

Primary（塗り）

• Background: #0065b1
• Text: #ffffff
• Font: 16px / 400 / letter-spacing: 0.8px
• Border Radius: 要素の高さの半分（= pill）

Secondary（反転）

• Background: #ffffff
• Text: #0065b1（小）/ #111111（大）
• Border: 1px solid（#0065b1 または薄いグレー）
• Border Radius: Primary と同じ pill
• class 名も対になっている: c-button-small-inverted / c-button-large-inverted

「塗りか反転か」の 2 択しかない。 文字だけのリンクボタンは無い。反転の大サイズは文字が #111111 で、青にしない（本文と同じ扱いにする）。

Tabs

• categoryListTab: 面 #ffffff / 文字 #111111 / 16px / 700 / letter-spacing: normal / border-radius: 0
• 選択状態は下線で示す（面色を変えない）

Badges

• 12px / 500 / #111111、border-radius: 12px（pill）、面は #80c8f0 / #8bdfea

Cards

• Background: #ffffff
• Border Radius: 24px（本サイトで唯一の「角丸らしい角丸」。17 要素）
• 上辺だけ / 下辺だけ丸めるパターンあり:
  • border-radius: 28px 28px 0 0 — 白いブロックが上に重なる（3 要素、影は上向き）
  • border-radius: 0 0 24px 24px — 重要なお知らせ の帯（3 要素、影は下向き）
• topHighlights_listItem_label: 13px / 700 / radius 13px（pill のタグ）

Inputs

実測した 2 ページに通常のテキスト入力欄が存在しない（検索はヘッダーのアイコンから展開する）。下は本サイトの値から導いた推奨。

• Background: #ffffff
• Border: 1px solid #d6d6d6
• Border (focus): outline: 2px solid #ff7600（下記のフォーカス色に合わせる）
• Border Radius: 24px
• Padding: 12px 20px
• Font Size: 16px / letter-spacing は継承（0.8px）

フォーカスリング: outline: #ff7600 solid 2px。

これは意図的な設計。 リンクもボタンも面も #0065b1 の青で埋まっているサイトなので、フォーカスを青にすると見つからない。オレンジに逃がしている。 青を主色にするサイトを作るときは、この手を真似る価値がある。

5. Layout Principles

Spacing Scale

gap の実測は 40px にほぼ一本化されている。 セクション間の余白は padding 側で取っている。

Container

• Max Width: 1500px（実測 5 要素。トップのすべての主要ブロック）
• 下層（2018 年版）はコンテナ指定を持たず、固定幅のテーブルで組まれている
• Padding (horizontal): 20px（モバイル）/ 40px（デスクトップ）

Grid

• Columns: 3（事業領域 モビリティ / 生活サービス / インフラソリューション）/ 6（運行情報の区分）/ 4（ハイライトのタグ）
• Gutter: 40px

Border Radius

border-radius を値でコピーしない。 「ボタンは calc(高さ / 2) で pill、カードは 24px」と覚える。

6. Depth & Elevation

• 影は 1 種類の値（10px 10px / 0.16）を、向きだけ反転して使っている。
• 影の役割は「浮かせる」ではなく「重なりの向きを示す」。 上に重なる要素は上向きの影、下に降りてくる要素は下向きの影。ぼかしと濃さは同じ
• filter: drop-shadow() / text-shadow は 0 件

7. Do's and Don'ts

Do（推奨）

• letter-spacing: 0.05em と line-height: 1.7 と font-feature-settings: "palt" 1 を body に 1 回だけ書く。 子要素では再宣言しない
• ボタンの border-radius は要素の高さの半分（calc(高さ / 2) か、十分大きい 9999px）
• カードは 24px。 片側だけ丸めるときは 28px 28px 0 0 / 0 0 24px 24px
• 状態はアイコンの形で示し、文字色は #111111 のまま。 色覚に依存させない
• フォーカスリングは #ff7600 の 2px。 青いサイトなので青以外を使う
• 本文の文字色は #111111。#000000 にも #333333 にもしない
• 英字の見出し・ラベルは Inter、それ以外は Noto Sans JP。1 つのスタックに混ぜない

Don't（禁止）

• letter-spacing: 0.05em を各要素に書かない。 body で計算された 0.8px が継承される設計で、要素ごとに書くとサイズに比例して字間が開く（47px の見出しなら 2.35px になる）
• palt を外さない。 749 要素に効いている。字間 0.05em とセットで今の字面になっている
• フォント名に和文の文字列を直接書かない。 実サイトは "ヒラギノ角ゴ ProN" "メイリオ" を書いているが、配信時に Shift_JIS のまま出ていて文字化けしている。ASCII 名（"Hiragino Kaku Gothic ProN" / Meiryo）だけで書く
• 青を 4 つに増やさない。 #0068b4 #0068b7 #0075d3 は 2 世代の同居による事故で、新規は #0065b1 に統一する
• border-radius の値をそのままコピーしない（14px 34px 62px はどれも「その要素の高さの半分」でしかない）
• font-weight: 600 や 300 を使わない。 可変フォントなので出せてしまうが、実装は 400 / 500 / 700 の 3 段
• 下層（/company/info/ 配下）の 17.2308px を「本文サイズ」として真似ない。 13px 基準の % スケールに 16px の body が乗った結果で、意図は 14px
• テキストの色に #000000 を使わない

8. Responsive Behavior

Breakpoints

主分岐は 768px。 トップ（新デザイン）は min-width: 1280px でデスクトップを足し、下層（2018 年版）は max-width: 767px でモバイルを削る、という逆向きの書き方が同居している。 下層の CSS は print をほぼすべてのメディアクエリに併記している（print, screen and (min-width: 768px)）。印刷時にデスクトップ幅のレイアウトを使うための実装で、公共インフラのサイトらしい配慮。

ルートサイズ

• html 10px / body 16px / line-height 27.2px / letter-spacing 0.8px は 4 幅すべてで同じ。 流体も SP 縮小も無い
• モバイルで変わるのは見出しだけ（例: トップの 列車運行状況 が 16px → 375px で 17px）
• 下層の p, li, th, td は 4 幅すべてで 17.2308px のまま。モバイルでも縮まない

タッチターゲット

• c-button-small は高さ 28px で WCAG の 44px を下回る。新規実装では 44px 以上を確保すること
• c-button-large は高さ 68px で十分

フォントサイズの調整

• 本文 16px はモバイルでも据え置き
• ヒーローコピー 47px、英字 Display 65px はモバイルで半分程度まで落とす

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #0065b1
Text Color:    #111111
Background:    #ffffff
Surface:       #f2f2f2
Warning Surface: #fff7dd
Focus Ring:    #ff7600（2px solid）
Font (JP): "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif
Font (EN): Inter, "Helvetica Neue", Arial, sans-serif
Body Size: 16px
Line Height: 1.7（body に 1 回）
Letter Spacing: 0.05em（body に 1 回。子では書かない）
font-feature-settings: "palt" 1（body に 1 回）
Button Radius: calc(高さ / 2) — pill
Card Radius: 24px
Shadow: 0 10px 10px rgba(0,0,0,.16)（重なりの向きで ± を反転）
Container: 1500px / Gutter 40px

プロンプト例

JR西日本のデザインシステムに従って、路線の運行状況を 6 区分で並べるパネルを作ってください。

- body に letter-spacing: 0.05em / line-height: 1.7 / font-feature-settings: "palt" 1 を
  1 回だけ書く。子要素では字間を再宣言しない
- フォント: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif
  （和文のフォント名は ASCII 表記で書くこと）
- 各区分は「状態アイコン（SVG）＋ 区間名」の 2 段。区間名は 15px / 400 / #111111
- 状態は色ではなくアイコンの形で示す。文字色は状態によって変えない
- 補助リンク（運行情報トップ など）は 13px / line-height 1.4
- パネル右の「遅延証明書」ボタンは面 #0065b1・白文字・16px、高さ 28px、border-radius 14px
- 「列車走行位置」は白地に #0065b1 の文字と枠の反転ボタン、同寸法
- 重要なお知らせの帯は面 #fff7dd、border-radius 0 0 24px 24px、影 0 10px 10px rgba(0,0,0,.16)
- コンテナ 1500px、gap 40px
- フォーカス時は outline: 2px solid #ff7600