DESIGN.md — 金×ボルドーの高濃度美容液LP（Golden Serum Luxury Beauty LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、力強い・インパクト
• キーワード: 金色のしずく・明朝の大見出し・ボルドーのオファー枠・成分の球体ビジュアル・注釈多め
• 地の質感: 艶のある液体・泡・光沢のCG質感に、グレーの石目や白タイルの背景を組み合わせる
• 形: 円形の成分バッジ、角丸の白カード、直角の帯ラベル、ピル型CTA
• 温度感: 金とオレンジ中心の暖色。悩みパートだけ灰色と濃紺で冷たくする

Colors

• 地はグレー・白・写真背景で回し、オファーだけボルドーの濃い地で囲む
• 価格と割引率は赤だけで強く見せる
• 主CTAは緑1色に固定し、上に黄色の小ラベルを重ねる
• 成分は金オレンジと紫の2色で色分けし、全編で同じ色を使う
• 悩みパートだけ灰色と濃紺に落とし、解決パートとの明暗差をつける
• 見出しの一部に金のグラデーションや虹色の文字を使う
• button-primary は文字 #FFFFFF × 背景 #2CC24D のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1F8836、4.53:1）を使う。

Typography

• 見出しは明朝を基本にして、本文はゴシックにする
• キーワードだけ文字を大きくし、助詞は小さくする
• 縦書きの明朝見出しを写真の余白に置く
• ※の注釈番号は見出しの右上に小さく付ける
• 価格の数字は明朝の赤で特大にする
• 背景には薄い英字の透かしを大きく敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円形バッジは 3 列で並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 0px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは隙間を空けずに写真の背景どうしを直接つなぐ
• カードは左右に約5%の余白を取って中央に置く
• オファーブロックは同じものを2〜3回くり返す
• 特典は番号ラベル＋テキストの横並びを罫線で区切る
• 注釈は各ブロックの末尾にまとめる

Elevation & Depth

• 白カードには淡いドロップシャドウを付ける
• SNS風の口コミカードは白枠で、少し影を付ける
• 成分の球体は光沢と反射を入れて立体的に見せる
• CTAボタンは下側に薄い影を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物と商品は角版で切り抜いて合成する。使い方は円形トリミング
• セクション境界: 直線で切り替える。一部は下向きの三角や斜めの境界
• 成分の効果は細線の円形バッジで示す
• 帯ラベルは角丸にせず直角にする
• 成分の紹介は大きな角丸の縦長パネルに収める
• 吹き出しは角丸の四角に小さな丸を付けた思考型にする

Components

• 緑の申込ボタン（button-primary）: ピル型の緑ボタン。右端に再生アイコンを置き、左上に黄色の小ラベルを重ねる
• 価格オファー枠（offer-box）: ボルドー地の上に白カードを置き、商品写真、取り消し線の通常価格、赤丸の割引率、特大の赤い価格を並べる
• 特典リスト（benefit-list）: 金罫線で囲んだクリーム地の枠に、ボルドーの番号ラベルと赤い特典名を縦に並べる
• 円形の効果バッジ（ingredient-badge）: 細い金茶の線の円に、効果を2行の短い言葉で入れる
• 成分の帯ラベル（band-label）: 白地に色文字、またはオレンジ地に白文字の直角の帯で成分名を示す
• 悩みの吹き出し（worry-bubble）: 濃紺グレーの角丸吹き出しに白文字の独白を入れ、肌のアップ写真の上に置く
• チェックリストカード（check-card）: 白カードにオレンジのチェック付きで悩みや利点を4行並べる
• Q&Aカード（faq-item）: 濃茶の地の上の白カード。金色のQと黒のAを罫線で区切る
• SNS風口コミ（sns-review）: 白枠の写真にハートと吹き出しのアイコンを付け、上にグラデーションの帯で感想を置く

Do's and Don'ts

Do - 金の液体・しずく・泡のビジュアルをどの章にも入れる - 見出しは明朝体で大きく、キーワードを強調する - オファー枠は同じデザインのままページ内で複数回出す - 成分ごとの色（金オレンジと紫）を最後まで統一する - 悩み→原因→解決の順に、背景の明暗を変えて流れを作る

Don't - CTAを緑以外の色にしない - 価格の赤を装飾に流用しない - フラットな単色イラストだけで構成しない - 見出しを細いゴシックだけにしない - オファー枠の濃い地を他のセクションで使わない

Page Structure

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

1. ファーストビュー（権威付けと主成分を一目で伝える）: 上部に監修者の帯、主成分の帯ラベル2つ、縦書きの巨大明朝コピー、女性モデル、商品、成分のピラミッドを重ねる
2. 監修者紹介（信頼性を高める）: 白衣の人物写真、ロゴ、金茶の肩書き帯、白カードの紹介文、動画のサムネイル
3. オファー・CTA（早い段階で購入へ誘導する）: ボルドー地の白カードに価格と割引、緑のピルボタン、注釈
4. 独自技術（製法の優位性を示す）: 金色の液体背景に白い明朝の大見出し、縦書きの濃紺ラベル、商品のアップ
5. お客様の声（実感を伝える）: 濃茶の地にSNS風の写真カードを2列と1列で並べる
6. 悩みの提起（共感を得る）: グレー地に悩みワードの円を浮かべ、チェックリストカード、濃紺の見出し帯を置く
7. 悩みのストーリー（危機感を高める）: 肌のアップ写真の上に吹き出しを並べ、縦書きの独白を入れる
8. 解決・独自製法（商品を解決策として示す）: 白地に英字の透かしと黒い明朝の大見出し、金の液体と商品写真
9. 成分の詳細（成分ごとの効果を説明する）: 大きな角丸パネルに番号の透かし、成分の写真、円形の効果バッジを置く
10. 安心・処方（安全性と使い心地を示す）: フリー表記の円バッジ、ポイントのチェックカード、香りの写真
11. 使い方（使用手順を示す）: 白タイルの背景に円形の線画イラストと手書き風のStep番号を千鳥配置する
12. よくある質問（不安を解消する）: 濃茶の地に白いQ&Aカードを縦に積む
13. 定期の流れ・特典（購入条件を明確にする）: 回数ごとのカードとトラックのアイコン、ボルドー地の特典リスト
14. 最終CTA（申込を締めくくる）: 上部と同じオファー枠と緑ボタンを置く

Imagery

• 金色の美容液のしずく・泡・液体のうねりを強い光沢で写す
• 成分は光る球体（金オレンジと紫）のCGで表す
• モデルは素肌感のある女性の横顔やバストアップで、背景をぼかす
• 悩みパートは毛穴やくすみの肌アップと生活シーンを、彩度を落として見せる
• 使い方は細い線画の女性イラストを淡クリームの円に入れる
• 香りは柑橘とバラの実写で爽やかに見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP の縦長デザインを中央の幅450〜750px程度に収め、左右は背景色で埋める
• セクションごとの全幅背景はPCでも画面端まで伸ばす
• 円形バッジはPCで4〜5列に広げてもよい
• 見出しの文字サイズはSPの約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 行書くと起動時に読み込まれる。