DESIGN.md — 朱赤×金の艶感美容サプリ LP（Vivid Red Glossy Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、上品・高級
• キーワード: 朱赤グラデーション・金の明朝・光沢の球体・成分訴求・女性の笑顔・凝縮感
• 地の質感: 水滴や宝石のような艶のある赤い球体、光のフレア、淡いピンクの柔らかなぼかし地
• 形: 円形バッジと球体を多用。帯は直線、枠は角丸控えめ
• 温度感: 暖色寄り。赤と金で熱量を出し、白地で清潔感を残す

Colors

• 地は白と淡ピンクを交互にし、要所で朱赤の全幅帯を挟む
• 見出し中のキーワードだけ深紅にし、残りは黒
• 金は赤地上の大見出しとラベルに限定
• 数値（含有量）は赤い球体や金枠カードの中で大きく
• 品質訴求のみ青系の写真地で冷静さを出す
• 比較図は濃灰=他社、朱赤=自社で対比させる
• badge-circle-red は文字 #FFFFFE × 背景 #ED2C15 のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E42812、4.55:1）を使う。
• label-gold は文字 #FFFFFE × 背景 #C9A063 のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#976F34、4.52:1）を使う。
• band-red は文字 #FFFFFE × 背景 #ED2C15 のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E42812、4.55:1）を使う。

Typography

• 見出しは明朝で、強調語を一回り大きく深紅にする
• 数値と単位は数値を特大、単位を小さく組む
• 本文はゴシックで短く 2〜3 行に収める
• 添え書きは手書き体で斜め配置
• 赤地上の大見出しは金グラデーション文字
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、要点は 3 列の円バッジ
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 32px、基本単位 8px、カード内 16px（375px 幅換算）
• 画像ベースのセクションを隙間なく縦に積む
• 見出しは中央揃え
• 商品パッケージと人物写真を左右に並べる
• 成分は円を散らして配置
• 比較図は白カードに左右対比で配置

Elevation & Depth

• 白カードに薄い影で浮かせる
• 球体は内側ハイライトで立体感
• 円バッジに柔らかいドロップシャドウ

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は背景を飛ばした切り抜き、商品は正面パッケージ
• セクション境界: 直線の全幅帯で切り替え
• バッジは正円が基本
• タグは白地に細枠の小さな四角
• 金ラベルは台形・リボン風
• 帯は角を立てた長方形

Components

• 赤い数値球体（badge-circle-red）: 光沢のある赤い球体に含有量を金文字で大きく
• 成分名の白円（badge-circle-white）: 白い円に赤細枠、成分名を中央に
• 金ラベル（label-gold）: 見出し上の小見出しや秘密番号を金地白文字で
• 成分タグ（tag-ingredient）: 赤帯上に白四角タグを 4 列で並べる
• 朱赤の訴求帯（band-red）: 全幅の赤帯に白い吹き出し円と明朝見出し
• 金枠の数値カード（card-gold-frame）: 淡黄地に金縁、数値を赤明朝で
• コスト比較図（compare-chart）: 濃灰の積み上げと赤の単一バーを対比、手書き矢印
• 白帯見出し（heading-highlight）: 白い長方形の帯に黒明朝、強調語は赤

Do's and Don'ts

Do - 赤は朱赤と深紅の 2 段階で使い分ける - 数値訴求は必ず円か金枠で囲む - 球体や光のフレアで艶感を足す - 見出しは強調語のみ色とサイズを変える - 品質セクションだけ寒色写真で区切る

Don't - ポップな丸ゴシックを主見出しに使わない - 赤を本文全体に使わない - フラットで影のない円にしない - パステル寒色を全体に広げない - 金を小さな本文に使わない

Page Structure

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

1. ファーストビュー（習慣化の価値と商品を一目で伝える）: 金ラベル＋2 行の大明朝見出し、笑顔の人物と商品、右に数値球体、下に赤帯の成分タグ
2. 主成分の紹介（主成分の力を印象付ける）: 朱赤グラデ地に白帯キーワードと金の特大見出し、短い本文、カプセル球体と金枠カード
3. 追加成分の訴求帯（付加価値を予告）: 赤帯に白い円吹き出しと明朝の一行コピー
4. 配合成分一覧（複数成分を網羅的に見せる）: 淡ピンク地、中央大球体の周囲に白円の成分名を散らす
5. 高配合の訴求（含有量の多さを強調）: 赤い球体の数値と頬に手を当てた女性、下に一行説明
6. 品質管理（安心感を与える）: 青い工場写真地に白文字明朝と金ラベル
7. 低価格の理由（価格の納得感）: 明朝見出し、秘密 1〜3 の白円バッジ 3 列、比較図カード
8. 締めの訴求（飲む習慣への行動喚起）: 手書き添え書き、白帯見出し、特大明朝、商品と女性、特長の赤白球体

Imagery

• 30〜40 代女性の明るい笑顔を白背景で切り抜き
• 赤いソフトカプセルや魚卵など赤く艶のある被写体
• 水滴・宝石のような透明感ある赤い球体の 3D 表現
• 光のフレアと淡いボケで華やかさを加える
• 品質訴求は青みの研究室写真と分子模型
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後に SP 画像を固定し左右は淡色地
• PC では人物と商品の横並びを広めの余白で配置
• 円バッジ 3 列はそのまま、成分円はさらに広く散らす
• 見出しサイズは 1.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 行書くと起動時に読み込まれる。