DESIGN.md — 桜ピンク×手書き文字の資格講座 LP（Soft Pink Home Organizing Course LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: やさしい・柔らかい、かわいい、情報量多め・訴求型、清潔・爽やか
• キーワード: くすみピンク・手書き見出し・黄色マーカー・ビフォーアフター・角丸写真カード・斜め区切り
• 地の質感: 白〜淡ピンクのフラットな面に、半透明ピンクを重ねた写真背景と細い斜線柄を少し入れる
• 形: 角丸 12px 前後のカードと写真、円形バッジ、斜めやギザギザのセクション境界
• 温度感: 暖かく柔らかい。赤みピンクと深いワインブラウンで締める

Colors

• 地は白と淡ピンク #FEEEEE を交互にしてセクションを区切る
• メリット・カリキュラムなど目玉のセクションはくすみピンクの全面帯＋半透明の写真背景
• 強調語はコーラルピンクの文字＋黄色の下半分マーカー
• 見出しと価格はワインブラウン、本文は濃グレー
• 注意書きは赤文字か薄グレーの小さい文字
• 黄色は矢印・アイコン・マーカーだけに少しずつ使う
• button-primary は文字 #FEFCF9 × 背景 #E76774 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE2C3E、4.52:1）を使う。
• button-secondary は文字 #FEFCF9 × 背景 #B88D93 のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9F646C、4.54:1）を使う。
• price-bar は文字 #E76774 × 背景 #FFFFFF のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE2C3E、4.56:1）を使う。
• label-table は文字 #FEFCF9 × 背景 #B88D93 のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9F646C、4.54:1）を使う。
• marker-highlight は文字 #E76774 × 背景 #FBF24C のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE2C3E、4.5:1）を使う。

Typography

• セクション見出しは手書き風の書体で、少し右上がりに傾けて下に細い斜線と▼を置く
• 見出しの一部の語だけ色かサイズを変える
• 数字（価格・期間・人数）は大きく太くする
• 本文は小さめにして行間を広めにとる
• 英字の筆記体を薄く重ねて飾る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メリットは 3＋2 のカード、声は横スクロールのカルーセル、カリキュラムは 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長は写真と文章を左右交互に並べる
• セクションごとに地色を変える
• ステップは横長カードを縦に積み、間に黄色の▼を置く
• 講座概要は白いカードの中に左ラベル・右説明の表を並べる
• CTA の下には価格帯を添える

Elevation & Depth

• 白カードはごく薄い影（0 2px 8px rgba(0,0,0,0.08)）
• ステップカードは白い細枠＋淡い影
• CTA ボタンは影なしのフラットな面
• 円形バッジは黒い細線のみ

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 12px の長方形。人物アバターは円形
• セクション境界: 斜めのカット、波状のギザギザ、直線を混ぜる
• 主 CTA は角丸 20px 前後の大きな長方形
• サブボタンはピル型
• BEFORE/AFTER ラベルはピル型
• 実績は白い円形バッジ 3 つにする

Components

• 主 CTA ボタン（button-primary）: コーラルピンクの大きな角丸ボタン。右に→を置く
• サブ申込ボタン（button-secondary）: 灰ピンクのピル型ボタン。細い→付き
• 実績の円形バッジ（badge-circle）: 白地・黒線の円に短い実績を 3 行で入れ、数字はピンクで大きく
• 価格帯（price-bar）: 左がピンクのラベル、右が白地の受講料表示
• 手書き見出し（heading-handwritten）: 傾けた手書き文字の下に細い斜線と▼を置く
• ビフォーアフター比較（before-after）: 散らかった写真ときれいな写真を左右に並べ、ピンクの太い矢印でつなぐ
• 番号付きステップカード（card-step）: 淡ピンク面に大きな番号、見出し、画面キャプチャを入れる
• 受講者の声カード（card-voice）: 円形アバター、地域のピル型ラベル、年代、本文を入れた淡ピンクのカルーセル
• 概要表ラベル（label-table）: 灰ピンクの小さい帯ラベル。右に説明を書く
• 黄色マーカー強調（marker-highlight）: 強調語の下半分に黄色マーカーを引く

Do's and Don'ts

Do - 強調語はピンクの文字＋黄色のマーカーにする - セクション見出しは手書き風にして斜めに傾ける - 写真は明るく生活感のある室内にし、角を丸める - セクションの境目に斜めや波の区切りを入れる - 価格や数字は大きく、ワインブラウンかピンクにする

Don't - 原色の赤や濃い青をメインに使わない - 黒い大きな面を使わない - 見出しをすべて硬いゴシックにしない - 写真を角のある四角のまま置かない - 黄色を広い面に使わない

Page Structure

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

1. ファーストビュー（悩みと資格の魅力を一目で伝える）: 青い筆跡帯に悩みを書き、大きなキャッチ、斜め帯の講座名、人物写真と認定証、円形バッジ 3 つ、価格帯を置く
2. ビフォーアフター（習得後の変化を見せる）: ピル型ラベルと左右の写真をピンクの矢印でつなぐ
3. CTA（申込へ誘導する）: ベージュ地に小ラベル、2 行のコピー、大きな CTA、価格帯を置く
4. 身につくスキル（メリットを具体的に伝える）: ピンク写真の帯見出しの下に、淡ピンクの斜め区切りで写真と文章を左右交互に 5 項目並べる
5. 講座のメリット（WEB 講座の手軽さを伝える）: ピンクの全面帯に、写真と短い見出しの白カードを 3＋2 個並べる
6. お客様の声（受講者の実感を伝える）: 円形アバター付きのカードを横スクロールで並べる
7. 取得までの流れ（手順の不安をなくす）: 01〜04 の番号付きカードを黄色の▼でつなぐ
8. カリキュラム（学ぶ内容を見せる）: ピンク面に黄色の円形アイコンと項目名を 2 カラムで並べ、点線で区切る
9. 講座概要（価格・期間・条件を示す）: 白カードに左ラベル・右説明の表、淡ピンクの補足ボックスを入れる
10. 活躍事例・SNS（資格取得後の広がりを見せる）: 人物写真付きのピンク帯の見出しの下、グレー地に SNS 投稿を埋め込む
11. 別コース案内（対面やオンラインのコースへ誘導する）: 暗くした写真に白文字を重ねたボタンカード 2 枚。右下に黄色の三角を置く
12. フッター（運営元と規約を示す）: ピンクのグラデーション地に白いロゴ枠と黄色の縦線付きのリンクを置く

Imagery

• 明るい自然光の白い室内で、片付いた収納やリビングを撮る
• 散らかった部屋とすっきりした部屋を、同じ画角で対比させる
• 20〜30 代女性の笑顔。エプロンやノート PC を持たせる
• 人物アバターは淡ピンク地のシンプルなフラットイラスト
• アイコンは黄色の線画を円で囲む
• 背景にはピンクを重ねた写真や斜線のパターンを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 820px 幅のコンテナに収め、外側は淡いピンクかグレー
• PC の FV は人物を左、キャッチを中央、認定証を右に置く横並び
• 受講者の声は PC で 3 枚を同時に表示し、左右に矢印を置く
• SNS 埋め込みは PC で 3 カラム、SP で 2 カラム
• CTA ボタンは PC で幅を約 60% に縮め、高さも抑える

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