DESIGN.md — 濃紺×白グレーの斜体見出し公的採用 LP（Navy Italic Section Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 濃紺・斜体英字見出し・透かし文字・報道写真・三色バー・公的・誠実
• 地の質感: フラットな単色面。グラデーションと影はほぼ使わない。
• 形: 四角い写真と、細い線で囲んだカードが中心。ボタンだけピル型にする。
• 温度感: クールで硬派。人物写真で温度感を足す。

Colors

• 地は白と #EEEEEE をセクションごとに交互に敷く
• 濃紺は FV 背景・SECTION ラベル・番号下線・ENTRY ボタンに限る
• セクションの頭に緑・紺・水色の三色の短いバーを置く
• 黒ピルボタンはサブ導線に使う。資料請求は緑青、応募は濃紺にする
• 赤は重要なお知らせラベルと日程の強調だけに使う
• 透かし英字は地より少しだけ濃いグレーにする
• button-primary は文字 #FFFFFF × 背景 #139D91 のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#10847A、4.56:1）を使う。

Typography

• 英字大見出しは極太の斜体にし、左端を画面からはみ出させる
• 英字見出しの右後ろに、同じ英字を巨大な淡グレーで透かしで敷く
• 和文見出しは 2〜3 行に改行し、読点で区切る
• 番号は斜体の英数字にし、下に紺の短い線を引く
• 本文は小さめのグレーで、短い行を改行して並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。募集種目は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面の片側の端まで寄せ、反対側に余白を残す
• 特長は「写真→番号→小見出し→本文」を縦に繰り返す
• 募集種目は写真・ラベル・名称・期間で組む 2 列のグリッドにする
• リンクカードは細い枠線で囲み、上に画像、下にテキストとボタンを置く
• FV 直下に 5 分割のアンカーナビを置く

Elevation & Depth

• 影はほぼ使わない
• カードは 1px のグレー枠線で区切る
• 面の切り替えは地色の交互で表現する

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。片側を画面端まで裁ち落とす
• セクション境界: 直線で地色を切り替え、上端に三色の短いバーを置く
• カードとラベルは角を立てる
• 黒のサブボタンとハッシュタグだけピル型にする
• カテゴリラベルは写真の左上に黒帯で載せる

Components

• 英字斜体セクション見出し（section-heading）: 極太斜体の英字、紺の SECTION 番号帯、背後の透かし英字を組み合わせる
• FV 下アンカーナビ（anchor-nav）: 白い四角に英字斜体と小さな和文と下矢印を入れて並べる。最後の 1 つだけ紺地にする
• 番号付き特長（number-feature）: 斜体の番号に紺の下線を引き、太字の小見出しと本文を続ける
• 黒ピルボタン（button-pill-dark）: 黒地に白文字と右向きの矢印
• 資料・応募ボタン（button-primary）: 緑青または紺のベタ面にアイコン、文字、右矢印を並べる
• 写真上カテゴリラベル（category-label）: 写真の左上に黒帯と白の小文字で載せる
• 枠線リンクカード（link-card）: 白地に細い枠線。画像の下に見出し・本文・ボタンを置く
• 絞り込みタブ（filter-tab）: 選択中は黒地に白文字。下に黒の太線を引く
• 重要なお知らせバー（notice-bar）: 暗い帯に赤ラベルと白文字を載せる

Do's and Don'ts

Do - 各セクションは三色バー、英字見出し、透かし、和文リードの順で始める - 実写は大きく裁ち落として迫力を出す - 白とグレーの地を交互に敷いてリズムを作る - 情報の多いところはグリッドとラベルで整理する

Don't - パステルや派手なグラデーションを使わない - カードを大きく角丸にしたり、強い影を付けたりしない - 英字見出しを細字や立体にしない - 赤を大面積に使わない

Page Structure

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

1. ヘッダー（ロゴと主要導線を置く）: 白地。右側にアイコンボタンを並べ、相談ボタンを紺地にし、端にハンバーガーを置く
2. ファーストビュー（志と人物像を伝える）: 濃紺地に人物写真を縦に 3 枚重ね、手書き風コピーを載せる
3. アンカーナビ・お知らせ（ページ内を案内する）: 5 分割の白いボックスを置き、その下に暗い帯の重要なお知らせを置く
4. 選ぶ理由（3 つの価値を示す）: 白地。裁ち落とした写真と番号付きの特長を 3 回繰り返す
5. 仕事・診断導線（自分に合う区分へ誘導する）: グレー地。イラスト入りの枠線カードに黒ピルボタンを付ける
6. 募集種目一覧（区分と期間を一覧にする）: タブで絞り込む 2 列の写真グリッドに、ラベル・名称・期間を入れる。下に資料ボタンを置く
7. 先輩の声（リアルな体験を伝える）: 白地。左に正方形の写真とラベル、右に一言見出しと所属を置く
8. 1日紹介導線（働く日常を見せる）: 枠線カードにハッシュタグのピルと黒ボタンを入れる
9. 家族向け（保護者の不安を和らげる）: グレー地に白カードを置き、写真、マゼンタの英字見出し、チェックリストを入れる
10. 応募方法（スケジュールと応募導線を示す）: 日程表と、色違いの応募・相談・資料ボタンを置く
11. お知らせ・特集（関連情報を回遊させる）: タブ付きのお知らせ一覧と、特集カードのグリッド
12. フッター（サイトマップとリンクを並べる）: グレー地にリンクを多列で並べ、SNS アイコンを置く

Imagery

• 任務中の人物をドキュメンタリー調で撮った実写を使う
• 顔のアップは真剣な表情にし、暗めのトーンにする
• 集合写真や現場写真で職種の幅を見せる
• 診断などのコンテンツは線画イラストにし、淡い色を付ける
• 装飾は透かし英字と三色バーにとどめる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は横長の写真 1 枚にし、手書きコピーを中央に載せる
• PC の特長は写真と文を左右交互に配置する
• 募集種目は PC で 4 列にする
• 先輩の声は PC で 3 列カードにする
• 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 行書くと起動時に読み込まれる。