DESIGN.md — 淡い水色と余白の透明感スキンケアパウダー LP（Airy Pale Blue Skincare Powder LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 透明感・淡い水色・細いゴシック・大きな数字・クーポン訴求・余白
• 地の質感: マットでフラット。写真は青みの白い光、半透明の容器、粉の質感でまとめる
• 形: 丸いバッジ、ピル型ボタン、縦長カプセル型の写真、角丸の白カード
• 温度感: やや寒色寄りで涼しく清潔。ベージュとゴールドで少し温かみを足す

Colors

• 地色は白・淡い水色・薄いグレー・生成りの 4 段階を交互に使ってセクションを区切る
• 価格と割引率だけ赤を使い、ほかの場所では赤を使わない
• 申込ボタンは緑一色にして、ページ内でほかに緑の面を作らない
• クーポン見出しの強調語は水色の地に黄色の文字で置く
• ポイント見出しのキーワードはゴールドベージュの大きな文字にする
• 文字は純黒を避けて濃いグレーにする
• button-primary は文字 #EEFEFA × 背景 #44A984 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#348165、4.51:1）を使う。
• price-box は文字 #ED5546 × 背景 #FEFEFE のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E22816、4.58:1）を使う。
• point-label は文字 #A48D65 × 背景 #FEFEFE のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#87724F、4.58:1）を使う。

Typography

• 数字は細めの欧文で大きくし、単位の漢字は小さく添える
• 大見出しは細〜中くらいの太さで、太すぎないようにする
• 強調したい語の下には淡いベージュや水色のマーカー線を引く
• ※つきの注釈は小さい文字で該当ブロックのすぐ下に置く
• ファーストビューのキャッチは縦書きで、一語だけ手書き風の水色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典カードとフリー処方の丸は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 価格ボックスは色付きの地の上に白カードを置き、左右に 16px ほどの余白をとる
• 成分の訴求は丸い写真と大きな数字を左右交互に並べる
• お客様の声は 1 枚の白カードの中に、斜めの区切り線で 4 件並べる
• クーポン→価格→CTA の流れのブロックをページ内で 3〜4 回繰り返す
• 余白を広めにとって、情報が多くても詰まって見えないようにする

Elevation & Depth

• 基本はフラットで影はつけない
• 白カードは影なしで地色との差だけで浮かせる
• クーポン券にだけ弱い影をつけて紙っぽく見せる

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 成分の写真は正円、使用シーンの写真は縦長カプセル型。商品写真は角なしで幅いっぱいに置く
• セクション境界: 基本は水平の直線。クーポン部分は封筒の V 字形と吹き出しの丸い形で区切る
• 悩みバッジは正円で、水色・グレー・濃い水色の 3 色にする
• Point ラベルは細い枠線の白いピル型
• 特典カードは角丸 14px の淡い水色
• コース表の各回は上側だけ大きく角を丸めたアーチ型

Components

• 申込ピルボタン（button-primary）: 緑のピル型。大きな黄色い数字価格と白文字、右端に三角の矢印。小さい黄色枠のラベル付き
• クーポン券（coupon-ticket）: 水色の地に傾けた白いチケット。黄色の大きな割引率を入れ、右端はミシン目で切り離した形
• クーポン利用方法の吹き出し（coupon-bubble）: 白い楕円の吹き出しの中に、コード入力欄の見本と水色のピル型コピーボタン
• 価格ボックス（price-box）: 白カードに商品写真・赤い大きな価格・赤い丸の割引バッジ・黒い小ラベル・枠線のピル型タグ 2 つ
• 悩み解決の丸バッジ（badge-circle）: 直径 90px ほどの正円を 3 つ並べ、短い訴求語を 3 行で入れる
• Point ラベル（point-label）: 白地にベージュの細い枠線のピル型。ゴールドの欧文で番号を入れる
• お客様の声（voice-card）: フラットなイラストの丸アイコン、白抜き数字の voice 番号、声の本文、年代。左右交互に並べる
• 特典カード（benefit-card）: 淡い水色の角丸カード。見出しの下に線を引き、白抜きの大きな文字で特典を入れる。2 列
• 無添加の丸（free-circle）: 白い円に斜線を引き、中に配合していない成分名。木目の写真の上に 3 列で並べる

Do's and Don'ts

Do - 地色は淡い水色・グレー・生成りを順に切り替えて、清潔なリズムを作る - 数字は大きく細く見せて、成分数や割引を一目で伝える - 申込ブロック（クーポン→価格→緑の CTA）を数セクションごとに繰り返す - 写真は青白い光でまとめ、肌や手を自然に見せる - 注釈は小さく、該当するブロックのすぐそばに置く

Don't - 鮮やかな原色を広い面に使わない - 赤を価格・割引以外に使わない - 太く重い見出し書体で透明感を壊さない - 写真に強い影や暖色のフィルターをかけない - CTA の色をセクションごとに変えない

Page Structure

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

1. ファーストビュー（商品の世界観と主な訴求を伝える）: 青白い光の商品写真に縦書きのキャッチを重ね、下に丸バッジを 3 つ。その下に白地でリード文
2. クーポン訴求（割引で興味を引く）: 水色の地に黄色の見出しを置き、クーポン券を封筒から出る形で見せる。下に利用方法の吹き出し
3. 価格・CTA（申込みへ誘導する）: ブルーグレーの地に白い価格ボックスと緑のピル型 CTA、注釈を並べる
4. 返金保証（不安を減らす）: ブルーグレーの地に白いピル型の保証文と商品の丸写真
5. 動画・実績（信頼を示す）: 動画の埋め込みと、大きな数字の実績コピーを粉の写真に重ねる
6. 3 つのポイント（特長を説明する）: Point ラベルとゴールドの見出し。図解や比較写真は白カードに入れる
7. 成分訴求（成分の多さを伝える）: 丸い写真と巨大な数字を左右交互に並べ、成分の関係は三角の図にする
8. お客様の声（共感と信頼を得る）: グレーの地に吹き出しの見出しと白カード。イラストのアイコンで 4 件
9. 使用シーン（使う場面を想像させる）: 生成りの地にカプセル型の写真を 2 列で互い違いに並べる
10. 無添加・ユニセックス（安心感と誰でも使えることを伝える）: 斜線入りの丸を 6 つ、男女のイラスト、水色の帯ラベル
11. 定期特典（定期購入を後押しする）: 大きな数字の見出しと、淡い水色の特典カードを 2 列×3 段
12. コース料金表（1 日あたりの安さを示す）: アーチ型のカードを 4 列並べ、カードの間に回数の矢印。下部は水色の帯
13. 成分表示・フッター（法定表記）: 淡いグレーの箱に全成分を書き、その下に会社名とリンク

Imagery

• 商品写真は白い台やアクリルの上に置き、青白い自然光で撮る
• 粉が舞う様子や水滴など、質感がわかる素材写真を丸く切り抜く
• 人物は自然なメイクの日常シーン。男女とも使う
• お客様の声は顔のパーツを描かないフラットなイラスト
• 植物の葉や木目の背景で少しだけナチュラル感を足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP の画像を中央 1 カラムにして幅 750px 前後で置き、左右は淡い地色で埋める
• PC でも縦長の構成は変えず、特典カードや無添加の丸は列の数を保つ
• CTA は PC で最大幅 480px ほどにして中央に置く
• 大きな数字の比率は 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 行書くと起動時に読み込まれる。