DESIGN.md — 紫紺×花と金の大人向けフェムケア LP（Dark Floral Purple Femcare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型
• キーワード: 夜の紫・妖艶・花の装飾・明朝見出し・金のアクセント・カプセル型パネル
• 地の質感: 暗い地に花の写真・ひび割れ質感・光る泡の球体を重ねたしっとりした質感
• 形: 上下が大きく丸いカプセル型パネル、円形バッジ、下向き矢印の V 字区切り
• 温度感: 冷たい紫紺に、ピンクと金で温かみを差す

Colors

• 地は濃紺〜紫黒を基本とし、説明部分だけ淡いラベンダーや白のパネルで明るくする
• 紫は見出しの強調語・番号丸・帯見出しに限定して使う
• 金茶は「理由」「point」などのバッジと小さな帯で上質さを添える
• 見出し帯はオレンジ金→紫のグラデーションで強調する
• 購入ボタンだけ緑の立体ボタンにして、紫の世界観から浮かせる
• 価格はオレンジ金の大きな数字、旧価格はグレーに取り消し線
• button-primary は文字 #FDFDFE × 背景 #2F8A1E のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2E861D、4.55:1）を使う。
• badge-reason は文字 #EEE8EC × 背景 #8A6A2E のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#82642B、4.57:1）を使う。

Typography

• 見出しは明朝で字間を広げ、2〜3 行に改行して中央揃え
• 見出し内のキーワードだけ一回り大きくして紫や金に変える
• 本文はゴシックで行間広め、左揃え
• 縦書き明朝を写真の上に置いて詩的な間を作る
• 英字は細身セリフで大きく字間を広げ、ブランド感を出す
• 価格は太いセリフ系数字でオレンジ金に
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の画像背景か、左右 4〜6% の余白を残したカプセル型パネルに収める
• 本文は中央揃えの見出し＋左揃えの段落
• 特長は円形バブルを 5〜6 個放射状に並べる
• 比較・選択肢は 2 カラムのタイルに分ける
• 価格ボックスは白カードに紫ヘッダー、条件バッジ 3 つ横並び
• セクション間は下向き三角矢印で流れをつなぐ

Elevation & Depth

• CTA は上下グラデと光沢で立体的にし、下にやわらかい影
• 白カードは影ほぼなし、暗地とのコントラストで浮かせる
• 球体・泡にはふちの虹色ハイライトと発光
• パネル周辺に紫の光のにじみ（グロー）

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 160px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸長方形か、上部が半円のアーチ型に切り抜く。成分・悩みは円形
• セクション境界: 下向きの V 字三角、またはカプセルの丸い上下端で区切る
• 主パネルは上下の角が大きく丸いカプセル型
• バッジは円形かピル型
• 無添加項目は細線の円に斜線
• 悩みワードは細線のひし形や四角枠

Components

• 緑の立体 CTA（button-primary）: 上に小さな前置き、下に太字の申込文言の 2 段構成。光沢のあるピル型
• 定期コース価格ボックス（price-box）: 紫ヘッダーに商品画像、金の円形割引バッジ、旧価格取消と大きな価格、条件バッジ 3 つ
• 金の番号バッジ（badge-reason）: 金のグラデ円に「理由」や point と数字。見出しの左上や上中央に重ねる
• グラデ帯見出し（heading-band）: 金→紫のグラデ帯に白い明朝の 2 行見出し
• カプセル型パネル（capsule-panel）: 紫系の大きな角丸パネルに特長を収める。上下の端がアーチ状
• 光る泡の特長バブル（bubble-feature）: 半透明で虹色ふちの円に、特長名と短い説明
• 悩みチェックリスト（check-list）: 紫のチェックボックスと白文字の悩みを 5 行並べる
• 使い方ステップカード（step-card）: 白カードに紫の番号丸と線画イラスト、説明文。カード間に下向き三角
• 紫のピル見出し（pill-sub-heading）: 成分グループ名を入れる紫のピル型ラベル
• FAQ アコーディオン（faq-item）: 暗い紫の角丸行に Q アイコンと＋ボタン

Do's and Don'ts

Do - 暗い地に鮮やかな花と光る泡を重ねて妖艶さを出す - 見出しは明朝で、キーワードを紫か金で大きくする - 長い説明は淡いラベンダーか白のパネルに入れて読みやすくする - 価格ボックスと CTA は冒頭・中盤・終盤で繰り返す - 効果をうたう語には ※ 印の注釈を小さく添える

Don't - 白地中心の明るいページにしない - ポップな丸ゴシックやパステル調のイラストを使わない - 紫以外のビビッドな色をあちこちに散らさない（緑は CTA だけ） - 角ばった四角いパネルだけで組まない - 見出しを太いゴシックで詰めて組まない

Page Structure

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

1. ファーストビュー（大人の女性向けのデリケートケアと伝える）: モノクロの肌写真を中心に、四隅に鮮やかな花。明朝と英字のロゴ、悩みワード 3 つを枠で並べる
2. 商品概要（1 本で 3 つのケアができると示す）: 商品写真と重なり合う 3 つの泡バブル、明朝の短い 3 行コピー
3. イメージビジュアル（テクスチャと世界観を伝える）: したたるピンクのオイルの写真に縦書き明朝
4. オファー CTA（定期コースの価格を見せて申込へ誘う）: 白い価格ボックス＋緑の立体 CTA＋注釈リスト
5. 悩みの提起（人に言えない悩みに共感する）: ひび割れ質感の暗い地にチェックリスト 5 行、ライフステージを円形バッジと縦書きで
6. 原因の解説（ホルモン変化と肌の薄さを説明する）: ラベンダー地に紫枠のグラフ、2 カラムの年代タイル、厚さの比較を線画アイコンで
7. 解決策の提示（オイルで洗うという新しいケアを示す）: 「だから」の円バッジから、光る球体に商品をのせた全幅ビジュアル
8. 特長一覧（5〜6 の機能を一覧で見せる）: 紫パネルに泡バブルを商品の周りに放射状配置
9. ブランドメッセージ（自分のためのケアという情緒に訴える）: アーチ型紫パネルに中央揃えの詩的な文章と、アーチ切り抜きの写真
10. 選ばれる理由（洗浄力と香りの根拠を示す）: ラベンダーカードに金の番号バッジ、使い方ステップ、香りのピラミッド図
11. 開発者インタビュー（開発者の言葉で信頼をつくる）: 大きな欧文見出し、白衣の人物写真、ラベンダー地の長文と「もっとみる」ボタン
12. 3 つのポイント（成分・保湿・やさしさを詳しく説明する）: point バッジ付きカプセルパネルを連続させ、グラデ帯見出しと成分の円バブル、無添加の線円
13. お客様の声・よくある質問（利用者の実感と不安の解消）: 人物写真と縦書きコピーの声カード、暗紫のアコーディオン FAQ
14. クロージング CTA・注文フォーム（在庫の希少性と限定キャンペーンで申込を促す）: 白地の即日出荷告知、紫カプセルに価格ボックスと CTA、紫見出しの入力フォーム

Imagery

• 人物はモノクロでやや暗めにし、顔を見せずに体のラインだけを写す
• 蘭・ダリア・バラなど鮮やかな赤・青・マゼンタの花を、画面の端に切れるように配置する
• 虹色のふちが光るシャボン玉風の球体を、特長の入れ物にする
• ピンクの液体のしずくや波紋で、とろみのある質感を見せる
• ひび割れた土の質感を悩みパートの背景に敷く
• 使い方は紫の細い線画で手と体を描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 375px 幅の SP 版カラムをそのまま置く
• PC の左右は濃紺の地に花の写真をぼかして敷き、左上にブランドロゴと CTA を固定する
• PC でもセクションの構成と縦の流れは SP と同じにする
• PC で 2 カラムに組み直すなら、価格ボックスとフォームは中央 1 カラムを保つ

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