DESIGN.md — 漆黒と星空のモノクロ航空会社採用 LP（Monochrome Starry Night Airline Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、クール・先進的、シンプル・ミニマル
• キーワード: 漆黒・モノクロ写真・星空・明朝体・細線・余白
• 地の質感: マットな黒地に小さな白い星の点と流れ星を散らす。写真は粒子感のある白黒にする。
• 形: 角丸なしの直線構成。1px の細い枠線と横罫線を使い、人物写真だけ斜めの流線形で切り抜く。
• 温度感: 冷たく静か。夜間飛行のような緊張感と気品がある。

Colors

• 色は黒・グレー・白のモノクロだけを使う。有彩色は使わない。
• 地は #111111 と #000000 をセクションごとに切り替え、境目で段差を見せる。
• 星空のセクションは純黒にして、白い点の星を散らす。
• 強調は色ではなく、白い細枠・太さ・余白でつける。
• 写真はすべて白黒にして、黒地となじませる。
• 罫線はグレーの 1px にして、目立たせすぎない。

Typography

• 見出しは明朝の太字にし、2 行に改行して縦のリズムを作る。
• 見出しのすぐ下に、字間の広い大文字の英字ラベルを添える。
• 本文はゴシックで小さめにし、行間を広く取る。
• ボタンとリンクの行は明朝の太字で上品にそろえる。
• コピーは句読点まで大きく見せ、詩のように短い行で区切る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は見出しが左・カード群が右の 2 カラム。
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px でそろえる。
• 見出しは左寄せにし、英字ラベル→リード文→枠線ボタンの順に並べる。
• お知らせとリンクの一覧は横罫線で区切り、右端に矢印を置く。
• セクションの間は 80px 前後空け、ゆったりさせる。
• 働く環境の写真パネルは画面幅いっぱいにする。

Elevation & Depth

• 影は使わず、フラットに作る。
• 奥行きは地色の濃淡（#000 と #111）と、写真に重ねる半透明の黒帯で出す。
• 背景の星空は奥の層として固定で見せてもよい。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 基本は四角い白黒写真。人物は斜めの流線形（白いしずく形）の背景で切り抜く。
• セクション境界: 直線で地色を切り替えるか、1px のグレーの横罫線で区切る。
• 角丸は使わない。
• ボタンは四角い 1px の白枠にする。
• バッジは平行四辺形の細枠にする。
• 円形にするのはスライダーのドットと丸い矢印アイコンだけ。

Components

• 枠線 CTA ボタン（button-outline）: 透明地に白 1px の枠を付け、左寄せの明朝ラベルと右端の矢印「➤」を置く。
• お知らせ行（news-row）: 上に日付、下に【区分】付きのタイトルを置き、右端に白丸の矢印アイコンを付ける。行は罫線で区切る。
• 見出し＋英字ラベル（section-heading）: 明朝 2 行の見出しのすぐ下に、字間の広い大文字の英字ラベルを付ける。
• 職種カード（job-card）: 上に白黒写真、その下に見出しと説明文を置き、最後に罫線区切りの職種リンクを並べる。
• 矢印リンク行（link-list-row）: 罫線で区切った行に、明朝ラベルと右端の矢印を置く。
• 社員インタビュースライダー（interview-slider）: 白黒の人物写真を白い流線形の上で切り抜き、職種・部署バッジ・名前・ひと言を添える。左右に矢印、下にドットを置く。
• 斜め枠バッジ（badge-slant）: 平行四辺形の白い細枠の中に、短い実績ラベルを入れる。横に小さな星の装飾を付ける。
• 写真パネルリンク（photo-panel-link）: 全幅の白黒写真の下部に半透明の黒帯を重ね、明朝ラベルと矢印を載せる。

Do's and Don'ts

Do - 地は黒、文字は白、写真は白黒の 3 つに徹する。 - 星空の点を散らして、夜間飛行の世界観をつくる。 - 見出しは明朝にし、英字ラベルと組み合わせる。 - ボタンは細い白枠と矢印でそろえる。 - 余白を大きく取り、1 画面あたりの情報を絞る。

Don't - 有彩色やグラデーションのボタンを使わない。 - 角丸やピル型のボタンを使わない。 - カラー写真をそのまま載せない。 - ドロップシャドウや光沢を付けない。 - ポップな丸ゴシックや手書き文字を使わない。

Page Structure

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

1. ファーストビュー（世界観と企業の姿勢を一言で示す）: 白黒の現場写真を全面に敷き、下へ黒にフェードさせる。大きな明朝コピーと短い行のリードを載せ、枠線ボタンを置く。
2. お知らせ（最新の募集状況を伝える）: 罫線で区切った日付とタイトルの行を 6 件並べ、右端に丸い矢印を付ける。
3. 職種・拠点紹介（働く場所と職種を案内する）: 星空の黒地に、写真付きの職種カードを 3 枚縦に並べる。各カードに職種リンクの行を付ける。
4. 社員インタビュー（働く人の姿で共感をつくる）: #111 の地に、流線形で切り抜いた人物写真のスライダーを置く。
5. プロジェクトストーリー（挑戦の実績を示す）: 星空の地に、斜め枠バッジ・見出し・縦長の写真・説明文・矢印のセットを罫線で区切って並べる。
6. 働く環境（制度・キャリア・研修へ誘導する）: 全幅の白黒写真パネルを 3 枚縦に積み、黒帯のラベルを重ねる。
7. 採用情報・エントリー（応募へ導く）: 見出しとリード文の下に、主の枠線ボタンと採用区分のリンク行を置き、下線付きのテキストリンクを添える。
8. 締めのビジュアルとフッター（余韻とブランドを残す）: 機体のモノクロ写真を大きく見せ、その下にロゴと縦線区切りのサイト名を置く。

Imagery

• 写真はすべて高コントラストの白黒にし、黒が締まった仕上がりにする。
• 現場の人物は後ろ姿や見上げる構図にし、凛とした印象にする。
• 機体・空港・機内を大胆にトリミングして、質感を見せる。
• 背景には小さな白い星の点と、斜めの流れ星を散らす。
• 人物の切り抜きは白い流線形（しずく形）の上に重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では職種・インタビュー・プロジェクトを、左に見出し・右にコンテンツの 2 カラムにする。
• PC のインタビューは 3 人を横に並べて見せる。
• PC の働く環境は 3 枚の写真パネルを横に並べる。
• PC の採用エントリーは、左に機体写真・右に情報の左右分割にする。
• PC のファーストビューでは、コピーの右側に CTA ボタンを置く。

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 行書くと起動時に読み込まれる。