最高のサービスのために

DESIGN.md から抽出したデザイントークンのカタログ。JAL のカラー、フォント、コンポーネントの全値を可視化。computed style 実測値(2026-05-21)に基づく。

国内線を予約する DESIGN.md を読む

01 / Colors

カラーパレット

Brand
JAL Red
#cc0000
ブランド・CTA・アラート
Alert Surface
#fcf1f1
お知らせ・アラート面
Header / Footer
Header BG
#000000
ヘッダー背景・h1
Footer BG
#666666
フッター背景・補助テキスト
Nav Link
#cccccc
ヘッダー内リンク
Text
Text Primary
#333333
本文・見出しテキスト
Text Secondary
#666666
補助・フッターテキスト
Border / Disabled
#bfbfbf
ボーダー・無効状態
Surface & Background
Page Background
#f4f5f6
ページ全体の背景色
Surface White
#ffffff
カード・フォーム・メイン面
Surface Warm
#f2f1ef
ウォーム面
Surface Cool
#f1f1f1
クール面
Overlay
rgba(0,0,0,0.7)
モーダル背景

タイポグラフィ階層

最高のサービスのために — Hero H2
30px / 700 / line-height: 1.5 / letter-spacing: 0.02em / palt: なしヒーローエリア・#ffffff on #000000
あなたへのおすすめ情報 — Section H2
24px / 700 / line-height: 1.5 / letter-spacing: 0.02em / palt: なしセクション見出し
予約管理 — Feature H2
20px / 700 / line-height: 1.2 / letter-spacing: 0.02em / palt: なし機能見出し
カテゴリから探す — H3 Title
19.9px / 700 / line-height: 1.5 / letter-spacing: 0.02em / palt: なしカテゴリ見出し
JALオンライン — H3 Card
18px / 700 / line-height: 1.5 / letter-spacing: 0.02em / palt: なしカード見出し
本文テキスト — 国際線・国内線フライトの予約、JALマイレージバンクの管理、JALパックの申込みなど、お客様のご旅行をサポートするサービスをご提供しています。ABCabc 123
16.8px / 400 / line-height: 1.5 / letter-spacing: 0.02em / palt: なしbody デフォルト
補足テキスト — 搭乗日の前日23時59分まで変更可能です。手数料が発生する場合があります。
14px / 400 / line-height: 1.5 / color: #333333Caption
注記・フッターテキスト — ※ 運賃は諸税・サーチャージを含みます。
12px / 400 / line-height: 1.5 / color: #666666Small / Footer
国内線 | 国際線 | マイレージ — Nav Link (Header)
12px / 700 / line-height: 1.0 / color: #cccccc / bg: #000000ヘッダーナビ

フライト情報と旅のご案内

⚠ 重要なお知らせ:台風接近に伴い、一部フライトのスケジュールに変更が生じる可能性があります。最新情報をご確認ください。

羽田 ー 那覇 国内線のご案内

日本航空(JAL)は、羽田空港と那覇空港を結ぶ国内線を1日最大8便運航しています。早割21・特便割引などの割引運賃もご用意しています。

ご搭乗のながれ

空港には出発時刻の60分前までにお越しください。保安検査場の通過は出発時刻の20分前に締め切りとなります。JALアプリを使うと搭乗券のスキャンがスムーズです。

機内では座席のリクライニング、パーソナルモニターをお楽しみいただけます。WiFiサービス(有料)もご利用いただけます。

手荷物について

国内線の無料手荷物許容量は、クラス Jは50kg、普通席は20kgです。機内持ち込みは1個(10kg以内)が基本となります。サイズの制限(3辺の合計115cm以内)にご注意ください。


ボタンバリエーション

空席照会・予約
Primary Pill
#cc0000 / 13px 40px / r:50px / 700
ログイン
Primary Small Pill
#cc0000 / 8px 16px / r:50px / 12px / 700
国内線
Secondary (Tab)
transparent / border-bottom: red / 700
詳細を見る →
Text Link
#333333 / underline / 700
国内線
国際線
マイレージ
JALパック
タブ — font-size: 16px / weight: 700 / active: border-bottom 3px solid #cc0000

05 / Cards

フライト情報カード

HND OKA ¥12,000 ~

羽田 ー 那覇

所要時間 約2時間30分 / 1日8便

特割 早割21
HND CTS ¥8,900 ~

羽田 ー 新千歳

所要時間 約1時間35分 / 1日10便

セール中 特便割引
HND NRT 国際線乗継

成田 ー ホノルル

所要時間 約7時間45分 / ビジネスクラス好評

JALビジネスクラス

フライト検索フォーム

国内線 空席照会・予約
デフォルト — border: #bfbfbf / radius: 6px
フォーカス — border: #cc0000(JALレッド)
✕ 日付が正しくありません
エラー — border: #cc0000 / shadow
検索する
デフォルト — font-size: 16.8px / padding: 12px
デフォルト

07 / Elevation — フラット基調

Depth & Elevation

Level 0: Flat
shadow: none
カード・ボタン基本
(フラット基調)
Level 1
0 2px 4px rgba(0,0,0,0.1)
ホバー・ドロップダウン
Level 2
0 4px 8px rgba(0,0,0,0.15)
モーダル・ダイアログ
Focus Ring
border: #cc0000
box-shadow: rgba(204,0,0,0.15)
Alert Surface
bg: #fcf1f1
border-left: 4px solid #cc0000
お知らせ・エラー面

レイアウト原則

Spacing Scale
XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
64px
Container Width
Max Width 1200px
Article / Content 680px
Horizontal Padding 16px
Breakpoints
Name Width 説明
Mobile ≤ 767px モバイルレイアウト
Tablet ≤ 1024px タブレットレイアウト
Desktop > 1024px デスクトップレイアウト