DESIGN.md — 朝焼けオレンジの建設会社採用 LP（Sunrise Orange Gradient Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、クール・先進的、信頼・誠実
• キーワード: 朝焼けオレンジ・グラデーション面・欧文太見出し・ドット柄・大きな円弧・縦長ポートレート
• 地の質感: フラットな面にオレンジのグラデーションを重ね、写真にはオレンジのカラーオーバーレイをかける。ドットグリッドで細かい質感を足す。
• 形: 四角い写真とバナーが基本。背景には大きな円や円弧の淡い面を敷き、丸い矢印ボタンを添える。
• 温度感: 暖色寄り。明るく前向きで、温かみがある

Colors

• 地は薄グレー #F9F9F9。オレンジのグラデーション面と交互に置いてリズムを作る
• グラデーションは濃いオレンジから山吹色へ。左上から右下に流す
• グレー地の上では見出しと本文の文字をオレンジにする。黒文字はほとんど使わない
• オレンジ面の上の文字とラインはすべて白にする
• 写真にはオレンジやピーチのカラーオーバーレイをかけて、全体を暖色にそろえる
• 丸い矢印ボタンはクリーム色の円の中にオレンジの矢印を置く
• page は文字 #D47E3B × 背景 #F9F9F9 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#AA5F25、4.56:1）を使う。
• banner-numbers は文字 #FCFCFB × 背景 #FC7B16 のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE5502、4.56:1）を使う。
• circle-arrow は文字 #FC7B16 × 背景 #FEEDC5 のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE5502、4.55:1）を使う。
• button-band は文字 #FCFCFB × 背景 #F5A417 のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9F6807、4.59:1）を使う。
• link-banner は文字 #D76B21 × 背景 #F9F9F9 のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#B4591C、4.55:1）を使う。
• entry-band は文字 #FCFCFB × 背景 #FC7B16 のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE5502、4.56:1）を使う。

Typography

• 見出しは太い欧文を主にし、その下に小さな和文サブを置く2段構成にする
• 欧文見出しの左上に、小さな扇形の飾りをオレンジで付ける
• 本文は太めのゴシックを小さめのサイズで組み、行間を広く、字間を少し開ける
• キャッチコピーだけ明朝にして情緒を出す
• Interview 番号は写真の右に縦書きで置く
• 背景には巨大な欧文や数字を、細い線の透かし文字として敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は社員写真を横3列に、段差を付けて並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文の左右余白は約18px
• メッセージ本文は左寄せで幅約60%に収め、右側には余白と装飾を置く
• 社員写真は幅約50%で中央に置き、名前は左の縦線と組み合わせる
• FAQ と福利厚生は、見出し帯と全幅写真を交互に積み重ねる
• ENTRY は2分割の全幅帯にする

Elevation & Depth

• 影はほぼ使わず、面の色の違いで階層を作る
• バナーやボタン帯は、背景より少し濃い・明るい単色の矩形で浮かせる
• 写真は角丸の小さい矩形にして、影は付けない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 縦長の矩形。白背景で人物を横向きに撮ったカット
• セクション境界: 直線で切り替え、背景に大きな円・円弧の淡い面を重ねる
• 矢印ボタンは正円にする
• タグはピル型のオレンジ地に白文字
• ドットグリッドの矩形をバナーの角に重ねる

Components

• 欧文セクション見出し（section-heading）: 扇形の飾り＋太い欧文＋小さな和文サブ
• グラデーション誘導バナー（banner-numbers）: オレンジのグラデーション正方形に白い細線の円を描き、中央に明朝の見出し、背景に透かし数字を置く
• 丸矢印ボタン（circle-arrow）: クリーム色の円の中にオレンジの矢印
• 社員カード（interview-card）: 縦長の写真、縦書きの番号、左縦線付きのイニシャルと所属
• 一覧ボタン帯（button-band）: 山吹色の横長の矩形に白文字と丸矢印
• 写真リンク帯（link-banner）: 白い見出し帯の下に、オレンジのオーバーレイをかけた写真を全幅で置く
• ニュース行（news-item）: 日付とピル型タグ、オレンジの題名。下線で区切る
• ENTRY 2分割帯（entry-band）: 全幅のオレンジ帯を白線で2分割し、和文と ENTRY を2行で置く
• 円形ページトップ（page-top）: 欧文を円形に回したテキストと上矢印

Do's and Don'ts

Do - オレンジ面とグレー地を交互に置く - 見出しは欧文と和文サブのセットにする - ドット柄と円弧を、余白のアクセントとして控えめに配置する - 人物写真は背景をそろえて統一感を出す - 各ブロックの終わりに丸矢印の導線を置く

Don't - 寒色や黒を主役にしない - 濃い影や立体的なボタンを使わない - 本文を大きく詰めて組まない - 写真をカラーオーバーレイなしで鮮やかに並べすぎない - 角丸の大きいカードを多用しない

Page Structure

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

1. ファーストビュー（企業の地域性と志を伝える）: 朝焼けの街並みを全面写真にし、明朝の縦書きキャッチを重ねる
2. メッセージ（会社の思いとビジョンを伝える）: グレー地にオレンジ文字の本文。大きな円弧、ドット柄、モノクロ写真を添える
3. 数字で見る（会社データへ誘導する）: グラデーションの正方形バナーに円枠と透かし数字を置き、背景に巨大な欧文の透かしを敷く
4. 社員インタビュー（働く人の姿を見せる）: オレンジのグラデーション面に縦長の写真を3人分並べ、最後に一覧ボタン帯を置く
5. よくある質問（疑問の解消へ誘導する）: 見出し帯の下に、オーバーレイをかけた写真を全幅で置く
6. キャリア・福利厚生（制度を紹介する）: FAQ と同じ型の写真リンク帯
7. 募集要項（応募条件へ誘導する）: ピーチ色のドットをかけた写真の中央に、見出しと円形の矢印
8. ニュース（最新情報を伝える）: 日付、タグ、題名を下線で区切ったリスト
9. エントリーCTA（応募を促す）: オレンジの全幅帯を2分割する
10. フッター（ナビゲーションと締めくくり）: オレンジ地に白いリンクを並べ、左下に明朝の大きなキャッチを白地で置く

Imagery

• 夕景・朝焼けの街並みを俯瞰で撮り、暖色の空を大きく入れる
• 社員は作業着姿を横顔で撮り、白っぽい背景で縦長に切り抜く
• サブの写真は彩度を落としたモノクロ寄りにする
• リンク帯の写真は、オレンジからピーチへのグラデーションオーバーレイで半透明に沈める
• 装飾にはオレンジのドットグリッド、淡グレーの大円、線だけの巨大数字を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を約60%にして中央寄せにする
• PC では社員写真を横3列に、段違いで配置する
• PC の FAQ・福利厚生は、左に見出し、右に写真の横並びにする
• PC ヘッダーの右上に ENTRY ボタンを2つ常に表示する
• 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 行書くと起動時に読み込まれる。