成田21℃/69.8°F お手伝いの必要なお客様よくあるご質問Language: JA
Narita Airport成田国際空港

想いをつなぐ。

日本と世界、街、人、モノ、想い、
「つなぐ」成田空港。

本日のフライトを探す

すべての出発フライトを見る
ホーム > 交通アクセス

交通アクセストップ

01 / Colors

紺が 2 つ、文字は不透明度で弱める

#033b7d は「面と文字の地の色」、#0058aa は「いま押せるもの」で役割が違う。補足テキストは別の hex を作らず、本文色 #081018 の 70% 不透明度で作る。

Narita Navy
#033b7d
ヘッダー帯・フッター・リンク。可視 10 要素
Action Blue
#0058aa
フライト検索の選択タブ専用
Text Primary
#081018
本文。可視 16 / 22 要素。純黒は使わない
Text Muted
rgba(8,16,24,.698)
気温・時刻・補足。可視 14 要素
Background
#f6f8fb
ページ背景(根拠 viewportTopBySample 7/12)
Surface
#ffffff
カード・検索パネルの面

Noto Sans JP 1 本、400 と 700 だけ

可視テキスト 62 / 66 要素のすべてが同じスタック。500 と 600 は 1 要素もない(読み込んでいるのも 400 と 700 の 2 ウェイトだけ)。サイズは 10 / 12 / 14 / 16 / 20 / 32 / 60 の 7 段で、端数が出ない。

10121416203260
Display60px / 400 / lh 1.4
ls .012em = 0.72px
想いをつなぐ。
Heading 132px / 700 / lh 1.4
ls .012em = 0.384px
移動手段別ご案内
Heading 220px / 700 / lh 1.4
ls .012em = 0.24px
電車・バス・車でのアクセス
Body16px / 400 / lh 1.8
ls .012em = 0.192px
成田空港へは、電車・バス・車・レンタカーでお越しいただけます。所要時間はいずれも目安です。最新の運行状況は各公共交通機関にお問い合わせください。
UI / Nav14px / 400 / lh 1.8
ls .012em = 0.168px
最多 21〜27 要素
フライト / レストラン・ショップ / サービス・施設 / 交通アクセス
Caption12px / 400 / lh 1.8
ls .012em = 0.144px
成田 21℃/69.8°F / 2026年10月9日 09:00 現在
03 / Letter Spacing

字間は「各要素が自分で」持つ

body は letter-spacing: normal のまま。ほぼすべての要素が .012em を個別に宣言している。実測の px がサイズに正比例するのがその証拠で、body に 1 回書いて継承させた設計ではない。

正:要素ごとに .012em

32px の見出しは 0.384px、12px の注記は 0.144px。サイズが変わると字間も比例して変わる。375px に縮んでも関係が崩れない。

成田国際空港
成田国際空港 / 気温 21℃

誤:body に em を 1 回

body に .012em と書くと 16px × .012 = 0.192px という絶対値が全子孫に降りる。12px の注記も 60px の見出しも同じ 0.192px になり、小さい字が広く、大きい字が詰まって見える。

成田国際空港
成田国際空港 / 気温 21℃

左右の 12px の行(成田国際空港 / 気温 21℃)を見比べると、右(誤)のほうが字間が広い。縮小したスクリーンショットでは差が見えないので、等倍で確認すること。

面で塗るのは「いま押せるもの」だけ

主ボタンは #0058aa の面。それ以外は枠線だけで作り、角丸の大きさ(5px / 10px)で性格を分ける。

液体物の持ち込み 手荷物 駐車場

ボタンの line-height は 1.4、本文は 1.8。中間の値を作らない。

05 / Cards

影ゼロ。枠と角丸だけで立てる

box-shadow はサイト全体で 0 種。地(#f6f8fb)の上に面(#ffffff)を置き、1px solid の枠と 10px の角丸で浮かせる。

電車

成田エクスプレス・京成スカイライナーで都心から最短 36 分。

バス

東京駅・新宿駅から高速バスが運行しています。

車・レンタカー

駐車場は第1・第2・第3ターミナルにご用意しています。

横罫だけ、縦罫は引かない

th は 12px / 700、td は 16px / 400。背景色も縦罫も使わず、サイズとウェイトの差だけで見出しと値を分ける。

駅名所要時間電話番号
東京駅約 53 分050-3772-3910
新宿駅約 81 分050-3772-3910
横浜駅約 85 分050-3772-3910

所要時間は目安です。詳しくは各公共交通機関にお問い合わせください。

07 / Forms

入力欄は最小の角丸 5px

フォーカスは #0058aa の outline: 2px。プレースホルダは 別のグレーを作らず rgba(8,16,24,.698)。

半角・全角どちらでも検索できます
本日から 7 日先まで指定できます

奥行きは角丸の大小で表す

影が無いので、5px(チップ・入力欄)→ 10px(カード・ボタン)→ 20px(大きな区画)の 3 段で層を作る。

Radius S
5px
チップ・入力欄
Radius M
10px
カード・ボタン
Radius L
20px
検索パネル・大区画
viewport
container 1132px(実測 4 要素)
card / gap 20px

ブレークポイントは min-width: 768px(実測 89 箇所)と min-width: 960px(20 箇所)。834px まで値が動かず、768px を割ってから本文 16px → 12px、惹句 60px → 40px に落ちる。字間は .012em のまま比例して縮む。