重要なお知らせ 「東海道・山陽・九州・西九州新幹線への特大荷物のお持ち込みに関するご案内」はこちら
01 / Colors

オレンジが2つ、地色は暖色

ブランドのオレンジは #fc6b01(可視 106 要素)。ヘッダー右上の「企業情報」とヒーロー帯だけやや明るい #f87b22(可視 11 要素)を使う。ページの地色は白ではなく暖色のオフホワイト #f8f4f0。

JR東海オレンジ
#fc6b01
★可視 106 要素。pill ボタン・検索ボックスの面・リンク色
Orange (Header)
#f87b22
可視 11 要素。ヘッダーの「企業情報」・ヒーロー上部の帯
Alert Red
#e70d1e
重要なお知らせのリンク文字(可視 1 要素)
New Red
#cc0000
NEW バッジ(可視 3 要素)。★面ではなく文字色で出す
Text / Surface Dark
#333333
★本文・見出し 可視 84 要素。墨 pill の面にも使う
Background
#f8f4f0
★トップの地色(根拠 body)。下層ページは #ffffff
Surface
#fffcf8
運行状況・ニュース・アクセス検索のカード面(可視 7 要素)
Surface 2
#fff6f0
カテゴリタブの面(可視 3 要素)

#efefef はページの地色ではない。DOM 上は可視 315 要素で最多だが、これは折りたたまれた FAQ ウィジェットの地色でスクリーンショットには写らない。uniqueBackgrounds の上位をそのまま採用しないこと。

body に 0.048em を1回だけ

letter-spacing は body に 0.048em を1回書いて継承させる。実測は 0.864px(18px × 0.048)が 86 要素で最多。子要素で em を再宣言していないので、font-size が変わっても字間の px 値は 0.864px のまま継承される。

111314 151618 2024 38
Page TitleNoto Sans JP / 38px / 400
lh 45px (1.18) / ls 0.096em
重要なお知らせ
Section HeadingNoto Sans JP / 24px / 700
lh 36px (1.50) / ls 継承(0.864px)
ニュースリリース
Heading (fluid)Noto Sans JP / 18.9751px / 500
lh 33.7335px (1.78)
運行状況
Heading 3Noto Sans JP / 20px / 700
lh 30px (1.50)
アクセス検索
Heading 4Noto Sans JP / 18px / 500
lh 27px (1.50)
お客様窓口ご案内
Body ★Noto Sans JP / 18px / 400
lh 32px (1.78) / ls 0.048em
東海道・山陽新幹線に遅れ等の情報はありません。ご利用の際は最新の運行状況をご確認ください。
LabelNoto Sans JP / 16px / 700
lh 28.4444px (1.78)
出発駅
Alert ★Noto Sans JP / 14px / 700
lh 24.8889px (1.78) / ls normal
重要なお知らせ
UtilityNoto Sans JP / 13px / 500
lh 19.5px (1.50) / ls 0.52px
よくあるご質問 お問い合わせ
NoteNoto Sans JP / 13px / 500
lh 22.1px (1.70) / ls 0.312px
最高の粋を結集した新幹線。安全性、安定性、快適性、環境性能を高い次元で両立させています。
CopyrightNoto Sans JP / 11px / 500
lh 13.2px (1.20)
©Central Japan Railway Company

ウェイトは 400 / 500 / 700 / 900 の4本だけ。@font-face をこの4段に分けて宣言し、4本とも loaded。可変版(100 900)は unloaded。既定ウェイトは 500(実測 93 要素)で、400 はほぼ body だけ。
下層ページの h1 が font-weight: 300 を指定しているが、300 は読み込まれていないので実際には 400 が出る。設計意図ほど細くならないので、新規実装では 300 を当てない(このプレビューも 400 で組んである)。

字間の例外は少ない。既定 0.864px(86 要素)のほか、ユーティリティ 0.52px(0.04em・6 要素)、グローバルナビ 0.64px(0.04em・4 要素)、車両紹介のキャプション 0.312px(0.024em・8 要素)、重要なお知らせ の帯だけ normal。下層ページの h1 のみ 0.096em = 既定の2倍に開く。

実サイトの font-family は末尾を "sans-serif" とクォートして書いている。クォートすると「sans-serif という名前のフォント」を探すことになり、総称ファミリとして機能しない。正しくはクォートなしの sans-serif(このプレビューは直してある)。
また Lato / Montserrat が loaded になっているが、可視テキストの font-family 分布には 1 要素も現れない。読み込まれているだけで描画に使われていないので、前提に組まないこと。

サイト本体と外部ウィジェットで書体系統が違う。検索ボックスと FAQ ウィジェットだけ メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", … のレガシースタックで、字間も normal。このスタックは "ヒラギノ角ゴ Pro W3" の中に全角スペースが 2 つ入っていて実在するファミリ名と一致しない。本体側のスタックだけを使うこと。

03 / Components

pill とカードの二系統

ボタンは pill(18 / 21 / 22 / 30px)、カードは 12px、小要素は 4px。ヘッダーの「企業情報/採用情報」は 15px 0 0 15px と 0 15px 15px 0 を並べて1つの pill に見せている。

企業情報採用情報 NEW
運行状況
東海道・山陽新幹線
在来線
ニュースリリース
2026年9月17日商品・サービスNEW【社長会見】EXサービス25周年記念キャンペーンの実施について
2026年9月16日その他「いざいざ奈良」キャンペーン 東大寺編の展開について
2026年9月12日商品・サービス在来線の駅・車内における多言語放送の試行について

影で階層を作らないサイト。box-shadow はトップで rgba(47,48,52,0.05) 0 4px 8px 0 が 1 要素だけ、下層ページは 0 件。カードの区別は暖色の面の階調(地色 #f8f4f0 → カード #fffcf8 → タブ #fff6f0)と角丸で行う。
運行状況カードのように、左端だけ角を落とすカードがある(border-radius: 0 12px 12px 0・6 要素)。

外部ウィジェット側にブラウザ既定のボタン枠(2px outset)が残っている(MENU CLOSE 閉じる)。実サイトの実装漏れなので真似しないこと。

1286px の一本勝負

項目値実測
Container1286px4 要素。このサイト唯一のコンテナ幅
Header Height126px → 90px--header-height / --header-height-compact(自社トークンはこの 2 個だけ)
Gapnormal 8px / normal 40px2 件 / 1 件
Gap(カード)20px 32px / 20px 40px2 件 / 1 件
Breakpointmin-width: 1206px2 件
Breakpointmax-width: 860px / 751px / 330px各 1 件

ブレークポイントの宣言数が極端に少ない。レイアウトは主に流体サイズで作っている(見出しに 18.9751px 16.8668px の半端な値が出るのはそのため)。
字間は px 継承なので、サイズが変わっても字間は変わらない点に注意する。

CSS Custom Properties を数えるときは中身を見ること。トップで 21 個検出されるうち 19 個は --vc-*(カルーセルライブラリの既定値)で自社トークンではない。カルーセルの無い下層ページでは 2 個に減る。