DESIGN.md — 黄・ピンク・ミントのパステル求人 LP（Pastel Block Friendly Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、かわいい
• キーワード: パステル色の面の切り替え・波線で挟む見出し・大きい角丸の白カード・黒い線画イラスト・コーラル色のピル型 CTA
• 地の質感: フラットな単色の面。背景の一部にドットや方眼、細い幾何学線の模様を薄く敷く。
• 形: 角丸の大きいカード、丸い枠のイラスト、波型やフラワー型のバッジ、八角形の番号
• 温度感: 暖かく明るい。黄とピンクが中心で、ミントで清潔感を加える

Colors

• セクションごとに地色を黄→白→ピンク→ミント→白→黄の順に切り替え、内容の区切りを色で示す。
• 色の面の上には白いカードを置く。カードの中の文字は茶黒にする。
• コーラルは CTA、英字のサブ見出し、強調コピーだけに使う。
• イラストは黒い線画にし、塗りはミント・黄・ピンクの 3 色に限る。
• 純粋な黒は使わず、文字は茶寄りの黒にする。
• button-primary は文字 #FFF2EF × 背景 #FC7F87 のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E20513、4.5:1）を使う。

Typography

• セクション見出しは中央揃えにし、上下を波線で挟む。見出しの下にコーラルの英字ラベルを添える。
• 本文は左揃えにする。お客様の声だけは中央揃えにする。
• 導入のひと言は全角スラッシュ「＼／」で挟む。
• 見出しは太字のゴシックにし、2 行で改行位置を整える。
• 強調コピーはコーラルの太字で大きくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は特長やステップを 3〜4 カラムに並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 16px の余白を取り、画面幅いっぱいに近く置く。
• 特長は丸枠のイラスト、小見出し、本文の順に縦に積む。
• CTA は写真の背景の上に白い半透明カードを重ね、その中に置く。
• セクション見出しの上下の余白は 40px 前後にする。

Elevation & Depth

• 影はほぼ使わず、フラットな面で構成する。
• ファーストビューと CTA のカードは白の半透明にし、写真の上に浮かせる。
• 流れのカードだけ細い黒枠で区切る。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 36px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の大きい長方形で切り抜く（角丸 40px 前後）。イラストは白い円の中に入れる。
• セクション境界: 直線で色を切り替える。見出しの上下には手描き風の波線を引く。一部は下向きの三角の切り欠きで次のセクションへつなぐ。
• バッジは波型やフラワー型にする。
• ステップ番号は八角形の中に白抜き数字で入れる。
• FAQ の行は角丸 6px の白い帯にする。

Components

• 主 CTA ボタン（button-primary）: コーラルのピル型。白文字を中央に置き、右端に「>」を付ける。
• 波線で挟む見出し（heading-wave）: 上下に波線を引き、中央に見出しを置く。その下にコーラルの英字を添える。
• 波型のバッジ（badge-wavy）: ミントの波型の円に「〜でも大丈夫」のような短い文を 2 行で入れる。
• アイコン付き特長カード（card-feature）: 白カードの上部に黄色のフラワー型アイコンを置き、小見出しと本文を続ける。
• 声のカード（card-voice）: 黄色の角丸の大きいカード。上に人物イラストと名前、続けて感想を中央揃えで書き、動画サムネイルを並べる。
• 流れのステップ（step-card）: 細い黒枠の中に淡いピンクの面を置き、八角形の番号、小見出し、説明を入れる。
• FAQ アコーディオン（faq-item）: 白い帯の左に大きな「Q」、右に「+」を置く。
• 写真の上の CTA ブロック（cta-banner）: 写真の背景に白い半透明カードを重ね、波型のバッジ、スラッシュで挟んだ一言、主 CTA を入れる。

Do's and Don'ts

Do - セクションごとにパステル色の地を切り替える。 - 見出しは必ず波線で挟み、英字ラベルを添える。 - イラストは黒の線画とパステル塗りで統一する。 - CTA はページの冒頭・中盤・末尾の 3 か所に同じデザインで置く。 - 角丸は大きめにし、柔らかさを保つ。

Don't - 濃い原色や彩度の高い青は使わない。 - 角の尖った四角い写真は使わない。 - 影の強い立体的なボタンにしない。 - 本文を細い明朝体にしない。 - コーラルを CTA と強調以外に多用しない。

Page Structure

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

1. ファーストビュー（未経験でも安心できることを伝え、すぐ登録へ誘導する）: 笑顔の女性の写真に白い半透明カードを重ねる。中に波型のバッジ、2 行の見出し、筆跡風マーカーを引いたリード文、CTA を置く。
2. 仕事の説明（仕事内容をわかりやすく説明する）: 黄色の地に左揃えの見出しと本文を置き、その下に角丸の白枠に入れた線画イラストを入れる。
3. メリット（働く利点を 3 つ示す）: 黄色の地に、白い円のイラスト、2 行の小見出し、本文を縦に 3 回繰り返す。
4. 共感と安心（不安に寄り添う）: 白い地に鉤括弧で囲んだ悩みを書き、コーラルの大きな強調コピーと説明を続ける。
5. 制度紹介（研修制度の目玉を打ち出す）: ピンクの地に、スラッシュで挟んだ導入、ディスプレイ書体の制度名、階段のイラストを置き、特長カードを 3 枚続ける。
6. CTA（中盤で登録を促す）: 写真の背景に半透明カード、バッジ、ピル型のボタンを重ねる。
7. 強み（企業としての安心感を示す）: ミントの地に角丸の写真、小見出し、本文を 3 組並べ、認定マークを添える。
8. お客様の声（先輩の体験で信頼を高める）: 黄色の角丸カードに人物イラスト、感想、動画サムネイルを入れる。
9. 流れ（登録から仕事開始までの手順を示す）: 方眼柄の地に、八角形の番号付きステップカードを 4 枚縦に並べる。
10. よくある質問（疑問を解消する）: 黄色の地に、白いアコーディオンの帯を 6 本並べる。
11. 最終 CTA とフッター（最後に登録を後押しする）: 写真の上の CTA ブロックを置き、その下の白い地にロゴと著作権表記を入れる。

Imagery

• 明るいオフィスで笑顔の 20〜30 代の女性を撮る。自然光で白っぽい背景にする。
• 写真の背景には、ドット・ジグザグ・円などの細い幾何学模様を薄く重ねる。
• イラストは均一な太さの黒い線画にし、ミント・黄・ピンクで部分的に塗る。
• アイコンはシンプルな線画にし、黄色のフラワー型の背景に置く。
• 人物イラストは胸から上で、表情を穏やかにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を 960px 前後に絞り、中央に置く。
• PC のファーストビューは写真の中央に白いカードを置く。
• メリットと特長カードは PC で 3 カラム、流れのステップは 4 カラムにする。
• 強みは PC で写真と文章を左右交互に配置する。
• 声の動画サムネイルは 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 行書くと起動時に読み込まれる。