DESIGN.md — 黒×赤×黄の熱血系営業職採用 LP（Black Red High-Impact Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 黒と赤・極太ゴシック・黄色の強調・光線エフェクト・斜めカット・熱量
• 地の質感: 黒地に赤い光の筋やレンズフレア、粗い擦れ文字。グレー面には縦のスピード線、赤面には集中線を入れる。
• 形: 角丸なしの四角カードと斜め・V字カットの帯。CTA だけ大きなピル型。
• 温度感: 高温で攻撃的。暗い地に赤く燃える色温度。

Colors

• 地は黒と真紅を交互に切り替え、白はカードと FAQ だけに限定する。
• 暗い地の一番伝えたい語は黄色にし、ほかは白にする。
• 白い面の上で強調する語は赤の極太数字・文字にする。
• CTA は赤のグラデに白い縁をつけ、黒地でも灰地でも浮かせる。
• 赤の面には集中線、グレーの面にはスピード線を薄く重ねて質感を出す。
• 青や緑の色は入れない。例外は LINE アイコンだけ。

Typography

• 見出しは極太ゴシックにし、1 行の中で文字サイズに強弱をつける。
• 助詞は小さくし、名詞・数字を大きくする。
• 暗色地の見出しには黒い縁取りか影をつけ、可読性を保つ。
• 欧文ラベルは斜体のコンデンス書体を使い、薄く透かして見出しの背後に置く。
• 最後の決めコピーだけ極太明朝にし、温度を変える。
• 本文も太字（700）にし、細いウェイトは使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 6% の余白で幅いっぱいに縦へ積む。
• セクション境界は V 字の切り込みや斜めの帯でつなぐ。
• セクション間には下向きの二重シェブロンを置き、流れを示す。
• 見出しは中央揃えにし、理由セクションだけ左揃えにする。
• ステップは番号・縦線・テキスト・アイコンを横 1 列に並べる。

Elevation & Depth

• CTA ボタンには白い縁と下方向の柔らかな影をつける。
• 暗色地の写真カードは赤い発光で縁取る。
• カード類は基本フラットにし、影より色の対比で浮かせる。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 横長の矩形。成果写真は角丸 8px＋赤い発光枠。
• セクション境界: 斜めの赤帯、V 字の切り込み、FAQ 前だけ大きな角丸の上辺。
• 数字カードは角丸なしの白い四角に赤い二重枠を重ねる。
• Before/After カードの下辺は三角の矢印にする。
• 見出しの白帯は角丸なしの矩形にする。

Components

• LINE 誘導ピルボタン（button-line-cta）: 赤のグラデに白縁。左に LINE アイコン、右に矢印。上に矢印付きの小さな案内文を置く。
• 数字訴求カード（stat-card）: 白い面に赤の二重枠。左に黒と赤の極太数字、右にグラフや人物のアイコンを置く。
• 斜め赤帯見出し（slant-band-heading）: 画面を斜めに横切る赤い帯に、白と黄の極太見出しを載せる。
• 白帯見出し（boxed-heading）: 赤地の上に黒文字の白矩形を行ごとに置く。上に斜体の Reason 番号と細い横線を添える。
• カリキュラムのステップ（step-row）: 黒い横長の帯に、赤の斜体番号・縦線・白文字・線画アイコンを並べる。下に三角の矢印をつけて 5 段積む。
• Before/After カード（before-after）: Before はグレーのスピード線面、After は赤の集中線面。右上に斜体の欧文ラベルを置く。
• 事例見出し（case-header）: シルエット写真に赤黒の極太コピーを載せる。右上に CASE 番号、下に属性の注記。
• FAQ 項目（faq-item）: 赤い Q./A. を大きく置き、項目間を赤の細線で区切る。

Do's and Don'ts

Do - 黒と赤の面を交互に積み、テンポを出す。 - 数字や結果は極太・大サイズで見せる。 - 暗色地の決め語は黄色で 1〜2 語だけ強調する。 - 光線・集中線・スピード線で熱量を出す。 - CTA は FV 直下と終盤の 2 か所に同じ形で置く。

Don't - パステルや淡い色を使わない。 - 細いウェイトや小さな見出しにしない。 - 白い面を広く取りすぎない。白は FAQ・カードに限る。 - ボタン以外を丸くしない。 - 黄色を本文に多用しない。

Page Structure

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

1. ファーストビュー（現状への不満を刺激し、熱量を宣言する）: 黒地に赤い斜め帯と光線。擦れ加工の巨大コピー、筆の下線つきサブコピー、字間を広げた短文 3 行。
2. CTA（早い段階で LINE へ誘導する）: 薄灰の帯に案内文と赤のピルボタン。
3. 会社紹介（実績を数字で示す）: 濃紺の黒地に欧文ラベル付きの見出し。白い数字カードを 3 枚縦に積む。
4. 入社後の未来（変化後の姿を想像させる）: 斜めの赤帯見出しのあと、発光枠の写真に赤い極太キャプションを重ねて 3 枚。
5. 変われる理由（仕組みの根拠を示す）: 赤地で V 字に導入。Reason 番号＋白帯見出し＋説明文＋写真を 3 回繰り返す。
6. サポート内容（教育体制で不安を減らす）: 暗い写真の地に方眼の白パネル。赤ラベルの下に黒いステップ帯を 5 段。
7. 社員の変化事例（実例で共感させる）: 斜めの赤帯見出し。CASE ヘッダーと Before/After カードを 2 組。
8. クロージング（決断を後押しする）: 赤い光線の都市の地に、明朝の対比コピー 2 段と CTA。
9. よくある質問（最後の不安を解消する）: 上辺を大きな角丸にした白い面。赤い Q/A と赤の区切り線。
10. フッター（会社情報とポリシーを載せる）: 白地にロゴとプライバシーポリシーのリンク。

Imagery

• スーツ姿の若い男性を、暗い背景に赤いリムライトで劇的に撮る。
• 赤い光線・レンズフレア・パースの効いた都市の夜景を CG 風に。
• 夕日の逆光シルエットや、マントをなびかせるヒーロー風シルエット。
• 白黒＋赤の 1 色を差したシンプルな人物・グラフアイコン。
• 細い線画のステップアイコンを白で描き、赤をワンポイントに入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も SP と同じ 1 カラムの縦長構成を中央に置く。
• PC は幅を 750px 程度に固定し、左右は黒地で埋める。
• 文字やカードは比率のまま拡大し、レイアウトは変えない。
• PC ではボタン幅を最大 640px 程度に抑える。

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