STARFLYER（スターフライヤー） DESIGN.md

北九州を拠点とする航空会社スターフライヤーの公式サイト（https://www.starflyer.jp/）のデザイン仕様書。 黒い機体・黒い革シート・黒い機内という「黒のエアライン」をそのまま Web に持ち込んだ、日本の航空会社では唯一の黒地サイト。 最大の特徴は 2 つのデザインシステムが 1 つのドメインに同居していること。予約・運賃を扱う実務サイトは OS 搭載のヒラギノ角ゴ Pro で組んだ黒枠 × 白面、ブランドサイト（/brand/）は Adobe Fonts の VDL V7明朝 ＋ IvyMode で組んだ全面黒。同じブランドの「使う面」と「見せる面」が明確に切り分けられている。 差し色はダークレッド #990000 ただ 1 色。彩度を持つ色はここにしか出てこない。 実サイトの computed style 実測（2026-08-17 取得。トップページ + /brand/）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 黒いクロム（外枠）に白いコンテンツを載せる。ヘッダー・左サイドレール・フッターが黒 #000000、その内側の作業領域が白 #ffffff。ページの body 自体が黒で、白は「上に置かれた面」
• スターフライヤーについて: 2006 年就航。全席本革・全席モニター・ハイブランドの機内サービスで「スマート ラグジュアリー」を掲げる。黒はブランドの中心概念であり、装飾ではない
• 密度: 実務サイトは高密度（運賃表・時刻表・空席カレンダーが縦に積まれる）。ブランドサイトは極端に低密度（1 画面 1 メッセージ）
• キーワード: 黒地 × 白面、ダークレッド 1 色、radius 3px、ヒラギノ角ゴ Pro、VDL V7明朝、IvyMode イタリック、▸ の三角マーカー
• 特徴:
  • body の地色が黒 #000000。コンテンツ面の白はその上に載る矩形で、両脇に黒が覗く構造。スクロールの端やフッター周りで必ず黒が見える
  • 左サイドに固定の縦レール（航空券のご予約／予約確認・変更／航空券＋宿泊／運航状況／オンラインチェックイン／空席待ち）。アイコン＋2 行のラベルで、ここだけ常時追従する
  • 彩度を持つ色は #990000（ダークレッド）だけ。「マイレージ会員に入会する」CTA、運賃の金額、テーブルの日曜列に使う。朱赤ではなくワインレッド寄りの暗い赤で、黒との相性を優先している
  • border-radius: 3px がサイト全体の既定（実測 145 箇所）。ピル（1000px）はごく一部のタグにしか出ない
  • リンクの頭に ▸（右向き三角）を必ず置く。アイコンフォントではなく背景画像で、ナビ・リスト・見出しリンクすべてに一貫して付く
  • letter-spacing を実務サイトでは一切使わない（すべて normal）。逆にブランドサイトは 0.1〜0.5em まで大きく開く。同じブランドで字間の方針が正反対
  • font-feature-settings はどちらのサイトでも使わない（palt なし）
  • ブランドサイトは明朝体（VDL V7明朝）で全文を組む。実務サイトはゴシックのみ。書体で「見せる／使う」を分けている

2. Color Palette & Roles

CSS Custom Properties は定義されていない。すべて直値で書かれているため、実装側で変数化する場合は以下の名前を使う。

Base（黒と白）

• Black (#000000): body の地色。ヘッダー・左サイドレール・フッターの面色
• White (#ffffff): コンテンツ面。黒の上に載る矩形
• Near Black (#1e1e1e): 濃色セクション（キャンペーン情報など）の面色。純黒とわずかに差をつけて段差を作る
• Charcoal (#333333): 本文の文字色。黒地の上では #ffffff、白地の上では #333333
• Dark Slate (#40494f / #27384d / #4b4c4c): 予約フォーム・運航状況フォームの面色。黒よりわずかに青みを持たせた濃色パネル

Accent（差し色 — 1 色のみ）

• Dark Red (#990000): サイト唯一の彩度を持つ色
  • 「マイレージ会員に入会する」の塗り CTA（#990000 の面に白文字、radius 2px）
  • 運賃の金額（11,660円〜）
  • テーブルの日曜列の見出し
  • label バッジ（10px / weight 700 / 白文字 / radius 0）
• 実装時、この赤を明るく（#cc0000 や #e60012 に）振らない。黒と並べたときの沈み具合がブランドの印象を決めている

Neutral（面・罫）

• Panel Gray (#f2f2f2): セクションの薄面（CSR／法人契約など）
• Light Gray (#e6e6e6): バッジ・タグの面（「マイレージ」「インフォメーション」など、12px / radius 0 / padding 3px 10px 4px）
• Button Gray (#efefef): フォームの submit（UA 既定に近い 2px outset）
• Border Gray (#d1d1d1): 白ボタンの枠
• Input Border (#cccccc): 入力欄・セレクトの枠
• Ghost Border (#666666): 黒地の上のゴーストボタンの枠
• Muted Text (#cccccc): 黒地の上の補助テキスト・ゴーストボタンの文字
• Dot Gray (#737373 / #999999): カルーセルのドット（非選択）

Table Tint（カレンダー／運賃表の列色）

• Sunday Tint (#faf2f2): 日曜列の淡い赤み
• Saturday Tint (#f1f4fa): 土曜列の淡い青み
• Link Blue (#003399): テーブル見出しの土曜表記。サイトで唯一の青

Brand Site（/brand/ — 全面黒）

• Background: #000000（body そのもの）
• Text: #ffffff 一色
• Reserve Band: 白面 #ffffff に黒文字（「空席照会・ご予約はこちら」の帯だけ反転する）

3. Typography Rules

実務サイトとブランドサイトで書体もルールも別。この 2 つを混ぜないことが最重要。

3.1 和文フォント

実務サイト（www.starflyer.jp）

• ゴシック体: ヒラギノ角ゴ Pro W3 を先頭に置く。以降 メイリオ → MS Pゴシック
• ヒラギノは Pro（ProN ではない）。かつウェイト名込みの "ヒラギノ角ゴ Pro W3" 表記を使う古い書き方
• Web フォントを一切読み込まない。OS 搭載フォントのみ
• 一部のセレクトだけ メイリオ を先頭に置く別スタックが混在する（実装のゆらぎ。踏襲しなくてよい）

ブランドサイト（/brand/）

• 明朝体: VDL V7明朝（vdl-v7mincho／Adobe Fonts）。和文本文・見出し・ボタンまですべて明朝で組む
• モリサワ／VDL 系の直線的な明朝で、黒地に白抜きしたときに細部が飛ばない

3.2 欧文フォント

• 実務サイト: 欧文専用の指定はない。和文スタックの sans-serif にフォールバックする
• ブランドサイト: IvyMode（ivymode／Adobe Fonts）。ナビ・ラベル・ボタンの欧文はすべてこれのイタリック
  • BRAND TOP PRODUCT MOVIE PROJECT（18px / weight 300 / ls 0.12em）
  • BRAND MOVIE（12px / ls 0.5em）
  • More PRODUCT（13px / ls 0.1em）
• 等幅フォントの指定はない

3.3 font-family 指定

css/* 実務サイト（予約・運賃・時刻表） */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
             メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* ブランドサイト 和文（/brand/） */
font-family: vdl-v7mincho, sans-serif;   /* Adobe Fonts */

/* ブランドサイト 欧文（/brand/） */
font-family: ivymode, sans-serif;        /* Adobe Fonts。原則 italic */

/* 実務サイトはグローバルに */
letter-spacing: normal;
font-feature-settings: normal;

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

• 実務サイトは 和文優先・OS フォントのみ。予約導線の表示速度を落とさないための判断
• ブランドサイトは Adobe Fonts の 2 書体（和文明朝＋欧文サンセリフ）だけ。フォールバックは sans-serif 1 段しか用意していない。ライセンスの効かない環境では明朝が消えてゴシックに落ちるので、自前実装では和文のフォールバックに游明朝・ヒラギノ明朝を足すこと

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

実務サイト

• font-weight は原則 400 のみ。700 が出るのは #990000 のラベルバッジだけ
• 見出しの階層は 28 → 20 → 18 → 14 の 4 段。太さで差をつけず、サイズと色（黒地／白地）だけで階層を作る

ブランドサイト（/brand/）

• weight 300 が基本。明朝の細さで「軽さ」を作る
• 行間が 1.9〜2.5 と極端に広い。黒地に白抜きの明朝は行間を詰めると潰れるため

3.5 行間・字間

• 実務サイトの本文は 1.5（14px→21px）。日本語サイトとしてはやや詰まった、情報密度優先の設定
• 実務サイトの見出しは 1.0（28px→28px）。行間をゼロ詰めにして塊として見せる
• ブランドサイトの本文は 1.92〜2.5。同じブランドで本文の行間が 1.5 と 2.5 に分かれる
• 字間は実務サイト normal / ブランドサイト 0.1〜0.5em。混ぜない
• palt はどちらでも使わない

ガイドライン:

• 予約フローや運賃表を作るときは 14px / 1.5 / ls normal を守る。字間を開くと表が横に伸びて折り返しが増える
• ブランド訴求のページを作るときは 明朝 / weight 300 / lh 2.0 / ls 0.1em に切り替える。この 2 モードの中間を作らない

3.6 禁則処理・改行ルール

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

禁則対象:

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

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

• 「羽田（東京）⇔ 北九州」のように空港名を丸括弧で受ける表記が頻出する。word-break: break-all にすると括弧が行頭に来るため使わない

• 運賃の「11,660円〜」は数字と単位と波ダッシュを分割させない。white-space: nowrap を掛ける

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 全ページ共通。palt は使わない */

• palt を掛けない。実務サイトは等幅のまま表組みの桁を揃えるため、ブランドサイトは letter-spacing で明示的に開くため
• ブランドサイトで字間を作るのは letter-spacing の役目であり、palt で詰めてから開き直す設計にはなっていない

3.8 縦書き

• 該当なし。実務サイト・ブランドサイトとも横組み

4. Component Stylings

radius は 3px が既定。2px（ヘッダー CTA）と 5px（一部の黒ボタン）が例外的に混ざる。

Buttons

Primary（ダークレッド塗り）— 唯一の有彩色 CTA

• Background: #990000
• Text: #ffffff
• Border: 1px solid #990000
• Border Radius: 2px
• Font: 12px / weight 400 / lh 1.0 / ls normal
• 例: 「マイレージ会員に入会する」（ヘッダー右上）

Secondary（白ボタン）— ヘッダーの対の CTA

• Background: #ffffff
• Text: #333333
• Border: 1px solid #ffffff
• Border Radius: 2px
• Font: 12px / weight 400
• 例: 「ログイン」

Tertiary（白地の線ボタン）— 本文中の主要導線

• Background: #ffffff
• Text: #000000 / #333333
• Border: 1px solid #d1d1d1
• Border Radius: 3px
• Padding: 10px 25px
• Font: 14px / weight 400 / lh 1.5
• 例: 「運賃一覧へ」「キャンペーン一覧へ」

Ghost（黒地の上）

• Background: transparent
• Text: #cccccc
• Border: 1px solid #666666
• Border Radius: 3px
• Padding: 10px 25px / 0 10px 0 5px
• 例: 濃色セクション内のリンクボタン

Black（塗り）

• Background: #000000
• Text: #ffffff
• Border Radius: 3px（小さいものは 5px）
• Padding: 5px / 10px 25px / 0 25px
• Font: 12〜18px / weight 400

Brand Site（ゴーストの角ボタン）

• Background: transparent
• Border: 1px solid #ffffff / Border Radius: 0
• Size: 250 × 50px 固定（下部の大型は 350 × 65px）
• Label: 子要素の <span> に置く（IvyMode 13px / ls 0.1em / #ffffff）
• 白帯の上では 1px solid #000000 ＋ 黒文字に反転する
• radius を持たない唯一のボタン。ブランドサイトだけ角を立てる

Badges / Tags

Gray Badge

• Background: #e6e6e6 / Text: #000000
• Border Radius: 0 / Padding: 3px 10px 4px
• Font: 12px / weight 400 / lh 1.0
• 例: 「マイレージ」「インフォメーション」

Red Label

• Background: #990000 / Text: #ffffff
• Border Radius: 0
• Font: 10px / weight 700 / lh 1.5

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border Radius: 3px
• Padding: 0 17px 0 10px
• Height: 42px
• Font: 13px / weight 400
• Text: #000000
• セレクトも同じ寸法で揃える（select の右パディング 17px は矢印の逃げ）
• 濃色パネル（#40494f）の上に置く入力欄も面は白のまま。反転させない

Tables（運賃表・時刻表・カレンダー）

• Border: 罫は #cccccc 系の 1px
• Header: 12px / weight 400 / lh 1.5
  • 平日 #333333 ／ 日曜 #990000 ／ 土曜 #003399
• Cell Tint: 日曜列 #faf2f2 ／ 土曜列 #f1f4fa
• 金額は 14〜18px の #990000、単位（円〜）だけ小さく落とす

Cards（キャンペーン・特集バナー）

• Background: transparent（親セクションの面色を透かす）
• Border Radius: 0（画像は角丸なしの矩形）
• 構成: 画像 → ▸ 付きのタイトル（18px）→ 説明（14px / lh 1.5）
• Shadow: なし

Sections（面色の使い分け）

5. Layout Principles

Spacing Scale

CSS 変数はない。実測から起こすと 5 / 10 / 25 / 40 / 80px の系列。

Container

• セクション幅: 1000px（tp-section / l-content-related / l-footer-inner）
• カルーセル幅: 1020px（左右に 10px はみ出す）
• フォーム幅: 755px
• 左サイドレール: 90px 固定。コンテンツはその右に寄る
• Padding (horizontal): 10〜25px

Grid

• 運賃セクションは 2 カラム（左右に 3 行ずつ）＋ 右にバナー 1 列の変則 3 分割
• 特集バナーは 3 カラム（画像 → タイトル → 説明の縦積み）
• Gutter: 20〜40px
• 画像は角丸なし。矩形のまま並べる

6. Depth & Elevation

ほぼフラット。影は「浮かせる」ためではなく「クロムの境界を締める」ために使う。

• コンテンツ側には影を一切落とさない。奥行きは 黒 #000000 → #1e1e1e → #f2f2f2 → #ffffff の面のコントラストで作る
• ブランドサイトは影ゼロ。黒地とグラデーションの雲だけで奥行きを出す

7. Do's and Don'ts

Do（推奨）

• body の地色を黒 #000000 にし、その上に白いコンテンツ面を置く
• ヘッダー・左サイドレール・フッターを黒で統一し、外枠が常に黒く見えるようにする
• 有彩色は #990000 だけに絞る。CTA・金額・日曜列に使う
• border-radius: 3px を既定にする（ヘッダー CTA だけ 2px）
• リンクの頭に ▸ の三角マーカーを置く
• 実務ページは 14px / lh 1.5 / ls normal / ヒラギノ角ゴ Pro で組む
• ブランドページは VDL V7明朝 ＋ IvyMode イタリック / weight 300 / lh 2.0 / ls 0.1em に切り替える
• 入力欄・セレクトは 高さ 42px / 1px solid #cccccc / radius 3px で揃える
• カレンダーと運賃表は日曜 #faf2f2 / 土曜 #f1f4fa で列を塗り分ける
• ブランドサイトのボタンは枠だけ・角 radius 0・250×50pxにする

Don't（禁止）

• #990000 を明るい赤に振らない（#cc0000 #e60012 は別ブランドの色になる）
• 実務サイトに letter-spacing を入れない。表の桁が崩れる
• ブランドサイトの字間を詰めない。0.1em を下回ると明朝の白抜きが潰れる
• 2 つのモード（ゴシック実務／明朝ブランド）を同じページで混ぜない
• palt を掛けない
• 画像に border-radius を付けない
• コンテンツ領域に影を落とさない
• ヒラギノを ProN と書かない（Pro、しかも "ヒラギノ角ゴ Pro W3" のウェイト名込み表記）
• ブランドサイトのボタンで、ラベルを <a> 直下のテキストノードに置かない（実サイトは <span> に入れて色を当てている。<a> 自身の color は UA 既定のまま残る）

8. Responsive Behavior

Breakpoints

実サイトは断点が多い。主要なものは以下。

• 補助的に 900px / 950px / 1100px / 1150px の断点も使われている
• print, screen and (min-width: 768px) のように印刷を PC レイアウトに寄せる指定がある。予約確認・搭乗券の印刷を想定した設計

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• 入力欄・セレクトは 42px。モバイルでは 44px 以上に引き上げること
• 線ボタンは padding: 10px 25px + 14px 行で 41px 相当。モバイルでは上下 12px に上げる
• 左サイドレールの各項目はアイコン＋2 行で 68px 程度あり、そのままで足りる

フォントサイズの調整

• 本文 14px は据え置き（モバイルでも下げない。すでに小さい）
• Section Head 28px → 20〜22px に縮小し、行間は 1.0 のまま維持する
• 運賃の金額は 18px 以上を保つ（モバイルで最も読ませたい数字）
• ブランドサイトの letter-spacing: 0.5em はモバイルで 0.3em 程度まで詰めてよい（横幅が足りなくなるため）

9. Agent Prompt Guide

クイックリファレンス

Page Background: #000000 （body そのもの。白はこの上に載る面）
Content Surface: #ffffff
Dark Section:    #1e1e1e （キャンペーン） / #40494f（予約フォーム） / #27384d（運航状況）
Panel:           #f2f2f2 （薄面セクション） / #e6e6e6（バッジ）
Accent:          #990000 （唯一の有彩色。CTA・金額・日曜列）
Text:            #333333（白地） / #ffffff（黒地） / #cccccc（黒地の補助）
Border:          #d1d1d1（白ボタン） / #cccccc（入力欄） / #666666（黒地のゴースト）
Table Tint:      #faf2f2（日曜） / #f1f4fa（土曜） / #003399（土曜の見出し文字）

JP Font (実務):  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
                 メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
JP Font (brand): vdl-v7mincho, sans-serif        ← Adobe Fonts / 明朝
EN Font (brand): ivymode, sans-serif（italic）    ← Adobe Fonts

Body Size:       14px / weight 400 / lh 1.5（21px） / ls normal
Section Head:    28px / weight 400 / lh 1.0（28px） / ls normal
Brand Copy:      18px / weight 300 / lh 2.5（45px） / ls 0.1em（明朝）
Weight:          400 のみ（700 は #990000 のラベルバッジだけ）
Letter Spacing:  normal（実務） / 0.1〜0.5em（ブランド）
Feature:         font-feature-settings: normal（palt を使わない）
Radius:          3px（既定） / 2px（ヘッダー CTA） / 0（ブランドのボタン・画像）
Shadow:          コンテンツには無し。ヘッダー 0 0 2px #777、レール 2px 0 6px -1px rgba(0,0,0,.2)
Container:       1000px（セクション） / 1020px（カルーセル） / 755px（フォーム）
Side Rail:       90px 固定・左に追従
Input:           高さ 42px / 1px solid #cccccc / radius 3px / 13px

プロンプト例

STARFLYER のデザインシステムに従って、国内線の運賃一覧ページを作成してください。
- body の地色は黒 #000000。その上に幅 1000px の白 #ffffff のコンテンツ面を置く
- ヘッダー・左サイドレール（幅 90px・追従）・フッターはすべて黒 #000000 に白文字
- 和文は "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ… の OS フォントスタック
- 本文 14px / weight 400 / line-height 1.5 / letter-spacing normal（字間を開けない）
- セクション見出しは 28px / weight 400 / line-height 1.0（行間を詰めきる）
- 有彩色は #990000 だけ。運賃の金額と「マイレージ会員に入会する」CTA にのみ使う
  CTA は #990000 の塗り・白文字・border-radius 2px
- 本文中のボタンは白面 + 1px solid #d1d1d1 + radius 3px + padding 10px 25px
- 運賃表は日曜列を #faf2f2、土曜列を #f1f4fa で塗り、見出しの文字色を
  日曜 #990000 / 土曜 #003399 にする
- リンクの頭にはすべて ▸ の三角マーカーを置く
- 入力欄とセレクトは高さ 42px / 1px solid #cccccc / radius 3px / 13px で揃える
- font-feature-settings は使わない（palt なし）。画像に border-radius を付けない
- 影はコンテンツに落とさない。ヘッダーだけ 0 0 2px #777777

STARFLYER のブランドサイト（/brand/）のトーンで、機内サービスの紹介ページを作成してください。
- 全面黒 #000000、文字は白 #ffffff の 1 色のみ
- 和文は vdl-v7mincho（VDL V7明朝／Adobe Fonts）、欧文は ivymode の italic
- 本文 13px / weight 300 / line-height 1.92 / letter-spacing 0.1em
- リードコピーは 18px / weight 300 / line-height 2.5 / letter-spacing 0.1em
- 欧文のナビは 18px / weight 300 / letter-spacing 0.12em、オーバーラインは 12px / 0.5em
- ボタンは 250×50px の枠だけ（1px solid #ffffff、border-radius 0）。ラベルは
  <span> に入れて ivymode 13px / letter-spacing 0.1em で白に指定する
- 影を一切使わない。実務サイトのゴシック・radius 3px のルールをここに持ち込まない