DESIGN.md — 桜ピンク×パール光の毛穴ケアコスメ LP（Soft Pink Pearl Celebrity Skincare Campaign LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、情報量多め・訴求型
• キーワード: くすみピンク・パール虹彩・明朝見出し・限定特典・成分図解・推し活
• 地の質感: 白地に淡い虹色の光の筋とパール感のあるグラデを重ねる。ピンクの面はフラットに塗る
• 形: 角丸のカード、ピル型ボタン、丸いバッジ、六角形のバッジ。ところどころでアーチ型にセクションを切り替える
• 温度感: 暖かく柔らかい。甘さは控えめで大人っぽい

Colors

• 地はくすみピンクの帯と、白〜パールのグラデ地を交互に置く
• 購入まわりは生成りグレーの地にして、ピンクのボタンを目立たせる
• 濃いピンクは価格・限定の文言・FAQ 回答の要点・主ボタンだけに使う
• 本文は黒ではなく、柔らかい濃いグレーにする
• POINT ラベルは、ピンク地では白、白地では灰茶にして交互に使う
• 黄色・青などの色は、成分図解のイラストの中だけにとどめる
• button-primary は文字 #FFF3F6 × 背景 #EA7D95 のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D9234B、4.52:1）を使う。
• button-store は文字 #FFF3F6 × 背景 #EA7D95 のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D9234B、4.52:1）を使う。
• button-detail は文字 #EA7D95 × 背景 #FEFEFE のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D9234B、4.53:1）を使う。
• section-band は文字 #FFF3F6 × 背景 #E6738A のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D8274B、4.5:1）を使う。
• point-label は文字 #F1ACAF × 背景 #FEFEFE のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DC3239、4.57:1）を使う。
• badge-round は文字 #FFF3F6 × 背景 #EA7D95 のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D9234B、4.52:1）を使う。

Typography

• 見出しは明朝体で、字間を広めにとる
• 強調する語だけを濃いピンクにし、さらに文字を大きくする
• 英字のセクション名は、大文字のセリフ体に小さな星の装飾を添える
• 注釈は細かい薄グレーの文字で、ブロックの末尾にまとめる
• 価格は数字を特大にし、通貨記号と税表記を小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各ブロックは中央揃えを基本にする
• POINT は 01〜03 を地色を交互に変えて縦に積む
• カードは左右 24px ほどの余白をとって配置する
• 主ボタンを置いたあと、通販サイトのボタンを 2 列で並べる

Elevation & Depth

• 白カードには、ごく薄いピンクの影を広くぼかして付ける
• ボタンは上下のグラデと内側のハイライトで、ぷっくりした立体感を出す
• それ以外は影を付けずフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで浮かせて置く。人物の写真は四角か下端の切り抜き。成分は円形に収める
• セクション境界: 基本は直線で切り替え、要所にアーチ型を入れる
• バッジは円形か六角形にする
• POINT ラベルは角丸の小さい長方形にする
• 見出し帯は画面幅いっぱいの長方形にする

Components

• 購入ボタン（button-primary）: 濃いピンクのグラデをかけた幅広のピル型ボタン。カートのアイコンを添える
• 通販サイトボタン（button-store）: 小さめのピンクのピル型ボタン。外部リンクのアイコン付きで 2 列に並べる
• 詳細ボタン（button-detail）: ピンク地に置く白いピル型ボタン。文字はピンクの明朝体
• 見出し帯（section-band）: 画面幅いっぱいの濃いローズの帯に白い明朝体の文字を載せ、購入エリアの入口に置く
• POINT ラベル（point-label）: セリフ体で番号を入れた小さい長方形のラベル
• 限定バッジ（badge-round）: 濃いピンクの円に白文字を入れ、限定・特典を伝える
• 特典カード（gift-card）: 白カードの上下に細い線と星の装飾を入れ、中央に特典の内容を置く
• FAQ（faq-item）: Q は淡い青グレーの角丸ボックス。A は地の上に置き、要点を濃いピンクで示す
• 星つき英字見出し（heading-sparkle）: 小さなキラリとした星の装飾の下に、大きなセリフ体の英字を置く

Do's and Don'ts

Do - ピンクの帯と白いパール地を交互に置いて、リズムを作る - 見出しは明朝体にして、字間を広くとる - 強調は濃いピンクの一色だけで行う - 注釈は各ブロックの末尾に小さくまとめる - 購入ブロックは途中と終盤の 2 回置く

Don't - 原色の赤やビビッドなピンクは使わない - 純黒の太いゴシック体で見出しを作らない - 角の立った四角いボタンにしない - 強い影やネオンの光彩を付けない - 強調色を何色も混ぜない

Page Structure

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

1. ファーストビュー（起用人物と商品で印象づける）: パールのグラデ地に人物と商品の切り抜きを置き、明朝体の 2 行コピーを添える
2. WEB 動画（話題づくり）: ピンクの帯に英字見出しと引用符付きのタイトルを置き、下に動画を埋め込む
3. 限定特典（購入動機をつくる）: アーチ型の切り替え。大きな明朝体の見出し、特典カード、円形バッジで商品と特典を「＋」でつなぐ
4. SNS キャンペーン（拡散を促す）: 上部に帯の付いた白カード。応募方法は生成り地に置き、サブボタンを添える
5. 購入ブロック（コンバージョン）: 見出し帯、商品写真、特大の価格、ピル型ボタン、通販ボタンを 2 列で並べる
6. 商品の特長（価値を伝える）: パール地に商品を大きく置き、六角形のバッジを添える
7. POINT 解説（成分・技術の根拠を示す）: POINT ラベル、見出し、線、図解の順に置く。ピンク地と白地を交互にし、末尾に注釈を入れる
8. 特別コンテンツ（ファンが再訪する理由をつくる）: 大きなピンクの明朝見出しに続けて、話数ごとの動画と近日公開の表示を並べる
9. コメント（人物のメッセージ）: アーチ型のピンク地に本文を置き、右下に人物の切り抜きを添える
10. よくある質問（不安を解消する）: 英字見出しの下に、Q をボックス、A を地に置いて交互に並べる

Imagery

• 商品は白背景で切り抜き、柔らかい影と虹色の光の筋を添える
• 人物は淡いピンクの衣装で、柔らかい光の中で撮る
• 成分は円形に収めたマクロ写真で見せる
• 肌の断面図はピンク系のフラットなイラストで描く
• 背景に淡いオーロラのようなプリズムのグラデを敷く
• 小さな四芒星の装飾を見出しに添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央に幅 480〜600px のカラムを置き、左右に淡いパール地を敷く
• POINT 解説は PC では図解と本文を 2 カラムにしてもよい
• 通販ボタンは PC でも 2〜3 列にする
• 見出しの文字は 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 行書くと起動時に読み込まれる。