DESIGN.md — 紺×金の手書き英字が映える士業採用 LP（Navy and Gold Corporate Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、クール・先進的、上品・高級
• キーワード: 濃紺・金の手書き英字・写真コラージュ・斜めの区切り・線枠ボタン・淡い青灰
• 地の質感: 空や街並みの写真を淡く透かした背景と、濃紺地に半透明の四角・丸を散らした抽象パターン。
• 形: 角丸はほぼ使わず直角が基本。セクション境界は斜めカット、ボタンは細い線の長方形。
• 温度感: 寒色が中心。金色で少しだけ温度を足す。

Colors

• 地は白・淡いラベンダー・青灰を順に切り替える。濃紺の面はコンセプトとエントリーに限る。
• 金色は手書き英字・テキスト下線・サブカードだけに使う。面積は 5% 以下に抑える。
• 見出しと本文は黒ではなく紺系にする。
• 濃紺の面には半透明の白い四角と丸を散らして奥行きを出す。
• 斜めの区切りに水色から朱色へのグラデーションを一度だけ入れる。

Typography

• 各セクションの見出しは「金の手書き英字 → 線＋日本語ラベル → 太字見出し」の 3 段で組む。
• 手書き英字は写真の角に重ね、少し傾けて置く。
• リード文には金色の太い下線を引く。
• 英字の大見出しは斜体の極太サンセリフにする。
• 大きな英字を薄くして背景の透かしに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2〜3 枚をずらして重ねる
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右どちらかの端に寄せ、反対側に余白を残す。
• テキストは左揃えで、左右の余白は 24〜30px。
• 各セクションの最後に線枠の VIEW MORE ボタンを置く。
• 社員インタビューは横スクロールのカルーセルにし、下に進捗バーを付ける。
• ページ末に濃紺のエントリー帯と、2 色の募集要項カードを置く。

Elevation & Depth

• 影はほとんど使わず、面の色と写真の重なりで奥行きを出す。
• 仕事紹介の円形図だけ、うっすらと拡散する影を付ける。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 直角の長方形。円形図の法人バッジだけ正円にする
• セクション境界: 濃紺の面の下端を斜めにカットし、グラデーション帯をはさむ。淡いパネルの上端だけ大きな角丸にする
• ボタン・カードは角丸なしの長方形にする。
• ボタンは 1px の紺の枠線にし、両端に小さな四角を付ける。
• 写真は互いに 20〜40px ずらして重ねる。

Components

• VIEW MORE 線枠ボタン（button-outline）: 幅 80% の長方形。1px の紺の枠線で、左右端に小さな四角を置き、文字は中央
• エントリー帯（entry-band）: 濃紺の全幅帯。英字ラベル・太字見出し・補足文を左に、右に白枠の矢印ボックスを置く
• 募集要項カード（requirement-card）: 左にサムネイル写真、右に英字ラベルと見出しと矢印。新卒向けは紺、中途向けは金にする
• 3 段見出し（section-heading）: 金の手書き英字＋「— 」付きの小さな日本語ラベル＋太字の見出し
• 金下線のリード文（underline-lead）: 太字のリード文の下に、金色の 3px の下線を行ごとに引く
• 社員インタビューカード（voice-card）: 縦長の人物写真の下部に紺のグラデーションを敷き、VOICE 番号・見出し・所属を白文字で載せる。PREV/NEXT ボタンと進捗バー付き
• お知らせバー（news-bar）: 白い長方形に日付・スラッシュ・お知らせ見出しを並べ、右端に矢印を置く
• 円形の法人相関図（hub-diagram）: 中央のロゴの周りに、色違いの円形バッジ 6 つを点線でつなぐ。各バッジに番号・名称・英字名を入れる

Do's and Don'ts

Do - 濃紺と淡い寒色の地を交互にしてリズムを作る。 - セクションごとに金の手書き英字を写真の角に重ねる。 - 写真はビジネスパーソンの自然な笑顔と都市の風景を使う。 - ボタンは線枠の長方形で統一する。 - 英字ラベルと日本語見出しをセットで使う。

Don't - ピル型ボタンや大きな角丸カードは使わない。 - 金色を面に多用しない（使ってよいのは中途向けカードのみ）。 - 暖色のポップなイラストは入れない。 - 黒の本文テキストは使わない。 - 写真を等間隔のグリッドで並べるだけにしない。

Page Structure

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

1. ファーストビュー（企業の姿勢を印象づける）: 空の街並みを透かした水色の背景に、オフィス写真 2 枚をずらして配置。間に斜体の太字コピーを置き、金の下線を引く
2. お知らせ（最新の採用情報を知らせる）: 白い長方形のバーに日付と見出しを並べる
3. スローガン（英文スローガンでブランドを伝える）: 濃紺地に金の手書き英字と白の極太斜体英字を置き、SCROLL の縦線を添える
4. コンセプト（理念を語る）: 濃紺地に写真コラージュ、3 段見出し、白の本文、金下線のリード文、線枠ボタンを並べる。下端は斜めにカット
5. 私たちについて（グループの規模と領域を紹介する）: 白地で、左寄せの写真に手書き英字を重ね、見出し・本文・ボタンを続ける
6. 仕事について（ワンストップの体制を示す）: 都市の写真の上に淡いラベンダーのパネルを重ね、円形の法人相関図を置く
7. 社員インタビュー（働く人のリアルを伝える）: 青灰の地に薄い英字の透かし、横スクロールの人物カード、進捗バー
8. キャリアについて（成長の幅を示す）: ビルや握手の写真 3 枚のコラージュに手書き英字を重ね、大きな見出しと下線リードを続ける
9. エントリー CTA（応募へ誘導する）: 濃紺の全幅帯に右矢印ボックスを置く
10. 募集要項（新卒・中途の入口に分ける）: 淡い水色の地に、紺と金のサムネイル付きカードを 2 枚並べる

Imagery

• スーツ姿の男女が会話するオフィス写真。明るく自然光で撮る。
• 高層ビルや都市の夕景に、ネットワークの線を重ねた先進的な写真。
• PC 作業や書類の手元など、業務を感じさせる寄りのカット。
• 濃紺の背景に半透明の四角や丸のボケを散らす。
• 金色の筆記体英字を装飾として写真の端に重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とテキストを 2 カラムで左右に配置し、セクションごとに左右を入れ替える。
• PC のヘッダーは横並びのナビにし、右上に紺と金のエントリーボタンを置く。
• PC では英字スローガンを画面幅いっぱいに大きく置く。
• PC の社員インタビューは横に 4 枚並べ、見出しは縦書きにする。
• PC のフッター前は、エントリー・募集要項・カード 2 枚を横 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 行書くと起動時に読み込まれる。