DESIGN.md — モーヴピンク×白の美容業界向け採用代行LP（Soft Mauve Pink Recruitment Service LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 上品・高級、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: モーヴピンク・白カード・明朝見出し・英字ラベル・女性向け美容業界・BtoB
• 地の質感: フラットな面にごく薄い影。人物写真の上に半透明のピンクを重ねた帯を使う
• 形: 角丸はほぼなし。四角いカードとボタンが基本
• 温度感: 暖色寄りのやわらかいピンク系

Colors

• 地は白・淡ピンク・薄グレーの 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

• 見出しも本文も明朝体を基本にして、上品な印象を保つ
• セクション見出しは中央揃え。下にピンクの小さな英字ラベルを置く
• 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。