DESIGN.md — 爽やかグリーン×ブルーの転職支援 LP（Fresh Green Career Change Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、ポップ・元気
• キーワード: 鮮やかグリーン・青グラデ帯・太ゴシック見出し・筆風の緑下線・オレンジCTA・人物写真とイラストの併用
• 地の質感: フラットな面にやわらかなグラデーションと光のぼかしを重ねる。ボタンは軽い縦グラデと影で立体感を出す
• 形: 角丸 4〜8px の四角いカードとボタン。吹き出しはピル型。セクション境界は斜めや緩いカーブ
• 温度感: 明るく、やや涼しい。誠実さの中に前向きな元気さがある

Colors

• 地は白と淡い水色グレーを交互に使い、緑ベタ帯は 1〜2 か所に絞る
• 緑は見出しの強調語、下線、ボタン、タブ、ステップ番号に使う
• CTA だけをオレンジにして、緑系の中で目立たせる
• 数字訴求は濃い青から水色へのグラデ帯に白文字で載せ、要点は黄色で強調する
• 悩み提起はスレートネイビーの帯に白文字と緑のチェックを組み合わせる
• 対比カードは緑（求職者）と青緑（企業）で塗り分ける
• button-primary は文字 #FFFFFF × 背景 #FE6C02 のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C55301、4.55:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #39C96A のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#258746、4.53:1）を使う。
• pill-label は文字 #FFFFFF × 背景 #39C96A のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#258746、4.53:1）を使う。
• stat-circle は文字 #FFFFFF × 背景 #39C96A のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#258746、4.53:1）を使う。
• voice-bubble は文字 #139C92 × 背景 #F2F7FB のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0F7E76、4.56:1）を使う。

Typography

• 見出しは中央揃えで 2〜3 行に分け、キーワードだけ一回り大きくする
• 強調語は緑か黄色の文字色にし、二重引用符で囲んで目立たせる
• 最重要の見出しには緑の筆風カーブ下線を引く
• 数字は大きな欧文太字にし、単位は小さく添える
• 本文は 14px 前後、行間 1.75 で読みやすくする
• 白い帯にのせた白抜き文字のラベルで見出しの前置きをする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。2 択ボタン・対比カードだけ 2 列
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は 16〜20px
• セクション内は見出し→リード→カード→ボタンの順で中央揃え
• 事例カードは白地に細い緑の線と影をつける
• ステップは縦に並べ、カード同士を細い線でつなぐ
• 吹き出しの声カードは横スクロールで並べる

Elevation & Depth

• ボタンは下方向に 2〜4px のやわらかい影
• 事例カードやフォームは薄い影で地から浮かせる
• TOP ボタンは白い円形にふんわり影
• 写真やグラフィックの背景には光のぼかしを敷く

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は切り抜きで背景になじませる。アバターとイラストは円形にトリミング
• セクション境界: 斜めカットと緩いカーブ。単色帯の切り替えもある
• 主ボタンは角丸 6px 程度の横長長方形にし、右端に丸い矢印アイコンを置く
• 見出しラベルはピル型の吹き出しにし、下に小さな三角をつける
• ステップ番号は緑グラデの円にアイコンを入れる
• タブは角丸の四角で、選択中のものだけ緑にして三角をつける

Components

• オレンジ主 CTA（button-primary）: 上に小さな補足文、下に大きな太字。右端に丸い矢印
• 緑サブボタン（button-secondary）: 縦グラデの緑ボタン。下向き矢印か右矢印の丸アイコンつき
• 吹き出し見出しラベル（pill-label）: 緑かネイビーのピル型にして、下に三角をつける
• 筆風下線（brush-underline）: 大見出しの下に引く、緑の太いカーブ線
• 事例タブとカード（case-tabs）: CASE タブを 3 つ並べ、白カードにアバター・前職→現職の矢印比較・緑の小見出し帯を入れる
• 実績数字サークル（stat-circle）: 白か緑グラデの円の中に、ラベルと大きな数字を置く
• 声の吹き出しカード（voice-bubble）: 淡い水色の吹き出しに青緑の太字で声を書き、下に円形イラストを置く
• ステップカード（step-card）: 緑の円アイコン、STEP 番号、縦線区切り、項目名の順に並べ、細い緑枠で囲む
• 多段入力フォーム（form-step）: グレーの枠に Step 表示を置く。項目ごとに赤い必須ラベルと白い入力欄を並べ、最後にオレンジの次へボタン

Do's and Don'ts

Do - 緑とオレンジの役割分担を守る（緑はブランドと誘導、オレンジは申込） - 見出しは太いゴシックにし、強調語を大きく緑にする - 悩みは緑チェックで 3 つ箇条書きにする - 数字実績は大きく見せ、媒体のスクリーンショットを端末モックに入れて添える - 白地と淡い水色地を交互に置いて、セクションを区切る - 人物は明るいオフィスで撮った、笑顔のビジネス写真にする

Don't - CTA を緑や青にしない - 明朝体や細い書体を見出しに使わない - 暗い背景を多用しない（濃色はネイビー帯と青帯だけ） - 角丸を大きくしすぎてポップに寄せない - 本文を左右いっぱいに詰め込まない - 強調色を黄色・緑・オレンジ以外に増やさない

Page Structure

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

1. ヘッダー（ロゴと電話番号の提示）: 白地。左にロゴ、右に緑の電話番号と受付時間
2. ファーストビュー（サービスの価値を一言で伝える）: 緑帯のリードの下に、人物写真 2 名と白座布団の大見出しを置く。中央に円形バッジ
3. CTA（早期の申込誘導）: 青緑グラデ帯にリード文を載せ、オレンジの大ボタンを置く
4. 疑問への導線（知りたい内容へジャンプさせる）: ミント地に、緑ボタンを 2 列でアンカーリンクとして並べる
5. 悩みの提起（ターゲットの不安への共感）: ネイビー帯。ピル見出しの下に緑チェックで不安を 3 つ並べ、右に考え込む人物を置く
6. 解決提示（サービスの考え方を示す）: 緑の吹き出しラベル、筆風下線の大見出し、笑顔の人物を置き、緑と青緑の対比カードで双方のニーズを示す
7. 実績・ネットワーク（信頼性の裏付け）: 青グラデ帯に黄色強調のコピー、白い円の実績数字、端末モック、取引先ロゴの横並び
8. 追加ネットワーク（紹介先の幅広さを示す）: 緑の大きな強調文と大きな円に入れた数字。媒体名ラベルつきの PC モックを 2 つ
9. 転職事例（成功イメージの具体化）: CASE タブと白カード。アバター、前職→現職の比較、きっかけと感想
10. 担当者紹介（人による安心感）: 緑ベタ地に白座布団のラベル、円形の顔写真、白カードのメッセージとプロフィール
11. スタッフの声（転職後の前向きな実感の共有）: 緑地に黄色の強調見出し。吹き出しと円形イラストを横スクロールで並べる
12. サポート内容（支援の流れを示す）: 淡い水色地。緑帯のリードの下に、STEP カード 4 つを線でつなぐ
13. 申込フォーム（無料相談の登録）: ミント地に緑の見出し。グレー枠の 3 段階フォームの最後にオレンジの次へボタン
14. フッター（著作権表示）: グレーの帯に小さな白文字。右下に円形の TOP ボタン

Imagery

• 20〜30 代のスーツ姿の男女を、明るいオフィスで自然光の下、笑顔や電話中のポーズで撮る
• 人物は背景を飛ばした切り抜きにし、淡い水色の光ぼかしと合成する
• 事例と声にはフラットなビジネスパーソンのイラストを使い、円形背景に胸から上を描く
• 媒体や Web サービスはノート PC やタブレットのモックに入れて見せる
• 背景には街並み写真をうっすら敷き、青グラデと重ねる
• アイコンは白い線画にして緑の円に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 960px 前後に収め、写真の帯だけを全幅に広げる
• ファーストビューは人物 2 名を左右に分け、中央に見出しを置く
• PC の悩みリストは 1 行の横長にし、人物を右に置く
• 事例カードは PC で横長 2 列にし、比較を右側に置く
• 声カードは PC で 5 つを 1 行に並べ、ステップは 4 列横並びにする
• フォームは PC で項目名を左、入力欄を右に置く 2 列にする

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