ブランドのオレンジは #fc6b01(可視 106 要素)。ヘッダー右上の「企業情報」とヒーロー帯だけやや明るい #f87b22(可視 11 要素)を使う。ページの地色は白ではなく暖色のオフホワイト #f8f4f0。
#efefef はページの地色ではない。DOM 上は可視 315 要素で最多だが、これは折りたたまれた FAQ ウィジェットの地色でスクリーンショットには写らない。uniqueBackgrounds の上位をそのまま採用しないこと。
letter-spacing は body に 0.048em を1回書いて継承させる。実測は 0.864px(18px × 0.048)が 86 要素で最多。子要素で em を再宣言していないので、font-size が変わっても字間の px 値は 0.864px のまま継承される。
ウェイトは 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 つ入っていて実在するファミリ名と一致しない。本体側のスタックだけを使うこと。
ボタンは pill(18 / 21 / 22 / 30px)、カードは 12px、小要素は 4px。ヘッダーの「企業情報/採用情報」は 15px 0 0 15px と 0 15px 15px 0 を並べて1つの pill に見せている。
影で階層を作らないサイト。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 閉じる)。実サイトの実装漏れなので真似しないこと。
| 項目 | 値 | 実測 |
|---|---|---|
| Container | 1286px | 4 要素。このサイト唯一のコンテナ幅 |
| Header Height | 126px → 90px | --header-height / --header-height-compact(自社トークンはこの 2 個だけ) |
| Gap | normal 8px / normal 40px | 2 件 / 1 件 |
| Gap(カード) | 20px 32px / 20px 40px | 2 件 / 1 件 |
| Breakpoint | min-width: 1206px | 2 件 |
| Breakpoint | max-width: 860px / 751px / 330px | 各 1 件 |
ブレークポイントの宣言数が極端に少ない。レイアウトは主に流体サイズで作っている(見出しに 18.9751px 16.8668px の半端な値が出るのはそのため)。
字間は px 継承なので、サイズが変わっても字間は変わらない点に注意する。
CSS Custom Properties を数えるときは中身を見ること。トップで 21 個検出されるうち 19 個は --vc-*(カルーセルライブラリの既定値)で自社トークンではない。カルーセルの無い下層ページでは 2 個に減る。