DESIGN.md — オレンジ×水色の明るい美容液 LP（Bright Citrus and Aqua Skincare Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、ポップ・元気、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 成分訴求・円形バッジ・大きな数字・曲線区切り・水面テクスチャ・色面切替
• 地の質感: 水面の波紋写真や白背景の人物写真を使う。フラットな色面と合わせて、みずみずしい質感にする。
• 形: 正円バッジ、大きな弧のセクション境界、白い角なしカード、ピル型ラベル。
• 温度感: 暖色のオレンジ・山吹と寒色の水色を交互に使い、明るく中間的な温度感にする。

Colors

• 地は白と生成りグレーを基本にする。訴求ブロックはオレンジ・山吹・水色の色面に切り替える。
• POINT ごとに地色を変え、山吹と水色を交互に置いてリズムを出す。
• 悩み提起だけは黒地にして空気を切り替える。
• 成分名の見出し帯はティール・水色・紺の3色で区別する。
• 強調はオレンジ地＋白文字のマーカーか、淡黄のマーカーで行う。
• ランキング実績は金色に限って使う。
• point-badge は文字 #5FCCE9 × 背景 #FEFEFE のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#15809C、4.53:1）を使う。
• benefit-circle は文字 #FFFFFF × 背景 #2A9993 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#24837E、4.54:1）を使う。
• ingredient-band は文字 #FFFFFF × 背景 #2A9993 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#24837E、4.54:1）を使う。
• ingredient-button は文字 #FFFFFF × 背景 #2A9993 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#24837E、4.54:1）を使う。
• quote-block は文字 #FFFFFF × 背景 #5FCCE9 のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#15809C、4.57:1）を使う。
• ranking-card は文字 #C7B14B × 背景 #FEFEFE のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#857529、4.55:1）を使う。

Typography

• 見出しは太いゴシックで2行に収め、中央揃えにする。
• 数字は欧文の極太で巨大にし、横に漢字を縦組み2文字ずつ添える。
• 本文は字間を広めに取り、行間は1.9前後にする。
• 強調語はマーカーか色地反転で示す。
• 注釈には※を付けて小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円バッジは 3〜4 列、成分写真は 2〜3 列で並べる。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央揃えで、見出しの上に POINT の円バッジを置く。
• 白カードは左右に約7%の余白を取って色面の上に置く。
• 人物写真は全幅か片側に寄せて裁ち落とす。
• セクション間に縦の細線や点を置いて流れをつなぐ。
• 無添加の項目は円形アイコンを4列×2段で並べる。

Elevation & Depth

• 影はほぼ使わない。フラットな色面の重なりで階層を作る。
• 商品ボトルの写真だけに自然な落ち影を付ける。
• カードは白地のみで区別し、枠線も付けない。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は角なしで全幅に裁ち落とす。成分の素材写真は正円で切り抜く。
• セクション境界: 大きな弧（楕円カーブ）で色面を切り替える。
• 成分・効果の訴求は白抜きの正円や白線の円で囲む。
• 見出し帯は角なしの長方形にして、カードの上端に重ねる。
• 成分ボタンは角丸10px前後にする。
• 引用は大きな「“」記号で挟む。

Components

• POINT 円バッジ（point-badge）: 白地の正円の中に POINT と番号を入れる。色面と弧の境界に重ねて置く。
• 効果の円（benefit-circle）: ティールの塗り円に白文字で効果語を入れ、3つ並べる。
• 成分見出し帯（ingredient-band）: 白カードの上端に重ねる色帯。白文字で成分の分類名を入れる。
• 成分ボタン（ingredient-button）: 角丸の塗りボタンで、補助成分の名前を2つ並べる。
• 無添加アイコン（free-from-icon）: 色面の上に白線の円と斜線を描き、中に白文字で項目名を入れる。
• 大数字ブロック（big-number）: 巨大な％数字の左右に縦組みの漢字2文字を添える。
• 悩みチェックリスト（worry-list）: 黒地上のブラウン枠に、禁止記号と下線付きの白文字で悩みを4行並べる。
• お客様の声の引用（quote-block）: 大きな水色の引用符で挟み、下に水色帯と商品写真を置く。
• 実績カード（ranking-card）: 白カードに金の王冠と巨大な No.1 を入れ、金色のL字枠を角に配置する。

Do's and Don'ts

Do - 暖色の色面と水色の色面を交互に配置する。 - 成分・効果は円形の部品でまとめる。 - セクション境界は大きな弧にする。 - 強調語にはマーカーを引く。 - 商品ボトルは白地か水面の写真の上に置く。 - 注釈は小さく丁寧に添える。

Don't - 濃い影や立体的なボタンは使わない。 - 原色の赤や紫は加えない。 - 本文を色面の上に長く直接置かない（白カードに入れる）。 - 角丸を大きくしすぎない。 - 明朝体を混ぜない。 - セクション境界をすべて直線にしない。

Page Structure

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

1. ファーストビュー（配合濃度と商品を一目で伝える）: オレンジの細帯に悩みを書き、水面写真の上に大数字・ボトル・効果の円3つを置く。
2. 成分の全体像（主要成分を一覧で見せる）: 人物写真の下のオレンジのグラデ面に、白円の成分と白枠の補助成分を並べる。
3. 無添加訴求（肌へのやさしさを示す）: 水色の地に白線の円アイコンを4列×2段で並べる。
4. 実績（ランキングの信頼を示す）: グレー地の白カードに金色の No.1 とシリーズ写真を入れる。
5. お客様の声（開発のきっかけを示す）: 引用符で挟んだ文と、水色帯・ボトルの組み合わせ。
6. ブランド紹介（理念を伝える）: 白い弧の中にロゴと本文を置き、淡黄のマーカーで強調する。
7. 悩みの提起（共感を得る）: 人物写真から黒地へつなげ、悩みチェックリストを置く。
8. 解決提示（商品を答えとして示す）: 水色の弧の見出しの下に、水面写真・ボトル・マーカー付きの文を置く。
9. 特長1（主成分の効果を説明する）: 生成り地に人物写真・大数字・バリア機能の図解カードを置く。
10. 特長2（成分の組み合わせを説明する）: 山吹地にベン図状の白線円を描き、色帯見出し付きの白カードを3枚置く。
11. 特長3（使用感を伝える）: 生成り地に人物写真と、スポイトの写真を重ねて置く。
12. 特長4・品質（無添加と製造品質を示す）: 水色地に円アイコンを並べ、青帯見出しの白カードに工場の写真を入れる。

Imagery

• 水面の波紋を淡い水色トーンで撮った写真を背景に使う。
• 人物は白背景・自然光で、目を閉じて頬に触れるポーズにする。
• 成分素材（植物・テクスチャ）は寄りで撮り、正円で切り抜く。
• 商品ボトルは真上か正面から撮り、柔らかい影を付ける。
• 図解はフラットな淡いイラストで描き、矢印は青とピンクにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は SP 想定の縦長 1 カラムなので、PC では中央に 480〜750px 幅で配置する。
• PC では色面と弧の境界を全幅に広げ、内容は中央に寄せる。
• 円アイコンは PC でも 4 列を保つ。
• SP の見出しは 22〜24px、大数字は 64〜72px を目安にする。

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