DESIGN.md — ローズピンク×霧グレーのエステ系スキンケアLP（Soft Pink Esthetic Skincare Trial LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、上品・高級、清潔・爽やか、ナチュラル
• キーワード: ローズピンク・霧がかったグレー・広い字間・自然素材写真・繰り返しオファー・エステ感
• 地の質感: 白〜霧グレーのグラデーションに、ぼかした円形の雲が浮かぶ柔らかな空気感
• 形: 角丸は控えめ。円形バッジやぼかした楕円、細い線で囲む円で柔らかさを出す
• 温度感: やや暖かいピンクと、冷たいグレーの中間

Colors

• 地は白と淡いグレーを交互に使い、ピンクはオファー帯に集中させる
• オファー帯は全面ローズピンク、内側に淡ピンクの白寄りカードを置く
• 主CTAはピンク帯上で目立つ深いワインレッドにする
• 見出し前のリード文はワインレッドで小さく
• 本文は黒ではなく暖かいグレーで柔らかく
• ビフォーアフターの好転側ラベルはピンク文字で示す
• offer-block は文字 #FFEEEA × 背景 #EB6B8E のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D61D4F、4.5:1）を使う。
• voice-card は文字 #6E6461 × 背景 #F6D9D3 のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#6A605D、4.58:1）を使う。

Typography

• 全体に字間を0.1em前後に広げ、ゆったりさせる
• 本文は行間2.0で短い改行を多めに入れる
• 英字見出しは太いジオメトリック系サンセリフを大文字で
• 価格は数字を特大、税込や割引率は小さく添える
• 強調したい語にはピンクの下線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。テクスチャ説明は画像左＋文右の2列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃え、本文は左揃えで中央寄せブロックにする
• オファー帯は同じ構成で4〜5回繰り返す
• 写真セクションは全幅で余白なしにする
• 使い方は左に小さなラベル線、右に商品画像を並べる
• 声カードは全幅の淡ピンク帯にして、イラストを左右交互に置く

Elevation & Depth

• 基本はフラットで影はほぼ使わない
• 商品画像は下に鏡面反射を付けて浮かせる
• 素材写真のグリッドは軽いドロップシャドウ
• 書籍・雑誌の書影にはやわらかい影

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。人物イラストは円で囲む
• セクション境界: 基本は直線。写真の上端だけゆるい弧形
• CTAはピル型でグラデーション付きにする
• 悩みワードはぼかした不定形の雲に入れる
• STEPやバッジは塗りの円
• フリー処方は細い線の円に斜線を入れる

Components

• 申込ピルボタン（button-primary）: 深いワインレッドのグラデーションを付けたピル型。幅は約90%
• オファー帯（offer-block）: ピンクの全幅帯。円形の白線バッジ、セット商品画像、番号付きアイテムタグ、価格、内容カード、CTA、定期ではない旨の注意枠を順に並べる
• 割引率円バッジ（discount-badge）: 濃グレーの円に割引率を白文字で入れ、特大価格の左に置く
• 悩みの雲（concern-cloud）: 白〜灰のぼかした楕円に悩みの単語を入れ、大きさを変えて散らす
• 原因タグ（cause-tag）: 青グレーの面を2×2に並べ、短い語を中央に置く
• STEP円バッジ（step-badge）: 灰または淡ピンクの円に英字STEPと番号、下に種類名
• お客様の声（voice-card）: 円で囲んだ線画イラストとピンクのVOICE番号、年代を添える。下に淡ピンク帯の本文と引用符、強調部に下線
• フリー処方アイコン（free-circle）: 細いグレー線の円に斜線を入れ、成分名を中央に置く。4＋3で配置
• リード付き見出し（lead-label）: ワインレッドの小さなリード文の下に、黒の太字見出しを置く

Do's and Don'ts

Do - オファー帯は同じデザインのまま複数回挟む - 本文は暖かいグレーで、広い字間と行間をとる - 自然素材や手肌の写真は全幅で大きく見せる - 価格は通常価格に打ち消し線、割引率バッジ、特大の価格の順に並べる - 定期購入ではないことを注意枠ではっきり示す

Don't - ピンクを本文セクションの地に多用しない - 真っ黒の太いボーダーや強い影を使わない - ポップな丸ゴシックや手書き書体を使わない - 字間を詰めた窮屈な組版にしない - ビビッドな原色を差し色にしない

Page Structure

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

1. ファーストビュー（世界観と主張の提示）: 霧の山と岩に置いたボトルの写真。中央にロゴとコピー、左に円形の価値バッジを2つ、右にチェック付きの効果語を3つ、右下にピンクの円バッジ
2. リード文（ブランドの約束）: 白地に中央揃えの3行文
3. オファー（トライアル申込）: ピンクの全幅帯にセット画像、価格、内容リスト、CTAを置く
4. 悩みの提起（共感）: ぼかした雲に悩み語を散らし、原因タグを2×2で並べる
5. 解決策（考え方の提示）: 施術写真の上端を弧形にし、グレーのグラデ地に本文とビフォーアフター写真を置く
6. 成分（素材のこだわり）: 英字ラベル付き見出しと鉱石・植物の写真。素材写真を5列の不揃いなグリッドで並べる
7. テクスチャー・フリー処方（使用感と安心）: 手肌の写真と泡の装飾。線の円アイコンを7つ並べる
8. 使い方（商品ラインの説明）: 毎日／週1の帯を灰とピンクで分け、商品ごとにSTEPバッジ、商品画像、テクスチャ写真を2列で置く
9. お客様の声（社会的証明）: 線画アバターとVOICE番号、淡ピンク帯の本文を4件
10. 開発者紹介（権威と想い）: 淡ピンク地に人物写真、想いの文、白カードの経歴、書籍・雑誌の書影
11. 申込規約・フォーム（申込完了）: 灰地に規約テキスト。ピンク見出し帯の入力フォームと緑の確認ボタン
12. フッター（締め）: 淡ピンクの巨大ロゴ文字の装飾と、リンク・コピーライト

Imagery

• 霧のかかった山や空を背景に、商品を岩の上に置いて撮る
• 鉱石や植物は白〜淡青の背景で、下に反射を付ける
• 手肌やエステ施術は白基調の柔らかい自然光で撮る
• クリームのテクスチャを正方形でアップにする
• お客様は細い線画の女性イラストを円で囲む
• 水滴や泡を浮遊装飾として散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版がないため推奨として書く
• PCでは本文幅を約480〜640pxの中央カラムに固定し、左右は淡いグレーの地にする
• オファー帯は全幅のままにし、内側の要素は2カラム（画像｜価格・CTA）にする
• 使い方とテクスチャは横並びを保ち、余白を1.5倍に広げる

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