DESIGN.md — ローズピンク×クリームの女性キャリア講座LP（Rose Pink and Cream Career Webinar LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: やさしい・柔らかい、情報量多め・訴求型、かわいい、親しみ・手作り感
• キーワード: ローズピンク・クリーム地・Before/After・放射線背景・緑のLINEボタン・白カード
• 地の質感: 淡い紙調・ドット・放射状の集中線・コンクリート調グレーを重ねる
• 形: 角丸小さめの白カード、斜め帯、矢印、吹き出し、斜体ラベル
• 温度感: 暖かい。ピンクとクリームが主体で、悩み部分だけ冷たいグレーにする

Colors

• 地はクリームを基本にする。セクションの区切りにはローズピンクの全幅帯を挟む。
• 悩みを提起するセクションだけグレーとチャコールの暗い面にして、明暗の落差をつくる。
• 主CTAは緑1色だけにする。ピンク系の面に置き、補色の効果で目立たせる。
• 強調語はローズピンク文字か黄色マーカーで示す。
• Before/Afterは、Beforeをくすみグリーン、Afterをローズピンクで色分けする。
• カードは白地にする。ピンク面やクリーム面に浮かせるように置く。
• button-line-cta は文字 #FFFFFF × 背景 #2CA413 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#258910、4.5:1）を使う。
• pink-band は文字 #F7F9F9 × 背景 #D6647B のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC3E5A、4.51:1）を使う。

Typography

• 見出しは太いゴシックで書き、キーワードだけローズピンクにして1.3〜1.5倍の大きさにする。
• 見出しの前後に斜線「＼ ／」を置き、口語調のリズムを出す。
• 数字（人数・金額）は特大の太字にする。
• 欧文ラベルは小さな細身のサンセリフをイタリック調に組む。
• 本文は中央揃えを基本にし、短い行で改行する。
• イラスト横の吹き出しやつぶやきは縦書きの手書き風にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。比較部分のみ2カラムで左右に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を切り替えて区切る。
• 特典は横長カードを縦に5枚積み、左に番号バッジ、右にサムネイルを置く。
• 体験談は写真・本文・Before/After表を1枚のカードにまとめる。
• 生活の比較は左右2列のタイムラインにする。
• CTAの直前に実績数を1行で入れる。
• PCは中央約480px相当の幅に収め、左右は背景色を延ばす。

Elevation & Depth

• 白カードには薄い影（0 2px 6px rgba(0,0,0,.1)）を付ける。
• CTAは下方向に濃い緑の影を付けて立体的に見せる。
• 暗いセクションのボックスはフラットにし、影は付けない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は白背景の切り抜き。体験談は角丸の正方形、地図上の人物は円形に切り抜く
• セクション境界: 直線の色切り替えを基本に、斜め帯・ゆるい波形・下向き三角を併用する
• ラベルは小さな角丸の矩形か、平行四辺形の帯にする。
• メリット番号はリボン状の帯にする。
• 吹き出しは白地に黒い枠線の楕円にする。
• セクションの終わりに下向き三角で次へ誘導する。

Components

• LINE誘導CTA（button-line-cta）: 緑の角丸ボタン。左に「30秒で完了」の円形バッジ、右端に再生アイコンを置く。上に「公式LINEから」の小さなタブを付ける。
• 特典カード（benefit-card）: 白の横長カード。左にピンク枠の「特典01」バッジ、右に冊子のサムネイルを置く。
• 体験談カード（voice-card）: 上部に写真とVoice番号、本文には黄マーカーを入れる。下部にBefore/Afterの働き方・収入の表を置く。
• 比較タイムライン（before-after-column）: Before（緑の見出し）とAfter（ピンクの見出し）の2列。時刻と出来事を点線で区切り、縦線でつなぐ。
• 斜線付き見出し（heading-slash）: ＼ ／で挟む小見出しの下に、大きなピンクの強調見出しを置く。
• ピンク斜め帯（pink-band）: 全幅のローズピンク帯に白い太字を2行で載せ、斜めのストライプ柄を重ねる。
• 悩み吹き出し（worry-hex）: 人物の周囲に暗いグレーの多角形を4つ配置し、悩みを短文で入れる。
• 期限の注意ボックス（notice-box）: 黒い見出しバーと白い本文の組み合わせ。重要な行は赤文字にする。

Do's and Don'ts

Do - 地の色はピンクとクリームを交互に切り替える。 - CTAは緑1色だけにし、ページの上・中・下で繰り返す。 - 数字と成果を大きく強調する。 - 比較は色分けした2列で見せる。 - 女性の笑顔の写真とやさしい線画イラストを併用する。

Don't - CTAをピンクで作らない。地の色に埋もれる。 - 暗いトーンは悩み以外のセクションに使わない。 - 原色の赤や青は使わない。 - 装飾のない無機質な見出しにしない。 - 長文を左揃えでびっしり組まない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（ターゲットと提供価値、実績を示す）: 母子の写真の横に大きな白い見出しボックスを置き、実績数のバッジと体験者カードのスライダーを添える。
2. 無料講座の案内とCTA（講座内容を伝え、申込へ誘導する）: ピンク地に白いパネルを置き、チェックリストと人物写真を並べる。下に緑のCTAを置く。
3. 特典紹介（無料特典で申込を後押しする）: 放射線の背景に大きな数字の見出しを置き、特典カードを5枚縦に積む。最後に期限の注意を入れる。
4. お客様の声（成功事例で信頼を得る）: クリーム地に体験談カードを2列で並べる。続けてピンク帯にスライダー型の体験談を置く。
5. 全国実績・メディア掲載（広がりと社会的な証明を示す）: 日本地図の上に円形の人物写真と収入を配置し、集合写真と掲載誌を並べる。
6. 悩みの提起（現状のつらさに共感する）: グレーのコンクリート地とモノクロの人物写真を使い、悩みの多角形を4つ置く。
7. サービス誕生の背景（解決策を提示する）: 黄色い集中線の背景にロゴボックスとスタッフ5人の切り抜き写真を置く。
8. メリット（在宅ワークの利点を伝える）: 黄色地にリボン番号と吹き出し付きの写真を左右交互に4つ並べる。
9. 1日の比較（生活の変化を具体的に示す）: Before/Afterの2列タイムラインの下にイラストを添える。
10. 週の働き方（柔軟な働き方を例示する）: 曜日表に丸印を付け、3パターンを示して収入例で締める。
11. クロージングCTA（気軽に申し込んでもらう）: 母子の写真とピンクの斜め帯を置き、緑のCTAを配置する。
12. 講座内容の3ステップ（学べる内容を詳しく伝える）: 矢印柄のピンク地に大きな数字の見出しを置き、白いカードに番号・写真・本文・イラストのカードを入れる。

Imagery

• 30代女性の自然な笑顔を明るいハイキーで撮る。在宅で子どもと過ごす場面にする。
• 悩みのシーンは彩度を落としたモノクロ調にし、頬に手を当てる仕草にする。
• 細い線と淡い色の女性イラストに、手書き風のつぶやきを添える。
• 背景に放射状の集中線、紙吹雪、ドット、斜めの矢印を薄く敷く。
• 特典は冊子の表紙風モックアップで見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元のPC版も中央約480px相当の縦長1カラムで、SPとほぼ同じ構成にする。
• PCでは左右の余白に各セクションの背景色を全幅で延ばす。
• SPでも比較タイムラインは2列を維持し、文字は12px以上を守る。
• 体験談の2列グリッドはSPでは1列かスライダーにする。
• CTAはSPで横幅90%にする。

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 行書くと起動時に読み込まれる。