DESIGN.md — コーラル×ピーチ霞の温感リップ美容 LP（Warm Coral Gradient Lip Care LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、ナチュラル
• キーワード: コーラル・ピーチグラデーション・アーチ型写真・花形番号・水滴装飾・温感
• 地の質感: 霞がかったぼかしグラデーション、淡い花びらの透かし背景、細い白い曲線、水滴のきらめき
• 形: 縦長の楕円・アーチ型フレーム、ピル型ラベル、花形（スカラップ）の番号、丸バッジ
• 温度感: 暖色寄り。コーラルとベージュで温かく、白とグレーで抜けを作る

Colors

• 地はオフホワイトと淡いピンクベージュを交互に使い、特長1と2は花びらやピーチのぼかし背景にする
• コーラルは番号・CHECK円・FAQ枠など、目印になる面だけに使う
• 見出しは濃いグレーで書き、キーワードだけ赤みオレンジにする
• 朝・休日・夜の生活シーンは、それぞれアクセント色（コーラル／オリーブ／ネイビー）で分ける
• 大きなキャッチは白文字にしてピーチグラデの上に置く
• 黒ベタや彩度の高い寒色は使わない
• pill-label は文字 #FEFEFE × 背景 #E8461F のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D73C16、4.58:1）を使う。
• check-circle は文字 #FEFEFE × 背景 #EE8169 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D83B19、4.57:1）を使う。
• flower-number は文字 #FEFEFE × 背景 #EE8169 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D83B19、4.57:1）を使う。
• usage-band は文字 #FEFEFE × 背景 #CB8273 のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B95945、4.55:1）を使う。
• faq-card は文字 #FEFEFE × 背景 #EE8169 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D83B19、4.57:1）を使う。

Typography

• 見出しは字間を0.1em前後広げ、中央に揃える
• 強調する語だけ一回り大きくし、赤みオレンジにする
• 英字ラベルはセリフ体の大文字にし、左右に細い線を入れる
• 番号は花形の中にセリフ体の白文字で置く
• 大きなキャッチは縦書きと横書きを組み合わせてもよい
• ※注釈は小さいグレー文字でブロックの下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分は 3 列、オイルは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長ブロックは、写真フレーム → 見出し → 本文 → 補足グリッドの順に縦に積む
• シーン紹介は写真と文章を左右交互に並べる
• セクション上端は角丸アーチにする
• 写真フレームには花形番号を右上で重ねる
• FAQはコーラル枠の中に白カードを入れ子にする

Elevation & Depth

• 影はほぼ使わない平面的な表現
• 商品写真にだけ、ごく柔らかい落ち影をつける
• 奥行きはぼかしグラデと水滴で出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 縦長楕円・上が丸いアーチ型・角丸の大きいカード。細いコーラルの枠線つき
• セクション境界: 上端が大きな角丸アーチで次のセクションに切り替える。細い曲線も添える
• 写真は角を丸くした柔らかい形で切り抜く
• 番号は花形（スカラップ）にする
• 無添加の項目は円の中に斜線を入れて表す
• 使い方の帯は片側だけを大きく丸めたピル形にする

Components

• 特長ピルラベル（pill-label）: ファーストビュー下に2つ並べるオレンジのピル
• CHECK円見出し（check-circle）: コーラルの円に英字を入れ、下に細い縦線を引く
• チェックリスト（check-list）: 丸囲みのチェックアイコンと悩みの文を並べる。語を部分的に太字にする
• 花形番号バッジ（flower-number）: スカラップ形のコーラル面にセリフ体の数字を置く
• アーチ写真フレーム（arch-photo）: 縦長の楕円写真に細いコーラル枠をつける
• 英字見出しラベル（eyebrow-label）: セリフ体の大文字の左右に細い線を入れ、見出しの上に置く
• 使い方ピル帯（usage-band）: テラコッタの帯に唇写真と大きな白文字を入れ、左右交互に並べる
• 無添加円バッジ（free-circle）: 白い円に斜線を入れて成分名を置く。3つと4つで2段に並べる
• FAQカード（faq-card）: コーラルの枠に白文字のQを置き、中に白カードでAを入れる

Do's and Don'ts

Do - 背景にはピーチ〜コーラルのぼかしと水滴を添える - 写真は楕円かアーチで柔らかく切り抜く - 見出しのキーワードだけ赤みオレンジにする - 特長には花形の番号を振る - ※注釈を各ブロックの下に小さく入れる

Don't - 四角い写真をそのまま並べない - 黒や濃紺のベタ面を広く使わない - 太い影や立体ボタンを使わない - 強調色を本文全体に使わない - 角張った硬いゴシックの大見出しにしない

Page Structure

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

1. ファーストビュー（商品と主成分の数値を伝える）: 木目の上の商品写真に、白い丸バッジの数値・キャッチ・ピルラベル2つを重ねる
2. イメージビジュアル（使用感を感覚的に伝える）: ピーチグラデの上に商品を中央に置き、白抜きの巨大キャッチと縦書きコピーを配置
3. おすすめ対象（悩みへの共感）: CHECK円見出しと、チェックアイコン付きの悩みリスト5項目
4. 特長1・成分（配合成分の訴求）: 花びら背景のアーチ写真に番号01。3列の成分カードと2列のオイル写真を並べる
5. 特長2・温感（機能の根拠を示す）: 楕円写真に番号02。サーモ画像と文章を左右に並べる
6. 使い方（使用シーンの提案）: 唇写真入りのピル帯を2本、左右交互に置く
7. 特長3・生活シーン（1日のどこでも使えることを示す）: 番号03の写真。朝・休日・夜の人物写真と文章を交互に並べ、色を分ける
8. 無添加（安心感の訴求）: くすんだ写真背景に大きな数字の見出しと、斜線入りの円バッジ7個
9. よくある質問（不安の解消）: 淡いイエローグリーンの地に、コーラル枠のQ&Aカードを縦に並べる

Imagery

• 商品は白いチューブを自然光で撮り、木目・布・花びらの上に置く
• 成分は真珠・ジェル・水滴・果実などの質感クローズアップで見せる
• 人物は30代女性の自然な生活シーン。白い服で明るく撮る
• 装飾には水滴、細い白い曲線、唇アイコン、きらめきを使う
• 背景は淡い花びらを透かしたり、ぼかしたピーチ光にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため、SPのレイアウトを中央約480pxの幅で表示し、左右を背景グラデで埋めることを推奨
• PCではシーン紹介を2カラムの交互配置のまま広げる
• 成分グリッドはPCで6列まで増やしてよい
• 巨大キャッチは、ビューポート幅に比例したサイズで調整する

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