DESIGN.md — マゼンタ×金の上品な美容ドリンク LP（Magenta Gold Premium Beauty Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実
• キーワード: マゼンタグラデーション・金色の明朝見出し・金線の花・波形の区切り・黄金色の液体・細枠ボタン
• 地の質感: 白〜薄いラベンダーグレーの地に、絹のような光沢グラデーションと金色のリボン状の曲線を重ねる
• 形: 直線的な細枠ボックスと、円形の写真・吹き出しを組み合わせる。セクションの境目はゆるい波形
• 温度感: 華やかで少し暖かい（マゼンタ＋金）

Colors

• 地は白と薄いラベンダーグレーを交互に使い、マゼンタのグラデーション地はファーストビューと最後の CTA だけに使う。
• 大見出しはすべて金色の明朝にする。黒は小見出しと本文だけに使う。
• マゼンタは価格の見出し帯、選択中のタブ、強調文字、Q マーク、外枠に絞って使う。
• 金色は線・メダル・花の線画・波形の区切りに使い、面を塗らない。
• ボタンは白地にグレーの細枠、文字は黒とし、マゼンタで塗りつぶさない。

Typography

• 大見出しは金色の明朝を中央揃えにし、2〜3 行に改行する。
• 成分ブロックは、英字のスクリプトラベル → 黒いゴシックの小見出し → 金色の明朝の成分名、の 3 段で重ねる。
• 価格の数字は太いサンセリフ（Barlow など）で約 40px、「円」は数字の半分ほどの大きさにする。
• 強調したい語句はマゼンタの文字色だけで示し、マーカーは引かない。
• 注釈は 9〜10px のグレーで、関係するブロックのすぐ下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。価格エリアの切り替えタブだけ 2 列
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出し・本文・ボタンはすべて中央揃えにする（本文は左揃えでもよい）。
• 成分ブロックは、見出し → 本文 → 写真 → 図 → 細枠ボタンの順で縦に積む。
• 写真は本文と同じ幅（約 84%）で四角く置く。
• 価格エリアは太いマゼンタ枠の箱で囲み、プランを縦に並べる。
• 大きなセクションの間は 80px 前後空けて、ゆとりを持たせる。

Elevation & Depth

• 影はほとんど使わない。
• 円形の吹き出しにだけ、ごく薄いピンクのぼかし影を付ける。
• ファーストビューの白いピル型ラベルには、ほんの少しだけ影を付ける。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 9999px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角のまま使う。成分の写真や吹き出しは正円で切り抜く。
• セクション境界: 金色の細い線が付いた、ゆるい波形の区切り
• ボタン・FAQ・価格の箱は角丸なしの直角にする。
• ファーストビューの成分ラベルだけはピル型にする。
• 実績の数値は金色の円形メダルで見せる。
• お客様の声は、マゼンタの細枠を付けた白い円形の吹き出しにする。

Components

• 細枠ボタン（button-outline）: 白地にグレーの 1px 枠を付け、右端に「>」を置く。詳細へのリンクや購入ボタンに共通で使う。
• 金メダル型の実績バッジ（badge-medal）: 金色のグラデーションの円の中に、明朝の数値を入れる。3 つを横に並べる。
• 成分ラベル（pill-label）: マゼンタ地の上に、白いピル型のラベルを 3 つ並べる。
• 成分の見出しセット（ingredient-heading）: マゼンタの英字スクリプトに細い曲線を添え、黒の小見出し、金色の明朝の成分名を続ける。
• 円形のお客様の声（voice-bubble）: マゼンタの細枠を付けた白い円の中に、短い感想と年代を書く。左右にずらして配置する。
• 味の切り替えタブ（flavor-tab）: 選択中はマゼンタで塗り、白文字にする。選んでいない方は白地の細枠にする。
• 価格プランのブロック（price-plan）: マゼンタの帯に白文字のプラン名、商品写真、割引率、大きな価格、送料の小箱を並べる。単発購入のプランはマゼンタの細枠の帯にする。
• FAQ アコーディオン（faq-item）: マゼンタの細枠の箱に、太字マゼンタの「Q.」、質問文、右端に「＋」を置く。

Do's and Don'ts

Do - 大見出しは必ず金色の明朝で、中央揃えにする。 - 白とラベンダーグレーの地を交互に使い、境目は金線付きの波形にする。 - 背景の隅に、金色の線画の花をうっすら散らす。 - 数値の根拠は※の注釈で、関係するブロックのすぐ下に添える。 - ボタンは控えめな細枠で統一する。

Don't - ボタンをビビッドな色で塗りつぶしたり、ピル型にしたりしない。 - 金色以外の色で大見出しを書かない。 - マゼンタの面をページの途中で多用しない。 - 丸ゴシックやポップな書体を使わない。 - 濃い影や立体的な装飾を付けない。

Page Structure

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

1. ファーストビュー（印象的なコピーで心をつかみ、実績で信頼を示す。）: マゼンタのグラデーション地に、金色の明朝の大きなコピー、金メダル 3 つ、商品ボトル、成分のピル型ラベル、注釈を置く。下端は金色の波形にする。
2. 購入バナー（早い段階で購入への入口を用意する。）: マゼンタの横長バナーに、商品写真、短いコピー、白いボタンを並べる。
3. コンセプト（成分の組み合わせという価値を伝える。）: 白地に、金色の明朝の大見出しと短い本文を中央揃えで置く。
4. 成分の解説（3 つ）（各成分の権威性と働きを説明する。）: 成分の見出しセット、本文、黄金色の液体の写真、グラフや図、細枠ボタンの順で、成分ごとに繰り返す。
5. 配合の説明（独自の配合の全体像を見せる。）: ラベンダーグレーの地に、商品を中心として成分の円形写真を円周上に配置する。
6. お客様の声（満足度と実感で後押しする。）: 金色のリングで満足度の数値を見せ、まわりに円形の吹き出しを散らす。背景には英字ロゴを縦書きで薄く置く。
7. フレーバーの紹介（選ぶ楽しさを伝える。）: グリーン地とピンク地の写真で味を 2 つ縦に並べ、英字の味名を縦書きで重ねる。
8. 価格・購入（プランを比べて購入してもらう。）: 味のタブを置き、マゼンタの太枠の箱の中にプランを縦に並べる。注釈と細枠の購入ボタンを添える。
9. 成分のまとめ（成分を改めて覚えてもらう。）: 商品を中心にして、3 つの円を金線でつないだ図にする。
10. ブランドのこだわり・評価（企業の研究力と、モデルによる信頼感を伝える。）: 金色の明朝の見出しと、グラスの写真、白い服を着た女性たちの写真を組み合わせる。
11. よくある質問（購入前の不安を解消する。）: 金色の明朝の見出しの下に、マゼンタ細枠の FAQ を 3 つ並べる。
12. 最後の CTA（最後にもう一度購入を促す。）: マゼンタのグラデーションの波形地に、商品、金色のコピー、白いボタンを置く。

Imagery

• 黄金色の液体、気泡、滴の王冠をマクロで撮った明るい写真を使う。
• 商品のボトルは、背景を抜いた切り抜きで正面から見せる。
• 金色の細い線画で描いた花（桜や花びら）を、背景の隅に透かして置く。
• モデルは白い服を着た大人の女性たちで、白い背景に溶け込ませる。
• フレーバー写真はパステルの単色背景に、金のリボンとガラス玉を添えて撮る。
• グラフや図はマゼンタの点と細い線だけで、シンプルに描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では上部にテキストだけのナビゲーションを横一列に並べる。
• PC のファーストビューは、左にコピー、右にメダルと商品を置く 2 カラムにする。
• PC の成分ブロックは、本文と写真の 2 カラム、または成分 2 つを横に並べる。
• PC の価格エリアは、プランを 2 列に並べる。
• PC のお客様の声は、満足度のリングの左右に吹き出しを配置する。
• PC でもコンテンツ幅は 960px 前後に抑え、余白を広く取る。

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