DESIGN.md — 紺と青の幾何学図形で魅せる新卒採用LP（Bold Navy Geometric Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、力強い・インパクト、信頼・誠実
• キーワード: 濃紺・幾何学図形・斜めの動き・大きな英字・人物写真・白と紺の交互配置
• 地の質感: グラデーションなしのフラットな単色の面に、明るく自然光の写真を組み合わせる
• 形: 平行四辺形の帯、矢羽根（シェブロン）、四分円・同心円の弧、直角三角形。カードは角丸なし
• 温度感: クールで前向き。青系一色の中に、写真の肌色が温かみを添える

Colors

• 地の色は白と濃紺を交互に切り替え、リズムを作る
• 図形は濃紺・ロイヤルブルー・明るいブルー・淡い水色の4段階で重ねる
• 暖色やアクセントの差し色は使わない。強調は青の濃淡とサイズの差だけで出す
• 紺地の上の文字・枠線ボタンはすべて白にする
• 白地の英字ラベルと線ボタンは紺にし、見出しは黒にする
• タグは紺の塗りに白文字で小さく使う

Typography

• 見出しは英字ラベル→和文見出し→本文→線ボタンの順で縦に積む
• 和文見出しは短い文節で改行し、3〜4行で積み上げる
• 英字は大文字で書き、和文と組み合わせてバイリンガルにする
• 本文は小さめの文字で、行間は広めにとる
• 巨大英字の上には写真が重なってもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューのカードだけは 2 列で、左右を上下にずらして互い違いに置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約15px
• テキストはすべて左揃え
• 写真は画面の端まで広げるか、片側だけ余白を残して配置する
• 写真の上に小さな写真を重ねて奥行きを出す
• 図形は写真の背後やセクションの境目からはみ出させる

Elevation & Depth

• 影はほぼ使わず、フラットに作る
• 奥行きは写真・図形・面を重ねて出す
• 注目カードは濃紺の太い枠で囲み、浮いて見せる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。人物は明るいスタジオ風で切り抜かない
• セクション境界: 直線で切り替える。境目には矢羽根・斜めの帯・円弧の図形をまたがせる
• 写真とカードは角を立てたシャープな長方形にする
• ボタンとタグだけはピル型にする
• 図形は45〜60度の斜めの帯と、大きな円弧を基本にする
• アイコンは細い白の線画にする

Components

• 矢印つき線ボタン（button-outline）: 細い枠線のピル型ボタン。左に文字、右に横向きの矢印を置く。白地では紺、紺地では白にする
• エントリーボタン（button-entry）: 紺地の上に置く、幅いっぱいの大きな白枠ピル型ボタン。2行の文言と外部リンクのアイコンを入れる
• 英字ラベル（section-label）: 見出しの上に置く、小さな大文字の英字
• 注目プログラムカード（feature-card）: 濃紺の太い枠で囲んだ白いカード。上に写真と英字の帯ラベル、下にロゴ風の英字・見出し・本文・丸いリンクアイコンを置く
• 社員インタビューカード（interview-card）: 縦長の人物写真の下に、一言・氏名と入社年・役職タグ・右矢印を置く
• 役職タグ（tag-role）: 紺の塗りに白文字の小さなピル型タグ
• 職種リスト項目（job-item）: 左に白い線画アイコン、右に職種名と説明文を並べる
• 幾何学装飾（geo-shape）: 斜めの帯・矢羽根・円弧・三角を青の濃淡で重ね、セクションの境目に配置する

Do's and Don'ts

Do - 青の濃淡4段階と白・黒だけで画面を作る - 大きな幾何学図形で、斜めの動きや前に進む勢いを表現する - 英字ラベル・和文見出し・本文・線ボタンの型をセクションごとに繰り返す - 写真を重ねたりずらしたりして、雑誌のように配置する - 人物写真は自然光で明るく、笑顔や議論中の場面を選ぶ

Don't - 暖色の差し色やグラデーションを入れない - 写真やカードに角丸や強い影をつけない - 見出しを中央揃えにしない - 手書き風やかわいい装飾を加えない - 白地のセクションと紺地のセクションを連続させすぎない

Page Structure

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

1. ファーストビュー（企業の姿勢を印象づける）: 全面の人物写真に短い和文コピーを2行置き、左下に巨大な白い英字コピーを重ねる
2. メッセージ（会社の現在地と求める人物像を伝える）: 白地に3行の大きな見出しと長めの本文を置き、下端から斜めの帯をのぞかせる
3. 注目インターン（インターンへのエントリーを促す）: 斜めの帯の背景の上に、紺枠の写真つきカードを置く
4. 事業戦略（事業の方向性を紹介する）: 紺地に円弧の図形を重ね、白文字の見出しと線ボタンを置く。下に都市写真と小さな写真を重ねる
5. 理念（大切にしている価値観を伝える）: 矢羽根の図形のあとに白地のテキストを置き、端まで広げた写真を続ける
6. 働く環境（制度や社内の様子へ誘導する）: 紺地に三角形の装飾を置き、白文字・線ボタン・オフィス写真を並べる。写真の下に円弧を敷く
7. 代表メッセージ（トップの考えを伝える）: 白地にテキストを置き、代表の写真に小さな写真を重ねる。下に矢羽根の帯を入れる
8. 社員インタビュー（先輩社員のキャリアを見せる）: 2列のカードを上下にずらして互い違いに並べ、役職タグと矢印をつける
9. 職種とエントリー（職種を説明し、応募へ導く）: 深い紺地に大きな円を敷き、英字見出しと職種リストを置く。各職種の下に大きな枠線ボタンを置く
10. 締めのビジュアル（最後にもう一度印象を残す）: ロイヤルブルーの地に、散らばった写真と巨大な英字コピーを重ねる
11. フッター（ページ内の各セクションへのナビゲーション）: 黒地に英字のメニューと和文の補足を並べ、ロゴを置く。その下に白い帯でポリシーリンクを並べる

Imagery

• 若手社員が議論したりPCで作業したりする、自然な瞬間を撮った写真
• 白いカーテンや明るい窓辺を背景にした、上半身のポートレート
• 青空と高層ビル群の都市写真で、成長や未来を象徴する
• 大小の写真を重ねたりずらしたりしてコラージュ風に配置する
• フラットな単色の幾何学図形（斜めの帯・矢羽根・円弧・三角）
• 職種アイコンは白の細い線画
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは見出しと本文を左右に分け、本文を右側に置く
• PCでは写真とテキストを左右交互に並べる2カラムにする
• 注目カードはPCで横長にし、写真を左、テキストを右に置く
• インタビューはPCでも2列の互い違いを保ち、見出しの右に一覧ボタンを置く
• PCの職種エリアは、左に写真、右に紺地のリストを置く
• フッターのメニューはPCで3列の格子状に並べる

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