DESIGN.md — 黄色×若草グラデの爽やか転職支援 LP（Fresh Yellow-Green Gradient Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、ポップ・元気
• キーワード: 黄×緑グラデーション・クリーム地・線画イラスト・フォーム先出し・笑顔の人物写真・やさしい案内
• 地の質感: フラットな面のみ。影はほとんど使わず、グラデーション帯と薄い罫線で区切る
• 形: 角丸 8px 前後の長方形ボタンとラベル。写真の片側を大きく丸く切り抜く
• 温度感: 暖かく明るい。黄の元気さと緑の安心感を合わせる

Colors

• 地はクリーム・白・薄グレーをセクションごとに交互に切り替える
• フォーム背景とラベルは黄→若草緑の斜めグラデーションで目立たせる
• 主ボタンは黄の塗りに黒文字、送信だけオレンジで区別する
• 緑は見出し両脇の短い横線と強調語、サブボタンに限定する
• 必須は赤、任意はグレー青の小バッジで色分けする
• キャッチの強調語は黄と緑で一語ずつ色を分ける
• button-submit は文字 #FEFEFE × 背景 #F49A02 のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A36701、4.63:1）を使う。
• button-secondary は文字 #FEFEFE × 背景 #52C384 のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2E8454、4.58:1）を使う。
• badge-required は文字 #FEFEFE × 背景 #E8352C のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E6231A、4.51:1）を使う。

Typography

• 見出しは太いゴシックで中央揃えにする
• セクション見出しの両脇に緑の短い横線を置く
• 本文は 13px 前後で行間を広めにとる
• キャッチの強調語だけ黄・緑の色文字にする
• 求人の項目名は太字、値は通常の太さで左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。フォームの選択肢だけ 2 列
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 16px
• セクションの上下に 50〜70px の余白をとる
• フォームは淡いクリーム色の箱に入れ、グラデーション地の上に置く
• ステップはラベル帯・見出し・イラスト・説明文を縦に積む
• 一覧の最後に幅 60% の黄ボタンを中央に置く

Elevation & Depth

• 影は基本なし。面の色の差で階層をつける
• カードと FAQ は白の面を薄グレー地に置くだけにする
• 入力欄は 1px のグレー枠のみ

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: ファーストビュー下の白パネルは上の角を大きく丸め、メッセージ写真は左上を大きな円弧で切る。カード写真は角丸 8px
• セクション境界: 直線で切り替え、地の色の差で区切る
• ボタンとラベル帯は角丸 8px の長方形
• タグは細い枠線のピル型
• 必須・任意のバッジは角丸 2px の小さな四角

Components

• 黄の主ボタン（button-primary）: 幅いっぱいか 60% 幅の黄色い長方形。黒い太字を中央に置く
• フォーム送信ボタン（button-submit）: オレンジの小さめボタンに白文字
• 緑のサブボタン（button-secondary）: フッターの企業向け導線。緑の塗りに白い太字
• 横線付き見出し（section-title-lines）: 中央の見出し文字の両脇に緑の短い線を置く
• グラデのステップ帯（step-label）: 黄→緑の横グラデの帯に STEP 番号を太字で入れる
• 登録フォーム（form-box）: クリーム色の箱に白い入力欄。選択肢は 2 列のチェック枠。ラベル横に必須・任意バッジを付ける
• 必須バッジ（badge-required）: 赤地に白い小さな文字
• 求人カード（job-card）: 角丸写真の下にタイトルと項目一覧。点線で区切り、ピル型タグを添える
• FAQ カード（faq-card）: 上部に黄緑グラデの分類見出し、下の白い面に Q と A を並べる

Do's and Don'ts

Do - 黄→若草緑のグラデーションは帯・ラベル・背景面に繰り返し使う - イラストは黒の線画に黄だけで塗る - フォームはファーストビューの直後に置き、すぐ登録できるようにする - 見出しは中央揃えにし、両脇に緑の線を付ける - 写真は明るい笑顔の人物を使う

Don't - 濃い色や黒の背景セクションを使わない - 強い影や立体的なボタンを使わない - 黄と緑以外の鮮やかな色を増やさない - 本文を詰めすぎない - イラストを多色のフルカラーにしない

Page Structure

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

1. ヘッダー（ロゴとメニューを示す）: 白地の左にロゴ、右にハンバーガーメニュー
2. ファーストビュー（対象者と無料支援を伝える）: 笑顔の人物写真に、上角を丸めた白いパネルを重ねる。大見出し、色分けしたサブ見出し、一行説明、黄ボタンを置く
3. メッセージ（理念を短く伝える）: クリーム地にグラデ文字の標語と一文。英字スローガンと手のアイコンを添える
4. 登録フォーム（すぐ会員登録してもらう）: 黄緑グラデの地にクリーム色のフォームの箱を置き、最後にオレンジの送信ボタン
5. ご利用の流れ（登録後の手順で安心させる）: グラデのSTEP帯、見出し、線画イラスト、説明文を 5 段積む
6. 支援内容（サポートの中身を共感的に語る）: 淡黄の面に、角を円弧で切った写真と 3 段落の本文
7. 求人一覧（実際の求人を見せる）: 薄グレー地に写真付きの求人カードを縦に 3 件並べ、黄ボタンで一覧へ誘導する
8. 企業向け情報（コラム記事で信頼を得る）: グラデのラベルの下に記事カードを並べる。日付、タイトル、タグを付ける
9. よくある質問（不安を解消する）: グラデの分類見出しが付いた白カードに Q と A を 1 問ずつ入れる
10. 運営会社・フッター（運営元を示し、企業向けへ誘導する）: 白地に会社ロゴと情報を中央揃えで置き、黄ボタンを添える。下段の薄グレー地に緑ボタンとコピーライト

Imagery

• 人物写真は明るいオフィスや屋外で撮った笑顔の自然光写真
• 求人写真はビジネスカジュアルの人物を横長に切る
• ステップのイラストは黒い線画に黄一色の塗り。手書き風の英字を添える
• 記事サムネイルは白地に緑の人物ピクトと太いゴシックの見出し、左右に緑の縦線
• ハートと両手のアイコンでやさしさを表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにナビゲーションと黄の登録ボタンを横に並べる
• PC のファーストビューは左にテキスト、右に円形に切った人物写真
• ステップは PC で 5 列に横並びにする
• 求人と記事は PC で 3 列のカードにする
• 支援内容は PC で左に本文、右に写真の 2 カラム
• フォームと FAQ は PC で中央の約 75% 幅に収める

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