DESIGN.md — 紺×金×赤CTAの士業系採用LP（Navy Gold Corporate Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 濃紺グラデーション・金の数字・赤いピルCTA・明朝×ゴシック・白マーカー強調・斜め切り写真
• 地の質感: 濃紺の縦グラデーションに六角形グリッドやテック系の薄い線を重ねる。黒パネルは艶のないフラット。
• 形: 写真は平行四辺形の斜め切り、セクション境界も斜めカット。カードは小さめ角丸。
• 温度感: 寒色中心で冷静・知的。金と赤だけが熱量を足す。

Colors

• 地は濃紺〜青の縦グラデーションを基本にし、全体の6割以上を占める。
• 数値・図解・キャリアカードは黒〜チャコールのパネルに載せる。
• 年収などの数字は金のグラデーション文字で表示する。
• 赤はCTAボタンと下線にだけ使う。
• 濃紺地の強調は白マーカー＋紺文字、白地の見出し強調は紺ベタ＋白文字にする。
• カルチャー・インタビューなど中盤は白〜薄青の地にして息継ぎを作る。
• career-badge は文字 #E0E4E7 × 背景 #C6A766 のコントラスト比が 1.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7A612D、4.59:1）を使う。

Typography

• 見出しは明朝、本文と強調見出しはゴシックで使い分ける。
• 見出しの背後に、大きく薄い欧文イタリックの透かし語を重ねる。
• 強調したい語だけを1.5〜2倍の大きさにして、助詞は小さく組む。
• 数字は欧文セリフ体で大きく、単位は小さく添える。
• 本文の要点は白マーカーで行単位にハイライトする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はメリットを左テキスト右写真の2カラム、カルチャーとキャリアも2カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右約22pxの余白で組む。
• Merit番号＋マーカー見出し＋細い罫＋本文の順で縦に組む。
• 黒パネルは左右余白を取った箱として置き、内側に図解を組む。
• CTAは団体写真を暗くした帯の上に、導入文と一緒に繰り返し置く。
• 会社概要は2列の表形式にし、罫線で区切る。

Elevation & Depth

• CTAボタンには下方向の濃い影を付けて浮かせる。
• カードは影を付けず、色の面だけで区切る。
• 写真には細い白線のフレームを少しずらして重ねる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 平行四辺形の斜め切り、または横長の矩形
• セクション境界: 体験談では斜めカット、それ以外は色の切り替えで区切る
• CTAは完全なピル型にし、右端に矢印を付ける。
• FAQやカルチャーのカードは小さめの角丸にする。
• 見出し下には短い白い横線を置く。

Components

• 赤ピルCTA（button-primary）: 赤いグラデーションのピル型ボタン。白太字の文言と右矢印を付け、下に影を落とす。
• Merit番号見出し（merit-heading）: 小さな欧文イタリックと大きな数字の横に、白マーカーの2行見出しを置き、下に罫を引く。
• 金数字パネル（stat-panel）: 黒パネルに金のグラデ矩形アイコンと、大きな金の数字を並べる。
• 悩みタグ群（pain-tags）: 暗い写真の上に、黒地白文字の小ラベルと白地紺文字の大ラベルを散らして配置する。
• キャリアカード（career-card）: チャコールのカードに欧文イタリックの番号と斜線、水色帯の見出し、写真と本文を収める。
• 行動指針カード（value-card）: 紺グラデのカードに、番号付きの明朝見出しと短い説明を入れる。
• FAQアコーディオン（faq-item）: 白いカードの左にブラウン系の角型Qアイコン、右に開閉用の▼を置く。
• 経歴バッジ（career-badge）: 金ベージュの帯に前職を書き、矢印でつないで入社年を示す。
• 写真ラベル（photo-label）: 写真の右上に置く、斜めカットの紺帯ラベル。白文字でイベント名を入れる。

Do's and Don'ts

Do - 地は濃紺グラデにし、数字は金、CTAは赤の三色構成を守る。 - 見出しには必ず欧文の透かし語を重ねる。 - 本文の要点は白マーカーで強調する。 - CTAは3〜4セクションごとに団体写真の帯の上で繰り返す。 - 人物写真はスーツ姿で寒色寄りに補正したものを使う。

Don't - パステルや暖色の地を広く使わない。 - 赤をCTA以外の装飾に多用しない。 - 丸ゴシックや手書き書体を使わない。 - 大きな角丸や柔らかい影でポップにしない。 - 金の数字を平板な黄色で塗らない。

Page Structure

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

1. ファーストビュー（効率化と価値最大化を一言で打ち出す）: 濃紺の写真の上に明朝の大コピーを置き、強調語を巨大化して赤い筆跡の下線を引く。下に社員の集合写真と2つの実績バッジを並べる。
2. CTA（カジュアル面談へ早めに誘導する）: 濃紺地の中央に赤ピルボタンを置く。
3. 悩みの提起（業界の不満を列挙して共感を得る）: 暗いモノトーン写真の上に悩みタグを散らし、中央の3つを大きくする。
4. 問いかけ（転職を考えるきっかけを示す）: 濃紺地に、水色の下線を付けた2行の明朝コピーを置く。
5. メリット（働く利点を4つ示す）: Merit番号見出し、本文、斜め切り写真の順に組む。各メリットの間に黒パネルの数値・比較グラフ・図解を挟む。
6. キャリアパス（経営者への道を見せる）: チャコールのキャリアカードを2枚並べる。
7. 中間CTA（共感が高まったところで面談を促す）: 暗くした団体写真の上に水色帯のコピーと赤い下線の問いかけを置き、赤CTAを添える。
8. 社員事例（成果と評価が直結することを証明する）: 斜めカットの人物写真に白文字の帯を重ね、名前・経歴バッジ・黄色強調入りの本文を続ける。
9. インタビュー（社員の声を詳しく伝える）: 白地に紺の明朝見出しを置き、人物写真と左罫付きの小見出し、本文、全文読むボタンで組む。
10. 動画インタビュー（動画で社内の様子を伝える）: 紺地に動画のカルーセルを置き、左右に赤丸の矢印を付ける。
11. カルチャー（価値観を10個提示する）: 薄青の地に紺グラデの番号付きカードを縦に並べる。
12. 社内イベント写真（社内の雰囲気を伝える）: 余白なしの写真グリッドに、紺の斜めラベルを重ねる。
13. 代表メッセージ（ビジョンを語る）: 夜景のビル写真を背景にし、代表の写真と明朝の名前、長文を置く。
14. よくある質問・会社概要・最終CTA（不安を解消してから申込へ導く）: 書籍バナーの後にFAQカードと罫線の表を並べ、最後に団体写真帯の上に赤CTAを置く。

Imagery

• スーツ姿の男性社員を、暗めで寒色寄りに補正して撮る。
• オフィスや高層ビルの写真には青いトーンをかける。
• テクノロジー表現は、握手やネットワークの光の線などの青白いCGにする。
• 図解は紺のフラットなビルと人物のアイコンに、金の矢印を組み合わせる。
• CTA帯の背景は大人数の集合写真を濃紺で暗く沈めて使う。
• イベント写真は明るく、自然な笑顔のスナップを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はメリットを左テキスト右斜め写真の2カラムにする。
• PC の年収パネルは数値を2列のグリッドで並べる。
• マッチング図解は、SP では縦並び、PC では横並びのフローにする。
• PC ではキャリアカードと行動指針を2カラムにし、行動指針は1枚の大パネルにまとめる。
• PC では動画を3本横に並べ、イベント写真はモザイク状のグリッドにする。
• CTAボタンは PC でも幅を約70%に抑え、中央に置く。

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