--- version: alpha name: Warm Beige Nursery Recruit LP description: 生成りベージュの地に白カードを並べ、くすみブルーとサンドゴールドで彩る保育園の求人LP。手描き線画イラストと笑顔の自然光写真、波形のセクション境界で、やわらかく親しみやすい職場の印象をつくる。 colors: background: '#F5F1E8' surface: '#FEFFFF' primary: '#73A2BC' secondary: '#CEB87F' cta: '#ED5852' on-cta: '#FFFFFF' accent-1: '#D15758' accent-2: '#E3957E' text: '#3E3433' dark-section: '#C5B9A1' line: '#E9DACC' text-muted: '#A6A9A3' on-dark: '#FFFBF0' cta-accessible: '#E7221B' secondary-accessible: '#8B7335' primary-accessible: '#487A96' text-muted-accessible: '#73776F' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 8px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em note: fontFamily: Montserrat fontSize: 8px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 8px md: 14px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px 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: 30px button-map: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 180px voice-photo: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 290px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px summary-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 115px step-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 14px form-field: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 28px heading-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 40px --- # DESIGN.md — 生成り×くすみ青の保育士採用 LP（Warm Beige Nursery Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: やさしい・柔らかい、ナチュラル、親しみ・手作り感、信頼・誠実 - **キーワード**: 生成りベージュ・白カード・波形境界・手描き線画・くすみブルー・サンドゴールド - **地の質感**: フラットで紙のようなマットな地。影はほぼ使わず、色面の差で区切る - **形**: 大きめ角丸カード、ピル型ボタン、緩い波形カーブ、手描き風の細いループ線 - **温度感**: 暖かい中間色。赤系CTAとゴールドの数字が差し色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F5F1E8` | ページ全体の生成り地 | 40% | 画素の実測 | | `surface` | `#FEFFFF` | 特長カード・要項カード・入力欄 | 19% | 画素の実測 | | `primary` | `#73A2BC` | くすみブルー（英字ラベル・番号・STEPバッジ） | 3% | 画素の実測 | | `secondary` | `#CEB87F` | サンドゴールド（特長見出し・まとめ帯・地図ボタン） | 4% | 画素の実測 | | `cta` | `#ED5852` | エントリー・送信ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D15758` | 数字強調の赤 | 0% | 画素の実測 | | `accent-2` | `#E3957E` | サーモンピンク（必須バッジ・別園の丸ロゴ） | 1% | 推定 | | `text` | `#3E3433` | 見出し・本文の濃い茶黒 | 5% | 画素の主要色に補正 | | `dark-section` | `#C5B9A1` | フッターのグレージュ面 | 3% | 画素の実測 | | `line` | `#E9DACC` | 要項の区切り線 | 0% | 画素の主要色に補正 | | `text-muted` | `#A6A9A3` | カード番号・プレースホルダ | 0% | 画素の主要色に補正 | | `on-dark` | `#FFFBF0` | フッター上の白文字 | 0% | 画素の実測 | | `cta-accessible` | `#E7221B` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#8B7335` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#487A96` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#73776F` | AA を満たす補正値（計算） | | 計算 | - 地は生成りベージュ一色で通し、白カードで情報を浮かせる - ブルーは英字小見出し・番号・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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（白い帯ハイライト付き） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.05em | | `headline-md` | 特長カード見出し（ゴールド） | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.05em | | `headline-sm` | 理念カード・STEP項目の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.04em | | `body-md` | 本文・声のコメント | ゴシック | Zen Kaku Gothic New | 500 | 11px | 1.9 | 0.03em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 600 | 8px | 1.4 | 0.08em | | `note` | カード番号・注記・写真キャプション | 欧文サンセリフ | Montserrat | 500 | 8px | 1.5 | 0.05em | | `label-button` | ボタン・バッジ文字 | ゴシック | Zen Kaku Gothic New | 700 | 12px | 1.2 | 0.05em | - 見出しは中央揃えにし、上に小さい英字ラベルを付ける - 数字は見出しの約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 ```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-209feb34`（元 LP の URL から採番） - **元 LP**: https://www.i-cube.life/lp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。