ソラシドエア（Solaseed Air） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-03 / 対象: https://www.solaseedair.jp/, /fare/, /baggage/

1. Visual Theme & Atmosphere

• デザイン方針: 白地に 1書体（Murecho）だけで組み、色はピスタチオグリーンとリーフグリーンの2系統に絞る。CTA は例外なく完全なピル（border-radius: 176px）。予約という業務フローを、彩度の高いライムで軽やかに見せる
• 密度: 予約フォーム・運賃表・手荷物規定という情報量の多い実務 UI を、16px 本文・行間 1.6 でゆったり組む。航空会社サイトとしては余白が広い
• キーワード: ライムグリーン、完全ピル、単一書体、字間ゼロ、4pxグリッド

このサイトの核心は3つある。

1. 書体が Murecho 1本だけ。 可視要素 1,222 個のうち 1,221 個が Murecho, sans-serif。和文用の別スタックも欧文用の別スタックも存在しない
2. letter-spacing が全要素 normal。 1,222/1,222 が字間指定なし。palt を適用している要素も 0 個。日本語サイトとしては極端に「素の組版」に寄せている
3. CSS Custom Properties が 237 個。色は --color-<系統>-<10〜1100> の12段ランプ、余白は Tailwind 型の --space-*、角丸は --radius-xs〜xl で完全にトークン化されている

ただし主色のトークンは実装とずれている。 --color-brand-l: #64a70b と宣言されているが、CTA の面に実際に塗られているのは #4d8008（--color-brand-l-800）。可視要素で #64a70b を持つものは 0 個（CSS 中には 14 回出るが、すべて変数定義とその参照系）。必ず実測値 #4d8008 を使うこと。

2. Color Palette & Roles

Primary（ブランドカラー）

緑は2系統あり、役割が違う。 面に敷いて読ませる緑はリーフグリーン（青みの深緑）、目を引かせる差し色はピスタチオグリーン（黄緑）。混同すると印象が崩れる。

Ramp（12段のカラーランプ）

すべての系統が 10 / 50 / 100 / 200 / … / 1100 の12段で定義されている。実装で使うのは太字の段。

• Pistachio Green: #fbfcee #f9fbe4 #f6f9d7 #e6ee94 #dde76b #d7e351 #cfde33 #c4d600 #b0c000 #9cab00 #758000 #626b00 #3a4000
• Leaf Green: #f4f9ee #eaf3de #d5e7bd #c1db9d #acd07c #92c154 #73af23 #64a70b #5a9609 #4d8008 #467407 #3c6406 #284204
• Solaseed Gray（#cdcec9〜#464741）: 温かみのある独自グレー。実装では #707167（700段） が7要素で使われる。--color-brand-g: #7e7f74
• Orange #ffc87a〜#714200 / Yellow #fdf7ac〜#a79b05 / Soft Yellow #fdf3cb〜#645728
• Mint Green #6affc1（--color-mintgreen-500 のみ。単段）

Semantic（意味的な色）

• Error / Alert (#d90f1c / --color-error = --color-red-400): 注意書きの文字（可視 24要素）。淡色面は #ffe5e6（--color-red-50）
• Important（重要なお知らせ帯）(#fbdb65 / --color-important = --color-softyellow-600): ページ最上部の告知バー
• Success: 専用トークンなし。リーフグリーン系で代用する

Neutral（ニュートラル）

• Text Primary (#4d4d4d / --color-type = --color-gray-700): 本文。可視 1,107 要素で圧倒的多数
• Link (#4d4d4d / --color-link): リンクも本文と同色。色ではなく下線とアイコンで区別する設計
• Background (#ffffff / --color-background)
• Background Accent (#f6f9d7 / --color-background-accent)
• Surface Alt (#f2f2f2 / --color-gray-50): ニュースタグの面
• Disabled / Inactive (#e6e6e6 / --color-gray-100): 非アクティブなタブ、無効ボタンの面。文字は #999999
• Border (#7f7f7f / --color-border = --color-gray-500): ボタン・入力欄の枠。かなり濃い
• Border Light (#cccccc / --color-border-light) / Border Dark (#4d4d4d / --color-border-dark)
• Input Border (#666666 / --color-input-border)、ホバー時 #333333（--color-input-border-hover）
• グレースケール: #f2f2f2 #e6e6e6 #cccccc #b3b3b3 #999999 #949494 #7f7f7f #767676 #666666 #4d4d4d #333333 #1a1a1a

カレンダー専用

• 日曜: #d90f1c / 土曜: #150ba7 / 平日: #4d4d4d

3. Typography Rules

3.1 和文フォント

• ゴシック体: Murecho のみ。Google Fonts のバリアブル日本語書体（ウェイト軸 100–900）
• 明朝体: 定義なし・使用なし

Murecho（ムレチョ）は Google Fonts で無償配布されているバリアブル和文書体。preview.html でも実サイトと完全に同一の字形が再現できる（Adobe Fonts 系のようなドメインライセンス制限がない）。

3.2 欧文フォント

• 和文と分けた欧文スタックは存在しない。Murecho の欧文グリフをそのまま使う
• 最終フォールバックは sans-serif のみ

3.3 font-family 指定

css/* サイト全体で唯一のスタック */
font-family: "Murecho", sans-serif;   /* --font-sans-serif */

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

• 和文・欧文を分けない。 数字も価格も便名も Murecho の欧文グリフで組む
• Murecho が落ちた場合の受け皿は generic の sans-serif だけ。環境依存の和文フォント名（游ゴシック・ヒラギノ等）を足していない
• 実装時に和文フォールバックを追加すると、Murecho 未読込時に字幅が変わりレイアウトがずれる。足さないこと

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

トークン（clamp() による流体スケールも用意されている）:

css--text-2xs: clamp(0.75rem, 0.693rem + 0.24vw, 0.875rem);   /* 12 → 14px */
--text-xs:  clamp(0.813rem, 0.727rem + 0.36vw, 1rem);      /* 13 → 16px */
--text-sm:  clamp(1rem, 0.943rem + 0.24vw, 1.125rem);      /* 16 → 18px */
--text-md:  clamp(1.125rem, 1.068rem + 0.24vw, 1.25rem);   /* 18 → 20px */
--text-lg:  clamp(1.25rem, 1.136rem + 0.48vw, 1.5rem);     /* 20 → 24px */
--text-xl:  clamp(1.438rem, 1.239rem + 0.85vw, 1.875rem);  /* 23 → 30px */
--text-2xl: clamp(1.625rem, 1.341rem + 1.21vw, 2.25rem);   /* 26 → 36px */
--text-3xl: clamp(1.75rem, 1.352rem + 1.7vw, 2.625rem);    /* 28 → 42px */
--text-base: 1rem;

固定値のトークンも --10px〜--60px（0.625rem〜3.75rem）で並列に用意されている。

ウェイトは3段のみ: --font-normal: 400 / --font-medium: 500 / --font-bold: 700。実測に現れるのは 400 と 700 の2段だけで、500 は宣言のみ。見出しは一律 700。

3.5 行間・字間

css--line-height-xs: 1.4;   /* 注釈・小さいラベル */
--line-height-sm: 1.5;   /* 見出し（H1〜H3 すべて） */
--line-height-md: 1.6;   /* 本文（既定） */
--line-height-lg: 1.8;   /* 宣言のみ */
--line-height-xl: 2.2;   /* 宣言のみ */

• 本文の行間: 1.6。日本語本文としてはやや締まった標準値
• 見出しの行間: 1.5。H1・H2・H3 がすべて同じ 1.5 で、サイズだけが変わる
• 字間: 全要素 normal（実測 1,222/1,222）。見出しにも本文にも字間を入れない

このサイトで字間を足してはいけない。 見出しに letter-spacing: 0.04em のような「日本語の定石」を当てると、Murecho の設計字幅から外れて実サイトと別物になる。

3.6 禁則処理・改行ルール

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

• 運賃名・空港名は途中で折らない。「東京（羽田）」 のような括弧つき地名は 1 かたまりで扱う
• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* サイト全体。palt は使わない */

• palt を適用している要素は 0 個（DOM 全走査で確認）
• font-feature-settings を足さないこと。 Murecho の設計どおりのベタ組みがこのブランドの組版

3.8 縦書き

該当なし。writing-mode は全要素 horizontal-tb。

4. Component Stylings

Buttons

角丸は完全ピル（176px）が基本。--radius-xl: 176px は「実質 9999px」として使われている。

Primary（c-button-main）— 主要 CTA

• Background: #4d8008
• Text: #ffffff
• Padding: 16px 8px 16px 24px（右側が狭いのは矢印アイコン分）
• Border Radius: 176px
• Font: 18px / 700 / line-height 1.5
• Border: なし
• 右端に --arrow（SVG data URI の > 記号）を背景画像として置く

Secondary（c-button-second）— 副次 CTA

• Background: #ffffff
• Text: #4d4d4d
• Border: 1px solid #7f7f7f
• Padding: 18px 20px（矢印つきは 18px 8px 18px 20px）
• Border Radius: 176px
• Font: 14px / 700

Accent（会員登録ピル）

• Background: #c4d600
• Text: #4d4d4d
• Padding: 6px 10px
• Border Radius: 176px
• Font: 12px / 700

Utility（ヘッダーの角丸ボタン）

• Background: #ffffff
• Text: #4d4d4d
• Border: 1px solid #7f7f7f
• Padding: 12px 4px
• Border Radius: 8px（ここだけピルではない）
• Font: 12px / 700

Disabled

• Background: #e6e6e6 / Text: #999999 / Border Radius: 176px / Padding: 15px 66px 15px 24px

Tabs

予約タブ（p-reserve-tabs__btn）— 上だけ丸い台形タブ

• Border Radius: 16px 16px 0px 0px
• Active: #ffffff / #4d4d4d ／ Inactive: #e6e6e6 / #4d4d4d
• Padding: 12px 32px / Font: 18px / 700

ピルタブ（p-tabs__btn）

• Border Radius: 176px / Padding: 16px 40px / Font: 20px / 700
• Active: #4d8008 / #ffffff ／ Inactive: #e6e6e6 / #4d4d4d

Tags / Chips

• ニュース種別タグ: #f2f2f2 面 / #4d4d4d 文字 / radius 8px / padding 8px 16px / 14px 700
• ヘッダーチップ: #d7e351 面 / #4d4d4d 文字 / radius 8px / padding 8px / 13px 700

Inputs

• Background: #ffffff
• Border: 1px solid #7f7f7f
• Border (hover): 1px solid #333333
• Border Radius: 176px（入力欄もピル）
• Padding: 0px 16px
• Font Size: 16px
• Text: #4d4d4d

入力欄がピルであることがこのサイトの特徴。 角丸 4px や 8px の一般的なフォーム UI に置き換えないこと。

Cards / Panels

• Background: #ffffff
• Border Radius: 16px（--radius-m）または 24px（--radius-l）
• Shadow: --pc-shadow-s（下記 6 章）
• 淡色パネルの面: #f6f9d7 / #fbfcee

Notification Bars（ページ最上部の告知帯）

5. Layout Principles

Spacing Scale

Tailwind 型の 4px グリッド（--space-0〜--space-96）。

Container

• Max Width: 1200px（実測で最頻出）
• ヘッダー高さ: 116px（--headerHeight）
• 全幅セクション用に --contentfull-margin / --contentfull-padding が定義されている

Border Radius Scale

css--radius-xs: 4px;
--radius-s:  8px;    /* ユーティリティボタン・タグ */
--radius-m:  16px;   /* カード・タブ上端 */
--radius-l:  24px;   /* 大きめのパネル */
--radius-xl: 176px;  /* ピル（CTA・入力欄・タブ） */

円形アイコンには border-radius: 50% を直接使う（実測 20要素）。

Motion

css--ease: cubic-bezier(0.215, 0.61, 0.355, 1);
--opacity: 0.75;   /* ホバー時の不透明度 */
--scale: 1.03;     /* ホバー時の拡大率 */

6. Depth & Elevation

影は極端に浅く、下方向にだけ落とす（spread が大きな負値）。

ボタンに影を付けないこと。 実測でも interactive 30件すべてが box-shadow: none。

7. Do's and Don'ts

Do（推奨）

• font-family は "Murecho", sans-serif の1本だけを使う
• CTA・入力欄・ピルタブの角丸は 176px（完全ピル）にする
• 主色は #4d8008（トークン名は --color-brand-l-800）。差し色に #c4d600 を少量使う
• 本文は 16px / line-height: 1.6 / color: #4d4d4d
• 見出しは H1〜H3 すべて line-height: 1.5 / font-weight: 700
• 枠線は #7f7f7f（濃いグレー）。淡い枠が欲しいときだけ #cccccc
• 余白は 4px グリッド（--space-*）に載せる
• 色は12段ランプの中から選ぶ。中間色を自作しない

Don't（禁止）

• letter-spacing を足さない。 見出しにも本文にも字間を入れない（実サイトは全要素 normal）
• font-feature-settings: "palt" を足さない。 実サイトの適用要素は 0 個
• --color-brand-l: #64a70b を CTA に使わない。 宣言はあるが可視要素で 0 件。使うのは #4d8008
• 和文フォントのフォールバック（游ゴシック・ヒラギノ等）を追加しない。 字幅が変わりレイアウトが崩れる
• リンクを青くしない。 リンク色は本文と同じ #4d4d4d（--color-link）
• 入力欄を角丸 4px にしない。 ピル（176px）がこのブランドの形
• ボタンに box-shadow を付けない
• 2つの緑（#4d8008 / #c4d600）を入れ替えない。面に敷くのは深緑、差し色が黄緑

8. Responsive Behavior

Breakpoints

CSS の @media に現れる境界値（実測）。

主要な境界は 576 / 768 / 1024 / 1200 / 1400px（600 / 640 も補助的に使われる）。

タッチターゲット

• 主要 CTA の実高: 18px × 1.5 + 16px × 2 = 59px — 44px 基準を余裕をもって満たす
• ヘッダーの小ピル（12px / padding 6px 10px）は SP では拡大して 44px を確保する

フォントサイズの調整

• --text-* の clamp() が viewport 幅に応じて自動で縮小する（例: H2 相当の --text-xl は 30px → 23px）
• 固定値で組む場合は本文 16px を維持し、見出しのみ 70〜80% に縮める

9. Agent Prompt Guide

クイックリファレンス

Primary Color:   #4d8008   (deep leaf green — CTA・アクティブタブ)
Accent Color:    #c4d600   (pistachio green — 差し色・会員登録)
Text Color:      #4d4d4d
Link Color:      #4d4d4d   (本文と同色。下線で区別)
Background:      #ffffff
Accent Surface:  #f6f9d7
Border:          #7f7f7f
Error:           #d90f1c
Important:       #fbdb65
Font:            "Murecho", sans-serif   (1書体のみ)
Body Size:       16px
Line Height:     1.6 (本文) / 1.5 (見出し)
Letter Spacing:  normal   (足さない)
Button Radius:   176px    (完全ピル)
Card Radius:     16px
Container:       1200px

プロンプト例

ソラシドエアのデザインシステムに従って、搭乗者情報の入力フォームを作成してください。

- フォント: "Murecho", sans-serif のみ（和文フォールバックを足さない）
- letter-spacing は指定しない（全要素 normal）
- font-feature-settings も指定しない（palt を使わない）
- 本文 16px / line-height: 1.6 / color: #4d4d4d
- ラベルは 16px / font-weight: 700
- 入力欄: 背景 #ffffff、border 1px solid #7f7f7f、border-radius 176px、padding 0 16px、font-size 16px
- 送信ボタン: 背景 #4d8008、文字 #ffffff、border-radius 176px、padding 16px 24px、18px/700
- 戻るボタン: 背景 #ffffff、文字 #4d4d4d、border 1px solid #7f7f7f、border-radius 176px、14px/700
- エラーメッセージ: 文字 #d90f1c、背景 #ffe5e6
- 余白は 4px グリッド（8 / 16 / 24 / 32px）
- ボタンに box-shadow は付けない
- コンテナ幅 1200px