DESIGN.md — 紫×シャンパン金の高級美容サプリ LP（Amethyst Luxury Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 深い紫・シャンパンゴールド・液体・泡の CG・明朝体の大見出し・数字の訴求・縦書きコピー
• 地の質感: 光沢のある液体、ガラスのような泡、光の筋を重ねたつややかな質感
• 形: 四角い白枠のパネル、黒い帯のラベル、丸いバッジ、ピル型のタグ
• 温度感: クールな紫を基調にして、金色で温かみと高級感を足す

Colors

• 地は濃い紫と淡いラベンダーを数セクションごとに交互に入れ替える
• 濃い地の数字や大見出しにはシャンパンゴールドのグラデーションを使う
• 明るい地の見出しは濃紫で、強調語だけ鮮やかな紫か黒帯の白文字にする
• 見出しの前の小ラベルは黒紫の帯に白文字か金文字
• 本文中の強調はピンク紫の太字にする
• 紫系から外れる色はほぼ使わない。比較図の基準値だけ水色にしてよい

Typography

• 見出しはすべて明朝体の太字にして、高級感を出す
• 数字は単位より 1.5〜2 倍大きく組む
• 見出しの中の強調語だけサイズを大きくし、ジャンプ率を高くする
• 写真の横には縦書きの明朝コピーを置く
• 本文はゴシック体で、行間を 1.7 前後にする
• 金色の文字にはグラデーションと薄い影をつけて立体感を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分バッジは 3〜5 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面幅いっぱいの背景画像の上に組む
• 説明は白またはラベンダーの枠付きパネルにまとめる
• 見出しは中央揃えで、小ラベル→大見出し→本文の順に並べる
• 商品画像は中央に置き、左右に縦書きコピーを添える
• 成分の一覧は丸いバッジかピル型のタグをグリッドで並べる

Elevation & Depth

• パネルには紫の淡い外側の光（グロー）をつける
• 金文字には薄いドロップシャドウ
• 泡や液体の CG はハイライトと反射で立体感を出す
• 商品パッケージには下に影を落とす

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を抜いて液体の CG と合成する。素材は丸い泡の形で見せる
• セクション境界: 直線で切り替えるか、液体の波や光で境目をぼかす。パネルの下端は V 字の矢印形も使う
• パネルは角丸を小さくし、細い白枠か紫枠をつける
• ラベルは角のない帯にする
• 成分バッジは正円に細い色線
• アミノ酸などのタグは濃紫のピル型

Components

• 黒紫の帯ラベル（label-band）: 見出しの上に置く短い前置きの帯。白か金の明朝体で組む
• 金の数字見出し（gold-number-headline）: 販売数や配合量を、大きな金グラデーションの明朝で見せる
• 悩みのチェックリスト（check-list）: 紫のチェックボックスの横に、悩みを 1 行ずつ白文字で並べる
• 説明パネル（info-panel）: ラベンダー白の地に細い枠をつけ、見出しと本文を入れる
• 特長の泡バッジ（badge-circle）: ガラスの泡のような円の中に、特長を 2〜3 文字で入れたものを 3 つ並べる
• 成分の丸バッジ（ingredient-badge）: 濃い地の上に色線の正円を並べ、中に成分名を入れる
• 成分のピル型タグ（tag-pill）: 濃紫のピル型に白文字を入れ、3 列で並べる
• 比較のグラフ（compare-chart）: 立体の棒グラフで基準値と自社の値を比べ、矢印を添える
• ※注釈（note-text）: 数字の下に小さく添える根拠の注記

Do's and Don'ts

Do - 紫の濃い地と淡い地を交互に入れ替え、リズムを作る - 見出しは明朝の太字にして、数字を大きく見せる - 主張する数字の下には必ず※注釈を添える - 液体・泡・光の筋を背景に重ねて、純度と潤いを表現する - パッケージのオレンジは商品写真の中だけに使う

Don't - 丸ゴシックなど、カジュアルな書体を見出しに使わない - 紫・金以外の原色を地に使わない - 装飾のない平坦な単色の背景だけで組まない - 本文を長く続けず、パネルで区切る - 角丸の大きいポップなカードは使わない

Page Structure

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

1. ファーストビュー（純度の高さと商品を一目で印象づける）: 巨大な明朝の漢字と、紫の泡の CG に重ねた商品。左右には縦書きの黒帯コピー
2. 実績の訴求（配合量と特長を数字で示す）: 黒紫の帯の中に金の数字を置き、下に泡のバッジを 3 つ並べる
3. 販売実績（累計販売数で信頼を示す）: 濃紺の地に金グラデーションの大きな数字と、商品写真
4. 悩みの提起（ターゲットの悩みに共感する）: モノトーンの人物写真の上に、悩みのチェックリストを 5 項目
5. 解決の提示（商品が解決策だと示す）: 金の帯の見出しと、縦書きコピーで挟んだ商品
6. 成分の説明（主成分の純度と配合量を説明する）: 枠付きパネルに比較の図・数字・棒グラフを入れる
7. ベネフィット（使ったあとの実感をイメージさせる）: 笑顔の女性と紫の液体のしぶきを合成し、大きな明朝の見出しを置く
8. 希少性（原料の希少さを伝える）: 縦書きの大見出しと、数字を強調したパネル
9. 栄養成分（オールインワンの栄養を見せる）: 濃紫の地に成分の丸バッジを並べたグリッド
10. 品質のこだわり（製法と原料の品質を説明する）: 淡いパネルの見出しの横に、スポイトやガラス器具の写真を置く
11. アミノ酸量（成分の豊富さを示す）: 泡の背景の上に大見出しと、ピル型タグの 3 列リスト

Imagery

• 紫の液体のしぶき・泡・ガラス玉を 3DCG 風に光らせる
• 人物は 40〜50 代の女性。白い服で、肌のつやを強調し、背景を抜いて合成する
• 光の放射や稲妻のような光の筋を、球の中心に置く
• カプセルや泡の中に紫の粒を詰めたビジュアル
• 悩みのパートは彩度を落としたモノトーンの写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 750px 幅のカラムを置き、左右は背景色で埋める
• SP は同じ縦長の構成のまま、横幅 100% にする
• SP では大見出しを 32〜40px、ファーストビューの漢字を 64px 前後にする
• 成分バッジは SP で 4 列、ピル型タグは 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 行書くと起動時に読み込まれる。