--- version: alpha name: Soft Mauve Pink Recruitment Service LP description: モーヴピンクの帯と淡いピンク地、白いカードでまとめた BtoB 採用代行の LP。明朝体の見出しに英字のピンクラベルを添えて、女性らしく上品で誠実な印象にしている。情報量が多いページを、影付きの白カードを縦に並べる構成で整理している。 colors: primary: '#CDA1BA' secondary: '#C6589C' cta: '#DD5689' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FFF6F9' tint-1: '#F8F8F8' surface: '#FEFEFE' accent-1: '#D25FA5' text: '#222222' text-body: '#444444' line: '#D4D4D4' dark-section: '#F8F8F8' cta-accessible: '#D73673' accent-1-accessible: '#C6388E' typography: display: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 6px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.sm}' height: 52px cta-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 200px check-list-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 320px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 400px price-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 180px donut-chart: backgroundColor: '{colors.background}' rounded: '{rounded.full}' height: 160px staff-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 180px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' height: 48px required-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 16px --- # DESIGN.md — モーヴピンク×白の美容業界向け採用代行LP（Soft Mauve Pink Recruitment Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 上品・高級、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: モーヴピンク・白カード・明朝見出し・英字ラベル・女性向け美容業界・BtoB - **地の質感**: フラットな面にごく薄い影。人物写真の上に半透明のピンクを重ねた帯を使う - **形**: 角丸はほぼなし。四角いカードとボタンが基本 - **温度感**: 暖色寄りのやわらかいピンク系 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CDA1BA` | CTA帯・ヘッダー背景のモーヴピンク | 8% | 画素の主要色に補正 | | `secondary` | `#C6589C` | 濃いモーヴ（グラフ・強調） | 4% | 画素の実測 | | `cta` | `#DD5689` | 主CTAボタンのローズピンク | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタンの文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の背景 | 48% | 画素の実測 | | `background-alt` | `#FFF6F9` | 淡いピンクのセクション地 | 16% | 画素の実測 | | `tint-1` | `#F8F8F8` | 薄いグレーのセクション地 | 8% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード面 | 20% | 画素の実測 | | `accent-1` | `#D25FA5` | 英字ラベル・FEATURE番号・Qマーク | 0% | 推定 | | `text` | `#222222` | 見出しの文字 | 2% | 推定 | | `text-body` | `#444444` | 本文の文字 | 3% | 推定 | | `line` | `#D4D4D4` | フォーム枠・区切り線 | 1% | 画素の主要色に補正 | | `dark-section` | `#F8F8F8` | フッターの淡いグレー地 | 5% | 画素の実測 | | `cta-accessible` | `#D73673` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#C6388E` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡ピンク・薄グレーの 3 色を交互に使い、セクションを区切る - モーヴピンクは FV と CTA の帯、ヘッダーなど大きな面だけに使う - ローズピンクは主CTAボタンと必須バッジだけに絞る - 英字ラベル・番号・Q マークはマゼンタ寄りのピンク文字にする - グラフはモーヴの濃淡と灰色で塗り分ける - 本文は黒ではなく濃いグレーにする - `button-primary` は文字 `#FFFFFF` × 背景 `#DD5689` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D73673`、4.5:1）を使う。 - `price-box` は文字 `#D25FA5` × 背景 `#F8F8F8` のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C6388E`、4.54:1）を使う。 - `required-badge` は文字 `#FFFFFF` × 背景 `#DD5689` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D73673`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチコピー | 明朝 | Noto Serif JP | 700 | 24px | 1.5 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 21px | 1.5 | 0.05em | | `headline-md` | カードの見出し | 明朝 | Noto Serif JP | 700 | 17px | 1.5 | 0.03em | | `accent` | FEATURE番号・英字の小ラベル | 欧文セリフ | Playfair Display | 400 | 20px | 1.2 | 0.05em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 14px | 1.9 | 0.03em | | `note` | 注釈・小さな英字ラベル | 明朝 | Noto Serif JP | 400 | 11px | 1.6 | 0.1em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - 見出しも本文も明朝体を基本にして、上品な印象を保つ - セクション見出しは中央揃え。下にピンクの小さな英字ラベルを置く - FEATURE 番号は欧文セリフ体のピンク文字で、カードの上端に重ねる - 数字は大きくピンク色にして目立たせる（料金・達成率） - 本文の行間は 1.8 以上にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内の写真は本文の下に積む - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは中央寄せで縦に並べ、カード同士の間は 24〜32px あける - 見出し、英字ラベル、本文の順に中央揃えで置く - CTA 帯はページ内で 3〜4 回くり返す - スタッフ紹介は写真と経歴を組んだカードを縦に並べる - FAQ は 1 問ごとに白い帯のアコーディオンにする ## Elevation & Depth - 白カードには薄くぼかした影を付ける（0 2px 8px rgba(0,0,0,0.08)） - CTA ボタンには小さな影を付ける - フォームの入力欄は影なしで、灰色の細い枠線だけにする ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角く切り抜く。代表的な顧客の顔写真のみ円形にする - **セクション境界**: 直線で区切る。CTA 帯には斜めの白い細線を飾りに入れる - ボタンは四角か角丸 4px 以下にする - 料金ボックスの四隅にはピンクの L 字コーナー飾りを付ける - 円グラフはドーナツ型にする ## Components - **主CTAボタン**（`button-primary`）: メールアイコンと相談を促す文言を入れた四角いボタン - **CTA帯**（`cta-band`）: 人物写真に半透明のモーヴを重ねた帯。上に実績の数字と白いボタンを置く - **悩みチェックリスト**（`check-list-card`）: 白カードにピンクのチェックアイコンと悩みの文を 5 つほど並べる - **番号付き特長カード**（`feature-card`）: 上端にピンクの欧文番号を重ね、見出し・本文・イラストを入れた白カード - **料金ボックス**（`price-box`）: 四隅にピンクのL字飾りを付け、金額を大きなピンク文字で中央に置く - **満足度ドーナツグラフ**（`donut-chart`）: モーヴの濃淡で塗り分け、中央に％を置く。上に黒いタイトルラベルを付ける - **スタッフカード**（`staff-card`）: 左に人物写真、右に名前・役職・経歴を入れた影付きの白カード - **FAQアコーディオン**（`faq-item`）: ピンクのQとAの記号を付け、右端に＋／−を置いた白い帯 - **必須バッジ**（`required-badge`）: フォームの項目名の横に付けるピンクの小さな四角いラベル ## Do's and Don'ts **Do** - 面の色はピンクの濃淡、白、灰色だけで構成する - 見出しには必ず英字の小ラベルを添える - 数字（実績・料金）はピンク色で大きく見せる - 白カードには薄い影を付けて、地から少し浮かせる - CTA 帯を一定の間隔でくり返す **Don't** - 青や緑など寒色のアクセント色を入れない - 丸ゴシックやポップな書体を使わない - ピル型や大きな角丸のボタンにしない - 濃い影やグラデーションのボタンを使わない - 本文に純黒を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（実績の数字とサービスの概要をすぐ伝える）: 女性写真にモーヴを重ねた背景。左に明朝のキャッチと白地の短い訴求ラベル 2 つ、右にデバイス画像とCTAを置く 2. **悩みの提起**（採用の悩みに共感する）: 薄グレーの地に白カードを置き、チェックリストで悩みを 5 つ並べる 3. **CTA**（早めに相談へ誘導する）: モーヴの写真帯に実績の数字と白いボタンを置く 4. **特長**（7 つの取り組みを詳しく説明する）: 淡ピンクの地に番号付きの白カードを縦に並べる 5. **料金**（料金がわかりやすいことを示す）: L字コーナー飾りの付いたボックスに金額を大きく置く 6. **実績紹介**（導入事例で信頼を得る）: 円形の顔写真と、Q&A 形式のインタビューカードを並べる 7. **お客様の声**（顧客の満足を見せる）: メッセージ画面のカルーセル、一覧ボタン、満足度のドーナツグラフ 4 つ、箇条書きの声を順に置く 8. **スタッフ紹介**（担当者の顔を見せて安心してもらう）: 写真と経歴を組んだカードを縦に並べる 9. **よくある質問**（不安を解消する）: Q&A のアコーディオンを縦に並べる 10. **お問い合わせ**（電話とフォームで申込を受ける）: 淡ピンクの電話ボックスで大きな番号を見せ、その下に白カードのフォームと太いピンクの送信ボタンを置く 11. **フッター**（会社情報を載せる）: 灰色の地に会社概要の表とリンクを置き、下端にピンクの固定バナーを付ける ## Imagery - 美容業界で働く女性の柔らかい自然光ポートレート - 写真には半透明のモーヴピンクを重ね、帯の背景にする - 特長の補足にはシンプルな図解イラストや画面キャプチャを使う - スタッフ写真は明るい背景で撮った笑顔の上半身 - 円グラフはピンクの濃淡でフラットに描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 800px 程度の白カード列。SP は幅 90% の 1 カラムにする - FV は PC で左右 2 分割。SP では文字、デバイス画像、CTA の順に縦に積む - 特長カードとスタッフカードの横並びは、SP では写真を上か下に積む - 円グラフは PC で 2×2。SP では 1 列か 2 列にする - ヘッダーのナビは 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-b6ed8e5f`（元 LP の URL から採番） - **元 LP**: https://biyou-no-saiyoubu.jp/top-3/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。