DESIGN.md — マゼンタ×黒金の訴求型ボディサプリ LP（Hot Pink and Gold Body Supplement Sales LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、ポップ・元気、ラグジュアリー・ダーク
• キーワード: マゼンタ・黒×金の権威・大きな価格数字・黄色マーカー・女性ボディ写真・定期購入訴求
• 地の質感: 金の箔グラデーション、黒地に散らした金色のキラキラ、ピンクの水しぶき、半透明の真珠のような球体
• 形: 斜めの帯、斜めにカットしたセクション境界、円形バッジ、下向き三角の区切り、角丸を小さくした箱
• 温度感: 暖色寄りで高い熱量。ピンクの華やかさと黒金の高級感を交互に出す

Colors

• 地は白・淡いグレー・淡いピンクを基本にし、権威づけや悩みの部分だけ黒地にする
• 強調したい語句はマゼンタの大きな文字で書くか、マゼンタの箱に白抜きで入れる
• 受賞・特典・バッジは金のグラデーションで高級感を出す
• 申込ボタンだけ緑の立体ボタンにして、ほかの色とはっきり区別する
• 本文中の大事な一文には黄色マーカーを太く引く
• よくある質問と配送サイクルにはティールを使い、落ち着いた情報ゾーンとして分ける
• button-primary は文字 #FFFFFF × 背景 #24AA02 のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1D8902、4.53:1）を使う。
• benefit-tile は文字 #DD0263 × 背景 #D9B66A のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#FAF5EA、4.53:1）を使う。
• point-number は文字 #EFF0EA × 背景 #DD0263 のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D50260、4.57:1）を使う。
• voice-card は文字 #EFF0EA × 背景 #DD0263 のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D50260、4.57:1）を使う。
• faq-item は文字 #EFF0EA × 背景 #3DBEC3 のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#26787B、4.52:1）を使う。

Typography

• 1 つの見出しの中で強調語だけを 1.5〜2 倍に大きくし、マゼンタにする
• 価格と順位の数字は太い明朝で極端に大きくし、『円』『税込』は小さく添える
• セリフ体の英字は細い帯やラベルの中に置き、雰囲気づけだけに使う
• 黒地の見出しは白と黄色の 2 色だけにする
• 強調語の下にマゼンタの下線を引く表現を繰り返す
• 注釈は必ず ※ から始め、小さなグレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典・バッジ・カードは 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面幅いっぱいに置き、コピーは写真の上に重ねる
• 価格ボックスは白いカードにし、マゼンタの外枠の中に入れる
• 円形の成分バッジは 3 つ横に並べる
• 比較は左を黒、右をマゼンタにした 2 列の箱で見せる
• 申込ブロックはページ中盤と最後の 2 回置く

Elevation & Depth

• CTA ボタンはグラデーションとハイライト、影を付けて立体的にする
• 金の特典箱は箔のグラデーションと薄い影で浮かせる
• 雑誌や商品パッケージにはやわらかい落ち影を付ける
• テキストカードは平面にし、影は付けないか、ごく弱くする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は四角か斜めにカットする。成分や菌の写真は円形に切り抜く
• セクション境界: 斜めのカット、下向き三角の吹き出し、金の斜めライン
• 主 CTA は大きな角丸の楕円で、右下に再生ボタン風の丸い矢印を付ける
• 強調ラベルは少し傾けた平行四辺形の帯にする
• 順位は金の月桂樹と王冠で囲む
• 続きを読むボタンは細い白枠の角丸四角にする

Components

• 緑の立体申込ボタン（button-primary）: 上に初回限定の小さなラベル、2 行の大きな文字、右下に丸い矢印。左上に『簡単入力』を伝える斜めのバッジを重ねる
• 価格オファーボックス（price-box）: 取り消し線の通常価格の横に、マゼンタの特大価格を置く。割引率の吹き出しと送料無料の枠を添える
• 金箔の特典タイル（benefit-tile）: マゼンタ地の上に、金のグラデーションの箱を 2 列で並べ、最後の 1 つだけ横幅いっぱいにする
• 月桂樹の受賞バッジ（award-laurel）: 金の月桂樹と王冠で『No.1』を囲み、黒地に置く
• 円形の成分メダル（ingredient-badge）: 金の円形メダルに成分名と数字を入れ、3 つ横に並べる
• 在庫わずかの告知枠（stock-alert）: 黒い角丸の箱。左上に黄色の『！』アイコン、黄色の見出し、下線付きの白い本文
• POINT の番号バッジ（point-number）: マゼンタの半円の中に、小さな英字と大きなセリフ体の数字を入れる
• お客様の声カード（voice-card）: マゼンタか黒のダマスク柄の地に、写真・年齢の大きな数字・黄色の見出し・波線の下線を付けた本文、続きを読むボタンを置く。左上に金の番号リボン
• Q&A の見出しバー（faq-item）: ティールの角丸バーに白い Q と質問を入れ、その下に白地で回答を書く
• 黄色マーカーの強調文（marker-text）: 本文の中の大事な一文を太字にし、下半分に黄色の帯を敷く

Do's and Don'ts

Do - 大きな価格と割引率は必ずマゼンタで、ファーストビューと申込ブロックに入れる - 権威づけの部分は黒地に金とキラキラ粒子でまとめる - 本文の大事な一文には黄色マーカーを引く - 申込ブロックを中盤と最後で同じ見た目のまま繰り返す - 強調ラベルは斜めの帯や箱にして動きを出す - 注釈は価格や順位の近くに小さく必ず添える

Don't - CTA をマゼンタや黒にしない（緑のままにする） - 淡いパステルだけのおとなしい配色にしない - 見出しを全部同じ大きさにしない - 金を広い面のベタ塗りにしない（箔の質感で使う） - 余白を大きく取りすぎて情報密度を下げない

Page Structure

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

1. ファーストビュー（成分・理想の体型・初回価格を一度に伝える）: ピンクの女性ボディ写真に極太の大コピーを重ね、商品と球体バッジ、受賞の月桂樹を置く。下に黒い帯を敷き、大きな価格を入れる
2. メディア掲載（第三者の評価で信頼させる）: 王冠付きの英字の飾り、マゼンタの大見出し、雑誌 4 冊を横に並べる
3. SNS の口コミ（共感と話題性を出す）: 手書き風の英字見出しと、写真グリッドに斜めのグラデーション帯を重ねる
4. 受賞実績（No.1 の権威を見せる）: 黒地に金のキラキラ、金の帯の見出し、月桂樹のバッジを 3 つ
5. 商品の特長の要約（3 つのアプローチを示す）: ピンクの水しぶきに真珠のような球体を 3 つ、マゼンタの斜めの帯、成分メダルを置く
6. 在庫告知と特典・申込（今すぐ申し込む理由を作る）: 黒い告知枠、マゼンタ地に金の特典タイル、白い価格カード、緑の CTA、注釈
7. 悩みの提起（自分ごととして感じてもらう）: 暗いモノクロ写真に、黒い帯の吹き出しで悩みを 3 つ並べ、縦書きの大コピーで原因を示す
8. 原因と注目成分（解決策を論理的に示す）: ラベル付きの見出し、茶色の帯、金の球体 2 つ、マーカーを引いた本文
9. 3 つのこだわり（成分の根拠を詳しく伝える）: POINT の番号バッジ、下線付きの大きな数字、黒い菌のカード 2 列、黒とマゼンタの比較、イラスト
10. 満足度（数字で実感を伝える）: 女性の笑顔をモザイク状に並べ、中央にマゼンタの円と特大の％、黄色い吹き出し
11. お客様の声（体験談で後押しする）: ダマスク柄のカードをマゼンタと黒で交互に置き、金の番号リボンと続きを読むボタンを付ける
12. 品質管理（安心感を出す）: ラボ写真の上に白いカードを重ね、黒地に金の説明枠を入れる
13. よくある質問（不安を解消する）: 二重線ではさんだ Q&A 見出しと、ティールの質問バー
14. クロージング CTA（最後に申込へ導く）: 黒金のボディ写真と金の大コピーの後、特典・価格・CTA を繰り返し、お届けサイクルの図で締める

Imagery

• 引き締まったお腹やくびれを見せる、20〜30 代女性の明るいボディ写真
• 商品パッケージは白地に、パステルのカプセル柄が入ったパウチを斜めに置く
• ピンクの水しぶきや水滴、真珠のような光沢の球体
• 黒地に金のパーティクルやボケを散らした高級感のある背景
• 成分は顕微鏡写真を円形に切り抜くか、ゆるいイラストで描く
• 悩みのシーンはモノクロ寄りの暗い写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約 750px 幅の SP デザインを置き、左右は淡いグレーかピンクで埋める
• 画像で作ったセクションはそのまま拡大し、文字の比率を保つ
• 特典タイルや成分メダルは PC でも同じ列数にする
• PC では追従 CTA を右下に置いてもよい

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