重要なお知らせ： 夏休み期間中の混雑について
Peach
カイゼン
Log
「愛あるフライトを、すべての人に。」
お客さまの声に耳をすませながら、
Peach はみずから考え、少しずつ進化を重ねています。
フライト検索・ご予約
予約の確認
運航情報
往復片道
COLORS
Brand — ピンクは 2 段
Peach Pink
#e65080
主要 CTA・アクティブタブ。サイトで最も強い色
Coral Pink
#ef8da5
トグル・アイコン・ドット。頻度は高いが強さは弱い
Footer Pink
#e5869a
フッターの面。白抜き文字
Pale Pink
#f9d0db
導線カードのアイコン背景・ホバー面
Notice Pink
#fce7ed
「重要なお知らせ」バーの面
Base — 地は白ではなくクリーム
Cream
#fff9f3
ページの基調。ドロワーの面色でもある
Beige
#f6ede4
導線グリッド・おすすめ情報の面
Beige Deep
#eddfd4
カレンダーの外枠・区切り面
White
#ffffff
カード・フォーム・入力欄の面のみ
Neutral — 文字はブラウン
Brown Text
#6d564a
基本テキスト色。黒も無彩色グレーも使わない
Tan
#c39378
ヘッダーのメニューアイコン
Border Tan
#e2c3a6
カード 3px / チップ 2px / 入力欄 1px の枠
Inactive
#d3ccc9
非選択タブの面・プレースホルダ
Danger / Holiday
#bf0008
カレンダーの日曜・祝日。エラーにも使う
Info / Saturday
#5172aa
カレンダーの土曜。青系はここにしか出ない
BORDER RADIUS — 対角の 2 隅だけを丸める
0px 20px
チップ・導線ボタン
最頻出（23 箇所）
0px 42px
導線カード
0px 12px
ヘッダーの主要 CTA
5px
入力欄・カレンダーのセル
（対称・89 箇所）
550px
タグ・ラベルのピル
50%
アイコン・ドット

0px 20px は「左上・右下 = 0 / 右上・左下 = 20px」。桃の葉のような非対称の輪郭が Peach の「かたち」そのもので、4 隅対称に丸めることはしない。

TYPOGRAPHY
おすすめ情報
30px / 700 / lh 1.5 (45px) / ls normalセクション見出し（u-weightB）
お知らせ
22px / 600 / lh 1.5 (33px) / ls normalサブ見出し（u-weightSB）
手続き可能な項目
18px / 600 / lh 1.6 (28.8px)リード・カード見出し（u-fontL u-weightSB）
8月からの機内食やグッズ、機内誌が新しくなりました。本文は 16px / weight 400 / line-height 1.6 / letter-spacing normal。LCC の「誰でも読める」要件から、本文を 14px 以下にしません。字間はサイト全体で一切触らず、読みやすさは行間 1.6 と 16px のサイズで確保します。
16px / 400 / lh 1.6 (25.6px) / ls normal本文（body 既定）
予約をお持ちのお客さま / Peach ポイントをお持ちのお客さま
16px / 600 / lh 1.6本文の強調（u-weightSB）— 400 ↔ 600 のコントラストで階層を作る
予約番号がわからない場合
14px / 600 / lh 1.6 (22.4px)キャプション（u-fontS u-weightSB）
メニュー
10px / 600 / lh 1.0アイコン下のラベル — 最小サイズ
KIX   MMB   KUH   2026/08/13   ¥4,590
Montserrat がスタックの先頭。空港コード・日付・運賃の見え方を統一するための指定欧文・数字
導線グリッド
搭乗の流れ
（国内線 / 国際線） 運賃タイプ 手荷物
（持ち込み/お預け） 予約の変更・取消・払戻 空港ガイド

カードは border: 3px solid #e2c3a6 ＋ border-radius: 0 42px。影は落とさず、太枠と非対称の輪郭でカードを立てる。

BUTTONS
ログイン/登録
Primary — #e65080 / radius 0 12px / 16px 700
Search — radius 0 20px
路線・時刻表　›
Chip — 2px solid #e2c3a6 / radius 0 20px
往復片道
Toggle — 選択は #ef8da5（#e65080 は使わない）
2026年冬ダイヤ
Pill — #f6ede4 / radius 550px
フライト検索・ご予約
予約の確認
運航情報

非活性はグレーの面色 #d3ccc9 で表す。枠線や透明度では表さない。

おすすめ情報
2026年冬ダイヤ販売中
一部路線のみ。冬の旅行計画はお早めに。
秋の行楽、どこ行く？
シルバーウィークの空席状況をチェック。
弾丸往復運賃
日帰り国内旅から、深夜便で行く海外弾丸旅まで。
一覧をチェック　›
FORMS
デフォルト — 1px solid #e2c3a6 / radius 5px（入力欄だけは対称）
フォーカス — border #e65080
エラー — border #bf0008（カレンダーの祝日色を流用する）
前の月2026年 8月次の月
月
火
水
木
金
土
日
17
18
19
20
21
22
23
24
25
26
27
28
29
30
土曜 #5172aa / 日曜・祝日 #bf0008 / 平日 #6d564a
ELEVATION
Level 0
none
カード・ボタン・チップすべて
Level 1
0 0 10px rgba(0,0,0,.1)
固定ヘッダー・ドロワー（実測 3 箇所）
枠で立てる
3px solid #e2c3a6
カードの立体感はこれが担う

奥行きは クリーム #fff9f3 × ベージュ #f6ede4 × ベージュ濃 #eddfd4 × 白 #ffffff の 4 段の面で作る。

LAYOUT
XS 5
S 10
M 15
L 24
XL 40
XXL 60
最外コンテナ 1300px
本体コンテンツ 1000–1020px
狭カラム 650px

背景の円形モチーフ（桃の実）だけは 1920px まで広げてブリードさせる。セクションの境界を矩形の罫線で切らず、円でぼかすのが Peach のレイアウト。

Generated from flypeach.com DESIGN.md — awesome-design-md-jp / computed style 実測値（2026-08-16）
実サイトの書体は Montserrat, "Noto Sans JP", 游ゴシック体, … の欧文優先スタック。Montserrat と Noto Sans JP はどちらも Google Fonts からそのまま読み込めるため、代替フォントは使っていない。
letter-spacing はサイト全体で normal、font-feature-settings も normal（palt を掛けない）。