--- version: alpha name: Pastel Watercolor Pediatric Clinic Recruit LP description: 淡いピンクと水色のにじみグラデーションの地に、白い角丸カードを浮かべた小児クリニックの採用 LP。コーラルピンクの CTA と、黄・青・ピンクの不定形の色ブロブで、やさしく元気な印象を出している。 colors: primary: '#FF8D8D' cta: '#FC8E8D' on-cta: '#FFFFFF' background: '#F4F3F1' surface: '#FEFEFD' tint-1: '#FEFBFA' tint-2: '#F2F6FA' secondary: '#D99A5B' text: '#3C3C3C' accent-1: '#3BA7DB' accent-2: '#F2C230' dark-section: '#2F4B63' line: '#D7D8D2' background-alt: '#F4F3F1' cta-accessible: '#EC0806' primary-accessible: '#EE0000' typography: display: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em accent: fontFamily: Quicksand fontSize: 14px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em label-button: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px cta-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 200px heading-marker: textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 60px job-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 320px tag-label: backgroundColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 18px staff-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 260px campaign-banner: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 90px --- # DESIGN.md — パステル水彩とコーラルの小児科採用 LP（Pastel Watercolor Pediatric Clinic Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: やさしい・柔らかい、かわいい、ポップ・元気、清潔・爽やか - **キーワード**: パステル水彩・にじみグラデーション・不定形ブロブ・白カード・コーラル・子ども - **地の質感**: ピンクと水色がふんわりにじむグラデーションの背景。ノイズや紙の質感はなく、なめらかで明るい。 - **形**: 大きな角丸の白カード、ピル型ボタン、手描き風の不定形な色ブロブ、角丸の写真。 - **温度感**: 暖かめ。コーラルとオレンジ寄りのブラウンが温かさを出し、水色で清潔感を足している。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF8D8D` | ブランドのコーラルピンク（CTA 帯・見出しのマーカー） | 4% | 画素の実測 | | `cta` | `#FC8E8D` | 応募ボタンの面 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#F4F3F1` | ページの地（明るいグレー白） | 30% | 画素の実測 | | `surface` | `#FEFEFD` | コンテンツカードの白 | 20% | 画素の実測 | | `tint-1` | `#FEFBFA` | にじみ背景の淡ピンク | 10% | 画素の実測 | | `tint-2` | `#F2F6FA` | にじみ背景の淡い水色 | 10% | 画素の実測 | | `secondary` | `#D99A5B` | 見出しと番号のオレンジブラウン | 1% | 推定 | | `text` | `#3C3C3C` | 本文・見出しのダークグレー | 3% | 推定 | | `accent-1` | `#3BA7DB` | 職種ラベル・ボタンの水色 | 1% | 推定 | | `accent-2` | `#F2C230` | 装飾ブロブ・ラベルの黄色 | 1% | 推定 | | `dark-section` | `#2F4B63` | 関連サイトバナーのネイビー | 0% | 推定 | | `line` | `#D7D8D2` | 職種リストの区切り線 | 0% | 画素の主要色に補正 | | `background-alt` | `#F4F3F1` | スタッフ紹介帯のライトグレー | 5% | 画素の実測 | | `cta-accessible` | `#EC0806` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#EE0000` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ白のグレーにする。セクションの境目には淡いピンクと水色をにじませる。 - 本文は必ず白カードの上に置き、グラデーションの上に直接長文を置かない。 - コーラルは応募 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのメインコピー | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.5 | 0.05em | | `headline-lg` | セクション見出し（キーワードを色帯で強調） | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.4 | 0.08em | | `headline-md` | 特長カードの小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.04em | | `accent` | 英字サブタイトル・大きな番号 | 欧文サンセリフ | Quicksand | 600 | 14px | 1.3 | 0.1em | | `note` | 入社年・名前・注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.04em | | `label-button` | ボタン・ラベル | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 1.2 | 0.08em | - 見出しは丸ゴシックの太字にし、キーワードだけを色帯で囲んで白抜きにする。 - 見出しの下に英字サブタイトルを小さく添える。 - 番号は 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-0a931b6a`（元 LP の URL から採番） - **元 LP**: https://babychildclinic-recruit.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。