DESIGN.md — 赤×オレンジの元気な新卒採用 LP（Red-Orange Gradient Energetic Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 赤オレンジグラデ・極太英字見出し・方眼背景・赤細枠カード・白抜きマーカー・点線タイムライン
• 地の質感: 白地に淡いピンクの方眼グリッドを薄く敷く。紙のようなフラットな質感。
• 形: 角丸はほぼ使わず四角が基本。ボタンも四角の細枠。インタビューカードだけ小さな角丸と影がある。
• 温度感: 暖色寄り。赤とオレンジの熱量を白で中和する。

Colors

• 地は白と、淡いピンクの方眼柄を交互に使ってセクションを分ける。
• 英字のセクション名は必ずブランド赤、和文のサブ見出しはオレンジにする。
• 帯見出しと CTA は赤→オレンジの横グラデに白文字。
• 本文中の強調は赤またはオレンジの塗りに白文字のマーカーにする。
• カードは白地に赤の 1px 細枠で囲む。
• 黒はヘッダーと本文だけに使い、面積の大きい黒面は作らない。

Typography

• 各セクションは大きな太い英字を赤で置き、すぐ下に和文サブ見出しをオレンジで添える。
• 本文も太めのウェイトで、密度が高くても力強く見せる。
• 番号は大きな赤の数字にし、右に 2 行の赤い見出しを並べる。
• グラデ帯見出しは 1 行ずつ帯を分けて段をずらして積む。
• 小見出しの左に赤の縦棒を付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せの固定幅で、特徴やリストを 2〜3 カラムにする
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 80px、基本単位 8px、カード内 22px（375px 幅換算）
• 左右の余白は約 12px。テキストは左揃え。
• カードは画面幅いっぱいに近い幅で、赤細枠で囲む。
• セクション名とサブ見出しの組をセクションの左上に固定で置く。
• 表形式の情報は項目名を太字、値を細めにして縦に積み、薄い線で区切る。
• カード内の大きな区切りには赤の点線を使う。

Elevation & Depth

• 基本はフラットで影なし。
• インタビューカードだけ、ぼかしの大きい薄いグレーの影を付ける。
• 外部リンクのバナーは薄いグレー枠と弱い影。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角のまま全幅か枠いっぱいに入れる。人物写真は斜めの帯ラベルを重ねる。
• セクション境界: 直線で切り替える。方眼セクションの境界に赤の細い横線を引くこともある。
• ボタンは四角で、細い赤枠か塗りのグラデにする。
• 丸は求める人物像の図（円 3 つ）とスライダー矢印だけに使う。
• タイムラインは赤い点線と白抜きの赤丸でつなぐ。

Components

• グラデCTAボタン（button-primary）: 赤→オレンジのグラデの四角ボタン。白文字の右に細い矢印線を付ける。
• 赤枠サブボタン（button-outline）: 白地に赤の細枠を付けた全幅ボタン。赤文字と矢印線。
• グラデ帯見出し（band-heading）: 1 行ずつの白文字を赤→オレンジのグラデ帯に乗せ、段をずらして積む。
• 英字セクション名（section-title）: 極太の赤い英字の下に、オレンジの和文サブ見出しを置く。
• 赤細枠カード（card-outline）: 白地を赤の 1px 枠で囲んだ情報カード。中を点線で区切る。
• 白抜きマーカー強調（marker-highlight）: 本文の一部を赤かオレンジで塗り、白文字で強調する。
• 番号付き特徴（number-feature）: 大きな赤い数字＋赤い 2 行見出し＋黒い本文の組。
• インタビューカルーセル（interview-slider）: 角丸と影の白カード。中央に写真、左右に赤丸の矢印、下にドット。
• 職種タグ（tag-outline）: 赤細枠の四角タグを横に並べる。
• 選考ステップの縦タイムライン（step-timeline）: 赤の点線と白抜き赤丸をつなぎ、左に小さな STEP 番号、右に工程名を置く。

Do's and Don'ts

Do - セクションの頭は英字の赤見出しと和文のオレンジ見出しをセットで置く。 - 強調は白抜きマーカーにして、1 段落に 1〜2 箇所までに絞る。 - 情報の塊は赤細枠のカードにまとめる。 - 白背景と方眼背景を交互にしてリズムを作る。 - 写真は人物がはしゃぐ躍動感のあるカットを使う。

Don't - 大きな角丸やピル型のボタンを使わない。 - 青や緑など寒色をアクセントに足さない（外部ロゴは除く）。 - 細い明朝体で見出しを組まない。 - グラデーションを赤〜オレンジ以外の色にしない。 - 枠線を太くしたり濃い影を付けたりしない。

Page Structure

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

1. ヘッダー（ロゴとメニューの表示）: 黒帯の中央に白ロゴ、右にハンバーガーメニュー。
2. ファーストビュー（採用メッセージで惹きつける）: 全幅の集合写真に、白地の帯見出しを 2 段と小さなグラデ帯の補足、その下にグラデ CTA を重ねる。
3. ビジョン（会社の事業と価値観を伝える）: 英字見出し、グラデ帯の 2 段見出し、マーカー入り本文、赤枠ボタン、紹介動画を縦に並べる。
4. 仕事紹介（職種の特徴と業務内容を示す）: 方眼背景に赤枠カード。上は写真に白帯見出し、下に番号付き特徴 3 つと縦棒見出し付きの箇条書き。
5. 社員インタビュー（先輩の声で共感を生む）: 影付きカードのカルーセル。見出し、写真、コメント、赤い小見出しで Q&A を並べる。
6. 募集要項（条件を明示する）: 赤枠カードの中に項目名と値を縦に積み、薄線で区切る。最後にエントリー方法と外部バナー。
7. 求める人物像（活躍する人材像を示す）: 赤い同心円を中心に白丸 3 つを置いた図と、丸数字見出し＋マーカー本文 3 項目。
8. 説明会・選考フロー（説明会の内容と選考の流れを伝える）: リード文、赤枠の職種タグ、赤太枠の説明会カード、点線の縦タイムラインでステップを並べる。
9. クロージングCTA（エントリーを促す）: 方眼背景の中央にグラデ帯キャッチを再掲し、エントリー用のバナーを 2 つ縦に並べる。

Imagery

• 若手社員が笑顔で動き回る、躍動感のある実写を使う。
• FV は低い位置から見上げる広角の集合写真にする。
• 人物写真には白文字の斜め帯ラベルを重ねてもよい。
• 図解は赤のグラデ円と白丸だけで作るフラットな図にする。
• 背景装飾は淡いピンクの方眼グリッドだけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 1000px 前後の中央寄せで、FV は横長の写真にキャッチを左寄せで重ねる。
• PC のヘッダーは横並びのナビで、右端にグラデのエントリーボタンを置く。
• ビジョンはテキストと動画の 2 カラム、特徴は 3 カラム、業務内容は 2 カラムにする。
• 英字見出しとサブ見出しを PC では横並びにする。
• 選考フローは PC では横並びのタイムラインに変える。
• インタビューは PC では左右のカードがはみ出して見えるカルーセルにする。

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