DESIGN.md — 青×白とオレンジ差し色の採用サイト LP（Corporate Blue Recruit LP with Orange Accent）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、クール・先進的、清潔・爽やか
• キーワード: 青のデュオトーン写真・欧文の太い大見出し・グレーの帯・オレンジの差し色・数字のインフォグラフィック・ネイビーのフッター
• 地の質感: フラットな面が基本。数字セクションは青のグラデーションに細い線の数字を透かして入れ、フッターには薄い曲線模様を敷く。
• 形: 四角を基本にして角丸は小さめ。リンクは丸い矢印アイコンを添えたテキストで、帯はところどころ画面幅より狭いブロックにして左右に余白を残す。
• 温度感: 青が主体の涼しい印象に、オレンジで少しだけ温かみを足す。

Colors

• 地は白とグレーの帯を交互に置き、中盤に 1 か所だけ青グラデーションの帯を入れる。
• オレンジは英字ラベル、見出し横の点、数字の図版、エントリー帯に限って使う。
• 写真の上は青のオーバーレイで統一し、白文字を載せる。
• 人物写真のキャプションは青の帯に白文字で載せる。
• フッターはネイビーで締め、文字は白と薄いグレーにする。
• number-card は文字 #E8622A × 背景 #FEFEFE のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CC4C16、4.51:1）を使う。
• entry-banner は文字 #FFFFFF × 背景 #E85B25 のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE4916、4.58:1）を使う。

Typography

• 大見出しは英字を大きく置き、すぐ下に和文の小見出しを小さく添える。
• 英字見出しの左上にはオレンジの小さな点を付ける。
• 本文は行間を 2 前後と広く取り、中央または左に揃える。
• 数字は太く大きくして、単位は小さく添える。
• ファーストビューのキャッチは斜体寄りの白文字で 2 行にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は見出しと本文の 2 カラム、カードは 4 列、数字は 3 列＋3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を切り替え、上下に広い余白を取る。
• グレーの帯は片側を画面端から離し、ずらして配置する。
• PC は見出しを左、説明を右に置く。
• 人物カードは上下に段差を付けて並べる。
• 画像の脇の見出しは左右を交互に入れ替える。

Elevation & Depth

• 基本は影を付けずフラットにする。
• 数字カードは青の地に白い面を置くだけで、影はごく薄くする。
• 人物カードの写真にも影は付けない。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 人物は縦長の長方形に収め、背景は暗いグレーのスタジオ調にする。風景写真は四角で重ねて並べる。
• セクション境界: 直線で区切る。帯を画面幅より狭いブロックにして段差を作る。
• ナビの問い合わせボタンだけピル型の枠線にする。
• リンクには丸い枠の矢印アイコンを添える。
• エントリー帯は角丸を小さく付けたブロックにする。

Components

• 青オーバーレイのファーストビュー（hero-overlay）: 複数の写真をタイル状に並べて青を重ね、英字の大タイトルとキャッチを白で載せる。
• 英字大見出し＋和文小見出し（section-heading）: 左上にオレンジの点を付けた英字の見出しと、その下に和文の小見出しを置く。
• 社員インタビューカード（interview-card）: 暗いグレー背景の縦長人物写真の下端に、青い帯で 2 行のコピーを重ね、その下に名前と入社年を添える。
• 数字のインフォカード（number-card）: 白いカードにオレンジの線画アイコンと大きな数字を置き、青グラデーションの帯の上に並べる。
• もっと見るリンク（link-more）: 小さな英字に丸い枠の矢印アイコンを添えたテキストリンク。
• 番号付きの職種リスト（job-list）: 01 などの番号、職種名、右端の矢印を並べ、行の間を細い線で区切る。
• エントリー帯（entry-banner）: オレンジのグラデーションに写真を淡く重ね、左にコピー、右に英字のエントリーと外部リンクのアイコンを置く。
• ネイビーのフッター（footer-dark）: ロゴ、会社情報、英字と和文を併記したサイトマップ、ページトップへ戻るボタンを置く。

Do's and Don'ts

Do - 写真は青のオーバーレイか白背景でトーンを揃える。 - 英字の大見出しと和文の小見出しを必ずセットで使う。 - 数字は図版とセットで大きく見せる。 - オレンジは要所だけに少量使う。 - 白とグレーの帯を交互に置き、リズムを作る。

Don't - オレンジを本文や広い背景に使わない。 - 角丸の大きいカードやポップなイラストは使わない。 - 強い影や立体的な装飾は付けない。 - 1 つのセクションに青とオレンジの面を同じ量で並べない。 - 本文の行間を詰めない。

Page Structure

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

1. ファーストビュー（採用ページであることと理念を伝える）: 青オーバーレイの写真タイルに、英字の大タイトルと 2 行のキャッチを白で載せる。
2. メッセージ（会社の想いを伝える）: 白地の中央に英字ラベル、和文見出し、短い文を何行か重ねて置く。
3. 社員インタビュー（働く人の姿を見せる）: グレーの帯の上に人物カードを 4 枚、段差を付けて並べる。
4. 数字で見る会社（定量的な情報で安心感を出す）: 青グラデーションの帯に、白い数字カードを 3 列 2 段で並べる。
5. 仕事・文化紹介（働き方と価値観を紹介する）: 左に写真を重ねて置き、右に英字見出しと説明、リンクを置く。
6. 募集要項（職種の一覧へ誘導する）: グレー地の左に番号付きの職種リスト、右に集合写真を置く。
7. エントリー CTA（応募へ誘導する）: オレンジのグラデーションの横長帯に、写真を淡く重ねる。
8. フッター（会社情報とサイト内の導線を置く）: パンくずの下に、ネイビー地で会社情報とサイトマップを並べる。

Imagery

• 人物はスーツかオフィスカジュアルで、暗いグレーのスタジオ背景で撮った上半身にする。
• ファーストビューはオフィスや街の写真を青のデュオトーンにする。
• アイコンはオレンジの細い線画（ビル・円グラフ・ヤシの木など）にする。
• 数字セクションの背景には、細い線の大きな数字を透かして入れる。
• 集合写真は白背景で明るく撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では 2 カラムを縦に積み、見出しを先、本文を後にする。
• 人物カードは SP で 2 列にするか、横スクロールにする。
• 数字カードは SP で 2 列にする。
• グローバルナビは SP でハンバーガーメニューにする。
• 英字の大見出しは SP で 32px 前後まで縮める。

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