運行情報 [09:03] 京王線・井の頭線は平常通り運転しています。
あなたとあたらしいあしたへ
京王の
取り組み
01 / Colors

紺が構造、マゼンタが人

ブランドは 紺 #0f3675 と マゼンタ #d6007f の2色。紺がナビ・枠・見出しといった構造を受け持ち、マゼンタはヒーローの「あなた」・記事タグ・チケットレスサービスだけに出る。マゼンタを面で広く使わない。

京王ネイビー
#0f3675
★背景 26 要素・文字 9 要素。ナビ/丸ボタン/h1/アイコン
京王マゼンタ
#d6007f
★背景 6 要素・文字 3 要素。強調だけに使う
Text Primary
#333333
★本文・ナビ(可視 96 要素で最多)。フッターの面にも使う
Text Heading
#222222
カード見出し・記事タイトル(可視 34 要素)
Surface Cool
#eff3f6
画面右の固定サイドメニューの面
Section Gradient
-30deg, #f8edf4 → #e8f4fb
ブランド2色をそれぞれ薄めてつないだ帯
Cyan
#0175ab
座席指定列車(京王ライナー)の帯
(採用しない)CMP
#000088
★OneTrust のクッキーバナー(可視 7 要素)。サイトの色ではない

クッキーバナー(OneTrust)の値は混ぜない。#000088 のボタン、13.008px の文字、0.13008px の字間、font-weight: 600 はこのサイトに存在しない値。分布にこの半端な数値が出てきたら CMP と判断してよい。

TYPOGRAPHY

ルートが 10px、字間は 0.4px の継承

html { font-size: 10px }。rem がそのまま「px ÷ 10」になる(1.4rem = 14px)。字間は body の 0.4px を可視 216 / 233 要素が継承し、14px でも 50px でも 0.4px のまま。font-feature-settings は 0 件で、palt を使っていない。

101213 141618 224050
Hero / h1 ★Noto Sans JP / 52px (5.2rem) / 500
lh 72.8px (1.40) / ls 0.4px
あなたとあたらしいあしたへ
Section HeadingNoto Sans JP / 50px (5.0rem) / 500
lh 70px (1.40)
電車に乗る
English HeadingOswald / 28px / 400
★loaded は 400 だけ
TOPICS 01
Card Label (L)Noto Sans JP / 22px (2.2rem) / 500
lh 30.8px (1.40)
駅・時刻表・路線図
Card Label ★Noto Sans JP / 18px (1.8rem) / 500
lh 25.2px (1.40)
きっぷ・定期・PASMO・タッチ決済
Nav / Body ★Noto Sans JP / 16px (1.6rem) / 500
lh 22.4px (1.40)・可視 83 要素で最多
暮らす おでかけ 京王の取り組み
List / Info ★Noto Sans JP / 14px (1.4rem) / 400
lh 22.4px (1.60)・可視 69 要素
[09:03] 京王線・井の頭線は平常通り運転しています。振替輸送は実施しておりません。
SubNoto Sans JP / 15px (1.5rem) / 400
lh 1.60
沿線遊園地利用券や他社線乗車券がセットになった、おとくなきっぷをご案内します。
UtilityNoto Sans JP / 13px (1.3rem) / 400
よくあるご質問/お問合せ 採用情報
CopyrightNoto Sans JP / 10px / 100 →(実効 300)
lh 11.5px (1.15)
Copyright(C) Keio Corporation All Rights Reserved.

ウェイトは 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 の游ゴシック問題を「そもそも游ゴシックを使わない」ことで回避している型。

03 / Components

影は1種類しかない

0 4px 24px rgba(0,25,65,.12) が 123 要素。ヘッダーもカードもパネルも固定メニューも全部同じ深さで浮いている。角丸はカード 12px / ボタン 8px / タグ 36px / 丸ボタン 50%。

生活 バス・タクシー 京王アプリ遅延証明書
Takao Area
高尾エリア — 季節を問わず楽しめる高尾山と、その麓のまちをご紹介します。
駅・時刻表・路線図
各駅の時刻表、構内図、バリアフリー設備をご案内します。
京王ライナー / Mt.TAKAO号
WEBサイト上で事前に予約できる有料座席指定列車です。
京王トレインポイント
京王の鉄道乗車ポイントサービスをご覧いただけます。

タブは上だけ角丸、パネルは下だけ角丸。12px 12px 0 0 と 0 12px 12px を組にして「タブが面に刺さっている」形を作る(各 4 要素)。

ボタンの主力は「白地・紺枠・radius 8px」。padding は 20px 45px 20px 35px で右にアイコン分のアキを取る。面で塗った紺のボタンはヒーローの丸ボタン(50%)と固定サイドメニューだけ。

961px を主、1200px を副

項目値実測
Roothtml { font-size: 10px }★rem = px ÷ 10
Container1280pxトップ 15 要素 / 下層 11 要素。記事幅は 810px
Gap0 20px8 要素で最多。次いで 0 15px / 10px 8px
Gap(%)0 5% / 0 4% / 0 3% / 0 2%%指定の gap も併用
Breakpoint(SP)max-width: 960.98px1123 件で主力
Breakpoint(PC)min-width: 961px / 1200px146 件 / 26 件
Breakpoint(小型)max-width: 348.98px25 件。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 のバナーで、サイトの実装ではない。