ブランドは 紺 #0f3675 と マゼンタ #d6007f の2色。紺がナビ・枠・見出しといった構造を受け持ち、マゼンタはヒーローの「あなた」・記事タグ・チケットレスサービスだけに出る。マゼンタを面で広く使わない。
クッキーバナー(OneTrust)の値は混ぜない。#000088 のボタン、13.008px の文字、0.13008px の字間、font-weight: 600 はこのサイトに存在しない値。分布にこの半端な数値が出てきたら CMP と判断してよい。
html { font-size: 10px }。rem がそのまま「px ÷ 10」になる(1.4rem = 14px)。字間は body の 0.4px を可視 216 / 233 要素が継承し、14px でも 50px でも 0.4px のまま。font-feature-settings は 0 件で、palt を使っていない。
ウェイトは 400 と 500 が主。実測 400 (144) / 500 (84) / 700 (2) / 100 (1)。見出し・ナビ・ラベルが 500、本文と一覧が 400。font-weight: 100 は @font-face に無いので、コピーライトは実際には 300 で描かれる。新規実装で 100 を当てない。
行間は 1.40 と 1.60 の2値。1.40 が 140 要素(見出し・ナビ・カードラベル)、1.60 が 84 要素(運行情報・ニュース・説明文)。body の 1.15 は継承の起点で、可視テキストには使われていない。
palt を足さないこと。font-feature-settings は実測 0 件。字送りは letter-spacing: 0.4px の継承だけで作っている。字間を em に読み替えるのも誤り(大きい見出しほど相対的に詰まって見えるのがこのサイトの字面)。
フォールバックが sans-serif 1 つだけ。OS 和文(游ゴシック・ヒラギノ・メイリオ)を並べていない。Windows の游ゴシック問題を「そもそも游ゴシックを使わない」ことで回避している型。
0 4px 24px rgba(0,25,65,.12) が 123 要素。ヘッダーもカードもパネルも固定メニューも全部同じ深さで浮いている。角丸はカード 12px / ボタン 8px / タグ 36px / 丸ボタン 50%。
タブは上だけ角丸、パネルは下だけ角丸。12px 12px 0 0 と 0 12px 12px を組にして「タブが面に刺さっている」形を作る(各 4 要素)。
ボタンの主力は「白地・紺枠・radius 8px」。padding は 20px 45px 20px 35px で右にアイコン分のアキを取る。面で塗った紺のボタンはヒーローの丸ボタン(50%)と固定サイドメニューだけ。
| 項目 | 値 | 実測 |
|---|---|---|
| Root | html { font-size: 10px } | ★rem = px ÷ 10 |
| Container | 1280px | トップ 15 要素 / 下層 11 要素。記事幅は 810px |
| Gap | 0 20px | 8 要素で最多。次いで 0 15px / 10px 8px |
| Gap(%) | 0 5% / 0 4% / 0 3% / 0 2% | %指定の gap も併用 |
| Breakpoint(SP) | max-width: 960.98px | 1123 件で主力 |
| Breakpoint(PC) | min-width: 961px / 1200px | 146 件 / 26 件 |
| Breakpoint(小型) | max-width: 348.98px | 25 件。349px 未満を個別に見ている |
CSS Custom Properties は 0 個。色も余白もすべて生値。再実装ではこのページの :root のようにトークン化して使う。
深さの段差を作らない。box-shadow は 0 4px 24px rgba(0,25,65,.12) の1種類だけ(123 要素)。もう1件ある 0 0 18px rgba(0,0,0,.2) は CMP のバナーで、サイトの実装ではない。