重要なお知らせ 予約・搭乗システム刷新に伴うよくあるお問い合わせ内容について

1書体・字間ゼロ・完全ピル

Murecho 1本で全ページを組み、letter-spacing は全要素 normal。CTA と入力欄は border-radius: 176px。

01 / Colors
Color Palette

緑が 2 系統ある

面に敷いて読ませるのはリーフグリーン(深緑)、目を引かせる差し色はピスタチオグリーン(黄緑)。トークンの --color-brand-l: #64a70b は可視 0 要素で、実装の主色は #4d8008。

Leaf Green 800
#4d8008
★実質の主色。CTA の面・アクティブタブ
Leaf Green(名目)
#64a70b
--color-brand-l。宣言のみで描画されない
Pistachio 600
#c4d600
★差し色。会員登録ピル・フッターバー
Accent Surface
#f6f9d7
--color-background-accent
Error
#d90f1c
--color-error。注意書きの文字(24 要素)
Important
#fbdb65
--color-important。最上部の告知バー
Text / Link
#4d4d4d
本文もリンクも同色。可視 1,107 要素
Border
#7f7f7f
--color-border。ボタン・入力欄の枠
Solaseed Gray 700
#707167
温かみのある独自グレー
Leaf Green — 12 段ランプ(--color-leafgreen-10 〜 1100)
10
50
100
200
300
400
500
600
700
★800
900
1000
1100
Pistachio Green — 12 段ランプ(--color-pistachiogreen-10 〜 1100)
10
50
100
200
300
400
500
★600
700
800
900
1000
1100
Solaseed Gray — 温かみのある独自グレー(--color-solaseedgray-100 〜 1100)
100
200
300
400
500
600
700
800
900
1000
1100

色はすべて 12 段ランプから選ぶ。中間色を自作しない。純白・純黒はグレーランプの両端(#ffffff / #1a1a1a)で代用する。

Typography

書体は Murecho 1 本だけ

可視要素 1,222 個のうち 1,221 個が Murecho, sans-serif。letter-spacing は全要素 normal、palt の適用要素は 0 個。

Heading 136px / 700 / lh 1.5
letter-spacing: normal
運賃情報
Heading 230px / 700 / lh 1.5
早めのご予約でおトクな運賃
Heading 324px / 700 / lh 1.5
アーリーソラバリュー
Tab Label20px / 700 / lh 1.4
メールアドレス
Button18px / 700 / lh 1.5
アーリーソラバリューの詳細を見る
Body16px / 400 / lh 1.6
既定
羽田・中部・神戸から、宮崎・熊本・長崎・鹿児島・大分・沖縄へ。九州と沖縄を結ぶ路線網で、ビジネスにも旅行にもお使いいただけます。ご予約は出発の 355 日前から承ります。
Body Bold16px / 700 / lh 1.6
複数区間とは
Nav15px / 400 / lh 1.5
セール/キャンペーン
Caption14px / 400 / lh 1.4
お乗り継ぎ等で複数の都市をまたがる旅程の場合はこちらをご利用ください。
Chip13px / 700 / lh 1.6
よくあるご質問・お問い合わせ
Small12px / 700 / lh 1.4
会員登録

字間を足さないこと。「日本語の見出しには letter-spacing: 0.04em」といった定石を当てると、Murecho の設計字幅から外れて実サイトと別物になる。font-feature-settings も同様に指定しない。

03 / Article
Fare Guide

運賃案内の組版

本文 16px / line-height: 1.6。見出しは H1〜H3 すべて line-height: 1.5 でサイズだけが変わる。

おトクな運賃のご案内

ソラシドエアでは、ご予約のタイミングやお客さまの年齢に応じた各種運賃をご用意しています。早めのご予約なら「アーリーソラバリュー」、直前のご予約なら「ソラバリュー」が便利です。

アーリーソラバリュー

搭乗日の 28 日前までのご予約でご利用いただける、もっともおトクな運賃です。予約変更はできませんが、取消手数料は搭乗日の前日までであれば運賃の一部となります。

運賃名予約期限片道運賃(羽田〜宮崎)
アーリーソラバリュー搭乗 28 日前まで¥9,800〜
ソラバリュー搭乗前日まで¥14,300〜
ヤング割搭乗当日¥11,000
シニア割搭乗当日¥13,200

2026年5月19日以降ご搭乗分につきましては、予約・搭乗システムの刷新に伴い、お手続きの方法が変更となります。

ご予約の変更について

予約変更が可能な運賃をお選びの場合、出発時刻の 20 分前まで、同一路線・同一区間に限り変更を承ります。お手続きは公式サイトのマイページ、または予約センターにて承ります。

Buttons & Tabs

CTA も入力欄も完全ピル(176px)

--radius-xl: 176px が「実質 9999px」として使われる。角丸 8px はヘッダーのユーティリティボタンとタグだけ。

お知らせ プレスリリース 日本語・JAPANESE よくあるご質問・お問い合わせ

予約タブは border-radius: 16px 16px 0 0 の台形。アクティブが #ffffff、非アクティブが #e6e6e6。ピルタブはアクティブが #4d8008/白文字。ボタンに box-shadow は付けない(実測 30 件すべて none)。

05 / Cards
Cards

カードは 16px / 24px の角丸

影は --pc-shadow-s(0 8px 10px -10px)だけ。下方向にわずかに落ちる。

キャンペーン

アーリーソラバリュー

搭乗 28 日前までのご予約でおトクに。九州・沖縄への旅を、もっと気軽に。

お知らせ

ソラシド スマイルクラブ

マイルが貯まる・使える無料の会員プログラム。ご登録後すぐにご利用いただけます。

機内サービス

九州・沖縄の味

就航地の素材を活かしたドリンクとスナックを機内でお楽しみいただけます。

Forms

入力欄もピル(176px)

枠は 1px solid #7f7f7f とかなり濃い。ホバーで #333333、エラーで #d90f1c に枠色が変わるだけで、outline は出さない。

ご登録のメールアドレスを入力してください
枠色が #333333 に変わる
会員番号は 10 桁で入力してください
就航 15 空港からお選びください

入力欄がピルであることがこのサイトの特徴。角丸 4px や 8px の一般的なフォーム UI に置き換えないこと。入力文字は 16px(iOS の自動ズームを防ぐ最小値)。

07 / Elevation
Depth & Elevation

影は下方向にだけ、極端に浅く

spread に大きな負値(-10px / -35px)を入れて、輪郭をぼかさずに接地感だけを出す。

Level 0
none — 既定。ボタン・タグ・入力欄
Level 1 — --pc-shadow-s
0px 8px 10px -10px rgba(0,0,0,.25)
Level 2 — --pc-shadow-m
0px 30px 30px -35px rgba(0,0,0,.25)

モバイル用に --sp-shadow-m: 0px 20px 30px -35px rgba(0,0,0,.25) も定義されている。実測で影を持つ可視要素は 7 件のみ。

Layout

4px グリッドと 5 段の角丸

余白は Tailwind 型の --space-*。--space-44 が 176px で、ピルの半径と同じ値。

1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
12
48px
16
64px
24
96px
--radius-xs
4px
--radius-s
8px
--radius-m
16px
--radius-l
24px
--radius-xl
176px

コンテナ最大幅は 1200px、ヘッダー高さは 116px(--headerHeight)。ブレークポイントは 576 / 768 / 1024 / 1200 / 1400px。ホバーは opacity: .75 または scale: 1.03、イージングは cubic-bezier(.215,.61,.355,1)。