DESIGN.md — 青と黄のキャラコラボ健康食品通販 LP（Blue Wave Supplement Campaign LP with Mascot Pop）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 信頼・誠実、ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: 青のグラデーション・キャラクターコラボ・明朝の権威訴求・黄色の特典帯・価格カード・一体型フォーム
• 地の質感: 前半は光の粒や波線のある深い青の写真調背景。キャンペーン部は無地のベタ塗りでフラット。
• 形: V 字の切り込みでセクションをつなぐ。特典カードは大きな角丸の白カード。ボタンはピル型で立体的な影付き。
• 温度感: クールな青が基調。黄色と赤の価格表示で温かみと緊急感を足す。

Colors

• キャンペーン・特典は青ベタと黄ベタのフラットな面で目立たせる
• ブランド信頼・研究パートは紺〜水色のグラデや写真背景に白明朝を載せる
• 価格と割引率は赤、旧価格はグレー＋赤の取り消し線
• 見出しの強調語には黄のマーカー下線か金色文字を使う
• 購入ボタンは青、フォーム送信は緑と役割で色を分ける
• 必須バッジは濃いピンク赤で統一
• button-primary は文字 #F4FEFE × 背景 #3196D6 のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#237AB1、4.56:1）を使う。
• button-submit は文字 #F4FEFE × 背景 #22B43A のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#19872B、4.5:1）を使う。
• badge-speech は文字 #E4504C × 背景 #FFE14A のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C3221D、4.52:1）を使う。
• benefit-card は文字 #E4504C × 背景 #FEFEFE のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C3221D、4.53:1）を使う。
• price-box は文字 #E4504C × 背景 #FEFEFE のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C3221D、4.53:1）を使う。
• testimonial-text は文字 #F4FEFE × 背景 #13B0D9 のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0E7F9C、4.51:1）を使う。
• form-section-header は文字 #F4FEFE × 背景 #13B0D9 のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0E7F9C、4.51:1）を使う。

Typography

• 権威・声・研究は明朝、キャンペーンはポップ体、手続きはゴシックと書体で文脈を切り替える
• 見出しは中央揃えで 2〜4 行に改行する
• 価格数字は単位や税込表記より 2 倍以上大きく
• 暗い背景の白明朝には軽いグローや影をつける
• 注釈は 10px 前後で必ず該当ブロック直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典カードは文字左・商品画像右の 2 分割
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 背景色ごとにセクションを全幅で切り替える
• 特典は番号付きカードを縦に並べ、間を＋記号でつなぐ
• 特長は全幅写真に番号と短文を重ねる
• フォームは帯見出し＋淡水色の項目ラベル＋全幅入力欄の繰り返し
• CTA は特典・価格ブロック直後に中央配置

Elevation & Depth

• 購入ボタンは下方向に濃い青の影をつけて立体的にする
• 特典カードは影なしの白カード
• フォームのラジオ選択肢はグレーのグラデと薄い影のボタン風
• 権威見出しは白文字に柔らかい発光

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで配置。生活写真は角丸なしの矩形を散らして重ねる。特長写真は全幅。
• セクション境界: V 字の矢羽根形の切り込みと、波線グラフィックで区切る
• 吹き出しバッジは黄色の角丸に下向きしっぽ
• 期間告知は黄色の星形・花形バッジ
• 番号は青い円に白数字
• 価格カードは青い枠線の四角で角丸なし

Components

• 購入ボタン（button-primary）: 青のピル型で下に濃い影。下に小さなタップ案内文。
• フォーム送信ボタン（button-submit）: 緑の角丸ボタン。左に同意文の小ラベル、右に矢印アイコン。
• 吹き出しバッジ（badge-speech）: 黄色の角丸吹き出しに抽選人数などを書く。
• 番号付き特典カード（benefit-card）: 白の大角丸カード。左上に青丸番号、赤の大きな割引率と商品画像。
• 価格比較ボックス（price-box）: 紺の見出し帯付き枠。取り消し線の通常価格→下向き矢印→赤の明朝大価格。
• 声のテキスト（testimonial-text）: 水色背景に白明朝で中央揃え、下に年齢・性別・地域。
• フォーム項目ラベル（form-label）: 淡水色帯に必須の赤ピンクバッジと太字ラベル、下向き三角付き。
• フォーム帯見出し（form-section-header）: 水色グラデの全幅帯に白太字。

Do's and Don'ts

Do - ポップなキャンペーン部と上品な権威部を交互に配置する - マスコットイラストをセクションの端からのぞかせる - 価格は通常価格と割引価格を必ず並べて比較させる - 注釈は小さくても省かず該当箇所の直下に置く - フォームは 1 項目 1 ブロックで縦に並べる

Don't - 権威パートにポップ体を使わない - 青と黄以外の強い色を面で増やさない - 購入ボタンを角張った形にしない - 暗い背景に小さいゴシック本文を長く載せない - 価格の赤を見出し以外の装飾に乱用しない

Page Structure

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

1. ファーストビュー（由来と商品名を伝え実績を示す）: 白地に紺の極太見出し、右上に紺×金の実績バッジ、商品パッケージとマスコット
2. キャンペーン告知（期間限定プレゼントで興味を引く）: 青帯に黄ポップ体の見出し、吹き出しバッジ、赤文字の特典名に黄マーカー
3. 実績訴求（販売数で信頼を示す）: 光の粒の紺背景に白明朝の大数字、黄文字の見出し
4. お客様の声（共感と安心感）: 水色背景に波線、白明朝の声を中央揃えで 3 件
5. 選ばれる理由（成分の独自性を説明）: V 字切り込みの見出し、全幅写真に 01〜03 の番号と短文
6. 開発者の言葉（研究根拠を示す）: 青テクスチャ背景に白明朝本文、重要語に黄下線、開発者写真
7. まとめの提案（生活イメージで背中を押す）: ベージュのボケ背景に生活写真を散らし中央に商品
8. コラボ紹介（親しみを出す）: 青ベタに黄ポップ見出しと白の短文、下端からマスコット
9. 定期コース特典（定期購入へ誘導）: 黄ベタ背景に番号付き白カード 3 枚を＋でつなぎ、青ピルの CTA
10. 単品購入（選択肢を示す）: 淡黄地に商品と紺の大価格、CTA
11. 成分表示・歴史（情報開示とブランドの歴史）: 白地の成分表、夕景写真に白明朝の物語文
12. 価格選択（コースと数量を選ぶ）: 紺見出し帯の価格比較ボックス 2 つと数量セレクト
13. 申込フォーム（その場で購入完了）: 水色帯見出し＋淡水色ラベル＋入力欄、緑の送信ボタン、規約スクロール枠

Imagery

• 商品パッケージは白背景で切り抜き、やや斜めに大きく置く
• ゆるい線画の白いマスコットを端からのぞかせ、ハートや渦巻きを添える
• 研究シーンは青みに寄せた実験器具の写真
• 人物は家族や幅広い年代の自然な笑顔写真
• 背景に青い波線や光の粒子を重ねて清潔感を出す
• 歴史パートは夕景の草原など暖色の風景写真を暗めに
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 900px 前後の固定幅で SP の構成を踏襲
• PC ではファーストビューの商品と見出しを横並びに
• お客様の声は PC で 2 カラム＋中央見出しに配置
• 特典カードは PC で 1 枚目全幅、2・3 枚目を横並び
• フォームは PC でラベル左・入力右の表組みに変える

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