Peach Aviation（ピーチ） DESIGN.md

Peach Aviation 株式会社（https://www.flypeach.com/jp）のデザイン仕様書。 2012 年就航、関西国際空港を拠点とする日本初の本格 LCC。「愛あるフライトを、すべての人に。」を掲げる。 最大の特徴は、対角の 2 隅だけを丸める非対称 border-radius（0px 20px / 0px 42px / 0px 12px） を UI 全体に効かせていること。桃の実と葉のかたちをそのままコンポーネントの輪郭にした設計で、同じ形が 1 つも 4 隅対称になっていない。 テキストの基本色が黒でもグレーでもなくブラウン #6d564a、地はクリーム #fff9f3・ベージュ #f6ede4、主色はマゼンタ寄りのピンク #e65080。 和文は Noto Sans JP、欧文は Montserrat を先頭に置く欧文優先スタック。 実サイトの computed style 実測（2026-08-16 取得。トップページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 「桃」を輪郭で表現する。色をピンクに寄せるだけでなく、角丸を対角 2 隅に寄せた非対称形（葉のかたち）をボタン・カード・チップの共通言語にしている。円形の面（桃の実）を背景に大きく重ねてリズムを作る
• Peach について: LCC ゆえ「安く・わかりやすく」が最優先。予約フォームをファーストビュー直下に置き、そこから下は導線カードが整然と並ぶ。装飾は輪郭と面色に寄せ、文字組みは徹底して平易
• 密度: 中〜高密度・機能優先。予約フォーム → 導線グリッド（9 枚）→ プロモーション → おすすめ情報 → お知らせ、と用途別に面色を変えて積む
• キーワード: 非対称 radius、ブラウンの文字色 #6d564a、ピンク #e65080、クリーム #fff9f3、Montserrat + Noto Sans JP、影ほぼ無し
• 特徴:
  • border-radius に非対称の 2 値指定を使う。0px 20px（左上・右下が 0、右上・左下が 20px）が最頻出で 23 箇所、カードは 0px 42px、CTA は 0px 12px。これが Peach の「かたち」そのもの
  • テキストの基本色がブラウン #6d564a。純黒も無彩色のグレーも使わない。ベージュの地に対して柔らかいコントラストを作る
  • ピンクは 2 段。CTA・アクティブタブの #e65080（マゼンタ寄り）と、トグル・アイコンの #ef8da5（明るいコーラル）
  • 地は白ではなくクリーム。#fff9f3 → #f6ede4 → #eddfd4 の 3 段のベージュでセクションを塗り分ける
  • フッターがピンク面 #e5869a。白抜き文字で締める
  • letter-spacing はサイト全体で normal、font-feature-settings も normal。字間の調整をしない
  • ウェイトは 400 / 600 / 700 の 3 段で、u-weightSB（SemiBold=600）・u-weightB（Bold=700）というユーティリティクラスで付ける
  • 枠線が太い。カードは 3px solid #e2c3a6、チップは 2px solid #e2c3a6。1px の細罫を使わない

2. Color Palette & Roles

実測値。テキストはブラウン #6d564a、地はクリーム #fff9f3、主色はピンク #e65080。

Brand（ブランド）

• Peach Pink (#e65080, rgb 230,80,128): 主要 CTA（「ログイン/登録」「検索」）とアクティブタブの面色。サイトで最も強い色
• Coral Pink (#ef8da5, rgb 239,141,165): 往復／片道トグルの選択面、モバイルナビのアイコン、カルーセルの現在位置ドット。Peach Pink より一段明るく、頻度は高いが強さは弱い
• Footer Pink (#e5869a, rgb 229,134,154): フッターの面色。白抜き文字で置く
• Pale Pink (#f9d0db, rgb 249,208,219): 導線カードのアイコン背景、ホバー面
• Notice Pink (#fce7ed, rgb 252,231,237): 「重要なお知らせ」バーの面色

Base（地・面）

• Cream (#fff9f3, rgb 255,249,243): ページの基調となる淡いクリーム。ドロワーメニューの面色でもある
• Beige (#f6ede4, rgb 246,237,228): 導線グリッド・おすすめ情報セクションの面色
• Beige Deep (#eddfd4, rgb 237,223,212): さらに一段濃いベージュ。カレンダーの外枠・区切り面
• Beige Calendar (#f5ede5, rgb 245,237,229): カレンダーヘッダーの面色
• White (#ffffff): カード・フォーム・入力欄の面

Neutral（文字・罫）

• Brown Text (#6d564a, rgb 109,86,74): 基本テキスト色。本文・見出し・ナビ・ラベルすべて。純黒を使わない
• Brown Text Deep (#6a574c, rgb 106,87,76): カレンダーの曜日ヘッダーなど、ごくわずかに沈めた文字色
• Tan (#c39378, rgb 195,147,120): ヘッダーのメニューアイコン・補助アイコンの色
• Border Tan (#e2c3a6, rgb 226,195,166): カード（3px）・チップ（2px）の枠線色
• Inactive Gray (#d3ccc9, rgb 211,204,201): 非選択タブの面色、入力欄のプレースホルダ
• Muted Gray (#958d87, rgb 149,141,135): カレンダーの非活性ボタン
• Scrim (rgba(0,0,0,0.65)): 画像上のオーバーレイ

Semantic（意味的な色）

• Danger / Holiday (#bf0008, rgb 191,0,8): カレンダーの日曜・祝日。エラー表示にも使う
• Info / Saturday (#5172aa, rgb 81,114,170): カレンダーの土曜。青系はここにしか出ない
• Notice: #fce7ed の面 ＋ #e65080 の文字（「重要なお知らせ」）
• Success: サイト上に専用色を持たない。#ef8da5 を流用する

3. Typography Rules

欧文 Montserrat を先頭に置き、和文 Noto Sans JP → 游ゴシック → ヒラギノ → メイリオと繋ぐ欧文優先スタック。letter-spacing も font-feature-settings も全体で normal。ウェイト 400 / 600 / 700 の 3 段だけで階層を作る。

3.1 和文フォント

• ゴシック体: Noto Sans JP を第一候補に置き、以降 游ゴシック体 → 游ゴシック → Yu Gothic → ヒラギノ角ゴ Pro W3 → メイリオ → Osaka と繋ぐ長いフォールバック
• 游ゴシックの指定が 4 通り並ぶ（游ゴシック体 / YuGothic / 游ゴシック / Yu Gothic）。macOS・Windows の両方で確実に游ゴシックを掴むための冗長指定
• ヒラギノは Pro W3（ProN ではない）。旧環境向けの保険
• 明朝体は使わない

3.2 欧文フォント

• サンセリフ: Montserrat。スタックの先頭に置き、欧文グリフ（Peach KIX 2026/08/13 等）をすべて Montserrat で出す
• 幾何学サンセリフの Montserrat は「peach」ロゴの丸みと相性がよく、数字（運賃・日付・空港コード）の見え方を統一する目的が大きい
• 等幅フォントの指定はない

3.3 font-family 指定

css/* 全体（欧文優先） */
font-family: Montserrat, "Noto Sans JP", 游ゴシック体, YuGothic, 游ゴシック,
             "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
             メイリオ, Meiryo, Osaka, sans-serif;

/* 全体 */
letter-spacing: normal;
font-feature-settings: normal;   /* palt を使わない */

フォールバックの考え方:

• 欧文 Montserrat を先頭に置く。和文フォント内の欧文グリフより Montserrat を優先させたいため
• その直後に Web フォントの Noto Sans JP、以降は OS 搭載の游ゴシック → ヒラギノ → メイリオ → Osaka と、新しい環境から古い環境の順に並べる
• 游ゴシックは表記ゆれ 4 種を全部書く。1 つだけでは環境によって外れる

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

• font-weight: 600（SemiBold）が階層の主役。400 は本文、700 は最上位見出しとメイン CTA だけ
• 1 行で置くラベル・ナビは line-height: 1.0、折り返す本文は 1.5〜1.6
• ユーティリティクラス（u-fontS = 14px / u-fontL = 18px / u-weightSB = 600 / u-weightB = 700）でサイズとウェイトを付ける実装

3.5 行間・字間

• 本文の行間 (line-height): 1.6（16px→25.6px）。カード内の説明文は 1.5（16px→24px）
• 見出しの行間: 1.5（30px→45px / 22px→33px）。ナビは 1.0〜1.4
• 字間 (letter-spacing): サイト全体で normal。字間の調整を一切しない
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• 字間をいじらないのが Peach の方針。読みやすさは行間 1.6 と 16px の本文サイズで確保する
• 本文 16px は LCC の「誰でも読める」要件に直結する。14px 以下を本文に使わない
• 太さのコントラストは 400 ↔ 600 で作る。600 と 700 の差は最上位の見出しにだけ使う

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 「搭乗の流れ（国内線 / 国際線）」「大人(12歳以上)」のように括弧つきラベルが多い。word-break: break-all にすると括弧が行頭に来るため使わない

• 空港コード（KIX MMB KUH）は 3 文字で必ず 1 行に収める

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */

• palt を使わない。ラベルが短く括弧を多く含むため、プロポーショナル詰めを掛けると括弧まわりが不自然に寄る
• 欧文は Montserrat が担うため、和欧混植の詰めを kern に頼る必要がない

3.8 縦書き

• 該当なし。UI・記事とも横組み

4. Component Stylings

border-radius の非対称指定が Peach の骨格。0px 20px は「左上・右下 = 0 / 右上・左下 = 20px」を意味し、桃の葉のような輪郭になる。対称に丸めない。

Border Radius Scale（実測の出現頻度順）

Buttons

Primary（ヘッダー CTA）

• Background: #e65080 / Text: #ffffff
• Border Radius: 0px 12px（非対称）
• Padding: 10px 24px
• Font: 16px / weight 700
• 例: 「ログイン/登録」

Tab Active（フォーム切替）

• Background: #e65080 / Text: #ffffff
• Border Radius: 0（上辺だけ丸める実装のときは 10px 10px 0 0）
• Padding: 5px 15px
• Font: 18px / weight 600
• 例: 「フライト検索・ご予約」

Tab Inactive

• Background: #d3ccc9 / Text: #6d564a
• 同形状。非活性はグレーの面色で表す（枠線や透明度で表さない）
• 例: 「予約の確認」「運航情報」

Toggle（往復／片道）

• Selected: Background #ef8da5 / Text #ffffff / Padding 10px 20px / 16px / weight 600
• Unselected: Background #ffffff / Text #6d564a / weight 600
• Coral Pink を使う（Peach Pink は使わない）

Chip（導線ボタン）

• Background: #ffffff / Text: #6d564a
• Border: 2px solid #e2c3a6
• Border Radius: 0px 20px（非対称・最頻出）
• Padding: 8px 25px 8px 10px（右側は矢印アイコン分）
• Font: 16px / weight 400
• 例: 「路線・時刻表」「運賃タイプ」

Pill（タグ・日付）

• Background: #f6ede4 / Text: #6d564a
• Border Radius: 450px 〜 550px（実質完全な丸端）
• Padding: 5px 12px
• Font: 9〜12px

Cards

• Background: #ffffff
• Border: 3px solid #e2c3a6（3px の太枠）
• Border Radius: 0px 42px（非対称・大）
• Padding: 6px 15px 20px
• Font: 16px / weight 400 / color #6d564a
• 例: 「搭乗の流れ（国内線 / 国際線）」「フライトの検索・予約」
• 影は落とさない。太枠と非対称の輪郭でカードを立てる

Inputs

• Background: #ffffff
• Border: 1px solid #e2c3a6
• Border Radius: 5px
• Padding: 12px 16px
• Font: 16px / weight 600
• Text: #6d564a / Placeholder: #d3ccc9
• 入力欄だけは対称の 5px。非対称形はボタン・カードに限る

Notice Bar

• Background: #fce7ed / Text: #e65080
• 全幅・角丸なし。ヘッダー直下に置く
• 例: 「重要なお知らせ： 夏休み期間中の混雑について」

Calendar

• 外枠: #eddfd4 / ヘッダー面: #f5ede5
• セル: #ffffff / radius 5px / 32px の日付
• 土曜 #5172aa / 日曜・祝日 #bf0008 / 平日 #6d564a
• 非活性ボタン: #958d87

Footer

• Background: #e5869a（ピンク面）/ Text: #ffffff
• Font: 16px / weight 400

5. Layout Principles

Spacing Scale

Container

• Max Width: 1300px（最外）／ 1000px・1020px（本体コンテンツ）／ 650px（狭いカラム）
• 背景の円形モチーフのみ 1920px まで広げてブリードさせる
• Padding (horizontal): 15〜24px

Grid

• 導線グリッドは 5 カラム × 2 段（計 9 枚 + 大 1 枚）
• おすすめ情報・プロモーションは 4 カラムのカルーセル
• Gutter: 10〜15px
• 背景に大きな円（桃の実）を重ねてセクションの境界をぼかす。矩形の境界線でセクションを切らない

6. Depth & Elevation

ほぼフラット。影は 1 種類のみ。

• 奥行きは クリーム #fff9f3 × ベージュ #f6ede4 × ベージュ濃 #eddfd4 × 白 #ffffff の 4 段の面で作る
• カードの立体感は 3px の太枠 #e2c3a6 が担う。影ではない
• 画像上に文字を置くときは rgba(0,0,0,0.65) のスクリムを敷く

7. Do's and Don'ts

Do（推奨）

• border-radius は非対称の 2 値で書く。基本は 0px 20px、カードは 0px 42px、主要 CTA は 0px 12px
• テキストはブラウン #6d564a を基本にする（黒もグレーも使わない）
• 地はクリーム #fff9f3 → ベージュ #f6ede4 → #eddfd4 の 3 段で塗り分ける
• ピンクは用途で 2 段に分ける（CTA・アクティブは #e65080、トグル・アイコンは #ef8da5）
• カードは 3px solid #e2c3a6、チップは 2px solid #e2c3a6 の太枠で立てる
• 本文は 16px / line-height 1.6 を守る（LCC の可読性要件）
• 太さは 400 ↔ 600 のコントラストで作る。700 は最上位見出しと主要 CTA のみ
• letter-spacing は normal のまま触らない
• 欧文・数字は Montserrat に載せる（スタックの先頭に置く）
• セクションの境界は罫線ではなく背景の大きな円形モチーフでぼかす

Don't（禁止）

• 4 隅を対称に丸めない（border-radius: 20px と書いてはいけない。0px 20px が Peach の形）
• テキストに #000000 や無彩色のグレーを使わない（すべてブラウン系）
• 地に純白 #ffffff を敷き詰めない（白はカード・フォームの面に限る）
• 影でカードを浮かせない。太枠で立てる
• 1px の細罫を使わない（枠線は 2px か 3px）
• letter-spacing を触らない、palt を掛けない
• 本文を 14px 以下にしない
• #e65080 と #ef8da5 を混用しない（CTA は前者、トグル・アイコンは後者）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• モバイルでは下部固定ナビにアイコン（34px）＋ ラベル（10px / weight 600）を積む。アイコン色は #ef8da5

フォントサイズの調整

• 本文 16px は据え置き（モバイルでも下げない。LCC の可読性方針）
• Section Head 30px → 22〜24px、Sub Head 22px → 18px 程度に縮小
• 行間 1.6 はモバイルでも維持する
• 非対称 radius の値はモバイルで縮める（カード 0px 42px → 0px 24px 程度）

9. Agent Prompt Guide

クイックリファレンス

Background:     #fff9f3（クリーム） / #f6ede4（ベージュ） / #eddfd4（ベージュ濃）
Surface:        #ffffff（カード・フォーム）
Text:           #6d564a （ブラウン。黒・グレーを使わない）
Peach Pink:     #e65080 （主要 CTA・アクティブタブ）
Coral Pink:     #ef8da5 （トグル・アイコン・ドット）
Footer BG:      #e5869a （白抜き文字）
Notice:         #fce7ed の面 + #e65080 の文字
Border:         #e2c3a6 （カード 3px / チップ 2px / 入力欄 1px）
Inactive:       #d3ccc9
Calendar:       土 #5172aa / 日・祝 #bf0008
Font:           Montserrat, "Noto Sans JP", 游ゴシック体, YuGothic, 游ゴシック,
                "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
                メイリオ, Meiryo, Osaka, sans-serif
Body Size:      16px / weight 400 / lh 1.6（25.6px）
Weights:        400（本文） / 600（強調・ナビ） / 700（最上位見出し・主要CTA）
Letter Spacing: normal（サイト全体で触らない）
Feature:        font-feature-settings: normal（palt を使わない）
Radius:         0px 20px（チップ・基本形） / 0px 42px（カード） / 0px 12px（CTA）
                5px（入力欄） / 50%（アイコン） / 550px（ピル）
Shadow:         なし（ヘッダー等のみ 0 0 10px rgba(0,0,0,.1)）
Container:      1300px（最外） / 1000–1020px（本体） / 650px（狭カラム）

プロンプト例

Peach Aviation のデザインシステムに従って、運賃タイプの比較ページを作成してください。
- フォントは Montserrat を先頭に置き、和文は "Noto Sans JP" → 游ゴシック → ヒラギノ → メイリオと繋ぐ
- テキストの基本色はブラウン #6d564a（黒・無彩色グレーは使わない）
- 地はクリーム #fff9f3、セクション面はベージュ #f6ede4 / #eddfd4、カードは白 #ffffff
- border-radius は必ず非対称の 2 値で書く：
  カード = 0px 42px、チップ・導線ボタン = 0px 20px、主要 CTA = 0px 12px、入力欄のみ 5px
- カードは border: 3px solid #e2c3a6、チップは 2px solid #e2c3a6。影は使わない
- 主要 CTA は #e65080 の面に白文字・16px/700・radius 0px 12px
- 往復／片道のようなトグルは #ef8da5 の面に白文字（#e65080 は使わない）
- 非選択タブは #d3ccc9 の面に #6d564a の文字
- 本文は 16px / weight 400 / line-height 1.6、強調は weight 600、最上位見出しのみ 700
- letter-spacing は normal のまま、font-feature-settings も normal（palt を掛けない）
- セクションの区切りは罫線ではなく、背景に大きな円形（桃の実）を重ねてぼかす
- コンテナ幅は最外 1300px、本体コンテンツ 1000px