DESIGN.md — くすみモーヴ×キャンディ質感のリップ LP（Dreamy Mauve Candy Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい
• キーワード: くすみモーヴ・キャンディ・透け感・きらめき・大人ロマンティック・限定色
• 地の質感: 霧がかったソフトフォーカスの写真とパールのような光沢。ガラス・グミの透け感がある
• 形: 角丸の写真、ピル型のバッジ、丸いコピー吹き出し、写真を左右にずらして重ねるコラージュ
• 温度感: やや温かい。ピンクとラベンダーの間で甘さを抑えている

Colors

• 地はくすみモーヴ一色を基本にし、セクション後半はラベンダーへ縦グラデで移す
• 文字はほぼ白のみ。濃い文字色は使わない
• CTA は淡ピンク→濃ピンクの横グラデで地から浮かせる
• ミントのリボンは装飾の差し色として一点だけ使う
• 情報図（カラーチャート）だけ白い面に乗せて可読性を確保する
• 限定を示すバッジはビビッド寄りのピンクで小さく
• button-primary は文字 #FFF6FF × 背景 #E593B3 のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE3470、4.57:1）を使う。
• badge-limited は文字 #FFF6FF × 背景 #E88CBF のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D02A86、4.56:1）を使う。
• point-label は文字 #FFF6FF × 背景 #E49DB1 のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CA3F66、4.5:1）を使う。
• circle-copy は文字 #FEF5FA × 背景 #E49DB1 のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CA3F66、4.5:1）を使う。
• color-chart は文字 #B8577E × 背景 #FCFBF9 のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#B6537B、4.5:1）を使う。
• series-card は文字 #FEF5FA × 背景 #D1B4CA のコントラスト比が 1.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#995E8A、4.55:1）を使う。

Typography

• 見出しは英字セリフを大きく、和文明朝を添える二段構成
• 和文見出しは字間を 0.15em 前後広げる
• 本文はすべて中央揃え・白文字
• 英字ボタンは大文字で字間を広く
• 1 行は短くし、改行で句切りをそろえる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2 枚を左右にずらすコラージュ
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は全幅と左右寄せを交互に置いてリズムをつくる
• セクションの区切りにガラス玉・キラ星・リボンの装飾列を置く
• 色見本は 6 列・5 列の小さいグリッドに並べる
• CTA は幅 82% 中央に配置
• 余白は広めにとり詰め込まない

Elevation & Depth

• 影はほぼ使わずフラット
• CTA にごく薄いソフトシャドウ
• 装飾の玉・リボンは自身の光沢で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: サブ写真は大きい角丸の長方形。メイン写真は角なしで端まで置く
• セクション境界: 直線の境界。グラデと装飾列で区切る
• CTA は角丸 4px 程度の長方形
• バッジ・タグはピル型
• コピー吹き出しは正円
• カードは角丸 16px

Components

• 購入 CTA（button-primary）: ピンクの横グラデ。カートアイコン＋大文字英字＋右に細い矢印
• 限定バッジ（badge-limited）: 色見本の下に置く小さいピンクのピル
• キャッチ枠ピル（pill-outline）: 白線のピル枠でハッシュタグや短いコピーを囲む
• ポイント番号（point-label）: パール光沢の小さいピルに英字の番号
• 丸吹き出し（circle-copy）: 写真の角に重ねるローズの正円。中に短いコピー 3 行
• 装飾区切り（ornament-row）: 中央にリボンや果物、左右にガラス玉とキラ星を散らす
• カラーマップ（color-chart）: 白い角丸枠の中に十字軸、色の丸を配置
• シリーズカード（series-card）: 淡い紫の角丸カードに英字見出し・写真・色見本・下線つきリンク

Do's and Don'ts

Do - 地はくすみモーヴでそろえ、文字は白で通す - 区切りごとにガラス玉とキラ星の装飾を入れる - 英字セリフ見出しと和文明朝を重ねて置く - 写真は霧がかったソフトトーンで統一する - 色番号と色名は英字で小さく併記する

Don't - 黒や濃紺の文字を使わない - 原色の赤やビビッドな青を広い面に使わない - 太いゴシック見出しで押し出さない - 硬い影や太い枠線を付けない - 装飾を密集させず余白を詰めない

Page Structure

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

1. ファーストビュー（限定色の世界観を一目で伝える）: モデル写真の上に光沢スクリプトのタイトル、商品の切り抜きとリボン装飾
2. 商品と発売情報（価格・色・発売日・購入導線）: 角丸の唇アップ写真、色名、セリフ数字の日付、グラデ CTA
3. コンセプト（質感と色味の狙いを伝える）: 全幅の質感写真の下に明朝見出し×記号と短い本文
4. 色見本一覧（全色を見せる）: 唇写真を小さいグリッドにし、限定バッジと色番号を添える
5. 限定色の個別紹介（各限定色の魅力を伝える）: 写真コラージュ＋丸吹き出し＋英字の色名見出し
6. 特長ポイント（機能を 3 点で説明）: Point ピル、明朝見出し、ビフォーアフター、素材の丸写真。地はラベンダーグラデ
7. 処方の特徴（安心感を伝える）: 白線ピルのタグを横に並べる
8. カラーラインナップ（色を比較させる）: スライダーとドット、白いカラーマップ
9. 再訴求（購入をもう一度促す）: ファーストビューを再掲し CTA
10. スウォッチ（実際の発色を見せる）: 腕・唇の縦長写真を余白つきで並べる
11. シリーズ紹介（関連商品へ誘導）: 紫の角丸カードを 2 枚縦に
12. 最終 CTA・フッター（購入と店舗案内）: 英字見出し＋角丸写真＋CTA、ぼかし背景に店舗・通販リンク、ラベンダーのフッター

Imagery

• モデルはソフトフォーカスで、ピンク〜ラベンダーの光で撮る
• キャンディ・グミ・アイス・ガラス玉など甘い小物と商品を組み合わせる
• 唇とテクスチャーは超アップで、ツヤとラメを強調
• 3D 風の透明なリボン・蝶・果物・パールを装飾に使う
• 四芒星のキラ星とパールの玉を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 375px 前後の SP カラムを中央に固定する
• PC の外側はピンク〜ラベンダーの縦グラデで塗る
• PC ではカラムの左右に装飾の玉・リボンを並べる
• PC のカラムは下端だけ大きい角丸にする
• PC のスライダーは左右に隣の色をのぞかせる
• PC ヘッダーは横並びナビ、フッターも横 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 行書くと起動時に読み込まれる。