DESIGN.md — 紺×鮮緑の建設会社リクルート LP（Navy and Fresh Green Construction Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、信頼・誠実、清潔・爽やか、クール・先進的
• キーワード: 濃紺の帯・鮮やかな緑・太い欧文見出し・現場写真・曲線の帯・数字訴求
• 地の質感: フラットな塗り面に、彩度を落とした現場写真やモノクロの街並みを重ねる。影はほぼ使わない。
• 形: 角張った紺帯ラベルとピル型ボタンの対比。写真は大きなシンボル型や曲線でくり抜き、緑の太い曲線帯が画面を斜めに横切る。
• 温度感: やや寒色寄り（紺・グレー）だが、緑とオレンジで明るく前向きな印象。

Colors

• 地はグレージュと白をセクションごとに交互に使う。
• 濃紺はボタン・ラベル帯・フッターに限り、面としての黒は使わない。
• 緑は数字・曲線帯・ステップカード・見出し下線などの強調に使う。
• オレンジはシンボルのハート部分だけに使う。
• ステップカードは濃い緑から淡い緑へ、段階的に明るくする。
• 写真セクションでは写真の彩度を落として白や紺の文字を載せる。
• stat-card は文字 #42B029 × 背景 #FFFFFF のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#32871F、4.54:1）を使う。

Typography

• 見出しは、紺帯の和文ラベルの下に太い欧文大見出しを置き、横にシンボルを添える。
• 長い欧文はハイフンで 2 行に分けて大きさを保つ。
• キャッチは 1 行ずつ帯に載せ、帯の下に緑の太線を引く。
• 数字は欧文の極太で大きくし、単位は小さく添える。
• 本文は行間 2.0 程度でゆったり組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は 2〜3 カラム。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下余白は 80〜110px と大きく取る。
• 見出しは左揃えで、左余白は約 24px。
• カードは縦に並べ、間隔は 12〜16px。
• ボタンは各セクションの最後に 1 つずつ置く。
• 写真は画面の端まで広げて使ってよい。

Elevation & Depth

• 影は基本的に使わない。
• カードは白い面とグレージュの地の色差だけで分ける。
• 写真の上のカードは白の不透明な面で読みやすくする。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真はシンボル形状や曲線でくり抜き、角は 8〜12px の角丸にする。
• セクション境界: 直線で地の色を切り替える。緑の太い曲線帯を斜めに通して流れを作る。
• ラベル帯とキャッチ帯は角丸なしの長方形にする。
• ボタンはピル型にし、右端に白い円の矢印アイコンを置く。
• 番号は緑の大きな滴形状の中に入れる。
• STEP 番号はカード右上の白い円で示す。

Components

• 矢印付きピル型ボタン（button-pill）: 濃紺のピル型ボタン。左に白文字、右に白い円と緑の矢印を置く。
• 和文ラベル＋欧文見出し（section-label）: 紺帯に白文字の小ラベルを置き、下に極太の欧文見出しを置く。横にシンボルを添える。
• 下線付きキャッチ帯（catch-band）: 1 行ずつ白帯または紺帯に載せた太字キャッチ。帯の下に緑の太線を引く。
• 社員インタビューカード（interview-card）: シンボル形でくり抜いた人物写真に、緑の番号の滴、紺帯の部署・入社年、キャッチ帯を重ねる。
• ステップカード（step-card）: 緑の横長カード。左に見出しと英字、右に説明を置き、右上の白い円に STEP 番号を入れる。
• 数字カード（stat-card）: 白カードの中央にイラストアイコン、項目名、緑の極太数字と小さい単位を縦に並べる。
• ハッシュタグチップ（hashtag-chip）: 白地に角丸、# で始まる短いキーワードを折り返して並べる。
• リンク行（link-row）: 白い横長の行。左にアイコン、中央に太字、右に紺の丸い矢印を置く。

Do's and Don'ts

Do - 和文ラベルと欧文の大見出しをセットで使う。 - 緑・紺・白の 3 色で構成し、オレンジはシンボルだけに使う。 - 現場の人物写真を大きく使い、くり抜きや斜めの帯で動きを出す。 - 数字は極太の緑で大きく見せる。 - ボタンは矢印付きのピル型に統一する。

Don't - グラデーションの多用や派手な影はつけない。 - 明朝体や手書き体は使わない。 - オレンジを広い面やボタンに使わない。 - 紺の代わりに純粋な黒を使わない。 - ラベル帯を角丸にしない。

Page Structure

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

1. ファーストビュー（会社の顔と採用スローガンを印象づける）: 現場の人物写真を全面に置き、下端に紺帯と緑の欧文スローガン、シンボルを重ねる。左端に緑の縦ラインを入れる。
2. 理念メッセージ（会社の想いを伝える）: シンボルの下に紺帯のキャッチを 2 行置く。モノクロの街並み写真の上に詩のような短い行の本文を流し、緑の曲線帯を斜めに通してボタンで締める。
3. 社員インタビュー（先輩社員の姿で働くイメージを持たせる）: ラベルと欧文見出し、導入文の後に、番号付きのくり抜き写真カードを 3 つ並べ、一覧ボタンを置く。
4. 人材育成（教育制度で安心感を与える）: 写真の上に白パネルと？吹き出しアイコンを重ねて説明する。その下に緑の濃淡のステップカードを 3 段並べる。
5. 働く環境（定着率や休暇などを数字で示す）: オフィス写真の背景に白い欧文見出しを置き、白い数字カードを 3 枚縦に並べる。
6. 地域貢献（社会性と地元とのつながりを示す）: ハッシュタグチップを並べ、緑の地図シルエットに写真 2 枚を重ねる。
7. インターンシップ（学生の参加を促す）: 大きな現場写真の後に、白地で見出し・本文・ボタンを置く。
8. 説明会スケジュール（説明会への動線を作る）: グレージュ地に一覧ボタンを置き、アイコン付きの白いリンク行を 2 つ並べる。
9. エントリー（応募へ誘導する）: 人物写真の背景に半透明の白パネルを重ね、エントリーボタン、求人媒体のバナー、募集要項のリンク行を縦に並べる。
10. フッター（会社情報とナビゲーション）: 濃紺地に白いシンボル、ロゴ、住所、白枠のボタン、緑の丸いページトップボタンを置く。

Imagery

• ヘルメットと作業着の若手社員を、屋外の自然光で明るく撮る。
• 人物は空を背景にしたバストアップで、表情を前向きにする。
• メッセージの背景は街並みの俯瞰写真をモノクロにして使う。
• アイコンは緑・紺・オレンジのフラットな人物イラストやピクトにする。
• 図形は太い曲線帯とハート型シンボルを繰り返し使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューで巨大なシンボルの白い形状と人物写真を重ね、右上に緑の ENTRY ボタンを置く。
• PC では理念を右寄せの 1 カラムにし、緑の曲線を画面いっぱいに通す。
• PC のインタビューカードは横長で、左右に交互にずらす。
• PC では数字カードやリンク行を 2〜3 列の横並びにする。
• 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 行書くと起動時に読み込まれる。