DESIGN.md — 青×ローズピンクの明朝訴求型スキンケアLP（Blue and Rose Feminine Acne Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 情報量多め・訴求型、上品・高級、やさしい・柔らかい、清潔・爽やか
• キーワード: くすみブルー帯・ローズピンク強調・明朝の大見出し・花びら装飾・繰り返すオファー枠・通販型
• 地の質感: 白地に淡い水色・薄ピンクのグラデーションと花びら・水彩風の柔らかい装飾。写真は明るく高キー。
• 形: 四角い帯見出しと角丸小さめのカード。CTAは角丸の緑ボタン、円形の数字バッジとメダル。下向き三角で流れをつなぐ。
• 温度感: やや涼しげな青に、ピンクで温度を足した中間〜やさしい温度感

Colors

• 地は白を基本に、淡い水色・薄ピンクの面でセクションを区切る
• セクション見出しは青の帯＋白文字で統一する
• 数字・キーワードはローズピンクで大きく強調する
• 購入ボタンだけ緑にして他の色と役割を分ける
• 割引率はマゼンタの円や四角、保証はゴールドのメダルで示す
• 本文はグレーで、黒は見出しにだけ使う
• button-primary は文字 #FFFFFF × 背景 #2E9A3A のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#298833、4.5:1）を使う。
• band-heading は文字 #FFFFFF × 背景 #537DBB のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4C77B8、4.53:1）を使う。
• guarantee-medal は文字 #02449B × 背景 #C9A44A のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#D2B367、4.51:1）を使う。

Typography

• 情緒的な大見出しは明朝、説明と帯見出しはゴシックで使い分ける
• キーワードだけ文字サイズを1.5〜2倍にしてピンクにする
• 数字は欧文セリフ体のイタリック調で大きく見せる
• 価格は太字で大きく、通常価格は小さく取り消し線
• 本文は14px、行間1.8で詰めない
• 注釈はブロックの右下に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは写真と文の左右交互配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション間は下向き三角や矢印でつなぐ
• オファー枠をページ内に4回ほど繰り返す
• お客様の声は顔写真の丸と文を左右交互に並べる
• 見出しは中央揃え、本文ブロックは左揃え
• 根本原因は番号付きの3ブロックで図解する

Elevation & Depth

• カードは薄いドロップシャドウで浮かせる
• オファー枠は薄グレー線で囲む
• CTAボタンは下側に濃い緑の影をつけて立体的にする
• 影は全体的に控えめにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 顔写真は円形、商品は切り抜き、イメージ写真は四角
• セクション境界: 直線の切り替えと下向き三角、花びらのフェード
• 帯見出しは角丸なしかごく小さい角丸
• 割引・比率は円形バッジ
• 吹き出しで悩みや声を表す
• 保証は月桂樹付きの金メダル型

Components

• 購入CTAボタン（button-primary）: 緑の角丸ボタン。左に小さなセット表記、右に再生三角。
• オファー枠（offer-box）: 濃紺帯の見出し、商品切り抜き、割引バッジ、価格、CTAをまとめた枠。
• 青帯見出し（band-heading）: 横長の青帯に白文字。下に明朝の大見出しを続ける。
• 割引バッジ（discount-badge）: マゼンタ地に白抜きで割引率を大きく表示。
• 返金保証メダル（guarantee-medal）: 金色の月桂樹メダルに日数を大きく入れる。
• お客様の声カード（voice-card）: 封筒アイコンとピンク見出し、名前と利用歴、本文の構成。
• 番号付き特長カード（step-card）: 大きな数字と英字の装飾、明朝のタイトル、写真を並べる。
• チェックリスト（check-list）: ピンクのチェックアイコン付きでメリットや悩みを3行で並べる。

Do's and Don'ts

Do - 強調する語はピンクの明朝で大きくする - オファー枠を間隔をあけて何度も入れる - 数値の実績は円形バッジで見せる - 淡い水色とピンクの面を交互に使う - 花びらや水彩のぼかしで柔らかさを出す

Don't - CTAを緑以外の色にしない - 濃い色の背景を広く使わない - 見出しをすべてゴシックにしない - 写真を暗く彩度低めにしない - 注釈表記を省かない

Page Structure

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

1. ファーストビュー（悩みと解決を一目で示す）: 女性の横顔写真の右配置、明朝の大キャッチ、商品とバッジ、緑CTA
2. 悩みの提起（共感を得る）: ラベンダー地にチェック付きの悩み3行
3. 実績とお客様の声（満足度で信頼を作る）: 大きなピンクの数字、丸顔写真と声の左右交互配置
4. メディア・SNS掲載（社会的証明）: 雑誌の扇形コラージュ、SNS投稿4枚の横並び
5. 返金保証（購入の不安を下げる）: 青帯と金メダルで保証期間を見せる
6. オファー（購入を促す）: 濃紺帯、商品、割引、価格、緑CTA、特典一覧
7. 悩みの深掘り（問題を明確にする）: 線画イラストと吹き出しを周りに配置
8. 原因の解説（論理的に納得させる）: 青帯見出しと番号付き3ブロックの図解
9. 解決アプローチ（商品の働きを伝える）: 大きな数字の番号付きカードを3つ縦に並べる
10. サポート体制（安心感を与える）: オペレーター写真と吹き出しの質問例
11. 成分ストーリー（原料のこだわりを伝える）: 全面の花の写真と白い半透明ボックスの本文
12. 使い方ステップ（使う手順を示す）: Step数字の欧文、商品切り抜き、成分タグ
13. 定期便のメリット（定期購入へ誘導する）: 比率バッジとチェックリスト、メリットアイコン3つ
14. クロージング（最後の後押し）: 明朝の大コピーと最後のオファー枠

Imagery

• 明るい白背景で撮った女性の肌アップ写真
• 商品は白と青のボトルの切り抜きを並べる
• ピンクのバラの花びらが舞う装飾
• 線画風の女性イラストで悩みを描く
• 肌の断面などは簡単な図解イラスト
• 顔写真は円形に切り抜く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約1000px幅の固定カラムで、左右はグレー地
• SPは1カラムで写真と文を縦に積む
• 左右交互の声カードはSPで写真を上に置く
• メディアやSNSのグリッドはSPで2列にする
• CTAボタンはSPで横幅いっぱいにする

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