DESIGN.md — シャンパンゴールドと明朝の医薬品美白 LP（Champagne Gold Pharmaceutical Skincare LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、信頼・誠実、やさしい・柔らかい
• キーワード: シャンパンゴールド・明朝見出し・欧文セリフの英字ラベル・図解カード・白とクリームのグラデーション
• 地の質感: 光沢を抑えたゴールドのグラデーションと、薄い幾何学の光の模様
• 形: 小さめの角丸カード、八角形の特長バッジ、細い線で囲った白ボタン
• 温度感: 暖色寄り。クリーム〜淡い金色で明るく温かい

Colors

• 地は白を基本に、セクションごとに白→クリーム→淡金のグラデーションを縦にかける。
• 特長と仕組みのセクションは淡いゴールドの帯に白カードを載せる。
• ボタンは茶金色の塗りか、白地に茶金色の細い枠の 2 種だけにする。
• 英字ラベルと番号はゴールド文字にして、見出しの黒と分ける。
• 赤・青などの鮮やかな色は図解の中だけで使う。
• 表の見出しセルはクリームで塗り、数値セルは白にする。
• button-primary は文字 #FDFAE8 × 背景 #91794C のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#856F46、4.59:1）を使う。
• button-outline は文字 #A88E5C × 背景 #FFFFFF のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#887349、4.57:1）を使う。

Typography

• 見出しはすべて明朝で中央揃え、字間を少し広げる。
• 見出しのすぐ下に大文字の英字ラベルをゴールドの欧文セリフで置く。
• 本文はゴシックの左揃えで、行間を広く取る。
• ステップ番号は細いイタリックのセリフ数字を大きく、淡い金色で置く。
• ボタン文字は太字ゴシックで 2 行まで。右端に小さな矢印を付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分表・ショップボタンは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 14px で、カードとボタンは横いっぱいに近い幅にする。
• セクションは見出し、英字ラベル、本文の順に中央揃えで始める。
• 図解カードは上にテキスト、下に横いっぱいの図解を置く。
• 成分の解説は丸い球のアイコンを 2〜3 列で並べ、下に短い説明を付ける。
• FAQ は上下の罫線だけで区切ったリストにする。

Elevation & Depth

• 影はほぼ使わず、面の色と細い線で階層を分ける。
• グラデーション帯の上の白カードは、ごく弱い影か影なしにする。
• SNS カードはグレー地に白い面を置くだけのフラットな作り。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品は切り抜きで白地に置く。人物は角丸なしで横いっぱいに使う
• セクション境界: 直線で区切り、背景グラデーションの色を切り替える
• ボタンは角丸 4px 前後の長方形にする。
• 特長は八角形の白バッジ 2 つを横に並べる。
• カードは角丸 8〜12px にする。
• FAQ の開閉アイコンは細い＋をゴールドで描く。

Components

• 茶金色の主ボタン（button-primary）: 茶金色の塗りに白の太字を 2 行まで入れ、右端に矢印を付ける
• 細枠のサブボタン（button-outline）: 白地に茶金色の細い枠、ゴールドの文字、右端に矢印
• 和欧 2 段見出し（heading-bilingual）: 明朝の見出しの下に、ゴールドの大文字英字ラベルを中央に置く
• 八角形の特長バッジ（badge-octagon）: 白い八角形に明朝の特長名を入れ、下にゴールドで成分名を書く
• グラデ帯上の特長カード（card-feature）: 淡い白カードにゴールドの明朝見出しと中央揃えの説明を入れる
• 番号付き図解カード（card-step）: 淡金のイタリック番号、明朝見出し、説明文、肌断面の図解、クリーム色の成分枠を縦に並べる
• 成分比較表（table-spec）: 見出しセルをクリームで塗り、ベージュの罫線で区切り、数値は中央揃えにする
• FAQ 行（faq-row）: Q 番号はグレーのセリフ体、質問は太字、右端にゴールドの＋。上下を罫線で区切る
• 販売店ボタンタイル（shop-tile）: 細枠の白タイルに販売店名を入れ、2 列に並べる。右下に外部リンクのアイコン

Do's and Don'ts

Do - ゴールドは彩度を抑えたシャンパン系にして、グラデーションは淡くかける。 - 見出しは明朝と英字ラベルの 2 段で統一する。 - 効能の説明には図解と『イメージ図』の注記を必ず付ける。 - 注釈や※書きを小さい文字で丁寧に入れ、信頼感を出す。 - 製品写真は白地に切り抜いて、余白を広く取る。

Don't - 黄色の強い金や、メタリックの光沢表現は使わない。 - ポップな丸ゴシックや太いディスプレイ書体は使わない。 - ピル型ボタンや強い影は使わない。 - 赤や青の強調色を図解以外で使わない。 - 売り込みの強いバッジや価格の煽りは入れない。

Page Structure

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

1. ファーストビュー（ブランドの印象を伝える）: 金のグラデーション地に人物写真を置き、明朝の縦書きキャッチと白抜きのロゴを重ねる
2. シリーズ紹介帯（対象の悩みと製品を示す）: 白地の左に明朝のコピー、右に製品パッケージ 2 点を置く。下にパンくず
3. シリーズ概要（悩みと処方の要点を説明する）: 白から金へのグラデーション地に、本文、八角形バッジ 2 つ、細枠ボタン、茶金ボタンを並べる
4. 製品ラインナップ（製品を選ばせる）: 白地に大きな製品写真を置き、それぞれの下に茶金色の CTA を置く
5. 特長（主力製品の強みを伝える）: 幾何学模様の入った淡金の帯に、ロゴと白カード 3 枚を縦に積む
6. 製品情報（成分表）（成分量を比べさせる）: クリームの見出しセルを持つ比較表を置き、下に注釈を入れる
7. 悩みの原因（原因を科学的に説明する）: グレー地に番号付きの白カードを 2 枚置き、肌の断面図解を入れる
8. しくみ（3 ステップ）（作用の流れを示す）: 淡金のグラデーション地に 01〜03 の図解カードを並べ、成分の球アイコンで説明する
9. よくある質問（不安を解消する）: 罫線リスト型のアコーディオンにする
10. 購入先（購入へ誘導する）: ベージュ地に販売店検索の大きなボタンと、販売店タイルを 2 列で並べる
11. 関連商品（他のシリーズへ回遊させる）: 製品群の切り抜き写真と細枠の view more ボタンを置く
12. SNS・フッター（フォローと企業情報を示す）: グレー地に白い SNS カードを 2 枚、丸いシェアアイコン、企業ロゴとリンクを置く

Imagery

• 人物は明るい肌の女性。白い服で、金色の背景にやわらかい光を当てて撮る。
• 製品は白とゴールドのボトルと箱を、白地に切り抜いて影は薄くする。
• 肌の断面図解は、クリームとピンクの細胞、金色のメラノサイト、斜めに入るオレンジの UV 線で描く。
• 成分はパステル色の光沢のある球で表現する。
• 特長の帯の背景には、半透明の白い多角形の光の模様を薄く敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では内容の幅を約 75% に絞り、中央に寄せる。
• PC の FV はキャッチ、人物、ロゴ、製品を横 1 列に並べる。
• PC では製品ラインナップと特長カードを 2〜3 列に横並びにする。
• PC の図解カードは左に図解、右に成分の説明を置く 2 カラムにする。
• PC では関連商品を 2 列にし、右下に購入用の固定ボタンを置く。

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