DESIGN.md — シャンパンゴールド×水光の薬用美容液 LP（Champagne Gold Pharma Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: シャンパンゴールド・水光・水滴・明朝の大見出し・成分の科学図解・ピンクの価格訴求・注釈多め
• 地の質感: 水面の反射や光の粒を写真背景に使い、ゴールドはグラデーション帯で艶を出す
• 形: 四角い帯見出しと白カード、成分を表す円形の光沢バッジ、ピル型CTA
• 温度感: やや暖色。白・ベージュ・ゴールドが主で、悩みパートだけ青みグレーで冷たくする

Colors

• 白とアイボリーを地にし、ゴールドは見出し帯・ラベル・数字に限って使う
• 価格と申込のセクションはゴールド地の上に白カードを置き、目立たせる
• 悩み提起と原因説明だけはスレートグレーと青灰色で暗く冷たくし、解決パートとの対比を作る
• ピンクは価格・割引率・主CTAだけに使う
• 単品購入ボタンは灰色のグラデーションにして、定期コースより弱く見せる
• FAQは灰青のバーで落ち着かせる
• button-primary は文字 #FFF6F4 × 背景 #CC6A74 のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C14A56、4.51:1）を使う。
• button-secondary は文字 #FFF6F4 × 背景 #9DADBB のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#5E7487、4.57:1）を使う。
• label-band は文字 #F7FDFE × 背景 #C29A43 のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8D6F2E、4.6:1）を使う。
• point-number は文字 #C29A43 × 背景 #FEFEFE のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8D6F2E、4.56:1）を使う。
• price-card は文字 #B8656F × 背景 #FEFEFE のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B35B65、4.53:1）を使う。
• guarantee-frame は文字 #C29A43 × 背景 #F4F5F7 のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8D6F2E、4.53:1）を使う。
• faq-bar は文字 #F7FDFE × 背景 #9DADBB のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#5E7487、4.54:1）を使う。

Typography

• 大見出しは明朝。要点の語だけを大きく、助詞を小さくする
• 説明・リード・ラベルはゴシックの太字で読みやすくする
• 番号やセクション名の英字は細いセリフ体をゴールドで置く
• 価格の数字はゴシック極太のピンクで特大にし、税込などは小さく添える
• 注釈は※番号で本文に付け、セクション末に9px程度でまとめる
• 本文中の強調語はゴールド色の太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分バッジや悩みは 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに背景の色や写真を切り替えて区切る
• 白カードは左右に6%ほどの余白を取り、地の色を見せる
• 特長は point 番号・ゴールドの帯ラベル・明朝見出し・図解・本文の順に縦に積む
• こだわりは丸い写真と番号テキストを左右交互に並べる
• 価格ブロックは中盤・FAQ後・末尾の3回繰り返す
• 見出しの上下に小さな接続語（『そこで』など）と矢印線を置き、流れをつなぐ

Elevation & Depth

• 白カードはごく薄い影（0 4px 16px rgba(0,0,0,0.06)）
• 主CTAは柔らかいドロップシャドウとグラデーションで立体感を出す
• 成分の円形バッジは白〜パールのグラデーションと薄い影で真珠のように見せる
• 影は弱くし、地の色の差で階層をつくる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 成分素材とビフォー画像は円形、モデル写真は横長の角版か背景に溶け込ませる
• セクション境界: 基本は直線で切り替える。解決パートの導入だけV字（下向き山形）で区切る
• 見出し帯は角丸なしの長方形
• CTAは完全なピル型で、右端に丸い矢印アイコン
• お客様の声は角丸8pxの白カードと円形アバター
• 保証は四隅にゴールドの三角を置いた額縁風の枠
• 割引率は円形のピンクバッジ

Components

• 主CTAボタン（button-primary）: くすみピンクのグラデーションのピル型。白い太字と右端に丸い矢印
• 単品購入ボタン（button-secondary）: 灰色のグラデーションのピル型。主CTAと同じ形
• ゴールド帯ラベル（label-band）: 見出しの上に置く横長のゴールド帯。白抜き文字（ほぐす・満たすなど）
• point番号の半円タブ（point-number）: 白い半円にpointの小字と大きなゴールドのセリフ数字
• 成分の円バッジ（ingredient-orb）: パール調の円に効果名を太字で、有効成分名を小さく入れる。商品画像の周りに配置
• 価格カード（price-card）: ゴールド地の白カード。商品写真、通常価格、定期初回の矢印ラベル、特大ピンク価格、割引率の円、送料無料の枠、CTA、注意事項
• 返金保証の額縁（guarantee-frame）: アイボリー地にゴールド細線の枠。上にゴールドのピル型見出し、中央に明朝の大きな保証文字
• お客様の声カード（voice-card）: 白カード＋線画の女性アバター。VOICE番号をセリフ体で付け、要点をゴールドの太字にする
• FAQアコーディオン（faq-bar）: 灰青のバー。左に白丸のQ、右に下向きの山形矢印
• 悩みのチェック見出し（worry-tag）: 濃いグレーの角丸ラベルにチェック円と悩み語。下に円形の肌写真

Do's and Don'ts

Do - ゴールドはグラデーションや帯で艶を出し、要所だけに使う - 明朝の大見出しで、キーワードを助詞より大きくする - 成分の働きは肌の断面図イラストで見せる - 価格・保証・CTAはセットで複数回置く - 注釈は※番号で本文と対応させ、小さくまとめる - 悩みパートは暗い色、解決パートは明るい水光の背景で対比させる

Don't - 原色の赤や青を広い面に使わない - ピンクを見出しや装飾に広げない（価格とCTAに限る） - 丸ゴシックや手書き書体で幼く見せない - ゴールド地の上に長い本文を直接置かない - 角丸の大きいポップなカードを多用しない - 強い影や太い枠線で重く見せない

Page Structure

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

1. ファーストビュー（効果・独自成分・割引を一目で伝える）: 明るい水光背景に女性モデルと商品。右側に縦書き明朝の大コピー、上部に割引バナー、下に円バッジ3つを×でつなぐ
2. 使用感・権威付け（テクスチャーと『初』の実績を印象付ける）: ゴールド地に手元の写真。白い額縁に特大の明朝文字、周りに成分の円バッジ
3. SNSの評判（話題性を示す）: アイボリー地に吹き出し風の引用、ハッシュタグ、投稿写真を3列×2段のグリッドで並べる
4. 悩みの提起（年齢による悩みに共感する）: スレートグレー地。チェック付きのラベルと円形写真を2×2で並べ、最後に問いかけの見出し
5. 原因の説明（ホルモン・肌の仕組みで説得する）: 青灰色の地に白カード。グラフや肌断面のイラストと、矢印つきの段階見出し
6. 独自成分の紹介（解決策として成分を示す）: V字の区切りからイエロー系の光沢地へ。ゴールド帯の見出しとピペット・球体の写真
7. 3つのこだわり（原料・製法の信頼を示す）: 白カードの中に丸い素材写真とセリフ数字01〜03を左右交互に配置
8. 商品の誕生（商品の効果を総まとめする）: 水光背景の中央に商品。周りに効果の円バッジを放射状に並べ、下に2要素の掛け算
9. 3つのポイント（効果を一つずつ説明する）: point番号タブ、ゴールド帯の動詞、明朝見出し、断面イラスト、本文の順に繰り返す
10. オファー（価格）（定期コースへの申込）: ゴールド地の白い価格カードとピンクのCTA。続けて返金保証の額縁
11. 開発背景・安心（企業の信頼・無添加・国内製造・環境配慮を示す）: 淡い青の科学的な写真背景。開発者の声、斜線入りの円で無添加5項目、ラボ写真、環境の数値
12. お客様の声（実感の声で背中を押す）: ゴールドの光の背景に線画アバター付きカード5件。大小をずらし、左右交互に配置
13. 使い方（使う手順を示す）: 3ステップのカード、番号付き写真と説明、2通りの使い方を帯見出しで分けたカード
14. よくある質問・特典・最終CTA（不安を解消し、購入を決めてもらう）: 灰青のFAQバー、月桂樹付きの特典リスト、定期と単品の価格カード、返金保証で締める

Imagery

• 白〜淡い水色の水面・水滴・光の粒を背景写真にする
• 30〜50代の女性モデル。目を閉じて頬に手を添える、明るく柔らかな光の写真
• 商品はアイボリーのボトルを白背景で撮り、詰め替えパウチと並べる
• 肌の断面図はピンク・ベージュのフラットなイラストで、成分を球体で表す
• お客様のアバターはベージュの淡い線画の女性イラスト
• 成分素材（大豆など）は円形に切り抜いたクローズアップ写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP 版の幅で表示し、左右に淡い背景を敷くのを推奨
• PC で広げる場合、悩み・成分バッジ・SNSグリッドは列を増やしてよい
• 縦書きのFVコピーはPCでは写真の右半分に置いて保つ
• 価格カードはPCで写真と価格を左右2カラムにしてもよい
• 注釈の文字はPCでも11px以上に保つ

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