DESIGN.md — 桜ピンク×生成りの大人女性向け増毛体験LP（Soft Pink Elegant Women's Hair Care LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 桜ピンク・生成りベージュ・明朝×スクリプト・ビフォーアフター・価格訴求・大人女性
• 地の質感: ボケた桜の淡いグラデーション背景と細かい和紙調の地紋。カードには白地と薄い影
• 形: ピル型ボタン、円形の写真切り抜き、角丸小さめの白カード、斜め帯のコース番号ラベル
• 温度感: 暖かく柔らかい。ピンクと金茶で華やか

Colors

• 地は白・生成り・淡ピンクグラデ・青白をセクションごとに切り替える
• 主CTAは必ずピンク塗りに白文字、右矢印付き
• キャンペーン価格は赤文字で大きく、金茶リボンを添える
• コース訴求は生成り地に白カード、帯は金茶
• 見出しは濃茶で、キーワードだけピンクにする
• 原色の青や黒は使わない
• button-primary は文字 #FFFFFF × 背景 #F44B74 のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E90E43、4.56:1）を使う。
• button-campaign は文字 #FFFFFF × 背景 #D3AA53 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#937026、4.58:1）を使う。
• button-outline は文字 #F44B73 × 背景 #FDFDFD のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E70E41、4.55:1）を使う。
• point-label は文字 #FFFFFF × 背景 #D3AA53 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#937026、4.58:1）を使う。
• contact-block は文字 #FFFFFF × 背景 #F44B73 のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E70E41、4.56:1）を使う。

Typography

• セクション見出しは欧文スクリプト＋小さな日本語ラベル＋本見出しの3段構成
• 価格数字は明朝で極太、単位と税込は小さく
• 縦書き明朝のキャッチを写真の脇に置く
• 強調語だけピンクか赤にして文字サイズを上げる
• 本文は14px前後、注釈は10px
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特徴アイコンは3列、スタイル写真は2列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは中央寄せで左右に余白
• CTAは各セクションの終わりに中央配置
• 特長は写真と文章を左右交互に配置
• ステップは番号帯＋写真＋説明の横並び
• 見出しは常に中央揃え

Elevation & Depth

• 白カードに薄くぼかしたピンク寄りの影
• ボタンは影なしのフラット
• 写真はフラットで影なし

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は円形か角丸の矩形、髪の拡大図は円形
• セクション境界: 直線で背景色を切り替える。グラデーションでなじませる
• CTAは完全なピル型
• コース番号は左上の斜め帯
• 見出し下に細い線と三角の吹き出し
• チェックボックス風アイコンで部位を並べる

Components

• 申込ピル型ボタン（button-primary）: ピンク塗りに白文字と右矢印
• キャンペーンボタン（button-campaign）: 金茶グラデのピル型で右端に丸矢印
• 詳しく見るボタン（button-outline）: 白地にピンク枠と文字、下矢印
• 価格キャンペーン帯（campaign-banner）: 桜ボケ背景、金リボン、赤の大きな価格、右に人物
• コース価格カード（course-card）: 白カード、斜め番号帯、丸い本数バッジ、大きな価格
• スクリプト見出し（script-heading）: 欧文筆記体の上に日本語の小ラベル、下に本見出し
• POINTラベル（point-label）: カード左上の金茶タブ
• ステップ帯（step-bar）: 灰色帯にSTEP番号と項目名
• フッター問合せ3ボタン（contact-block）: オレンジ・ピンク・電話の3分割ボタン

Do's and Don'ts

Do - 淡い地色をセクションごとに交互にする - 変化はビフォー小・アフター大で見せる - 欧文スクリプトを見出しの飾りに使う - CTAは複数回、同じピンクで繰り返す - 注釈は写真や価格の近くに小さく添える

Don't - 彩度の高い原色や黒い背景を使わない - 角張ったボタンにしない - 価格を小さく扱わない - ゴシック太字だけで見出しを組まない - 写真を暗く加工しない

Page Structure

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

1. ファーストビュー（キャンペーン価格と期限を伝える）: 桜ボケ背景に金リボンと赤い価格、右に笑顔の人物、下に金茶ボタン
2. ビフォーアフター（変化を見せる）: 角丸写真を重ね、筆記体のAfter・Arrangeラベル
3. サービス説明（仕組みを解説）: POINTタブ付き白カードに円形図解と部位イラスト3つ
4. キャンペーン再訴求（申込を促す）: FVと同じ帯を再掲し注釈を並べる
5. 体験コース（価格プランを比較）: 生成り地に白コースカード2枚、ピンクCTA
6. 商品紹介（上位商品の魅力）: ピンクグラデ地、3つの円形写真と大きなアフター写真
7. CM動画（認知と信頼）: スクリプト見出しと16:9動画
8. スタイル事例（年代別の仕上がりを見せる）: 青白地に写真2列、縦書き明朝コピー、欧文セリフのスタイル名
9. 特長（3つのポイントを説明）: 生成り地、ベージュ面のカードと写真を左右交互
10. ラインナップ（シリーズ比較）: 矢印帯で量の段階を示し4つの円形図解
11. 利用ステップ（体験の流れ）: 白カード内にSTEP帯と写真、アイコン3つ
12. 関連リンクと問合せ（回遊と申込）: 写真カード3枚、3分割問合せボタン、サーモン色フッター

Imagery

• 40〜50代女性の明るい笑顔、柔らかい自然光
• 背景は淡いピンクや水色の無地スタジオ
• 桜の花と光のボケを散らした装飾
• 毛の根元を描いた円形の断面図解
• 線画の女性横顔イラストで部位を示す
• ゴールド線のシンプルなアイコン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央480〜960px幅の1カラムで、SPでもほぼ同じ構成
• SPではFVの人物を価格の下か右に小さく配置
• スタイル事例の2列はSPでも2列のまま、縦書きは短くする
• 特長の左右交互はSPで写真上・文章下にする
• フッター3ボタンは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 行書くと起動時に読み込まれる。