DESIGN.md — くすみローズ×金のサロン品質ボディケア LP（Dusty Rose Salon-Quality Body Care LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: くすみローズ・金メダル・明朝見出し・サロン監修・定期コース訴求・ポラロイド写真
• 地の質感: ピンクの泡や光のボケ、シルク調の淡いグラデーション背景に、白カードを重ねる柔らかな質感
• 形: 角丸小さめのカード、円形の成分写真、円形メダル、ポラロイド風の傾いた写真枠
• 温度感: 暖色寄り。ピンクベージュ主体で一部にグレーブルーの寒色セクションを挟む

Colors

• 地は白・淡ピンクベージュ・淡ラベンダーを交互に切り替えてセクションを区切る
• くすみローズは特長ラベル・見出し帯・価格カード枠に限定して使う
• 価格数字とキーワード強調は濃いピンクで明朝の大きな文字にする
• CTA だけは緑の立体ボタンにしてピンク基調から浮かせる
• 権威性（受賞・監修・番号）は金のグラデーションやブロンズで表現
• 悩み提起だけ暗いグレーブルー地にして気分を切り替える
• price-card は文字 #D9476F × 背景 #FFFFFE のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D63A65、4.51:1）を使う。
• badge-discount は文字 #FFFFFF × 背景 #D9476F のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D63A65、4.51:1）を使う。
• feature-tile は文字 #FFFFFF × 背景 #D0707F のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C54D60、4.56:1）を使う。
• award-medal は文字 #272626 × 背景 #9A8360 のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A08967、4.51:1）を使う。
• number-badge は文字 #FFFFFF × 背景 #9A8360 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A08967、4.55:1）を使う。
• info-box は文字 #FFFFFF × 背景 #93ADB5 のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#5B7B85、4.55:1）を使う。

Typography

• 見出しは明朝、本文と小見出しはゴシックで使い分ける
• 英字ラベルは細いセリフ体を大文字で広めの字間にし、和文見出しの上に置く
• 強調語だけ濃いピンクに色替えし、太字にはしない
• 注釈は※付きの小さいグレー文字で、ブロックの下にまとめる
• 縦書き見出しを FV 直後の写真上で使ってもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長ボタン・成分写真は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面端から約 20px 内側に置く
• セクション頭は英字ラベル→和文見出しの 2 段構成
• 価格カードは同じ内容を 3 回以上繰り返す
• 成分は円形写真 2 列＋下にラベル
• 長文は『さらに読み込む』『more』で折りたたむ

Elevation & Depth

• CTA ボタンは下に濃い影をつけた立体表現
• 白カードは影なし、または非常に薄い影で地色から浮かせる
• ポラロイド風の写真は白枠＋柔らかな影で重ねる
• メダルは金グラデーションと光沢で立体に見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分は正円、人物は上部アーチ形や角丸、写真はポラロイド白枠で傾ける
• セクション境界: 基本は直線。一部に V 字の切り込みや波形の帯を使う
• 価格カードはピンクの細枠＋上部に波形のピンクヘッダー
• 割引は円形のピンクバッジ
• 番号は金色の円バッジでカード左上にかける
• FAQ は白の角丸バー＋右端に＋アイコン

Components

• 緑の立体申込ボタン（button-primary）: 横幅いっぱい・角丸小・右に三角アイコン・下に影
• 定期コース価格カード（price-card）: ピンク枠と波形ヘッダー。商品画像、通常価格、明朝の大きなピンク価格、送料無料帯を入れる
• 割引率の円バッジ（badge-discount）: 濃いピンクの正円に白の明朝で割引率。上に弧状の小さい文字
• 特長ボタン風タイル（feature-tile）: ローズ地に白文字 2 行の特長を 2×2 で並べる
• 金メダル＋月桂樹（award-medal）: 金グラデーションの円に明朝で実績。左右に月桂樹を添える
• 特長番号バッジ（number-badge）: 金色の円に白のセリフ数字。カード左上にはみ出して置く
• お客様の声カード（voice-card）: 上に筆記体の番号と年代表記、白カードに太字の要約と本文、more ボタンで折りたたむ
• 悩みチェックリスト（checklist）: 白カードに丸いチェックアイコン付きの悩みを 8 個前後並べる
• 用語解説ボックス（info-box）: ローズまたはグレーブルー地に白文字。見出しの下に細線
• FAQ アコーディオン（faq-item）: 淡ピンク地に白バー、質問文と右端の＋

Do's and Don'ts

Do - 見出しは明朝、英字ラベルは細いセリフ体で上品さを保つ - 受賞・監修などの権威要素は金色で統一する - 価格カード＋CTA を FV 直後、中盤、終盤で繰り返す - 注釈は※番号で本文と対応させ、小さいグレー文字でまとめる - 地色は淡いピンク・ベージュ・ラベンダーの 3 系統で切り替える

Don't - 原色の赤やビビッドなピンクを大面積に使わない - CTA 以外に緑を使わない - 見出しを太いゴシックで固くしない - 写真を黒枠や強いコントラストで硬く見せない - 注釈を省いて誇大な印象にしない

Page Structure

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

1. ファーストビュー（サロン品質と実績を一目で伝える）: 肌の写真背景に明朝の大見出し、黒帯サブコピー、商品画像、金メダル 2 つ、ローズの特長タイル 2×2
2. 共感コピー（始めるきっかけを作る）: 人物写真に縦書きの明朝コピーを重ねる
3. 価格・CTA（定期コースへの申込を促す）: 波形ヘッダーの価格カード、割引円バッジ、折りたたみ規約、緑の CTA
4. 受賞実績（権威付け）: シャンパンゴールド地に月桂樹付きの大見出しと金メダル 3 つ
5. メディア掲載（第三者の評価を示す）: 雑誌誌面の写真を傾けて重ね、黒いピル型の媒体ラベルをつける
6. サロン・監修者（専門家の後ろ盾を示す）: ローズ地に施術室の白枠写真。ベージュ地にアーチ形の人物写真、黒ラベルの肩書き、ハイライト付き紹介文
7. 検証結果（効果の根拠を示す）: 淡ラベンダー地に検証→結果の流れ。金枠のラベル、下向き三角、掲載誌カード
8. 悩みの提起（自分ごと化させる）: グレーブルーの暗い地にモノトーン写真と白文字、下に白いチェックリスト
9. 開発背景・商品紹介（開発の想いと進化点を伝える）: 斜めに切った帯、ピンクのリボン見出し、泡状の円に成分訴求
10. 成分（配合成分の価値を示す）: 色帯ラベルの主要成分と、円形写真 2 列グリッド
11. お客様の声（使用感の共感）: ポラロイドのコラージュ、筆記体の番号、白カード、more で折りたたみ
12. 使い方（使用方法を示す）: ローズの円 3 つで要点、Point と Step を筆記体ラベル＋線画イラストで
13. 特長詳細（特長を深掘りする）: 淡ピンクのカードに金の番号バッジ、写真、見出し、解説ボックス
14. 開発者の想い（情緒的に後押しする）: ローズ地に白文字、商品画像とポラロイド写真を重ねる
15. 最終 CTA・商品詳細・FAQ（購入を決めてもらう）: 明朝の大コピー、価格カード、全成分のテキスト、白バーの FAQ、申込フォーム

Imagery

• 人物は白やベージュの下着で、明るく柔らかな光のもとデコルテを中心に撮る
• 背景は淡ピンクの泡・光のボケ・シルクの布
• 成分は単体をマクロで撮り、正円に切り抜く
• 金メダルや月桂樹で受賞を表す
• ローズの花やクリームのテクスチャを添え物にする
• 線画の女性イラストは淡いピンクで手順の説明に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も SP と同じ 1 カラム画像を中央に置く構成
• PC では 375〜450px 幅の中央カラムにし、左右は淡ピンクの地で埋める
• 画像内の文字はそのまま縮小せず、カラム幅を固定して読みやすさを保つ
• フォームは PC で 2 列の入力欄にしてもよい

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