DESIGN.md — 黄金イエロー×朱橙の韓国系美容液 LP（Golden Vitamin Glow Korean Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 情報量多め・訴求型、上品・高級、力強い・インパクト、清潔・爽やか
• キーワード: ビタミンイエロー・黄金の雫・明朝大見出し・朱橙の帯・石目ダーク・成分バブル
• 地の質感: 光沢のある黄金の液体、透ける泡、黒い石目テクスチャ、柔らかな白い光
• 形: 円形の写真・成分バブル、角丸の枠付きカード、斜めの吹き出し帯
• 温度感: 暖色寄り。黄色と朱橙が中心で、緑とピンクは成分を示す差し色

Colors

• 地は明るいグレー・白を基本にし、黒・石目のダーク地を 2〜3 回はさんでメリハリをつける
• 黄色は商品パッケージと実績・処方のセクション背景だけに使い、面で強く見せる
• 朱橙は一番伝えたい語の帯・文字・枠線に限って使う
• 緑は CICA 系、ピンクは保湿・成分系の差し色で、意味ごとに色を分ける
• カードは白か生成りの地に朱橙の枠線をつける
• emphasis-band は文字 #FFFFFF × 背景 #EA4B2B のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DE3716、4.5:1）を使う。
• circle-benefit は文字 #EA4B2B × 背景 #FDFDFD のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DE3716、4.6:1）を使う。
• ingredient-bubble は文字 #FFFFFF × 背景 #E2386F のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#E02864、4.51:1）を使う。
• speech-burst は文字 #FFFFFF × 背景 #EA4B2B のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DE3716、4.5:1）を使う。

Typography

• 大見出しは明朝で、キーワードだけ 1.5〜2 倍の大きさにする
• 強調語は朱橙で塗った帯に白抜きの太ゴシックで置く
• 数字は細い斜体の明朝や欧文を特大にしてアクセントにする
• 見出しの上に小さな英字ラベルを添える
• 本文は中央揃えで短く改行し、注釈は ※ で小さく添える
• 縦書きの明朝見出しを要所で使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円形カードを 2〜3 列に並べるところもある
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地の色かテクスチャを切り替えて区切る
• 見出しは中央揃え、図版は全幅で大きく見せる
• 悩み・効果は円形写真を 2 列のグリッドに並べる
• 成分は大小のバブルを散らして配置する
• 使い方は左に円形写真、右に STEP 番号と本文を置く

Elevation & Depth

• カードは影をほぼつけず、枠線で区切る
• 商品パッケージや雫には柔らかい落ち影をつける
• 成分バブルには光沢と内側の光をつける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 円形の切り抜きが中心。ほかに角丸の四角写真と、全幅で背景になじませる写真
• セクション境界: 直線の切り替えが基本。一部に斜めのカットや弧を使う
• タグは黒または金色の角丸の長方形にする
• 吹き出しは朱橙で塗り、斜めに傾ける
• 比較図は 2 つの四角を並べ、下にラベル帯をつける

Components

• 朱橙の強調帯（emphasis-band）: キーワードを朱橙のグラデーション帯に白抜きで置く
• 黒ピルのラベル（tag-pill）: 見出しの上に置く小さな黒いピル型のラベル
• 金色の悩みタグ（gold-tag）: ダーク地の上に悩みを短く 3 つ並べる金色のタグ
• 朱橙枠のカード（framed-card）: 生成りの地にオレンジの太枠をつけた説明カード
• 円形の効果バッジ（circle-benefit）: 白い円の中に、小さな説明文と朱色の明朝で効果を書く
• 成分バブル（ingredient-bubble）: ピンクの光沢のある球に成分名を入れ、大小を散らす
• 斜めの吹き出し（speech-burst）: 話題を転換するときに置く朱橙の斜め吹き出し
• STEP 行（step-row）: 円形写真と STEP 番号・細線・本文を横に並べる
• 月桂樹の実績表示（laurel-badge）: 累計の数字を月桂樹の装飾で挟み、黄色地に大きく置く

Do's and Don'ts

Do - 黄色と朱橙を主役にし、緑・ピンクは成分の意味づけだけに使う - 見出しは明朝の大小の差で強弱をつける - 雫・球体・泡のモチーフをセクションをまたいで繰り返す - 数値の根拠や範囲を示す注釈を ※ で小さく必ず添える - ダーク地の悩みセクションと明るい解決セクションを対比させる

Don't - 寒色を主役にしない - 四角く硬いボタンを並べない - 見出しをすべて同じ大きさのゴシックにしない - 強調色を本文全体に散らさない - 写真を円形や角丸にせず、雑に四角のまま並べない

Page Structure

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

1. ファーストビュー（商品の新しさと主成分を一目で伝える）: 明朝の特大コピーとモデルの顔、黄緑の液体の球、効果を書いた金色の球 3 つ、商品の箱
2. メディア・SNS実績（話題性で信頼を得る）: 黒地に金色の文字で掲載実績を見せ、雑誌の写真と SNS 投稿を 3 列に並べる
3. 累計実績（人気を数字で示す）: 黄色地に商品を散らし、月桂樹で挟んだ特大の数字を置く
4. 掲載誌一覧（権威づけ）: 明るい地で、雑誌の表紙を円環状に並べ、中央に朱色の見出しを置く
5. 悩みの提起（肌の悩みに共感してもらう）: 石目のダーク地に金色のタグと、円形写真 2×2 のグリッド
6. 成分の必要性と課題（必要性と、従来品の弱点を示す）: 朱橙枠のカードに強調帯を入れ、続けて断面イラストで弱点を見せる
7. 開発ストーリー（技術的な裏付けを示す）: 斜めの吹き出しで話題を転換し、縦書きの明朝見出しと研究の写真、比較カードを置く
8. お客様の声（専門家）（第三者の評価を見せる）: 全幅の人物写真に英字の筆記体を重ね、本文の要所を朱色で強調する
9. 特長・処方（浸透・効果・成分の詳しい説明）: 断面図、黄金の球、棒グラフ、効果の円形バッジ、比較図を、黄色地とグレー地を交互にして見せる
10. 配合成分（成分の豊富さを伝える）: ピンクの泡の地に、大小の成分バブルを散らす
11. 個包装・使用シーン（使いやすさを伝える）: 朱橙の枠のカードと、黒いラベルをつけた円形のシーン写真 3 枚
12. テクスチャ・香り・フリー処方（使い心地と安心感を伝える）: 縦書きの見出しと柑橘の写真、斜線を入れた円で 8 つの無添加項目を示す
13. 品質・お客様の声（品質の担保と実感の声）: 紺のダーク地に研究写真を並べる。続けてピーチ地に、金縁の円形顔写真と手書きの声を置く
14. 使い方・ブランドの由来（使う手順の理解と共感）: 黒帯の英字見出しのあと、アイコンで 3 工程を示し、STEP 行を続ける。最後に明朝のエッセイを置く

Imagery

• 透明感のある女性モデルの顔を寄りで撮る。目を閉じて手を添えるポーズ
• 黄金の液体の球・雫・泡を CG で光沢強めに描く
• 肌の断面を、淡いピンクのセルで描いたイラスト
• 葉や植物、柑橘などの自然素材を、ぼかして周囲に配置する
• 黒い石目やダークの雑誌風背景で、高級感を出す
• パッケージは黄色。斜めに置いたり散らしたりする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 750px 前後の SP デザインを置き、左右を淡い地色で埋めるのを推奨
• 円形写真のグリッドは PC では 3〜4 列に広げる
• 全幅の背景テクスチャは画面端まで伸ばす
• 特大見出しは PC で 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 行書くと起動時に読み込まれる。