DESIGN.md — ピンク×パールと岩肌グレーの美容液 LP（Pink Pearl Science Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型、清潔・爽やか
• キーワード: ローズピンク・パール光沢・明朝の大見出し・球体バブル・岩肌の悩み表現・金グラデ文字
• 地の質感: パール調の白グレーの光沢背景、ピンクの水彩ぼかし、悩みパートは石・コンクリートの質感
• 形: 円形バブル・円形写真が主役。ボックスは角丸ほぼなしの四角枠
• 温度感: やや暖かいピンク寄り。悩みパートのみ冷たいグレー

Colors

• 地は白〜パールグレーを基本に、ピンクの面をセクション単位で差し込む
• 悩み・原因パートだけ暗い岩肌グレーに切り替え、解決パートで明るいピンクへ戻す
• 濃いローズピンクは実績帯・強調ボックス・比較の『良い側』ラベルに限定
• 見出しの中の核心語だけピンクか金グラデにして文字サイズも上げる
• ピンク地の本文強調はイエロー文字、白地の強調はピンク文字＋下線
• 比較は悪い側グレー、良い側ローズピンクで固定
• ranking-band は文字 #FBFAF8 × 背景 #E71A5B のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DF1757、4.58:1）を使う。
• compare-label は文字 #FBFAF8 × 背景 #E71A5B のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DF1757、4.58:1）を使う。

Typography

• 大見出しは明朝体で、助詞は小さく核心語は大きくするジャンプ率の高い組み
• 核心語はピンクまたは金グラデで色を変える
• ピンク帯・ラベルの中はゴシック太字
• 本文は12px前後の小さなゴシックで行間広め
• 番号は細い欧文セリフ数字に小さく『こだわり』『原因』等を添える
• 手書き文字は見出し前の短い前置きだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• 画像主体の縦積みで、セクションごとに地の色を切り替える
• 成分は円形バブルを2〜3個ずつ横並び、または三角配置
• 比較は2カラムの写真＋上部ラベル
• 禁止成分は3×3の円形グリッド
• 使い方は左に円形イラスト、右にテキストのSTEP行

Elevation & Depth

• バブルは内側に光沢、外側に薄い影をつけて球体感を出す
• ボックスは影なしのフラットな面
• 金メダル・バッジだけ光沢と影

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物・使用シーンは円形または四角。成分は円形バブル
• セクション境界: 基本は直線。暗いパートの終わりは下向きV字の切り込み
• 四角の枠は角丸なしの細線
• 円形を繰り返して柔らかさを出す
• ラベルは角なしの矩形帯

Components

• 実績ランキング帯（ranking-band）: 濃いピンク地に王冠アイコン、金の大見出し、月桂樹、楽天風キャプチャを配置
• 成分バブル（ingredient-bubble）: パール調の球体に明朝の成分名を2〜3行で入れる
• 悩みの石ラベル（concern-rock）: 黒い岩の画像に白い明朝で悩みを1語ずつ載せる
• 比較ラベル（compare-label）: 比較写真の上に載るグレー/ピンクの帯ラベル
• 番号付き見出し（number-heading）: 細い欧文数字と斜線、小さな見出し語、大きな明朝見出し
• 医師監修カード（doctor-card）: 細い枠のボックスに淡い青の肩書き面と医師写真
• 無添加マーク（free-badge）: ピンク線の円に斜線、中に成分名
• 使い方STEP（step-row）: ピンクのSTEP番号、円形イラスト、右に手順文、間に下向き矢印

Do's and Don'ts

Do - 見出しは明朝体で核心語をピンクか金で大きく - 成分は球体バブルで見せる - 悩みは暗いグレーの質感面で提示し、解決で明るく戻す - 注釈番号と※文言を細かく添える - 比較は悪い側グレー・良い側ピンクで統一

Don't - ビビッドな原色やネオン色を使わない - 角丸の強いポップなカードにしない - 丸ゴシック中心にしない - 暗いパートを解決パートに持ち込まない - 金色を地の面に広く使わない

Page Structure

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

1. ファーストビュー（効能と独自性を一目で伝える）: パール背景に商品ボトル中央、明朝の大見出し、金メダル、成分バブル3つ
2. 実績（ランキング受賞で信頼付け）: 濃いピンク全面、王冠と金文字、キャプチャ画像
3. テクスチャ訴求（使用感をビジュアルで示す）: 円形写真に大きなピンク文字と効能バブル
4. 利用者の声（実感の多さを示す）: 手書き前置き＋明朝見出し、女性写真のコラージュ
5. 専門家監修（医療的な権威付け）: 淡い青の背景に青緑見出し、医師カード
6. 悩みの提起（肌悩みを共感させる）: 岩肌グレー地、悩みを石ラベルで5つ、悩む女性写真
7. 原因の解説（悩みの原因を2つ説明）: 暗い石地に番号ラベル、比較写真と断面イラスト、V字で終わる
8. 解決の提示（3つのアプローチを提示）: 白地に3つの球体、金グラデの大見出し
9. 成分・特長（成分ごとの働きを解説）: コーラルピンク地に断面図と成分バブル、イエロー強調本文
10. 効果比較（使用前後の違いを見せる）: 2カラム比較写真＋金バッジ
11. 安心へのこだわり（無添加・製造・テストで安心させる）: 番号見出し3つ、禁止マークのグリッド、工場・研究写真
12. 使い方（正しい使用手順を案内）: 淡ピンク地に英字見出し、円形イラストのSTEP3つ

Imagery

• 商品ボトルは中央配置で光沢背景に浮かべる
• テクスチャはスプーンやシャーレのとろみをマクロ撮影
• 女性モデルは柔らかい自然光、白・ベージュの服
• 悩みパートはひび割れたコンクリートと黒い岩、枯れ葉
• 成分は水滴・ジェルの透明感ある球体、果実の写真
• 使い方は淡い水彩線画の女性イラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 480〜640px）の縦長カラムを置き左右は淡グレー地
• PC でも画像主体の 1 カラムを維持
• 比較・バブルは PC で横並び数を増やしてよい
• 文字サイズは PC で 1.2〜1.3 倍に拡大

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