DESIGN.md — 淡ピンク地×緑ボタンの女性向け求人 LP（Soft Pink Recruitment LP with Green CTA）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、かわいい、信頼・誠実、情報量多め・訴求型
• キーワード: 淡ピンク・格子柄の地・白カード・濃赤の見出し・緑の立体 CTA・線画の女性イラスト
• 地の質感: ごく薄いピンクの斜め格子パターンを地に敷き、上に白いカードを薄い影付きで重ねる
• 形: 角丸 12〜16px のカード、ピル型ボタン、円形の番号バッジ、片側だけ角丸の帯
• 温度感: 暖色寄り。ピンクと赤が中心で、青緑と緑で差し色を入れる

Colors

• 地は淡ピンクの格子柄に統一する。白カードで情報のまとまりを区切る
• 見出しは濃赤、見出しの一部の語だけ明るい赤にして強弱を付ける
• 主 CTA だけを緑にし、ほかの要素には緑を使わない
• 悩みの提起は青緑の帯に白文字を置き、強調語だけ淡黄にする
• サポート解説のセクションは地全体をコーラルで塗り、中に白と生成りのカードを置く
• ピンクのグラデーションはブランド訴求バナーと声カードの見出しにだけ使う
• button-primary は文字 #FFFFFF × 背景 #63B573 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#3E834C、4.61:1）を使う。
• cta-bubble は文字 #FFFFFF × 背景 #FE839D のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EB0233、4.58:1）を使う。
• worry-band は文字 #FFFFFF × 背景 #3BA2A5 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2F8183、4.58:1）を使う。

Typography

• 見出しは字間を広めにとり、助詞だけ小さくしてリズムを付ける
• 見出しの下に濃赤の短い横線（幅 30px 前後）を必ず置く
• 数字と英字の番号は細めの欧文で大きく出す
• 本文は 14px・行間 1.8 で読みやすさを優先する
• 見出しの上に小さな前置きの一行を置き、二段構成にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右 16px の余白を空けて置く
• 理由のブロックは画面幅いっぱいの写真の下に白カードを重ねる
• 悩みの帯は左右交互に画面端まで伸ばす
• CTA はイラスト付きの半円吹き出しの上に重ねる
• 求人カードはタブとスライダーで地域を切り替える

Elevation & Depth

• 白カードに薄いピンクの影（0 4px 12px 程度）を付ける
• CTA は下に濃い緑の厚みを付けて立体的に見せる
• FV の特長カードは白い半透明の面に軽い影を付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は横長の矩形。カード内の写真は角丸 12px、アイコンは円形に切り抜く
• セクション境界: 基本は直線。就業前と就業後の境は下向きの V 字の切り込みにする
• 悩みの帯は片側だけ大きく角丸にする
• 番号バッジとアイコンは正円にする
• タグは角丸 2〜4px の小さな四角にする

Components

• 緑の立体 CTA（button-primary）: グラデーションの緑のピル型。左に白いピル型の無料バッジ、右に円の矢印を置く
• CTA 上の吹き出し（cta-bubble）: ピンクの半円に誘導文を白で書き、左に線画の女性イラストを添える
• 見出しと下線（heading-underline）: 中央揃えの濃赤の見出しと、その下の短い赤線
• 悩みの帯（worry-band）: 青緑の帯に 2 行の白文字。強調語は淡黄にし、帯を 4 本並べる
• 理由カード（reason-card）: 写真に重ねた白カード。左上に小さな英字ラベルと大きな番号を置き、濃赤の見出しのあと本文を続ける
• 求人カード（job-card）: コーラルの見出し帯、社名、赤タグ、項目と値の 2 列表で組む
• お客様の声カード（voice-card）: ピンクのグラデーションの見出し部に丸い似顔絵と白い見出しを置き、下端は弧にする。その下の白い面に本文を書く
• ステップ（step-item）: 淡ピンクの円に番号を置き、縦線でつなぐ。白カードにアイコン、見出し、本文を入れ、最後のステップだけ淡黄にする
• FAQ アコーディオン（faq-item）: 白カードの左に淡ピンクの丸い Q、中央に濃赤の質問、右に V 字のアイコンを置く
• チェック項目（check-item）: 淡ピンクの丸いチェックアイコンと濃赤の 2 行見出し。項目どうしは細い区切り線で分ける

Do's and Don'ts

Do - 地は淡ピンクの格子柄にし、白カードで区切る - 主 CTA は緑の立体ピル型に統一し、3〜4 回繰り返し置く - 見出しは濃赤で中央揃えにし、下に短い線を付ける - 線画の女性イラストで悩みや誘導に親しみを出す - 番号は大きな欧文数字と小さな英字ラベルで組む

Don't - CTA 以外に緑を使わない - 黒い太い罫線や角張った四角いボタンを使わない - 寒色を背景の主役にしない（青緑は悩みの帯だけに使う） - 本文を 12px 未満にしない - 濃い写真を全面背景に敷いて文字を重ねない

Page Structure

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

1. ヘッダー（ブランドと対応エリアを示す）: 白地に赤のロゴ。その下に赤い帯を敷き、白文字でエリアを書く
2. ファーストビュー（対象者と仕事内容を一目で伝える）: 左に極太の大見出し、右に女性の写真。円形の対象者バッジを置き、アイコン付きの白カードで特長を 3 つ並べる。最後に緑の CTA
3. 求人例（具体的な仕事のイメージを見せる）: 地域タブ、求人カード、左右の丸い矢印ボタンとドットで切り替えるスライダー
4. 悩みの提起（読み手の不安に共感する）: 悩む女性の線画と見出しのあと、青緑の帯を 4 本並べる
5. 解決提示バナー（サービスが解決すると示す）: ピンクのグラデーションの帯に白の大きな文字。下に下向きの三角を置く
6. 選ばれる理由（強みを 3 つ伝える）: 全幅の写真に白い理由カードを重ね、番号付きで 3 回繰り返す
7. CTA（登録へ誘導する）: イラスト付きのピンクの半円吹き出しと緑の CTA
8. サポート内容（就業前と就業後の支援を示す）: コーラル地に白いカードを置き、就業前と就業後のチェック項目を並べる。間を V 字の切り込みで区切る
9. お客様の声（実際の体験談で安心させる）: ピンクの見出し部と似顔絵付きの声カードを縦に並べる
10. 利用の流れ（手順の少なさを伝える）: 円の番号を縦線でつなぎ、4 ステップの白カードを並べる
11. サポート訴求バナー（就業後の安心感を補足する）: 女性の写真にピンクのグラデーションの文字ボックスを重ねる
12. よくある質問（疑問を解消する）: Q アイコン付きの白いアコーディオンを 6 つ並べ、最後に CTA
13. 会社情報・フッター（運営元を示す）: 白地に項目と値の 2 列表。最下部に濃いグレーのコピーライト帯

Imagery

• 明るいオフィスで笑顔の 20〜40代女性を、自然光で白っぽく柔らかく撮る
• 面談や相談の場面は向かい合う 2 人を横長に切り取る
• イラストは黒の線画で、髪や服にピンクを部分的に塗る
• アイコンは淡ピンクの円に白い線画、または赤い線のアイコンにする
• 地は細かい斜め格子のピンクパターンにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC では SP の 1 カラムを幅 480〜600px 程度で中央に置き、左右を淡いグレーかピンクの地にする
• PC に広げる場合、理由カードは写真と文章を左右交互の 2 カラムにする
• ステップと FAQ は 1 カラムのまま幅を最大 800px に抑える
• FV は PC で写真を右半分に大きく置き、特長カードを横に 3 つ並べる

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