--- version: alpha name: Warm Yellow Coral Recruitment LP description: 生成りと白の地に、明るい黄色の帯とコーラルの強調色を合わせた親しみやすい採用 LP。丸みのあるゴシック、大きな角丸の吹き出しカード、不定形の円形写真、立体アイソメトリックのイラストで、柔らかく安心できる職場の印象を作る。主な導線は LINE 診断ボタン。 colors: primary: '#E86568' background: '#FAF3EB' background-alt: '#FFFFFF' secondary: '#FFD04E' cta: '#FED14D' on-cta: '#FFFFFF' accent-1: '#06C655' accent-2: '#6CD4B5' accent-3: '#CC9175' tint-1: '#FBE4DE' text: '#2A2725' surface: '#FDFEFD' line: '#EB6E6F' accent-1-accessible: '#04883A' primary-accessible: '#E03034' accent-3-accessible: '#AB623F' typography: display: fontFamily: Quicksand fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Quicksand fontSize: 34px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 6px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 16px 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: 56px button-on-yellow: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px worry-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 82px fv-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 60px qa-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px time-label: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 105px requirements-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 480px faq-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-3}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 90px --- # DESIGN.md — 生成り×黄×コーラルの獣医師採用 LP（Warm Yellow Coral Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: やさしい・柔らかい、ポップ・元気、親しみ・手作り感、信頼・誠実 - **キーワード**: 生成り地・黄色の帯・コーラル強調・大きな角丸・吹き出し・アイソメイラスト - **地の質感**: フラットな単色面。影はやわらかく、グラデーションは写真のフェードだけに使う - **形**: 大きな角丸カード、ピル型ボタン、片側だけ角を大きく丸めたセクション境界、不定形の円形写真 - **温度感**: 暖色寄りで明るく温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E86568` | 強調見出し・数字・Q バッジのコーラル | 2% | 画素の実測 | | `background` | `#FAF3EB` | メインの生成り地 | 30% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白セクション地 | 28% | 画素の実測 | | `secondary` | `#FFD04E` | 黄色の帯セクション・時刻ラベル | 12% | 画素の実測 | | `cta` | `#FED14D` | 主 CTA ボタン（黄） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#06C655` | LINE グリーンのボタン | 1% | 画素の実測 | | `accent-2` | `#6CD4B5` | A バッジのミントグリーン | 0% | 画素の実測 | | `accent-3` | `#CC9175` | インタビュー質問文のサーモンベージュ | 0% | 画素の実測 | | `tint-1` | `#FBE4DE` | 募集要項ボックスの淡いピンク地 | 2% | 画素の実測 | | `text` | `#2A2725` | 見出し・本文の濃いグレー | 3% | 画素の実測 | | `surface` | `#FDFEFD` | 吹き出し・FAQ カードの白 | 5% | 画素の実測 | | `line` | `#EB6E6F` | 募集要項の枠線コーラル | 0% | 画素の実測 | | `accent-1-accessible` | `#04883A` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E03034` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#AB623F` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと白を交互に置き、セクションを区切る - LINE 誘導の重要な塊は黄色の全幅帯にする - 見出しのキーワードと数字はコーラルで強調する - 主 CTA は黄ボタン＋白文字。黄色の帯の上では白ボタン＋緑文字に切り替える - Q はコーラル丸、A はミント丸。2 色を対で使う - 本文は黒ではなく濃いグレーにする - `button-on-yellow` は文字 `#06C655` × 背景 `#FDFEFD` のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#04883A`、4.53:1）を使う。 - `fv-badge` は文字 `#FFFFFF` × 背景 `#E86568` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E03034`、4.52:1）を使う。 - `faq-card` は文字 `#CC9175` × 背景 `#FDFEFD` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#AB623F`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し | 欧文サンセリフ | Quicksand | 700 | 30px | 1.3 | 0.02em | | `headline-lg` | コーラルの強調セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.5 | 0.04em | | `headline-md` | 通常のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 20px | 1.6 | 0.04em | | `headline-sm` | Q の質問文・カード見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.5 | 0.03em | | `body-md` | 本文・回答文 | ゴシック | Zen Kaku Gothic New | 500 | 12px | 1.7 | 0.02em | | `accent` | 実績の大きな数字 | 欧文サンセリフ | Quicksand | 700 | 34px | 1.1 | 0.0em | | `label-button` | CTA ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.4 | 0.03em | | `note` | スケジュールの箇条書き・注釈 | ゴシック | Zen Kaku Gothic New | 500 | 10px | 1.6 | 0.02em | - 見出しは中央揃えで太めの丸ゴシックにする - 数字は文字の 2〜3 倍の大きさにして、コーラルで目立たせる - CTA の上に「＼ ／」で挟んだ短いマイクロコピーを置く - セクション見出しの頭に小さな絵文字アイコンを付ける - 本文は 12px 前後で行間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。実績・特長アイコンは 2 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 悩み吹き出しは左右交互に寄せ、画面端まで伸ばす - 求人カードは中央 1 枚と左右の見切れを見せる横スライダーにする - スケジュールは時刻ラベル→写真→箇条書きを縦に繰り返す - ステップは左にカード、右に説明を置き、点線の矢印でつなぐ ## Elevation & Depth - CTA ボタンには下方向にやわらかい影を付ける - 吹き出し・求人カード・ステップカードは薄い影で浮かせる - ステップカードは右下にコーラルの淡い影を付ける - FAQ カードは影なしの白い面にする ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は不定形の円（2 つの円を重ねた形）に切り抜く。スケジュール写真は角丸 16px の長方形にする - **セクション境界**: 黄色の帯や生成り地の上端を、片側だけ大きな角丸で始める。FV 写真は右下を大きく丸める - 悩み吹き出しは、画面端側を直角、内側を半円にする - Q と A のバッジは正円にする - 時刻ラベルは黄色の角丸小矩形にする - STEP ラベルはコーラルのピル型にし、カードの左上に重ねる ## Components - **LINE 診断 CTA**（`button-primary`）: 黄色のピル型ボタン。左に白角丸の LINE アイコン、右に白文字 - **黄色の帯の上の白 CTA**（`button-on-yellow`）: 白のピル型ボタンに緑文字と LINE アイコン - **悩み吹き出し**（`worry-bubble`）: 人物の線画を丸枠に入れ、悩みの短文を添える。強調語はコーラル - **FV の特長バッジ**（`fv-badge`）: くすみ色の丸い吹き出し 4 つ。白い太字で条件を 2 行で書く - **インタビューの Q&A**（`qa-item`）: コーラル丸の Q と質問文、ミント丸の A と回答文 - **時刻ラベル**（`time-label`）: 黄色の角丸矩形に時刻。右に工程名の見出しを置く - **ステップカード**（`step-card`）: 白い角丸カードにアイソメイラストと STEP ピルを載せ、点線矢印でつなぐ - **募集要項ボックス**（`requirements-box`）: 淡いピンク地にコーラルの太枠と角丸。左に項目名、右に内容の表組み - **FAQ カード**（`faq-card`）: 白の角丸カード。Q はサーモン色、A は濃いグレーの太字 ## Do's and Don'ts **Do** - CTA は全体で 5 回以上繰り返し、毎回マイクロコピーを添える - 黄色の帯は片側を大きく丸めて始める - 数字の実績は大きなコーラルの数字＋小さな単位で見せる - イラストは立体アイソメトリックで統一する - 人物写真は笑顔で自然光のものを選び、不定形の円に切り抜く **Don't** - 黒や濃紺の重い地を使わない - 角の尖ったボタンやカードを使わない - コーラルを広い面の塗りに使わない（文字と小さなバッジだけにする） - 明朝体を使わない - 写真の上に長い文章を載せない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（理想のキャリアを問いかけて興味を引く）: 右下を丸めた大きな人物写真の上に、白帯＋コーラル帯の見出しと、くすみ色の特長バッジ 4 つを重ねる。下に黄色の CTA 2. **悩みの提起**（今の職場への不満に共感する）: 生成り地に白い吹き出しを左右交互に 4 つ並べ、線画の人物を添える 3. **理念**（企業の価値観を伝える）: 集合写真を下へ白くフェードさせ、その上にコーラルの大見出しを載せる 4. **実績と労働環境**（規模と働きやすさを数字で示す）: アイソメイラストの下に大きな数字を置く。黄色アイコン 4 つは 2 列 5. **求める人物像**（応募者が自分に合うか判断できるようにする）: 生成り地にイラスト付きの 4 項目を 2×2 で並べる 6. **求人一覧**（具体的な勤務先の例を見せる）: 白い角丸カードの横スライダー。コーラルの丸い矢印ボタンと地域タグを付ける 7. **スタッフインタビュー**（実際の声で安心してもらう）: 不定形の円の写真、名前と属性、Q&A を 3 名分繰り返す 8. **相性診断の訴求**（LINE 診断へ誘導する）: 黄色の帯にスマホの画面モックと白い CTA を置く 9. **1 日のスケジュール**（働き方を具体的に想像させる）: 白地に時刻ラベル、角丸写真、箇条書きを時系列で並べる 10. **中間 CTA**（直接の相談へ誘導する）: 黄色の帯の左右に虫眼鏡を持つ人物のイラストを置き、中央に緑の LINE ボタン 11. **募集要項**（条件を明示する）: コーラル枠＋淡いピンク地の角丸ボックスに表組み 12. **応募の流れ**（手順を簡単に見せる）: STEP カード 4 つを点線矢印でつなぐ 13. **よくある質問**（不安を解消する）: 生成り地に白い角丸の FAQ カードを縦に並べる 14. **LINE 登録案内と会社情報**（登録方法を示して締める）: 黄色の帯に白丸の手順画像を番号付きで並べ、最後に白地の会社情報と CTA ## Imagery - 人物写真は明るい室内か屋外の自然光。スタッフと動物が笑顔で触れ合う場面 - アイコンや人物像は影付きの立体アイソメトリックイラストにする - 悩みの人物は細い線画で、淡い黄色の丸枠に入れる - 特長アイコンは黄色 1 色のシンプルなシルエット - 肉球などの小さな装飾を写真の縁に添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を左に見出しとバッジ、右に写真の 2 カラムにする - PC では実績・特長・人物像を 4 列に並べる - PC のインタビューは左に写真、右に Q&A の 2 カラム - PC のスケジュールは 3 列グリッドにし、カード間を黄色の点線曲線でつなぐ - PC ではステップを横 4 列、LINE 手順を横 3 列にする - 本文の幅は最大およそ 800px で中央に寄せる ## 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-194f56a4`（元 LP の URL から採番） - **元 LP**: https://withmal-hd.co.jp/withmal-recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。