あなたの旅が、動きだす

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

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

01 / Colors

カラーパレット

Brand
ANA Blue
#073190
ブランド・CTA・ブランドページBG
ANA Dark Navy
#00146e
アコーディオン見出し・リンク
ANA Gold
#d4c493
SFC・プレミアムステータス
ANA Yellow
#ffca00
ブランドページアクセント
Notice Blue
#ccd4ea
お知らせバナー・非アクティブタブ
Text
Text Primary
#333333
本文・見出しテキスト
Text Secondary
#666666
補助テキスト
Text White
#ffffff
ダーク面上のテキスト
Surface & Background
Page Background
#f1f1f1
ページ全体の背景色
Surface White
#ffffff
カード・フォーム・ヘッダー面
Dark Section
#333333
ダークセクション・フッター
Border
Border Default
#c7c7c7
入力欄の枠・区切り線
Border Focus
#073190
フォーカスリング

タイポグラフィ階層

あなたの旅が、動きだす — Hero H2
44px / 600 / line-height: 1.5 / letter-spacing: normal / palt: なしヒーローエリア・#ffffff on #073190
国内線フライト情報 — Section H2
28px / 600 / line-height: 1.3 / letter-spacing: normal / palt: なしセクション見出し
よくあるご質問 — Accordion H2
18px / 700 / color: #00146e / letter-spacing: normalアコーディオン見出し
手荷物のご案内 — H3
24px / 600 / line-height: 1.3 / letter-spacing: normalサブ見出し
搭乗者情報 — Form Label H5
16px / 600 / line-height: 1.5 / letter-spacing: normalフォームラベル
本文テキスト — ANA は東京を拠点に、国内線50路線以上、国際線40路線以上を運航する日本最大の航空会社です。スターアライアンスの主要メンバーとして、世界190か国以上の都市へのネットワークを提供しています。ABCabc 123
14px / 400 / line-height: 1.5 / letter-spacing: normal / palt: なしbody デフォルト
※ 運賃はサーチャージ・諸税を含みます。座席クラスにより受託手荷物の許容量が異なります。
10px / 600 / letter-spacing: normalForm Annotation

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

お知らせ:国際線の機内サービスがリニューアルしました。新しい機内食メニューと座席で、より快適な空の旅をお楽しみください。

羽田 ー 新千歳 国内線のご案内

ANA は羽田空港と新千歳空港を結ぶ国内線を毎日多数運航しています。旅割やANA SUPER VALUE 等のおトクな運賃もご用意。ANAマイレージクラブ会員なら搭乗のたびにマイルが貯まります。

ご出発までの流れ

空港には出発時刻の60分前までにお越しください。国内線の保安検査場通過締め切りは出発時刻の20分前です。ANAアプリのモバイル搭乗券をお持ちなら、チェックインカウンターに立ち寄ることなく直接保安検査場へお進みいただけます。

プレミアムクラスをご利用のお客様は、ANA LOUNGE もご利用いただけます。出発前のひとときをゆったりとお過ごしください。

お預けの手荷物について

ANA 国内線の無料手荷物許容量は、プレミアムクラスは40kg まで、普通席は20kgまでです。機内持ち込みは1個(10kg以内、3辺の合計115cm以内)が基本です。超過手荷物には追加料金がかかります。


ボタンバリエーション

航空券を予約する
Primary Pill
#073190 / 12px 45px / r:50px / 600
詳細を見る
Secondary Outline Pill
transparent / border: #333 / r:50px / 600
SFC 会員ページ
Gold (SFC)
#d4c493 / 10px 24px / r:50px / 400
ANAマイレージクラブ →
Text Link
#073190 / arrow icon / 400
フライトを検索
Primary on Blue BG
#fff on #073190 / 600
ツアーを探す
Outline on Blue BG
transparent / border: white / 600
タブ切替
国内線
国際線
ツアー
ホテル
Tab — font-size: 14px / weight: 600 / active: #ffffff bg / inactive: #ccd4ea bg / radius: 10px

05 / Cards

フライト情報カード

HND CTS ¥8,400 ~

羽田 ー 新千歳

所要時間 約1時間35分 / 毎日多便運航

ANA SUPER VALUE 旅割
HND OKA ¥11,500 ~

羽田 ー 那覇

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

タイムセール 旅割75
NRT LAX 国際線

成田 ー ロサンゼルス

所要時間 約10時間 / ビジネスクラス THE Room

プレミアムクラス

フライト予約フォーム

国内線 航空券予約
片道
往復
Select — border: #c7c7c7 / radius: 6px
Select Focus — border: #073190
日付が正しくありません
Error — border: #cc0000 / shadow
検索する
※ 運賃はサーチャージ・諸税を含みます。座席クラスにより異なります。
デフォルト — height: 48px / font-size: 16px
デフォルト
フォーカス — border: #073190 / shadow: rgba(7,49,144,0.15)

07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none
フラットな要素
Level 1
0 2px 8px rgba(0,0,0,0.08)
カード・ドロップダウン
Level 2
0 4px 12px rgba(0,0,0,0.12)
モーダル・ポップオーバー
Level 3
0 8px 24px rgba(0,0,0,0.15)
ダイアログ・フローティング
Focus Ring
border: #073190
box-shadow: rgba(7,49,144,0.15)
Notice Surface
bg: #ccd4ea
border-left: 4px solid #073190
お知らせ面

レイアウト原則

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 デスクトップレイアウト