DESIGN.md — ローズピンクと明朝の上品スキンケアお試しLP（Rose Pink Elegant Skincare Trial LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、情報量多め・訴求型
• キーワード: ローズピンク・花びら・細い明朝・ミントCTA・透明感・大人の女性
• 地の質感: 花びらやしずくの写真を柔らかくぼかした淡ピンクのグラデーション地。光が差すような透明感。
• 形: 円形バッジ、角丸の白カード、斜めに切ったセクション境界、ピル型CTA
• 温度感: やや暖かいピンク寄り。部分的に青白い地で清潔感を足す

Colors

• 地は白・淡ピンク・青白の3種を交互に使い、セクションを区切る
• 強調文字・価格・円形バッジはローズピンクに統一する
• ミントグリーンはCTAボタンだけに使う
• 悩みと原因のパートだけワインレッド系の濃い地にして、トーンを落とす
• ゴールドは番号や手書き英字の小さなアクセントにとどめる
• オファーブロックは淡ピンク地に白カードを重ねた同じ配色で毎回繰り返す
• button-primary は文字 #F4FEFF × 背景 #35CDAB のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#20836D、4.52:1）を使う。
• price-badge は文字 #F4FEFF × 背景 #D74E6E のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D2395D、4.56:1）を使う。
• number-petal は文字 #A89060 × 背景 #FEDBE9 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#766441、4.5:1）を使う。
• pill-label は文字 #F4FEFF × 背景 #D74E6E のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D2395D、4.56:1）を使う。

Typography

• 見出しは細い明朝で、上品で余白の多い印象を保つ
• 見出し内のキーワードだけをローズピンクにして一回り大きくする
• 強調したいフレーズは引用符（“ ”）で囲む
• 本文はゴシックで行間を2.0前後に広く取る
• 価格の数字はピンクで極端に大きくし、通貨単位と税込表記は小さく添える
• 注釈は※付きの小さいグレー文字でまとめて置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジや無添加の丸は 3 列または 2 列で並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しは中央揃え、本文は左揃え
• オファーブロックはページ内で4〜5回繰り返す
• 悩みの項目は2列×2段の枠ボックスで並べる
• 特長は番号付きで縦に積み、各特長に写真か図を1点添える
• スライダーは左右の灰色丸矢印とドットで操作する

Elevation & Depth

• CTAボタンには下方向の柔らかい影とわずかな光沢を付ける
• 白カードは影なしで細線枠か角丸だけにする
• 円形の無添加バッジにはごく薄い影を付けて浮かせる
• 商品写真は背景の花びらと重ね、奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで配置。手元写真は円形にトリミング、モデル写真は角丸なしの矩形
• セクション境界: V字や斜めのカットで区切る。ほかは色面の切り替えのみ
• 特長バッジ・成分・無添加は正円で作る
• 吹き出しは角丸の枠線とし、しっぽを付ける
• 見出し帯は角なしの横長帯で、左に濃い影色の縁を付ける
• 番号は花びら風の円の上に明朝の数字を重ねる

Components

• ミントのお試しCTA（button-primary）: 幅いっぱいのピル型。左に白い丸の再生アイコン、大きな白文字の下に小さな補足を入れる
• オファーカード（offer-block）: 淡ピンク地に明朝の見出し、商品とおまけの切り抜き写真、送料バッジ、大きな価格、条件タグ、CTA、注釈を順に並べる
• 送料・配送バッジ（price-badge）: 上段はピンク枠に白地、下段はピンク地に白文字の2段ボックス
• 円形特長バッジ（round-badge）: 白〜生成りの正円に、明朝で短い特長を2行で書く。3つ横に並べる
• 悩み枠ボックス（worry-box）: 濃いローズ地の上に、白の細線枠と白文字で短い悩みを並べる
• 原因見出し帯（heading-band）: ワインレッドの横帯に白文字を中央揃えで置く
• こだわり番号（number-petal）: ピンクの花びら風の円に、ゴールドの明朝数字と手書き風の小ラベルを重ねる
• お客様の声の吹き出し（voice-balloon）: 白地にピンク枠の角丸カード。ピンクの小見出し、本文、年代を入れ、下に女性のシルエットを添える
• 濃ピンクの吹き出しラベル（pill-label）: 濃いピンクのピル型に白文字。下に三角のしっぽを付けて見出しの上に置く
• 限定告知バー（top-bar）: 最上部の赤い帯に白太字で期間限定を告知する

Do's and Don'ts

Do - 花びら・しずく・光のぼかしで、淡い透明感のある背景を作る - 見出しは明朝、キーワードだけピンクにする - オファーブロックは同じデザインで何度も繰り返す - CTAだけをミントグリーンにして補色で目立たせる - 訴求のたびに※注釈を小さく添える

Don't - CTA以外にミントグリーンを使わない - 太いゴシックの見出しを多用しない - 純粋な赤や原色の青で画面を強くしない - 白カードに濃い影を付けない - 濃いワインレッドの地を悩みと原因のパート以外に広げない

Page Structure

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

1. 限定告知バー（期間限定で急ぐ気持ちを促す）: 赤い帯に白太字を置く
2. ファーストビュー（商品の世界観と主な特長を伝える）: ローズの写真を背景に、大きな明朝キャッチと商品の切り抜き、縦書きのサブコピー、円形バッジ3つを配置する
3. オファー（初回価格を示して申込へ誘導する）: 淡ピンク地に商品とおまけ、送料バッジ、大きなピンクの価格、条件タグ、ミントCTA、注釈を並べる
4. 悩みの提起（肌の悩みに共感する）: 濃いローズ地に明朝の白見出しを置き、悩みの白枠ボックスを2×2で並べる
5. 原因の説明（悩みの原因を図で示す）: V字の境界の下で、ワインレッドの見出し帯と肌断面のイラストを交互に置く
6. 解決成分（成分の働きを示す）: 青白い地に明朝見出しを置き、しずくを中心にピンクの円5つを五角形に配置する
7. 新商品の紹介（限定品の発売を告知する）: 花びらの写真と大きなピンクの明朝コピーを置き、商品写真へつなげる
8. こだわり3つ（商品の特長を深く伝える）: 番号付きで、明朝の見出し、写真、イラスト付きの枠ボックスを縦に積む
9. 使い方ステップ（手軽さを示す）: 淡ピンク地に写真付きのステップカードをスライダーで並べる
10. 無添加の訴求（安心感を出す）: ピンクのぼかし地に、斜線入りの白い円を3つ＋2つで並べる
11. 利用シーン（朝と夜の使い方を見せる）: モデル写真を2列に並べ、チェックリストの白ラベルを重ねる
12. お客様の声（共感と信頼を得る）: ローズ写真のヘッダーの下に、吹き出しカードのスライダーを置く
13. セット内容と使い方（おまけの価値を伝える）: STEP番号、大きな明朝の動詞、円形の手元写真、矢印でつなぎ、ピンク枠の商品カードを並べる
14. ブランド紹介（企業としての信頼を示す）: 青白い地に細い線の枠を引き、工場の写真と無添加の丸を置く

Imagery

• ピンクのバラや花びらを、ソフトフォーカスで明るく撮る
• 商品は透明感のある切り抜きにして、花びらと重ねる
• 手元のテクスチャーやしずくは円形にトリミングする
• 女性のイラストは細い線画に淡いピンクで塗る
• モデルは自然光の白背景で、穏やかな表情を撮る
• 肌断面などの図は淡ピンクと水色のフラットなイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨。本文の幅は最大640px前後で中央に寄せる
• 背景の写真やグラデーションは全幅に広げる
• 悩みボックスや無添加の丸は PC で4〜5列に広げる
• オファーブロックは写真と価格・CTAの2カラムにしてもよい
• CTAは最大幅480px程度にとどめる

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