DESIGN.md — 朱赤×桜ピンクの女性向けサプリ LP（Coral Red Feminine Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: 朱赤・桜ピンク・白カード・丸バッジ・下向き三角・グラフ訴求
• 地の質感: フラットな面に柔らかいピンクのぼかし図形（勾玉状のしずく）を浮かべ、薄い影の白カードを重ねる
• 形: 角の小さい白カード、正円バッジ、下向き三角ラベル、L字カギ括弧の見出し枠
• 温度感: 暖色寄り。赤とピンクで温かく、白とグレーで清潔感を保つ

Colors

• 地は桜ピンクを基本にし、内容は白カードに載せる
• 朱赤はFV地・キーワード・ラベル・Q記号に限定して使う
• 悩み提起だけ暗いグレー写真地で空気を変える
• 実績・受賞は生成りベージュ地とゴールド数字で権威感を出す
• 特長バッジは紺の正円で赤と補色対比させる
• 本文中の重要語は赤文字か赤ベタ白抜きで強調する
• stat-row は文字 #AFA25E × 背景 #FEFEFE のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#817640、4.53:1）を使う。

Typography

• 見出しは主語・キーワードを大きく赤、助詞を小さく黒にしてリズムを作る
• 強調語の上に赤い傍点ドットを打つ
• FVのキャッチは白地帯に赤文字の縦書き
• 数字は欧文太字で極端に大きく、単位は小さく添える
• 本文は字間をやや広めに取り行間1.8
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較図は 3 列横並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右5%の余白で中央配置
• 写真はカード幅いっぱいに入れ、下に本文を置く
• セクション間を下向き三角ラベルでつなぐ
• 見出しは中央揃え、本文は左揃え
• 特長バッジは3つ横並びの正円

Elevation & Depth

• 白カードに薄い灰色の柔らかい影（0 2px 8px rgba(0,0,0,.08)）
• 吹き出し状の赤ボックスは写真に一部重ねる
• FAQカードは影なしで灰色の太枠

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの横長長方形、一部は円形に抜いたクローズアップ
• セクション境界: 直線切替。接続部は赤い下向き三角ラベル
• カードの角はほぼ直角
• バッジは正円
• ラベルは赤のピル型
• 見出し枠はL字カギ括弧を左上と右下に配置

Components

• 特長の丸バッジ（badge-circle）: 紺または赤の正円に白文字で特長を3行で表記、3つ並び
• チェックリスト（check-list）: 赤い丸チェックアイコン＋悩みを短文で4つ並べる半透明白パネル
• 下向き三角ラベル（triangle-connector）: 逆接・順接の接続語を赤い逆三角に白文字で入れる
• 枠付きサブ見出し（heading-frame）: 白地に細い黒枠、下に吹き出しの尾。主見出しの上に置く
• お客様の声カード（voice-card）: 英字Voice＋大きな番号、赤見出し、下線、左に人物イラスト右に本文
• Q&Aカード（faq-card）: 灰色太枠の白カード、赤いQ記号と質問、点線区切りの下に回答
• 実績数値行（stat-row）: 左に商品写真の色付きパネル、右にゴールドの大数字と注釈
• 赤ピルラベル（pill-label）: 用量などを示す赤いピル型ラベル
• 縦書きコピー帯（vertical-copy）: 写真上に白帯を縦に置き赤・黒の縦書きコピー

Do's and Don'ts

Do - 淡ピンク地＋白カードの重ねを全体で統一する - 強調語は赤文字・赤ベタ・傍点・黄マーカーで使い分ける - 接続語の三角ラベルで話の流れを区切る - 数値は大きな欧文数字で見せ注釈を必ず添える - 装飾しずく図形を余白に散らして柔らかさを出す

Don't - カードに大きな角丸を付けない - 青系や寒色を地色に使わない（紺はバッジのみ） - 赤を本文の長文に使わない - 写真に強いフィルターや暗い加工をかけない（悩み提起以外） - 装飾フォントや手書き書体を混ぜない

Page Structure

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

1. ファーストビュー（商品と主張を一目で伝える）: 朱赤地に商品パッケージと縦書きキャッチ、容量ピル、紺の丸バッジ3つ
2. 悩みの提起（対象者を自分事化させる）: 暗いグレー写真地に白見出し、半透明白パネルのチェックリスト4項目
3. 共感・課題提示（年齢変化を可視化する）: カギ括弧見出し、赤い曲線グラフ、人物写真と本文、マーカー強調
4. 成分解説（成分の仕組みを説明）: 赤ボックスの説明文と食材写真を重ね、3枚並びの変換図
5. 問題の深掘り（不足を数字で示す）: 三角ラベルでつなぎ、白カードに大きな赤い%数字と人物写真
6. 解決策・商品紹介（商品で直接摂る提案）: 赤黒混在見出し、人物写真に商品と縦書きコピー、丸バッジ再掲
7. 配合量訴求（含有量を印象付ける）: オレンジ〜ピンクのグラデ不定形に白の巨大数字と商品
8. メーカーの実力（研究実績で信頼獲得）: 研究者写真の白カード、赤ベタ白抜き強調語の本文
9. 受賞・実績（権威性と販売実績）: 生成り地、月桂樹付き評価、ゴールド大数字の実績行
10. 飲みやすさ（継続しやすさを訴求）: 白カードに服用写真と円形クローズアップ
11. お客様の声（体験談で後押し）: 番号付き声カードにフラットな人物イラスト
12. 使用方法（摂り方を明示）: 赤ピルラベルと大数字、写真、チェック付き3項目
13. よくある質問（不安解消）: 花柄ピンク背景にカギ括弧見出し、灰枠Q&Aカード3つ
14. クロージング（ブランドイメージで締める）: 笑顔の人物写真に商品と縦書きコピー

Imagery

• 30〜50代女性の自然光ポートレート、明るく清潔な白背景
• 大豆など原料の俯瞰物撮りを白い器で
• 研究室の白衣人物で信頼感
• 手のひらや粒の円形クローズアップ
• 声欄は顔を描かないフラットな人物イラスト
• 背景に淡いピンクの花柄ぼかしやしずく形の装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅相当の1カラムをPCでも中央固定で表示
• PCは最大幅480px前後の中央カラム、左右はピンク地で埋める
• 丸バッジ3つと3列図はSPでも横並び維持
• 縦書きコピーはSPで写真右端に配置
• 大数字はSPで画面幅の半分程度に収める

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