DESIGN.md — レモンイエロー×白の弾けるスキンケアLP（Lemon Yellow Pop Skincare Cleansing LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: レモンイエロー・白地・黒ラベル・泡・水滴・雑誌風タイポ・クーポン訴求
• 地の質感: 白〜ライトグレーの清潔な地に、水滴・オイル滴・泡の写真素材と黄色の紙吹雪を散らした透明感のある質感
• 形: 黄色の正円バッジ、黒の四角ラベル、斜めにカットした帯、点線のクーポン枠
• 温度感: 明るくフレッシュでやや暖かい。黄色の元気さを白とグレーで中和

Colors

• 地は白とライトグレーを交互に使い、黄色は見せ場セクションの全面背景に限定する
• 強調語は黄色のマーカー下線か黄色の帯で示す
• ラベル・番号・小見出し帯は黒地×白文字で締める
• 保湿関連は水色、洗浄関連は黄色と色で意味を分ける
• CTAだけ緑のグラデーション＋光沢で他と区別する
• 黄色面の上の文字は必ず黒にする
• button-primary は文字 #FFFFFF × 背景 #3FB887 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2D8561、4.53:1）を使う。

Typography

• 大見出しは明朝とゴシックを混在させ、キーワードだけ2倍のサイズにする
• 数字（価格・%・順位）は極太で3倍程度に拡大する
• 英字の筆記体を見出しの左上に斜めに添える
• 強調語には黄色の太マーカーを引く
• 本文は13px前後、行間1.8でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、成分や声は 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅背景で区切り、中身は左右16pxの余白
• 商品ボトル写真を右寄せに置き、左に見出しを重ねる
• クーポン・特典・価格ブロックをページ中盤と終盤でくり返す
• 特典は黒の番号タグ＋白カードを縦に5段積む
• 声は写真と黒吹き出しを左右交互に配置

Elevation & Depth

• カードは基本フラットで細い線枠
• CTAボタンのみ光沢とドロップシャドウ
• 円形バッジは軽い影で浮かせる
• 雑誌表紙は傾けて重ね影をつける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き、人物は角なし矩形か斜めカット
• セクション境界: 直線の切替が基本、一部斜めカットとV字
• バッジは黄色の正円
• ラベルは角なしの黒帯
• クーポンは点線＋ハサミのチケット型
• CTAは角丸12px程度の横長

Components

• 申込CTAボタン（button-primary）: 緑グラデ＋光沢の横長ボタン。左上に黄色の斜めラベルを重ねる
• 黄色の円バッジ（badge-circle）: 効果や役割を2〜4文字で入れた正円を散らす
• 黒帯ラベル（label-black）: 見出し上や番号に使う黒地白文字の帯
• クーポンチケット（coupon-ticket）: 黄色地に白い角丸カード、点線とハサミで切り取り線、コード入力枠
• 特典リスト（benefit-row）: 左に黒の番号タグ、右に白枠の特典文を並べた行
• 価格ブロック（price-block）: 取り消し線の通常価格と黄色マーカー上の極太特別価格
• お客様の声（voice-card）: 線画アイコンと年代、本文の強調部に黄色マーカー
• 保証案内アコーディオン（accordion-note）: 細い線枠に下向き矢印の開閉ボックス
• POINT見出し（point-header）: 黒帯に右寄せで英字ラベルと大きな数字

Do's and Don'ts

Do - 黄色は全面背景かマーカーとして大胆に使う - 数字と価格は極端に大きくする - 水滴・泡・紙吹雪で透明感と祝祭感を足す - 黒ラベルで情報の区切りをはっきりさせる - 注釈は小さいグレー文字で各ブロック下に置く

Don't - 黄色の上に白文字を置かない - くすんだ黄土色にしない（蛍光寄りを保つ） - 角丸を大きくしすぎてかわいく寄せない - CTA以外に緑を使わない - 暗い背景を多用しない

Page Structure

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

1. ファーストビュー（商品と主効果を一目で伝える）: 白地に縦書き明朝の大見出し、右に商品ボトル、下に特長の黄色タグ4つ
2. キャンペーン・CTA（初回価格とクーポンを提示）: グラデ帯の価格バナーと緑CTA、黄色の効果バブル3つ
3. 実績・受賞（ランキング1位で信頼付け）: 紙吹雪背景に赤の大数字、金の月桂冠メダル3つ
4. 商品紹介（新しい使い方と香りを伝える）: 黄色全面に商品と柑橘・ハーブの写真、チェックリスト
5. 販売実績・SNS（店舗とSNSの評判）: 店舗写真、黒の爆発吹き出し、投稿の3列グリッド
6. メディア掲載（第三者評価）: 受賞ロゴと傾けた雑誌表紙の2段並び
7. お客様の声（使用感の共感）: 線画アイコン＋マーカー強調の本文を縦に並べる
8. 処方・理由（2層処方の根拠）: 黄と水色の円で2要素を対比、層の図解
9. クーポン・特典・価格（購入を後押し）: チケット型クーポン、5段の特典、価格とCTA、注釈
10. 返金保証（不安解消）: ゴールドの飾り罫で挟んだ明朝見出しとアコーディオン
11. 3つのポイント（成分の詳細）: Q&A導入、黒帯POINT見出し、図解とグラフ
12. 成分・フリー表示（安心感）: 黒ラベル成分名、×印の3×3グリッド
13. 使い方（手順を示す）: STEP番号と斜線、線画イラスト付きの3段
14. 開発者の想い・環境配慮（ブランドの共感）: 黄色地に罫線付き手書き風文章、森の写真セクション

Imagery

• 商品ボトルは白〜明るいグレー背景で切り抜き、軽い影
• 黄色いオイル滴・水滴・泡を周囲に浮かべる
• 金と黄色の紙吹雪で祝祭感を出す
• 人物は白背景で頬に手を当てた明るい笑顔のアップ
• 成分は柑橘・花・ハーブの実物写真
• 手順や悩みは細い線画イラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約750px幅のSPデザインを置く想定
• 左右の余白は白かライトグレーで埋める
• PCでは投稿や成分のグリッドを4列に増やす
• 大見出しは最大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 行書くと起動時に読み込まれる。