DESIGN.md — エメラルド緑×黄マーカーの採用支援 LP（Fresh Green Recruitment SaaS-like LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、シンプル・ミニマル
• キーワード: エメラルドグリーン・黄色マーカー・数値訴求・フォーム先出し・線画イラスト・絵文字アイコン
• 地の質感: フラットな面に薄い方眼やドットのパターン。影はごく薄い
• 形: 角丸 12〜16px のカード、円形の番号、四角い番号バッジ
• 温度感: やや涼しげ。黄とオレンジで温かみを足す

Colors

• 地は白と生成りを交互にし、セクションの区切りを色で示す
• 緑はボタン・英字ラベル・数値・本文中の強調語に使う
• 黄色マーカーはキーワードの下半分に引き、1 ブロックに 1〜2 か所までにする
• オレンジは悩みの強調語と、成果を表す 2 番目の数値に限って使う
• 中盤の CTA 帯は緑のベタ、品質訴求はダーク地で緩急をつける
• 最後のフォームセクションは緑から深緑への斜めグラデーションにする
• button-primary は文字 #FFFFFF × 背景 #2CB583 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#218661、4.52:1）を使う。
• badge-hero は文字 #FFFFFF × 背景 #33B987 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#258561、4.56:1）を使う。
• stat-card は文字 #33B987 × 背景 #FBFDFC のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#258561、4.58:1）を使う。
• tag-benefit は文字 #F5A300 × 背景 #FFFAE6 のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9C6800、4.57:1）を使う。

Typography

• 見出しの上に、緑の小さな英字ラベルを字間広めで置く
• 見出しは中央揃えの極太ゴシック。キーワードだけを緑かマーカーで強調する
• 数値は数字を大きく、単位を小さくする
• 本文はグレー。強調語だけ太字の黒か緑にする
• 1 行は短めにし、SP では 2 行以内で改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。数値カードと統計は 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 14px
• セクションの上下余白は 60〜80px
• カード同士の間隔は 16〜24px
• フローは左に円形の番号、右にカードを置き、間を縦線でつなぐ

Elevation & Depth

• カードには薄い影（0 4px 16px rgba(0,0,0,.06)）
• フォームカードには少し強めの影を付けて浮かせる
• ボタンには軽いドロップシャドウ
• ダーク地の内側カードは影ではなく、より濃い面で区別する

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 18px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は使わず、線画イラストを背景なしで配置する
• セクション境界: 直線で背景色を切り替える
• バッジ・特徴ラベルはピル型
• 送信ボタンは角丸 8px 程度の長方形
• ステップ番号は円形、理由番号と FAQ の Q は角丸の正方形
• 悩みカードは左辺にオレンジの太線を引く

Components

• 主 CTA ボタン（button-primary）: 緑のベタ塗りに白い太字。全幅で配置し、軽い影を付ける
• FV のピル型ラベル（badge-hero）: 緑グラデーションのピルで、両脇にきらめきの絵文字を置く
• 特長ピル（pill-dark）: 濃色のピルに白文字。3 つ横に並べる
• 実績数値カード（stat-card）: 薄緑の面に細い枠線。大きな緑の数字の下に小さなラベルを置く
• 悩みカード（problem-card）: 白いカードの左にオレンジ線と絵文字。一部の文言をオレンジで強調する
• 番号付きフロー（flow-step）: 緑の円形番号の横に白カードを置き、右上に薄緑の対応タグを付ける。自社が担う工程だけ黄色地にする
• 利点タグ（tag-benefit）: 薄黄の面にオレンジの太字と絵文字
• 事例カード（case-card）: 薄緑のヘッダーに円形アイコンと企業属性を置き、下に数値の矢印比較とコメントを並べる
• FAQ アコーディオン（faq-item）: 白カードの左に緑の Q 四角、右に三角の開閉アイコン
• 相談フォーム（form-card）: 白いカードに、ラベル・赤の必須表示・グレー枠の入力欄を並べ、送信ボタンと電話番号の欄を置く

Do's and Don'ts

Do - FV のすぐ下にフォームを置き、すぐ申し込めるようにする - 数値は 2×2 カードで大きく見せる - 英字ラベル＋日本語見出しの組み合わせを全セクションで揃える - 強調は緑・黄マーカー・オレンジの 3 種類に限る - 電話番号は緑の太字に受話器アイコンを添えて併記する

Don't - 写真を全面に敷かない - 赤や紫など、別の強い色を足さない - マーカーを多用して紙面をうるさくしない - 濃い影や立体的なボタンにしない - 角を完全に尖らせたカードを使わない

Page Structure

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

1. ファーストビュー（費用ゼロの価値を即座に伝える）: 方眼パターンの地にピル型ラベル、極太見出し、巨大な緑の数字、濃色ピル 3 つ、チェックリストを置く
2. 相談フォーム（その場で申し込んでもらう）: 影付きの白カードに入力欄 6 項目、緑の送信ボタン、電話番号を並べる
3. 実績数値（信頼を数字で示す）: 薄緑カードを 2×2 に並べ、大きな緑の数字を置く
4. 悩みの提起（読み手の課題に共感する）: 線画イラスト、英字ラベル、マーカー付き見出しの下に、左線付きカードを 4 枚並べる。最後に薄緑の解決帯を置く
5. サービス概要（何をするサービスかを説明する）: 左揃えの大見出し、チェック付きの薄灰バー、緑ベタ地に統計 2×2 を置く
6. サービスの流れ（依頼側の手間が少ないことを示す）: 円形番号を縦線でつないだ 5 ステップ。自社が担う工程だけ黄色で目立たせる
7. 選ばれる理由（差別化を示す）: 生成りのカードに番号の四角、本文、薄黄のタグを置く。右上に薄緑の円の装飾
8. 中間 CTA（相談を促す）: 緑のベタ帯に白見出し、緑文字の白ボタン、電話番号を置く
9. 品質訴求（質の高さを伝える）: ダーク地にアイコン付きの箇条書き、握手の線画、黒い内側カードと 2×2 の小カードを置く
10. お客様の声（導入成果を見せる）: 事例カード 3 枚で、紹介数から採用数への矢印比較とコメントを見せる
11. よくある質問（不安を解消する）: Q 四角付きのアコーディオンを 4 つ並べる
12. 最終 CTA・フォーム（申し込みを完了させる）: 緑から深緑へのグラデーション地に黄白の見出し、白いフォームカード、個人情報のスクロール枠を置く

Imagery

• 線画にマスタード黄と紺の差し色を入れたビジネス人物イラスト
• セクション見出しの上に、中サイズの線画を 1 点置く
• アイコンはカラー絵文字を小さく添える
• 背景には薄い方眼やドットパターンを敷く
• 事例アイコンは薄緑の円の中にビルの絵文字
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は左にコピー、右にフォームを置く 2 カラム
• PC では数値カードを 4 列 1 行にする
• PC では悩みカードを 2×2、理由カードを 2 列、事例を 3 列にする
• PC のサービス概要は左に本文、右に緑の統計ボックス
• PC の品質訴求は左に本文、右にイラストとカード
• PC のコンテンツ幅は約 1000px で中央寄せ

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