DESIGN.md — 生成り×くすみ青の保育士採用 LP（Warm Beige Nursery Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、信頼・誠実
• キーワード: 生成りベージュ・白カード・波形境界・手描き線画・くすみブルー・サンドゴールド
• 地の質感: フラットで紙のようなマットな地。影はほぼ使わず、色面の差で区切る
• 形: 大きめ角丸カード、ピル型ボタン、緩い波形カーブ、手描き風の細いループ線
• 温度感: 暖かい中間色。赤系CTAとゴールドの数字が差し色

Colors

• 地は生成りベージュ一色で通し、白カードで情報を浮かせる
• ブルーは英字小見出し・番号・STEPなどの案内記号に限定する
• ゴールドは特長カードの見出し文字とまとめ帯、地図ボタンに使う
• 見出し中の数字だけを赤で大きくして強調する
• 赤系はCTAボタンだけに使い、他の面には使わない
• 施設ごとにブルー／サーモンの色を割り当て、ロゴバッジや箇条点で区別する
• フッターはグレージュの面にして白文字で締める
• button-primary は文字 #FFFFFF × 背景 #ED5852 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E7221B、4.52:1）を使う。
• button-map は文字 #FFFFFF × 背景 #CEB87F のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8B7335、4.56:1）を使う。
• feature-card は文字 #CEB87F × 背景 #FEFFFF のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8B7335、4.56:1）を使う。
• number-badge は文字 #FFFBF0 × 背景 #73A2BC のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#487A96、4.51:1）を使う。
• summary-band は文字 #FFFBF0 × 背景 #CEB87F のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8B7335、4.6:1）を使う。
• step-badge は文字 #FFFBF0 × 背景 #73A2BC のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#487A96、4.51:1）を使う。
• form-field は文字 #A6A9A3 × 背景 #FEFFFF のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#73776F、4.56:1）を使う。

Typography

• 見出しは中央揃えにし、上に小さい英字ラベルを付ける
• 数字は見出しの約1.5倍の大きさで赤にする
• 本文は小さめの文字で行間を広く取り、余白をしっかり見せる
• FVのキャッチは1行ずつ白い角丸帯にのせる
• 書体は太すぎないゴシックで統一し、装飾的な書体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、特長・声・理念カードは縦積み
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面端から約8pxの位置に置き、幅を広く取る
• カード同士の間隔は約16px
• セクションの区切りに全幅の写真や写真帯をはさむ
• 選考フローは左の縦線と点線で各STEPをつなぐタイムラインにする
• 要項は白カードの中で項目名と内容の2列にし、細い線で区切る

Elevation & Depth

• 影はほぼ使わず、白とベージュの色差だけで重なりを見せる
• 声の写真は角丸で切り抜き、下に白いフチを付けてカレンダー風に見せる

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。声の写真は上辺にリング綴じ風の装飾を付ける
• セクション境界: なだらかな波形カーブ（写真の下端・フッター上端）
• カード・写真・入力欄はすべて角丸にする
• ボタンとバッジはピル型
• 番号は丸いバッジにしてカードの左上角にはみ出させる
• 背景に白い手描き風のループ線を細く流す

Components

• エントリー／送信ボタン（button-primary）: 赤いピル型ボタン。FVでは画面幅いっぱいの帯にする
• 地図リンクボタン（button-map）: ゴールドのピル型。ピンのアイコン付き
• 理由カード（feature-card）: 白い角丸カード。番号→線画イラスト→ゴールド見出し（数字だけ赤）→本文の順に中央揃え
• スタッフの声写真（voice-photo）: リング綴じ装飾付きの角丸写真。角に所属園の丸ロゴを重ね、下にコメントを置く
• 丸番号バッジ（number-badge）: ブルーの円に白数字。カードの左上角に重ねる
• 理念のまとめ帯（summary-band）: ゴールドの角丸面に白文字を中央揃えで置く
• STEPバッジ付きタイムライン（step-badge）: ブルーのピル型ラベル、縦線、ゴールドの点、点線で各ステップをつなぐ
• 入力フォーム（form-field）: 白い角丸の入力欄。ラベルの左に必須（サーモン）／任意（グレージュ）の小さなピル型バッジを付ける
• 英字ラベル付き見出し（heading-label）: 小さいブルーの英字の下に太字の和文見出しを中央に置く

Do's and Don'ts

Do - 地は生成り、カードは白にして2層で構成する - 強調したい数字だけを赤で大きくする - 写真は自然光で撮った笑顔のものを角丸で切り抜く - セクションの境界は波形カーブでやわらかく区切る - 特長カードには線画イラストを1点ずつ添える - 施設ごとに色を固定し、写真上のバッジで所属がわかるようにする

Don't - 濃い色の面や黒い背景を広く使わない - 強いドロップシャドウやグラデーションを使わない - 赤をCTA以外の面に使わない - 角張った長方形のカードや写真にしない - 見出しを太く大きくしすぎて圧迫感を出さない

Page Structure

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

1. ファーストビュー（職場の雰囲気を一目で伝え、応募へ誘導する）: 全幅の笑顔写真の下に赤い全幅のエントリー帯を置く。地域・園名の小ラベルと、白帯付きの2行キャッチを続ける
2. 導入メッセージ（働き方の価値観を伝える）: 全幅の写真を波形で切り、下に左揃えの本文を置く。背景に手描きのループ線を流す
3. 働きやすい理由（待遇・制度の魅力を具体的な数字で示す）: 白カード6枚を縦に積む。各カードに番号・線画・ゴールド見出し（数字は赤）・短い本文を入れる
4. 写真ギャラリー帯（日常の雰囲気を見せる）: 横並びの写真帯。下端を波形にする
5. スタッフの声（職場の実感を本人の言葉で伝える）: リング綴じ風の写真と2行程度のコメントを繰り返す。写真の角に所属バッジを付ける
6. 理念（保育方針を伝える）: 見出し・本文の後に全幅写真を置き、番号付きの白カード3枚とゴールドのまとめ帯を続ける
7. 動画（雰囲気を動きで補う）: 上下を波形で区切った白い帯の上に、テロップ入りの動画サムネイルを置く
8. 施設紹介（各園の概要と場所を示す）: 角丸の外観写真→ロゴ→色付きの点で並べた情報→地図ボタン→説明文→内観写真帯の順に置く
9. 選考フロー（応募から内定までを示す）: 縦線のタイムラインにSTEPバッジを付けて4段階を並べる
10. 募集要項（条件を正確に伝える）: 白い大カードの中に、項目名と内容の2列表を細い線で区切って並べる
11. エントリーフォーム（応募を受け付ける）: 必須／任意バッジ付きのラベル、白い角丸の入力欄、ラジオボタン、同意チェックを並べ、最後に赤いピル型の送信ボタンを置く
12. フッター（運営元と関連リンクを示す）: 上端を波形にしたグレージュの面に、白いロゴカードを3枚並べ、住所・電話番号を白文字で置く

Imagery

• 室内の自然光で撮った保育士と子どもの笑顔の写真。明るく、少し暖色寄りに仕上げる
• スタッフは白い壁や木の扉を背景にエプロン姿の上半身で、正面を向いて笑顔で撮る
• 特長カードには細い線画に淡いオレンジ・黄・紺を部分的に塗った人物イラストを使う
• 建物は青空の下で白い外観を正面から撮り、内観は木の床が見える明るい部屋を撮る
• 背景には白い手描き風のループ線を細く大きく流す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは左に生成りの面とキャッチ、右に大きく波形で切った写真を置く
• PCの特長カードは2列で、左右を上下に互い違いにずらして配置する
• PCのスタッフの声は3列（最後の段は2列）のグリッドにする
• PCの理念は左に本文、右に波形で切った写真の2カラムにし、カードは3列にする
• PCの施設紹介は写真とテキストの2カラム、選考フローは左に見出しを置く横型レイアウトにする
• 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 行書くと起動時に読み込まれる。