DESIGN.md — 白×紺青と水色の泡の宇宙系採用 LP（Airy Space Blue Recruitment LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: 余白・細い欧文見出し・半透明の円・紺青・ずらした水色の面・大判写真
• 地の質感: フラットで影なし。半透明の円が重なり合う透明感。
• 形: 写真とパネルは角丸なしの矩形。ボタンだけ正円。
• 温度感: やや寒色寄りの涼しく明るい印象

Colors

• 地は白。薄い水色パネルを画面端から少しずらして敷き、セクションのまとまりを示す。
• 紺青はボタン・リード見出し・最下部の応募セクションだけに使う。
• 装飾円は青・シアン・ラベンダーを半透明（不透明度 60〜80%）で重ねる。
• マゼンタは福利厚生など 1 か所の強調バナーだけに限る。
• お知らせ帯だけ薄いグレー面にする。
• 影やグラデーションは使わない。
• highlight-banner は文字 #EEFEFF × 背景 #E80882 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#DE087C、4.57:1）を使う。

Typography

• 英字大見出しは極細（200）の大きいサイズで、細さと大きさの対比を出す。
• 英字見出しの下に左の細線と字間を広げた太字の日本語見出しを置く。
• 本文は行間を 2 前後と広くとる。
• リード見出しだけ紺青・中太にする。
• FV コピーだけ明朝の白文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物はカルーセル、採用リンクは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 100px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 25px。
• 水色パネルは左端から約 60px 内側に寄せ、右端まで敷く。
• セクション頭に装飾円の群れを右上か左上に置く。
• VIEW ALL は右寄せで、ラベルと丸ボタンを横に並べる。
• 写真は本文幅いっぱいか、片側を画面端まで裁ち落とす。

Elevation & Depth

• 影は使わず、フラットな面の重なりだけで奥行きを出す。
• 半透明の円を重ねて透明感のある層をつくる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。コラージュ写真はわずかに傾けて並べる
• セクション境界: 直線。水色パネルの面の切り替わりで区切る
• 矢印ボタンは直径 48px 前後の紺青の正円。
• ラベル内の小さなタグだけピル型を使う。
• カードやパネルは角を立てる。

Components

• 丸矢印ボタン（button-circle-arrow）: 紺青の正円に白い小さな三角。左に VIEW ALL ラベルを添える。
• 英字＋和文の見出し（section-heading）: 極細の英字大見出しの下に、左の細線と字間を広げた太字の和文を並べる。
• 半透明の泡の装飾（bubble-decoration）: 青・シアン・ラベンダーの円を 5〜10 個重ね、見出しのそばに置く。
• ずらし水色パネル（offset-panel）: 左端から内側に寄せた薄い水色の面。写真や本文がパネルからはみ出すように重なる。
• 職員カルーセルカード（people-card）: 縦長の人物写真の左下に白地・青文字の所属タグ。下に入構年と氏名。ドット式のページ送り付き。
• お知らせ帯（news-bar）: グレー面に英字の小見出し、日付と 1〜2 行のタイトルを並べる。
• 強調バナー（highlight-banner）: マゼンタの面に白い太字のタイトルと、白いピル型のサブラベル。
• 応募リンクタイル（apply-link-tile）: 紺青の面の上に白い矩形を 2 列で置き、中央に青い太字のラベル。

Do's and Don'ts

Do - 英字見出しは極細で大きく組み、余白を十分にとる。 - 水色パネルをずらして写真と重ね、層を感じさせる。 - 泡の装飾はセクションの頭に 1 群ずつ置く。 - 強いアクセント色は紺青に絞り、ボタンは正円で統一する。 - 写真は青空や現場など、明るく実写感のあるものを大きく使う。

Don't - 影・グラデーション・角丸のカードを使わない。 - 太い英字見出しにしない。 - 暖色を多用しない。マゼンタは 1 か所だけ。 - 本文の行間を詰めない。 - 泡の装飾をすべてのブロックに入れて騒がしくしない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（スケール感と志を伝える）: 全面の実写写真に白い明朝の 2 行コピー。右端に縦のスライドドット。ヘッダーは左ロゴと右のハンバーガー。
2. メッセージ（理念を語りかける）: 白地に短い文を 3 段落、行間を広くとって並べる。右側に泡の装飾。
3. お知らせ（最新情報を伝える）: グレー帯に青い英字の見出しと、日付付きのリスト。
4. 組織紹介（事業の概要を伝える）: 写真の下に英字見出し、青いリード、本文、VIEW ALL を置く。背景に水色パネル。
5. サブ項目リンク（関連ページへ誘導する）: 横長の写真＋細い英字見出し＋和文＋丸ボタンを 3 つ縦に並べる。
6. 職員紹介（人の魅力を伝える）: 泡と英字見出しの下に、人物写真カードの横カルーセル。
7. 職種・キャリア（職種の分類を示す）: 写真コラージュの上に白い極細の英字で 2 職種を重ねる。
8. 働き方・福利厚生（制度の魅力を伝える）: 水色パネルの上にマゼンタの強調バナーと VIEW ALL。
9. SNS（日常の発信へ誘導する）: 各 SNS のアイコン付き見出しの下に、3 列の投稿グリッドと動画サムネイルの縦並び。
10. 応募情報（応募行動へつなげる）: 紺青の全幅面に白い英字見出しと、白いリンクタイル 2×2。

Imagery

• 青空の下の施設や機体など、晴れた日の明るい実写写真を使う。
• 人物は作業着やオフィス服の自然な笑顔を、腰から上で縦長にトリミングする。
• 写真コラージュは複数の写真を少し傾けて重ねる。
• 装飾は半透明の正円の重なりだけにし、イラストは使わない。
• FV は打ち上げや宇宙空間など、ダイナミックな全面写真にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 2 カラム。左に英字見出しと本文、右に写真を置く。
• PC のヘッダーはテキストナビに、黄色・紺青の小さなボタンを並べる。
• PC の FV はコピーとメッセージ本文を写真の右側に重ねる。
• PC のサブ項目リンクは左に小さな写真、右に見出しと丸ボタンの横並びにする。
• 応募タイルは PC で 4 列の横並びにする。
• SNS は PC で Twitter と Instagram を 2 列、動画を 3 列にする。

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。