DESIGN.md — 水彩×サーモン線のやさしい保育系求人LP（Soft Watercolor Childcare Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、かわいい、ナチュラル、親しみ・手作り感
• キーワード: 水彩しみ・パステル・サーモン線・手描きイラスト・若草色・吹き出し
• 地の質感: 白地に淡いピンク・黄緑の水彩にじみと葉っぱの水彩イラストを散らす。紙のような軽い質感
• 形: 細いサーモン色の線で囲む角丸カード、角丸吹き出し、丸い水彩ドットの番号
• 温度感: 暖かく柔らかい。ピンク寄りの暖色と若草色の組み合わせ

Colors

• 地は白を基本に、生成り・淡ピンクを交互に敷いてセクションを区切る
• 解決の転換点とフッターだけ若草色の全幅帯にし白文字で抜く
• 見出し・番号・カード線はすべてサーモン1色で統一
• 主CTAはLINE緑、副CTAはサーモン塗りの2段構成
• 本文は濃いグレー、強調はサーモン文字か黄色マーカー
• ピンク・黄緑の水彩しみは装飾だけに使い文字の下に濃く敷かない
• button-line は文字 #FFFFFF × 背景 #02C654 のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#01893A、4.53:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #EDA285 のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4E1E、4.55:1）を使う。
• point-card は文字 #EDA285 × 背景 #FFFFFF のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4E1E、4.55:1）を使う。
• worry-bubble は文字 #EDA285 × 背景 #FFFFFF のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4E1E、4.55:1）を使う。
• faq-item は文字 #EDA285 × 背景 #FFFFFF のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4E1E、4.55:1）を使う。
• fixed-cta-bar は文字 #FFFFFF × 背景 #02C654 のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#01893A、4.53:1）を使う。

Typography

• 見出しはサーモン色、中央揃え、太字で字間をやや広く
• 番号は細長い欧文書体で見出しより目立たせる
• 本文は小さめで左揃え、行間1.8
• サブ見出しは見出し直下に小さいサーモン文字で添える
• 若草色帯の上の見出しは白抜きにし淡い影をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションはすべて中央揃えの見出しから始める
• カードは左右余白約20pxで横幅いっぱいに置く
• 理由3点はFVでは横3列、帯内では縦積み
• 相談CTAブロックはページ内で3回繰り返す
• イラストは見出しの上に中央配置して区切りにする

Elevation & Depth

• カードは影なし、細い線だけで浮かせる
• CTAボタンに下方向の薄い影
• メンバーカードにごく薄い影
• 白抜き見出しに淡いドロップシャドウ

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の長方形、FV写真は片角だけ大きく丸める
• セクション境界: 直線の色切替、帯内は斜めの切り込み入りの白い細線
• カードは角丸12〜16pxでサーモンの2px枠
• ボタンは角丸6px程度の長方形
• 吹き出しは角丸と小さな丸2つのしっぽ
• 番号の背景は水彩の丸いしみ

Components

• LINE相談ボタン（button-line）: 左にLINEアイコン、右に»矢印の緑の横長ボタン
• 無料相談ボタン（button-secondary）: サーモン塗りの同型ボタン、下に2行の説明文
• 番号付き理由カード（point-card）: 白地にサーモン枠、大きな番号と2行の見出し、下に丸い下矢印
• 不安の吹き出し（worry-bubble）: サーモン枠の角丸吹き出しを左右交互に4つ並べる
• 水彩番号（watercolor-number）: ピンク・黄緑・水色の水彩しみの上に濃グレーの番号
• 求人例カード（job-card）: 上部サーモン帯に地域名、左写真・右に給与マーカーと条件、下にスライダードット
• 利用者の声カード（voice-card）: 人物アイコン＋属性、サーモンの一言見出し、本文の順
• FAQアコーディオン（faq-item）: 丸いQアイコン、サーモンの質問文、右に＋、下線で区切る
• FV下の2分割CTA（fixed-cta-bar）: 緑とサーモンを左右半分ずつ並べた全幅バー

Do's and Don'ts

Do - 見出しと枠線はサーモン1色で揃える - セクションの区切りに手描き人物イラストや葉の水彩を置く - CTAはLINE緑とサーモンの2つを縦に並べ、説明文を添える - 余白を広くとり1画面の情報を少なくする - 写真は子どもと大人が関わる明るい室内の場面にする

Don't - 黒や濃紺など重い色の面を使わない - 角ばった四角や太い枠線を使わない - 原色の赤や派手なグラデーションを使わない - 本文を中央揃えで長く組まない - 写真に強い加工や暗いトーンを使わない

Page Structure

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

1. ファーストビュー（対象職種と強み3点を示す）: 上に写真、水彩しみの地に見出しとカラフルなロゴ、番号カード3枚を横並び
2. サブ写真＋CTAバー（雰囲気を伝え即相談へ誘導）: 角丸写真の下に緑とサーモンの2分割ボタン
3. 悩みの提起（利用前の不安を言語化）: サーモン見出し、吹き出し4つを左右交互、困り顔の女性イラスト
4. 解決と選ばれる理由（不安解消と理由3点の提示）: 若草色の全幅帯、白抜き見出し、白い見出し札、縦積みの番号カード
5. 特長詳細（3つの理由を詳しく説明）: 人物イラスト、水彩番号、サーモン見出し、サブ見出し、本文と注釈
6. CTA（相談を促す）: 淡ピンク地にLINEボタンとサーモンボタンを縦配置
7. 求人例（具体的な待遇を見せる）: サーモン帯付きカードのスライダー、給与に黄色マーカー
8. 担当者紹介（人柄で安心感を出す）: 生成り地、イラスト・役職・モットー・経歴のカードをスライダー表示
9. お客様の声（利用実績で信頼を得る）: 生成り地にアイコン付きの声カードを縦に3つ
10. よくある質問（最後の疑問を解消）: Qアイコンと＋の線区切りアコーディオン5項目
11. 最終CTA（最後の申込誘導）: 葉の水彩を添え、2つのボタンを繰り返す
12. フッター（ブランドとリンク）: 若草色地にロゴ、白文字リンク3つ、コピーライト

Imagery

• 写真は明るい自然光の室内で、子どもと先生が遊ぶ・学ぶ場面
• 人物は細い茶色の線と淡い塗りの手描き風イラスト。頬にピンク
• 葉っぱの枝・鳥・風船・太陽を水彩で描き、セクションの角に置く
• ピンク・黄緑・水色の水彩の丸いにじみを背景に散らす
• ドット柄や草の線など手描きの小さな装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約60%幅のコンテンツ、背景色は全幅
• PCのFVは写真2枚を重ねて配置し、右端に縦型の固定CTAタブ
• 特長詳細はPCでテキストとイラストを左右交互
• 声カードはPCで3列横並び
• 吹き出しはPCでイラストの周りに放射状に配置

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