成田国際空港（Narita International Airport） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-10-09 / 対象: https://www.narita-airport.jp/ja/, /ja/access/

1. Visual Theme & Atmosphere

• デザイン方針: 紺一色のインフラ UI。 彩度のある色は写真だけで、UI は紺・青・白・淡いグレーの 4 値しか使わない。影を 1 つも使わず、角丸と面の濃淡だけで層を作る
• 密度: 中。フライト検索・交通手段といった「探しにくると決まっているもの」を大きなカードで置き、説明文を長く書かない
• キーワード: 紺、Noto Sans JP、影ゼロ、0.012em、5/10/20 の角丸

このサイトの核心は4つある。

1. letter-spacing: 0.012em を、ほぼすべてのテキスト要素が自分で宣言している。 body は normal のままで、継承ではない。実測の px 値がサイズに正比例する——32px→0.384px / 16px→0.192px / 14px→0.168px / 12px→0.144px / 10px→0.12px。どれも割ると 0.012em ちょうど（可視 62〜66 要素のうち 58 要素）。375px まで縮めても 60px→0.72px、40px→0.48px と比例し続ける
2. line-height は 1.8 と 1.4 の 2 値しかない。 本文・ナビ・注記が 1.8（34〜42 要素）、見出しとボタンが 1.4（24〜27 要素）。中間値を作らない
3. box-shadow がサイト全体で 0 種。 カードは #ffffff の面と 1px solid の枠だけで立てる。奥行きは角丸の大小（5 / 10 / 20px）で表す
4. font-weight は 400 と 700 の 2 段だけ（実測 400 が 40〜47 要素、700 が 19〜22 要素）。500・600 は 1 要素もない

font-feature-settings は normal（実測 0 件）。palt は使っていない。 CSS Custom Properties は :root に 1 個だけ（--roboto-font）で、設計の語彙は Tailwind のクラス側にある。「変数が少ない＝設計が無い」ではない点に注意。

2. Color Palette & Roles

Primary（ブランドカラー）

紺が 2 つあるのは役割が違うから。 #033b7d は「面と文字の地の色」、#0058aa は「いま押せるもの」。新規実装でこの 2 つを混ぜない。

Neutral（ニュートラル）

• Text Primary (#081018): 本文・見出し。可視 16〜22 要素。純黒 #000000 は使わない（わずかに青を含んだ黒）
• Text Muted (rgba(8,16,24,.698)): 気温・時刻・補足。可視 14 要素。別の hex ではなく Text Primary の 70% 不透明度で作る
• Text on Dark (#ffffff / rgba(255,255,255,.698)): 紺面の上の文字と、その補助（可視 25 要素 / 7 要素）
• Background (#f6f8fb): ページ背景。pageBackground.resolved = rgb(246,248,251)（根拠 viewportTopBySample 7/12）
• Surface (#ffffff): カード・検索パネルの面
• Border (#081018 の低不透明度 / 1px solid): カードの枠。セカンダリボタンは枠だけで作る

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP。Regular(400) と Bold(700) の 2 ウェイトのみ。実測した全可視テキスト（62 / 66 要素）がこの 1 スタックで、例外が 1 要素もない
• 明朝体: 使わない

3.2 欧文フォント

• Roboto（700 のみ loaded）。--roboto-font という変数が 1 つだけ用意されている
• 数字・アルファベット（気温・時刻・フライト番号）は、特に指定がなければ Noto Sans JP の欧文グリフで出る

3.3 font-family 指定

css/* 本文・UI（既定・これ1本） */
font-family: "Noto Sans JP", "Noto Sans JP Fallback", sans-serif;

/* 欧文を明示したいとき */
font-family: var(--roboto-font);   /* = 'Roboto', 'Roboto Fallback', sans-serif */

"Noto Sans JP Fallback" は手で書くものではない。 Next.js の next/font が、Web フォント読み込み前のレイアウトずれを消すために size-adjust 付きの代替 @font-face を自動生成した名前。自前の CSS に転記しても同じ効果は出ない（対応する @font-face が無いと、ただの存在しないファミリー名になる）。手書きするなら "Noto Sans JP", sans-serif でよい。

3.4 文字サイズ・ウェイト階層

サイズは 10 / 12 / 14 / 16 / 20 / 32 / 60 の 7 段。奇数px・端数は 1 つも出ない（html は 1440 / 1200 / 834 / 375px のいずれでも 16px 固定で、流体ルートではない）。

3.5 行間・字間

• 本文の行間: 1.8（単位なし）。実測で最も多い（34〜42 要素）
• 見出し・ボタンの行間: 1.4
• 字間: 0.012em を各要素に書く。 body は normal のまま

ガイドライン:

• letter-spacing を body に 1 回書いて継承させる設計ではない。 em を body に書くと、計算された px（16px なら 0.192px）がそのまま子に降りて、12px の注記も 60px の見出しも同じ 0.192px になる。このサイトはそうなっていない＝各要素が 0.012em を持っている。再現するときも要素ごとに書く
• line-height は単位なしの比率で書く（1.8 / 1.4）。em や px で書くと絶対値が子に降りて別物になる
• 0.012em は和文としてはごく浅い。「詰めも空けもしない」構えで、ベタ組みに限りなく近い。0.04em 以上に広げると別のサイトになる

3.6 禁則処理・改行ルール

css/* 実サイトが宣言しているのはこれだけ */
word-break: break-all;

• body の実効値は word-break: normal / line-break: auto / overflow-wrap: normal。break-all は長い英数字が出る特定の箇所にだけ当てている
• word-break: auto-phrase は使っていない。日本語の改行位置はブラウザ既定のまま

3.7 OpenType 機能

css/* 実サイトは font-feature-settings: normal。palt は使っていない */

• palt を足さない。 約物を詰めない状態がこのサイトの字面。0.012em の浅い字間と合わせて、わずかに緩い組みになっている

3.8 縦書き

writing-mode は実測 0 件。縦組みを使わない。

4. Component Stylings

Buttons

Primary（フライト検索の選択タブ）

• Background: #0058aa
• Text: #ffffff
• Border Radius: 10px
• Font Size: 16px / Weight 700 / Line Height 1.4 / Letter Spacing 0.012em
• Border: 0

Secondary（到着フライト など非選択状態）

• Background: transparent
• Text: rgba(8,16,24,.698)
• Border Radius: 10px
• Font Size: 16px / Weight 700

Tertiary / Chip（液体物の持ち込み などのキーワード）

• Background: #ffffff
• Text: #081018
• Border: 1px solid
• Border Radius: 5px
• Font Size: 16px / Weight 400 / Line Height 1.8

Inputs

• Background: #ffffff
• Border: 1px solid
• Border Radius: 5px
• Font Size: 16px / Weight 400
• プレースホルダは rgba(8,16,24,.698)

Cards

• Background: #ffffff
• Border: 1px solid
• Border Radius: 10px（大きな区画は 20px）
• Padding: 20px〜32px
• Shadow: なし（6章参照）

5. Layout Principles

Spacing Scale

4 の倍数で揃えるのではなく、6 / 8 / 16 / 20 / 24 / 32 / 48 を使う。20px が中心。

Container

• Max Width: 1132px（実測 4 要素・両ページ共通）
• Padding (horizontal): 20px

Grid

• カードは 3 列（gap: 20px）。1132px の中で割る

6. Depth & Elevation

box-shadow はサイト全体で実測 0 種。 浮かせたい要素は

1. 地（#f6f8fb）の上に面（#ffffff）を置く
2. 1px solid の枠を足す
3. 角丸を大きくする（5px → 10px → 20px）

の 3 つで表現する。影を足すとこのサイトではなくなる。

7. Do's and Don'ts

Do（推奨）

• letter-spacing: 0.012em を要素ごとに書く
• line-height は単位なしで 1.8（本文）/ 1.4（見出し・ボタン）の 2 値だけ使う
• 文字色は #081018、弱めたいときは別の hex ではなく rgba(8,16,24,.698) を使う
• 角丸は 5px / 10px / 20px の 3 段から選ぶ
• フォントサイズは 10 / 12 / 14 / 16 / 20 / 32 / 60 から選ぶ

Don't（禁止）

• box-shadow を足さない（実サイトに 1 つもない）
• font-weight: 500 / 600 を使わない（Noto Sans JP は 400 と 700 しか読み込んでいない。500 を当てると 400 で出るか、ブラウザが合成する）
• letter-spacing を body に 1 回だけ書いて済ませない（px が固定されて全サイズ同じ字間になる）
• line-height を px や em で書かない（絶対値が子に降りる）
• palt を足さない
• "Noto Sans JP Fallback" を手書きの CSS にそのまま転記しない（next/font の生成名で、対応する @font-face が無ければ無効）
• 純黒 #000000・純粋なグレー文字を使わない

8. Responsive Behavior

Breakpoints

min-width 基準のモバイルファースト。1132px を超えても中身は広がらない。

タッチターゲット

• 最小 44px × 44px

フォントサイズの調整

実測（1440px → 375px）:

• 834px まで値が動かない。 変わるのは 768px を割ってから
• 字間は px では固定されず、0.012em のまま比例して縮む。 px に読み替えて実装するとモバイルで広くなりすぎる

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #033b7d   (面・文字の紺)
Action Color:  #0058aa   (押せるものだけ)
Text Color:    #081018   (弱め: rgba(8,16,24,.698))
Background:    #f6f8fb   / Surface: #ffffff
Font: "Noto Sans JP", sans-serif   (400 / 700 のみ)
Body Size: 16px
Line Height: 1.8 (本文) / 1.4 (見出し)
Letter Spacing: 0.012em  ← 要素ごとに書く
Radius: 5 / 10 / 20px
Shadow: なし
Container: 1132px

プロンプト例

成田国際空港のデザインシステムに従って、フライト検索パネルを作成してください。
- フォント: "Noto Sans JP", sans-serif（400 と 700 だけ。500/600 は使わない）
- 選択中のタブ: 背景 #0058aa / 文字 #ffffff / radius 10px / 16px / weight 700
- 非選択のタブ: 背景 transparent / 文字 rgba(8,16,24,.698)
- パネル: 背景 #ffffff / radius 20px / 1px solid の枠 / box-shadow なし
- ページ背景: #f6f8fb
- すべてのテキスト要素に letter-spacing: 0.012em を個別に指定する
- line-height は単位なしで、本文 1.8 / 見出し 1.4
- コンテナ幅 1132px、カード間 gap 20px