DESIGN.md — 淡い青紫と泡白のピーリング洗顔 LP（Airy Lavender Blue Foam Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、シンプル・ミニマル
• キーワード: 泡・透明感・青紫グラデーション・細線アイコン・成分訴求
• 地の質感: ふわっとした泡や水滴の写真、すりガラスのような淡いグラデーション背景
• 形: 円形の写真切り抜き、上が半円のピル型カード、細い線の区切り
• 温度感: やや寒色寄りの涼しい印象。ピンクを差して柔らかさを出す

Colors

• 地は白と淡いグレーを交互に使い、悩みパートだけスレート地に白文字で沈める
• ブランド青紫は見出しの帯・英字ラベル・アイコン塗りに限定する
• 2成分の対比はピンクとティールで左右に色分けする
• キービジュアルは水色→ラベンダー→ピンクの淡いグラデーション
• 強調語は太字化のみで色は増やさない
• 注釈は小さな灰色文字で地に溶かす
• worry-circle は文字 #FBFEFE × 背景 #738299 のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#67768E、4.54:1）を使う。
• highlight-band は文字 #FBFEFE × 背景 #758BD4 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#546FCA、4.6:1）を使う。
• compare-pill-card は文字 #C181AF × 背景 #FFFFFF のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AD5895、4.56:1）を使う。
• pill-label は文字 #FBFEFE × 背景 #758BD4 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#546FCA、4.6:1）を使う。
• free-badge は文字 #758BD4 × 背景 #FFFFFF のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#546FCA、4.55:1）を使う。

Typography

• 見出しは細字の文に太字のキーワードを混ぜる
• 重要語に傍点（上部のドット）を付ける
• キービジュアル上のコピーは白抜きの縦書き
• 英字ラベルは大文字で字間を広げる
• 本文は行間2.0でゆったり組む
• 注釈記号は小さな上付き※番号
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較は 2 列、アイコンは 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション間は細い縦線や×記号でつなぐ
• 悩みは丸写真と文を左右交互に配置
• 比較カードは2列で左右対称
• 写真は全幅で切り替えのリズムを作る
• 下層セクションは英字ラベル＋和文見出しの左揃え

Elevation & Depth

• 影はほぼ使わずフラット
• 白カードはスレート地の上に置いて浮かせる
• 泡や水滴の写真で奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 悩み写真は正円切り抜き、成分写真は上半円カード内の矩形
• セクション境界: 直線の色切り替えと、細い縦線・×記号の区切り。FV下部は泡で曲線的に終わる
• 比較カードは上辺が半円のピル型
• ラベルはピル型の塗り帯
• 無添加表示は斜線入りの細線の円
• 見出し帯は角丸なしのベタ塗り矩形

Components

• 3つの特長アイコン（feature-icon-row）: 細線で区切った3列に線画アイコンと2行ラベル
• 枠線カテゴリラベル（outline-tag）: 黒細枠の四角に商品カテゴリを入れる
• 価格表示（price-block）: 大きな数字の価格と、グレー2分割の単価・期間ボックス
• 悩みの丸写真＋チェック（worry-circle）: 正円の肌写真と細線チェック、太字混じりの白文字
• 塗り帯見出し（highlight-band）: 1行ずつ青紫や白の帯を敷いた強調見出し
• 成分比較カード（compare-pill-card）: 上が半円の白カード2枚。成分名の色、写真、3アイコン、図解
• ピル型ラベル（pill-label）: 正常/乱れの比較を青紫と濃グレーのピルで示す
• 無添加バッジ（free-badge）: 斜線入りの細線円に青紫文字、3＋2で配置
• 使い方ステップ（step-item）: STEP英字、円の線画イラスト、右に説明文
• 英字セクションラベル（section-label）: 青紫の大文字英字の下に黒の和文見出し

Do's and Don'ts

Do - 泡・水滴・透明感のある写真を主役にする - 見出しは細字と太字の混在で抑揚をつける - 2成分の比較は色を分けて左右対称に置く - 線画アイコンは細い線で統一する - 注釈は※番号で丁寧に付ける

Don't - 原色の赤や黄色で強調しない - 太い影や立体ボタンを使わない - 装飾フォントや手書き書体を混ぜない - 背景に濃い柄を敷かない - 本文の行間を詰めない

Page Structure

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

1. ファーストビュー（商品と2成分の掛け合わせを一目で伝える）: 白地の大見出しの下に、泡と商品のグラデーション写真。泡玉に成分名、左右に白い縦書きコピー
2. 特長アイコン・商品情報・価格（要点と価格を示す）: 3列アイコン、枠線ラベル、英字商品名、大きな価格と単価ボックス
3. 悩みの提起（悩みに共感させ原因を示す）: スレート地に丸い肌写真と悩み3つを左右交互に並べ、傍点付きで原因を述べる
4. 肌の仕組みの解説（原因を図解で納得させる）: スレート地の上の白カードに肌層の図解、ピルラベル2つで比較、線画3つで影響を示す
5. 解決の提示（毎日のケアの大切さへつなぐ）: 縦線でつなぎ、傍点付きの大きな中央見出し
6. 成分の特長（2成分配合の根拠を示す）: 泡の写真に縦書きコピーと大きな英字成分名、下線付き見出しと本文
7. 成分比較（2成分の違いと相乗効果を示す）: グレー地に上半円カード2枚、最後に青紫の塗り帯見出し
8. やさしさの訴求（低刺激性を伝える）: ×記号で区切り、白帯見出し、泡の円2つ、左右に縦線を付けた小見出し
9. 使用イメージ（洗い上がりを想像させる）: 泡を手に持つ写真に3つの円の循環図、女性の洗顔写真に縦書き白帯コピー
10. 無添加処方（安心感を補う）: 英字ラベル＋見出し、斜線入りの円バッジ5つ
11. テクスチャー（泡の使い心地を伝える）: 泡の写真に縦書き白帯コピー、本文、2枚並びの人物写真
12. 使い方（手順を簡潔に示す）: STEP3つを円の線画イラストと説明文で縦に並べる
13. ブランドの信頼（製造背景で信頼を高める）: モノクロの研究室写真、淡いグレー地に太字見出しと長文、シリーズ商品写真
14. クロージング（商品と価格を再提示する）: FVと同じ構成で泡写真、グラデーション帯の縦書きコピー、アイコン、価格

Imagery

• 白い泡と水滴を寄りで撮り、淡い水色〜ラベンダーの光を当てる
• 肌の悩みは毛穴や角質のマクロ写真を正円で切り抜く
• 人物は目を閉じて微笑む洗顔シーン。明るいグレー背景
• 肌の層や成分は柔らかいピンク系の3D風イラストにする
• アイコンは細いグレー線の線画で、要所だけ青紫で塗る
• 研究所の写真はモノクロにして信頼感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 600px 前後に SP の構成をそのまま置く
• 左右の余白は淡いグレーで埋める
• PC では比較カードや人物写真を横並びのまま広げる
• 縦書きコピーは PC でも写真上に残す

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