DESIGN.md — 赤紫×紺×蛍光黄の都市系新卒採用 LP（Bold Urban Pop Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、クール・先進的、信頼・誠実、力強い・インパクト
• キーワード: 都市・ポップ・コラージュ・太い欧文・蛍光差し色・オフセット影
• 地の質感: フラットな単色面。写真の上に線画の建物イラストや大きな曲線リボンを重ねる
• 形: 黒1px枠の角丸カード、ピル型ボタンに右下ベタ影、楕円・アーチ型のセクション境界
• 温度感: やや温かいニュートラル（グレー地に濃い赤紫）

Colors

• 地はグレー→紺→グレー→赤紫の順に大きな面で切り替え、リズムを作る
• 赤紫はブランド色として見出し文字とページ後半の大面に使う
• 蛍光イエローは見出し頭の丸ドット、本文キーワードの波線マーカー、紺地の大見出しのみに限定
• ボタンは白地に黒枠と黒のベタ影、文字は地のセクション色
• 背景に淡い赤紫の太い曲線リボンを敷き、動きを足す
• 濃色地の上の文字は白、小さな注記も白で統一

Typography

• 見出しは丸く太い欧文＋下に小さな和文の二段構成
• 英字見出しの左に蛍光イエローの丸ドットを置く
• 本文は短い句ごとに改行し、行間を広くとる
• 本文中に小さな角丸写真を文字サイズで挿し込む
• キーワードに蛍光イエローの手描き風波線を引く
• FVキャッチは斜体の太ゴシックで蛍光イエロー＋黒縁取り
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦積み、インタビューは横スライダー
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右余白は約16px
• 見出しは左寄せ、コンセプトとインタビューのみ中央
• カードは幅84%で中央に置き、画像下端にラベルを半分重ねる
• リストは番号＋項目名＋英字補足を黒線で区切る
• 各セクション末に中央のピル型ボタン

Elevation & Depth

• ぼかし影は使わない
• ボタン・ラベルは右下へ4px程度ずらした黒のベタ影
• カードや写真は黒の細枠でフラットに縁取る

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 黒枠の角丸長方形。仕事紹介は楕円カプセル型、FVは傾けて重ねる
• セクション境界: 大きな円弧・アーチ型で次のセクションへつなぐ
• 写真には必ず黒1pxの枠を付ける
• ラベル・ボタンは完全なピル型
• FV写真は少し回転させて重ね、裏に色ブロックを置く
• 動画サムネは対角に4分円の色面を置く

Components

• ピル型ボタン（button-primary）: 白地・黒枠・右下に黒ベタ影。文字は欧文太字
• ドット付き英字見出し（section-heading）: 蛍光丸ドット＋大きな丸い欧文＋下に小さな和文
• ラベル重ね写真カード（photo-card）: 黒枠角丸の写真の下端に、英字小ラベル＋和文タイトルのピル型白ラベルを重ねる
• お知らせ枠（news-box）: 白地黒枠の角丸大きめボックス。赤紫の日付と本文、右に開閉矢印
• 波線マーカー（marker-underline）: 本文キーワードの下に蛍光イエローの手描き風波線
• 職種切替タブ（tab-chip）: 赤紫・紺のピル型チップにベタ影。左右に細い線を伸ばす
• 番号付きリスト（index-list）: （01）形式の番号、紺の項目名、灰の英字補足、黒線で区切る
• 動画サムネイル（video-thumb）: 赤紫地の対角に紺の4分円、中央に細いリングと蛍光再生マーク
• 流れる英字帯（marquee-text）: 楕円写真の上を横切る蛍光イエローの大きな英字

Do's and Don'ts

Do - 見出しは必ず欧文ディスプレイ＋和文サブの組みにする - 写真・ボタンに黒枠とベタ影を付け、手作りポップ感を統一する - セクションの地色は大きな面で切り替え、円弧でつなぐ - 蛍光イエローは小さな面積の差し色にとどめる - 人物写真はスーツ姿の自然な笑顔で統一する

Don't - ぼかし影やグラデーションを使わない - 蛍光イエローを白地の本文色に使わない - 角の尖った枠なし写真を並べない - 明朝体や細いフォントで見出しを組まない - 赤紫・紺以外の濃色で大面を作らない

Page Structure

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

1. ファーストビュー（問いかけで就活生を引き込む）: 傾けた人物写真のコラージュに色ブロックと線画の都市イラストを重ね、斜体の蛍光キャッチを置く
2. お知らせ（最新の採用情報を伝える）: ドット付き小見出し＋白い角丸ボックス1件
3. コンセプトメッセージ（組織の想いを語る）: 中央の英字大見出しと紙飛行機アイコン。短い行の本文に小さな写真と波線マーカーを挿す
4. 紹介動画（雰囲気を動画で伝える）: 赤紫×紺の幾何サムネ。下を大きな円弧で区切る
5. 組織紹介（魅力・事業・データへ導く）: 曲線リボン背景の上に、ラベル付き写真カードを4枚縦積み
6. 先輩Q&A（社員の声で不安を解消）: 紺地に縦長の動画カードスライダー、蛍光の和文大見出し
7. 仕事紹介（職種・業務の入り口）: 紺地に楕円写真、流れる英字帯、白いピルボタン
8. 働く環境（制度・福利厚生を一覧）: グレー地に番号付きの線区切りリスト3項目
9. 社員インタビュー（人を通じて共感を得る）: アーチ型の赤紫地。職種タブ、角丸写真の横スライダー、職種チップと欧文の人名
10. 座談会（複数社員の対話を紹介）: 重なった写真コラージュとドット付き見出し、ボタン
11. 採用情報（募集要項・FAQへ誘導）: 赤紫地に英字小ラベル＋和文項目＋右のテキストリンクを白線で区切る

Imagery

• 若手社員のスーツ姿を、屋外の街や明るいオフィスで自然光で撮る
• 都市の空撮、緑の公園、木の内装など明るく彩度高めの風景
• 赤紫・紺・黄・緑の太い線で描いたアイソメ風の建物線画
• 淡い赤紫の太い手描き風の曲線リボンを背景に敷く
• 紙飛行機などシンプルな線のアイコンを見出しに添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは左上ロゴ、右上にピル型マイページボタンと丸いメニューボタン
• PCのFVは写真コラージュを横に広げ、お知らせを1行のピルにする
• 組織紹介はPCで大1枚＋小3枚のグリッドにする
• 先輩Q&AはPCで扇状に並べたカードにする
• インタビューはPCで3枚見せのスライダー、座談会は写真と見出しを左右に並べる
• 採用情報のリンクはPCで2カラムにする

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