DESIGN.md — パステル水彩とコーラルの小児科採用 LP（Pastel Watercolor Pediatric Clinic Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、かわいい、ポップ・元気、清潔・爽やか
• キーワード: パステル水彩・にじみグラデーション・不定形ブロブ・白カード・コーラル・子ども
• 地の質感: ピンクと水色がふんわりにじむグラデーションの背景。ノイズや紙の質感はなく、なめらかで明るい。
• 形: 大きな角丸の白カード、ピル型ボタン、手描き風の不定形な色ブロブ、角丸の写真。
• 温度感: 暖かめ。コーラルとオレンジ寄りのブラウンが温かさを出し、水色で清潔感を足している。

Colors

• 地はほぼ白のグレーにする。セクションの境目には淡いピンクと水色をにじませる。
• 本文は必ず白カードの上に置き、グラデーションの上に直接長文を置かない。
• コーラルは応募 CTA と見出しのキーワードのマーカーだけに使う。
• オレンジブラウンは小見出し・番号・英字サブタイトルに使う。
• 水色・黄・ピンクは不定形ブロブとラベルに少しずつ散らす。
• ネイビーは関連サイトのバナーなど、フッター付近だけに使う。
• button-primary は文字 #FFFFFF × 背景 #FC8E8D のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EC0806、4.56:1）を使う。
• cta-band は文字 #FFFFFF × 背景 #FF8D8D のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EE0000、4.53:1）を使う。
• campaign-banner は文字 #FF8D8D × 背景 #FEFEFD のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EE0000、4.59:1）を使う。

Typography

• 見出しは丸ゴシックの太字にし、キーワードだけを色帯で囲んで白抜きにする。
• 見出しの下に英字サブタイトルを小さく添える。
• 番号は 01〜07 のように英字の細い数字を大きくオレンジで置く。
• 本文は行間を広めにとり、1 段落を 4〜6 行に収める。
• 縦書きの見出しは募集職種など 1 か所だけに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種リストは 2 列、スタッフの声は横スクロールにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 主要な内容は大きな白カードにまとめ、背景から浮かせる。
• 特長は写真と文章を左右交互に配置する（SP では縦に積む）。
• 写真やカードの縁にブロブを重ね、端を少しはみ出させる。
• CTA 帯は角丸のコーラル面に、左にコピー、右にボタンを置く。
• セクション見出しは中央寄せにし、上にアイコンを添える。

Elevation & Depth

• 白カードには影を付けないか、ごく薄い影（0 4px 20px rgba(0,0,0,0.04)）にとどめる。
• 写真は角丸にして影なしで重ねる。
• ボタンは平面で影を付けない。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。人物の写真は上半身を正面から切り取る。
• セクション境界: 直線の区切りは使わず、背景グラデーションのにじみで切り替える。
• 装飾には有機的な不定形ブロブ（水色・黄・ピンク）を使う。
• ラベルは小さな角丸の四角にする。
• 鋭い角や斜めの区切りは使わない。

Components

• 応募ボタン（button-primary）: コーラルまたは白のピル型ボタン。アイコンと文字を並べる。
• 応募 CTA 帯（cta-band）: コーラルの角丸の面。白文字の見出しと白いピル型ボタンを置く。
• マーカー見出し（heading-marker）: キーワードをコーラルの帯で白抜きにし、英字サブタイトルを添える。
• 職種リスト（job-list）: アイコン・職種名・矢印を並べ、下線で区切った 2 列のリスト。
• 番号付き特長（feature-card）: 大きな番号、色ラベル、オレンジの小見出し、本文、角丸の写真で構成する。
• カテゴリラベル（tag-label）: 職種や特長カテゴリを示す小さな色ラベル（水色・黄・コーラル）。
• スタッフの声カード（staff-card）: 写真の下に職種ラベル、入社年と名前、短いコメントを中央寄せで置く。
• お祝い金バナー（campaign-banner）: ガーランド装飾が付いた横長の告知バナー。コーラルの見出しを入れる。

Do's and Don'ts

Do - 背景はピンクと水色をふんわりにじませ、白カードで内容を区切る。 - ブロブ装飾をカードや写真の角に少し重ねる。 - 見出しのキーワードはコーラルの帯で強調する。 - スタッフの写真は明るく、笑顔を正面から写したものを使う。 - 番号と英字サブタイトルで構成をわかりやすく示す。

Don't - 濃い色の大きな面や黒い背景を使わない。 - 原色の赤や彩度の高い青を大きな面積で使わない。 - 角張った明朝体の見出しにしない。 - ブロブを本文の上に重ねて読みにくくしない。 - CTA 以外にコーラルを多用しない。

Page Structure

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

1. ヘッダー（電話番号・ロゴ・応募の導線を示す）: 中央にロゴ、左に電話番号、右にコーラルの応募ボタンを置く。下にナビを並べる。
2. ファーストビュー（職場の温かさとビジョンを伝える）: 診療場面の写真を複数重ねてコラージュし、ブロブを散らす。右下に一部を色帯にしたコピーと英字を置く。
3. キャンペーン告知（直接応募の特典を知らせる）: ガーランド装飾付きの横長バナーを置く。
4. 募集職種（職種ページへ誘導する）: 白カードの左に縦書きの見出し、右にアイコン付きの 2 列リストを置く。
5. 代表メッセージ（採用への想いを伝える）: 左に縦書きの英字ラベル、中央に長文、右に角丸の写真を散らして配置する。
6. 働く魅力（働くメリットを番号付きで示す）: 大きな白カードの中で、01〜04 は写真と文章を左右交互に、05〜07 は 3 列カードで見せる。
7. スタッフの声（実際の社員像を見せる）: 顔写真のカードを横に並べ、職種ラベルと短いコメントを添える。
8. 応募 CTA（応募へ誘導する）: コーラルの角丸帯に白文字のコピーと白いピル型ボタンを置く。
9. SNS・関連サイト（SNS と関連サイトへ誘導する）: SNS の投稿サムネイルをグリッドで並べ、下に色違いの横長バナーを 3 つ置く。
10. フッター（所在地・連絡先を示す）: ロゴ、住所、電話番号を横に並べ、細い線の下にコピーライトを置く。

Imagery

• 自然光が入る明るい院内で、白衣やパステルの制服を着たスタッフの笑顔を撮る。
• 子どもと大人が触れ合う温かい場面を入れる。
• 装飾は水色・黄・ピンクの不定形ブロブと小さなドットにする。
• アイコンは細い線のシンプルなもので、オレンジ系にする。
• 写真の色調は少し明るく、彩度は控えめにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅の白カードで組み、SP では幅 90% の 1 カラムにする。
• 特長の左右交互配置は、SP では写真→文章の縦積みにする。
• 05〜07 の 3 列カードは、SP では 1 列にする。
• スタッフの声は、SP では横スクロールのカルーセルにする。
• ナビは、SP ではハンバーガーメニューにし、応募ボタンを画面下に固定する。

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