関西国際空港（KIX / Kansai International Airport） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 紺とシアンの 2 色で組む、トークン駆動の案内 UI。 色・サイズ・行間・イージングまで :root の変数に載っている（実測 自社トークン 148 個）。角丸は 16px か全丸の二択で、丸みが強い
• 密度: 中〜高。待ち時間・出発便・フロアマップといった「いま知りたい数値」をカードで並べる
• キーワード: KIX ネイビー、シアン、Noto Sans 多言語、色の付いた影、16px の角丸

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

1. 和文 Web フォントを 4 言語ぶん自前でホストし、言語で出し分けている。 notosansjp / notosanstc / notosanssc / notosanskr を /themes/custom/kix_ui/src/fonts/ に置き、html[lang] ごとにスタックを切り替える。日本語ページでは JP の 3 本だけが loaded、TC / SC / KR は unloaded のまま（＝1 バイトも落ちない）
2. letter-spacing を一度も触らない。 可視 134 要素中 134 要素が normal（残る 1 件は Cookie バナー由来）。ベタ組みがこのサイトの字面
3. box-shadow が黒ではなくブランド色で付いている。 rgba(0,191,242,.12)（シアン）と rgba(7,24,92,.12)（紺）の 2 種。黒い影を 1 つも使っていない
4. 主ボタンは背景ではなく「文字そのもの」に 2 色のグラデーションを敷いてある。 linear-gradient(to right, #00bff2 0 50%, #07185c 50% 100%) を background-size: 200% 100% で持ち、-webkit-text-fill-color: transparent で文字に抜く。既定は右半分（紺）が見えていて、ホバーで位置を動かすと文字色がシアンへ拭き変わる（実測 27 要素）
5. font-weight は 400 / 500 / 700 の 3 段。 Noto Sans JP の Regular / Medium / Bold を実ファイルで 3 本持っているので、この 3 つは本物の太さで出る

font-feature-settings は normal（実測 0 件）。palt は使っていない。

2. Color Palette & Roles

Primary（ブランドカラー）

マゼンタ #eb008b（--color-red-500）は変数として定義され、CSS の 2 箇所から参照されているが、可視 0 要素。 トップのヒーローに見える鮮やかなマゼンタ（鳥居・KIX のロゴマーク）は、CSS の色ではなく hero-kix-2-bg.png という画像に焼き込まれた色。マゼンタを UI の色として実装しない。

Semantic（意味的な色）

4 種とも「濃い文字色＋淡い面色」の対で用意されている。 片方だけ使わない。

Neutral（ニュートラル）

ページの地色は白。 pageBackground.resolved は rgb(255,255,255)（根拠 viewportTopBySample 6/12）。 トップは heroCovered: true（div.home-hero-kix_anim-bg の背景画像 2394×580 が上部を覆う）なので、 ヒーローの色をページ背景と取り違えないこと。 セクションの地として #f7f7f8 を敷く。

--color-gray-*（英綴り gray）と --color-grey-*（grey）が両方ある。 gray 系は Tailwind 既定の oklch() のまま、grey 系が KIX の hex。使うのは grey のほう。 同じく --color-cyan-500 / --color-sky-500 / --color-blue-600 / --color-blue-800 も Tailwind 既定の残りで、 ブランド色ではない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP。セルフホストで Regular / Medium(500) / Bold(700) の 3 本
• 多言語: Noto Sans TC（繁体）/ SC（簡体）/ KR（韓国語）を同じ場所に置き、言語ごとにスタックごと差し替える
• 明朝体は使わない

3.2 欧文フォント

• Noto Sans（notosans）。Regular / Medium / Bold の 3 本をセルフホスト。和文スタックの 2 番目に置き、欧文・数字をここで拾う
• アイコンフォント kixicon（iconfont.woff2）
• Roboto が 1 ファイルだけ fonts.gstatic.com から読まれるが、UI の書体ではない

3.3 font-family 指定

css/* 日本語ページ（実サイトの宣言そのまま） */
font-family: notosansjp, notosans, "PingFang SC", "Microsoft YaHei", sans-serif;

/* 繁体字 */ font-family: notosanstc, notosans, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
/* 簡体字 */ font-family: notosanssc, notosans, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
/* 韓国語 */ font-family: notosanskr, notosans, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

実サイトはこうだが、日本語スタックのフォールバックは入れ替わっている。 日本語ページの受け皿が PingFang SC（簡体字中国語）と Microsoft YaHei（簡体字中国語）で、 逆に中国語・韓国語ページの受け皿がヒラギノ角ゴ ProN とメイリオ（日本語）になっている。 Web フォントが落ちてこないあいだ、日本語ページは中国語の字形（直 骨 今 海 などが別形）で表示される。 正しくは次のように書く:

cssfont-family: notosansjp, notosans,
             "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, sans-serif;

css/* @font-face（実サイトの宣言そのまま） */
@font-face {
  font-family: notosansjp;
  src: url("/themes/custom/kix_ui/src/fonts/notosans-fonts/NotoSansJP-Regular.woff")
       format("truetype");          /* ← 実ファイルは .woff。正しくは format("woff") */
}
@font-face { font-family: notosansjp; src: url(".../NotoSansJP-Medium.woff") format("truetype"); font-weight: 500; }
@font-face { font-family: notosansjp; src: url(".../NotoSansJP-Bold.woff")   format("truetype"); font-weight: 700; }

宣言 ≠ 実装が 2 つある。

1. format("truetype") と書いてあるが、実ファイルは .woff。 ブラウザが中身で判定するので現状は動くが、format() は正しくは woff
2. font-display: swap が TC / SC / KR にはあり、JP と欧文の notosans には無い。 日本語ページだけが読み込み中に文字を出さない（FOIT）挙動になる。新規実装では JP にも font-display: swap を付ける

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

html は 1440 / 1200 / 834 / 375px のいずれでも 16px 固定（流体ルートではない）。

3.5 行間・字間

• 本文の行間: 1.4（可視 41〜67 要素で最多）
• 見出しの行間: 1.2（可視 23〜42 要素）
• 長文の行間: 1.75（ボタン内の折り返しなど少数）
• 字間: 全要素 normal。1 箇所も触らない

ガイドライン:

• letter-spacing を書かない。 このサイトの日本語は完全なベタ組みで、それが設計
• line-height は単位なしの比率。トークンにも --leading-label: 1.2 / --leading-normal: 1.5 として比率で入っている
• 本文 1.4 は日本語としては締まったほう。空港の案内という「短い行を速く読む」用途に合わせた値で、長文の記事に流用しない

3.6 禁則処理・改行ルール

css/* 実サイトに宣言があるもの（箇所ごとに使い分け） */
word-break: normal;      /* 既定 */
word-break: keep-all;    /* ことばの途中で折り返さない箇所 */
word-break: break-all;   /* 長い英数字 */
overflow-wrap: break-word;

• body の実効値は word-break: normal / line-break: auto
• word-break: auto-phrase は使っていない

3.7 OpenType 機能

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

• Tailwind の --default-font-feature-settings は normal のまま。palt を足さない

3.8 縦書き

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

4. Component Stylings

Buttons

Primary（btn-kix-default — 文字がグラデーションで拭き変わるボタン）

css.btn-kix-default {
  background-image: linear-gradient(to right,
    #00bff2 0%, #00bff2 50%, #07185c 50%, #07185c 100%);
  background-size: 200% 100%;
  background-position: 100% 0;      /* 既定は右半分＝紺が文字に出る */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .4s var(--ease-kix-outside);
}
.btn-kix-default:hover { background-position: 0 0; }   /* シアンへ拭き変わる */

• 面を塗るのではなく、文字を塗る。 実測 27 要素
• --ease-kix-outside: cubic-bezier(.25, 1, .5, 1)（KIX 専用のイージング）

Solid（面で塗るボタン）

• Background: #07185c / Text: #ffffff / Font Size 16px / Weight 500 / Line Height 1.4
• Border Radius: 全丸（Tailwind v4 の rounded-full は calc(infinity * 1px) = 実測 3.35544e+07px。CSS に書くときは 9999px でよい）

Accent

• Background: #00bff2 / Text: #ffffff / Font Size 20px / Weight 700 / Line Height 1.4

Status Chip（Semantic の対で作る）

• Success: 面 #e2efda / 文字 #006936 / 14px / Weight 500
• Warning: 面 #fff1d6 / 文字 #6e4005
• Error: 面 #ffe3e0 / 文字 #cc1000
• Info: 面 #d9eaff / 文字 #084285

Inputs

• Background: #ffffff / Border: 1px solid #dddddf
• Border Radius: 全丸（検索フォーム）または 8px
• Font Size: 16px / Weight 400

Cards

• Background: #ffffff
• Border Radius: 16px（実測 21〜37 要素で最多）
• 変形: 0 0 16px 16px（上辺だけ角のない帯）
• Shadow: 6章参照

5. Layout Principles

Spacing Scale

8 の倍数で揃っている（8 / 16 / 24 / 32 / 56 / 64）。

Container

• Max Width: 1280px（実測 17〜21 要素。このサイトの基準）
• 広い帯: 1440px
• 読み物の段: 1024px

Grid

• カードは 2〜4 列、gap: 16px または 24px

6. Depth & Elevation

影は黒を使わない。 ブランドの 2 色を 12% の不透明度で敷き、 近い影（1px 3px / 1px 4px）と遠い影（4px 8px 3px）を必ず 2 本重ねる。 rgba(0,0,0,.2) 0 0 18px が 1 件出るが、これは Cookie バナー（Usercentrics）のものでサイトの影ではない。

7. Do's and Don'ts

Do（推奨）

• 色は --color-grey-* / --color-sky-blue-* / --color-blue-500 から取る
• Semantic は文字色と面色の対で使う（#006936 と #e2efda のように）
• 角丸は 16px を既定にし、ボタン・入力欄だけ全丸にする
• 影はブランド色 12%・2 本重ねで作る
• line-height は 1.4（本文）/ 1.2（見出し）の 2 値
• 和文スタックのフォールバックはヒラギノ角ゴ ProN / メイリオに直して書く

Don't（禁止）

• letter-spacing を足さない（実サイトは可視 134 要素すべて normal）
• マゼンタ #eb008b を UI の色として使わない（可視 0 要素。画像の中の色）
• 黒い box-shadow を使わない
• palt を足さない
• --color-gray-*（gray 綴り）・--color-cyan-500 / --color-sky-500 / --color-blue-600 / --color-blue-800 を使わない（Tailwind 既定の残りでブランド色ではない）
• 日本語スタックに PingFang SC / Microsoft YaHei を書かない（実サイトの誤り。中国語字形で出る）
• format("truetype") で .woff を宣言しない
• 純黒 #000000 を本文に使わない（#101114）

8. Responsive Behavior

Breakpoints

Tailwind v4 の既定スケールをそのまま使う（--breakpoint-xl: 80rem = 1280px がトークンにある）。

タッチターゲット

• 最小 44px × 44px

フォントサイズの調整

実測（1440px → 375px）:

• 834px まで値が動かず、375px で見出しだけ縮む。 本文は全幅で同じサイズ
• line-height は比率なので自動で追従する（1.2 のまま）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #07185c   (KIX Navy)
Accent Color:  #00bff2   (KIX Cyan)
Text Color:    #101114   (弱め: #6e7281)
Background:    #f7f7f8   / Surface: #ffffff / Border: #dddddf
Font: notosansjp, notosans, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
      (= Noto Sans JP 400 / 500 / 700)
Body Size: 16px
Line Height: 1.4 (本文) / 1.2 (見出し)
Letter Spacing: normal  ← 触らない
Radius: 16px (カード) / 9999px (ボタン・入力欄)
Shadow: rgba(0,191,242,.12) または rgba(7,24,92,.12) の2本重ね
Container: 1280px

プロンプト例

関西国際空港のデザインシステムに従って、保安検査の待ち時間カードを作成してください。
- フォント: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif（400/500/700）
- カード: 背景 #ffffff / border-radius 16px / gap 24px
- 影: rgba(7,24,92,.12) 0 1px 4px 0, rgba(7,24,92,.12) 0 4px 8px 3px（黒い影は使わない）
- 見出し 20px / weight 700 / line-height 1.2、本文 16px / weight 400 / line-height 1.4
- letter-spacing は指定しない（normal のまま）
- 混雑ステータス: 空いている = 面 #e2efda / 文字 #006936、混雑 = 面 #fff1d6 / 文字 #6e4005
- 詳細ボタン: 背景 #07185c / 文字 #ffffff / border-radius 9999px / 16px / weight 500
- ページ背景 #f7f7f8、コンテナ幅 1280px