DESIGN.md — 濃紺×白×緑ボタンの製造業新卒採用LP（Deep Navy Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、クール・先進的、清潔・爽やか
• キーワード: 濃紺グラデーション・曲線の区切り・円形の写真切り抜き・英字のゴースト見出し・緑のエントリーボタン
• 地の質感: フラットな面に、うっすらしたグラデーションと柔らかい影。写真の上は紺色の半透明で覆う
• 形: 角丸カード、ピル型ボタン、大きな円の装飾、波のように反った曲線の区切り
• 温度感: クールで誠実。ファーストビューだけ空色で明るく爽やか

Colors

• 地の色は濃紺と白を交互に入れ替え、セクションの切り替わりを強く見せる
• 濃紺セクションは上から下へ、紺から黒に近い紺へ縦のグラデーションをかける
• 緑はエントリーの CTA だけに使う
• 濃紺地の上には淡いラベンダーのカードを置き、文字は紺にする
• 写真には紺色の半透明を重ね、トーンをそろえる
• ファーストビューだけは空色と黄緑で明るくする

Typography

• セクション見出しの左上か中央の背後に、淡い英字を重ねる
• 小見出しは 1 文字目だけ大きくして変化をつけることがある
• 明朝はファーストビューのキャッチだけに使い、他はすべてゴシック
• 本文は 12px 前後と小さめにし、行間を広く取る
• 表の値は太字にし、補足は小さな注釈にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種は横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 18px
• 見出し、リード文、写真の順に積む
• 福利厚生カードは横長で縦に並べ、右下に CLICK タグを付ける
• 募集要項は 2 列の表（項目欄はグレー）
• 大きな写真の帯を曲線で切り抜いてセクション間に挟む

Elevation & Depth

• カードとボタンの下に、紺色の濃い影（0 4px 6px）を付ける
• 表は外枠に薄い影を付ける
• 写真カードは影を弱めにする

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: ファーストビューは虹色の縁を付けた円形。それ以外は角丸の長方形
• セクション境界: 浅い弧を描く曲線。大小の濃紺の円をセクションの境界に重ねて置く
• CTA とサブボタンはピル型
• CLICK タグとメッセージボタンは角丸を小さく
• 装飾の円は画面の端から一部をはみ出させる

Components

• エントリー CTA（button-entry）: 横幅いっぱいの緑のピル型ボタン。紺色の影を付ける
• サブボタン（button-sub）: 濃紺グラデーションのピル型ボタンに白文字
• 英字ゴースト見出し（ghost-heading）: 淡い英字の上に日本語の見出しを重ねる
• 写真リンクカード（photo-link-card）: 紺の半透明を重ねた写真カード。中央下に白文字のタイトル、右下に濃紺の CLICK タグ
• 募集要項の表（spec-table）: 左がグレーの項目欄、右が白の値欄。行ごとに線で区切る
• 勤務地タグ（tag-location）: 濃紺地に白い太字の小さなタグ。折り返して並べる
• メッセージボタン（message-bar）: 濃紺の横長バー。左に白文字、右に再生アイコン
• ラベンダーの案内カード（entry-card）: 濃紺地の上に置く淡色のカード。中に見出し・説明・ボタンを入れる

Do's and Don'ts

Do - 濃紺と白の地を交互に並べ、境界は曲線と円で区切る - セクション見出しには必ず英字のゴーストを重ねる - 写真は作業着の若手社員が笑っているものを使う - CTA の緑はエントリーの導線だけに使う

Don't - 暖色を強調色に使わない - 境界を直線で切りっぱなしにしない - 緑を装飾に使わない - 本文を大きくしすぎない - 写真を彩度の高いまま並べない

Page Structure

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

1. ファーストビュー（企業の理念と募集中であることを伝える）: 青空の背景に円形の人物写真とアイコンを散らし、中央に明朝のキャッチと黄緑の帯を置く
2. 会社紹介（事業内容を伝える）: 濃紺地に白文字のリード文と角丸の集合写真。下にビル群の写真の帯を入れる
3. 仕事紹介（仕事のイメージを伝える）: 白地に見出しとリード文、大きな角丸写真
4. 職種一覧（職種の幅を見せる）: 写真カードを横スクロールで並べる
5. 募集要項（条件を示す）: 2 列の表と勤務地タグ。最後に緑の CTA
6. 福利厚生（安心感を与える）: 曲線で切り抜いた都市の写真の後に、中央そろえのリード文と写真リンクカードを縦に並べる
7. 研修・キャリア（成長できる道筋を示す）: 濃紺地に研修のカード 2 枚と、キャリアフロー図を開く白カードを置く
8. メッセージ（保護者と学生に向けて語りかける）: 白地に濃紺のバー型ボタンを 2 本
9. エントリー（応募へ誘導する）: 濃紺地に淡色のカード 2 枚。緑の CTA と濃紺のサブボタン
10. フッター（ナビゲーションと著作権表示）: 黒に近い紺の地に、白いロゴ・ナビ・コピーライトを中央にそろえる

Imagery

• グレーの作業着を着た若手社員の、自然な笑顔の写真
• 工場・基板・溶接など現場の写真に青みのトーンをかける
• 高層ビルや都市を見上げる、空の広い写真
• ファーストビューにはパステルの円の中にフラットなアイコンを置く
• 装飾には濃紺の大小の円を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は会社紹介・仕事紹介を、テキストと写真の 2 カラムにする
• 福利厚生カードは PC で 3 列 × 2 段のグリッド
• 研修カードは PC で 2 列
• キャリアフロー図は 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 行書くと起動時に読み込まれる。