DESIGN.md — ピンク×パステルの女性向けプロテインLP（Flavor-Driven Pastel Protein LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、やさしい・柔らかい
• キーワード: フレーバー写真・パステル色帯・大きな数字・ピンク強調・女性向け・比較図解
• 地の質感: 写真のシズル感が主役。地は無地のパステルで、装飾はフラットにする
• 形: 円バッジ、角丸の白カード、ピル型の見出しラベル。フレーバー帯は四角い全幅
• 温度感: 暖色寄りでやわらかい。ミントの寒色で抜け感を出す

Colors

• 地は白・クリーム・ミント・ピーチをセクションごとに切り替える
• 強調したい語はピンク文字か黄色マーカーにする
• フレーバー帯は写真の色に合わせた半透明の色帯を下に敷く
• 大きな実績数字はゴールドかピンクで見せる
• 成分の対比は紫とピンクの2色で色分けする
• 黒帯は一覧見出しなど締めの位置だけに使う
• circle-badge は文字 #6FB8C8 × 背景 #FEFEFE のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#367E8E、4.59:1）を使う。
• number-circle は文字 #FD638C × 背景 #FEFEFE のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EA0341、4.54:1）を使う。
• compare-circles は文字 #FFFFFF × 背景 #9B82EC のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#7D5CE6、4.62:1）を使う。

Typography

• 見出しは極太ゴシックで中央揃えにする
• 数字だけ2〜3倍に大きくし、単位は小さく添える
• フレーバー名は英字を大きく、和名を小さく下に重ねる
• 写真上の文字は白で、影か暗い色帯を下に敷く
• 注釈は数字の直下に小さく右揃えで置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分タイルは 4 列、フレーバー一覧は 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• フレーバー帯は全幅写真に、半透明の色帯で商品パッケージと説明を重ねる
• 見出し、図解、補足文の順に縦に積む
• 比較は左右2つの円か、矢印でつないだ2枚の写真で見せる
• 3つの要素は番号付きの円を横3つに並べる
• セクション間は余白より地色の切り替えで区切る

Elevation & Depth

• 基本はフラット
• 白カードにごく薄い影を付けて地から浮かせる
• 商品パッケージ写真に軽いドロップシャドウを付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は全幅の四角。人物とパッケージは切り抜き、比較用の写真は円形にする
• セクション境界: 直線で地色を切り替える。一部は下向きの三角や矢印でつなぐ
• バッジは正円にする
• 見出しラベルは黒のピル型にする
• 成分タイルは小さめの角丸に枠線を付ける

Components

• 実績円バッジ（circle-badge）: 白い正円の中に短い訴求と大きな数字を入れ、3つ横に並べる
• フレーバー帯（flavor-band）: 全幅の写真に英字名と和名を重ね、下に色帯・パッケージ・説明文を置く
• 黒ピル見出しラベル（pill-label）: 問いかけや接続語を黒いピルに白文字で入れ、見出しの上に置く
• マーカー強調見出し（marker-heading）: 極太の見出しの一部に黄色マーカーを引くかピンク文字にする
• 番号付き要素円（number-circle）: 黒い丸数字を上に重ねた白円の中に、色付きの短いキーワードを入れる
• 2成分の対比円（compare-circles）: 紫とピンクの円を重ね、真ん中に＆を置いて特徴を対比する
• 成分タイル（nutrient-tile）: ピーチ地に枠線を付けた小タイルを4列で並べる
• 計算式ボックス（formula-box）: 白枠の語を記号でつなぎ、仕組みを式のように見せる

Do's and Don'ts

Do - フレーバーごとに写真の色と色帯の色をそろえる - 根拠は大きな数字と注釈をセットにして見せる - パステル地を交互に変えてリズムを作る - 強調はピンクと黄色マーカーに限る - 図解はグラフや計算式でシンプルに作る

Don't - 彩度の高い原色で地を塗らない - 明朝体や細い書体を見出しに使わない - 写真の上に色帯なしで長文を置かない - 強調色を4色以上同時に使わない - 数字の注釈を省かない

Page Structure

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

1. ファーストビュー（満足度とターゲットを一目で伝える）: ピンク帯に実績コピー、人物写真の上に極太見出しを置き、円バッジ3つとパッケージの並びを添える
2. フレーバー紹介（味の多さとおいしさを感じさせる）: 全幅シズル写真と色帯を9回繰り返す
3. 甘味料のこだわり（原料の安心感を伝える）: クリーム地の見出しにマーカーを引き、原料写真と白カードの説明を置く
4. 販売実績（社会的な証明）: 月桂冠で囲んだゴールドの大きな数字
5. 選ばれる理由（3つの強みを示す）: 人物とパッケージの切り抜き、番号付きの円を3つ
6. 満足度（味への評価を再び強調する）: 写真コラージュの上にピンクの大きな円と数字を重ねる
7. 飲みやすさ（溶けやすさを訴求する）: シェイカー写真に水色の円吹き出しを重ねる
8. ダイエットの仕組み（タンパク質が必要な理由を説明する）: 黒ピルの問い、計算式ボックス、ピーチのグラデ地
9. 食事との比較（手軽さとカロリーの差を示す）: 円形写真の比較と大きな数字、ピンク帯の削減カロリー
10. 配合成分（Wプロテインと美容成分を説明する）: ミント地に対比円、吸収グラフ、成分タイル4列
11. フレーバー一覧（味を選ぶ段階へ移す）: 黒帯の見出しの下に、写真とパッケージのグリッドを3列で並べる

Imagery

• 飲み物のシズル写真は寄りで撮り、ホイップ・ソース・果実の質感を出す
• 背景はぼかしたカフェ風の木目や布にする
• パッケージは正面の切り抜きで、色帯の上に斜めに置く
• 人物は明るい自然光の笑顔の女性にする
• 図解はフラットな線グラフや簡単なアイコンにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPC版も幅の狭い1カラムで、SPと同じ構成で問題ない
• PCでは中央に約640pxの帯で配置し、左右は無地の地色にする
• SPではフレーバー一覧を3列のまま縮めるか、2列にする
• 円バッジはSPで3つ横並びのまま直径約100pxにする

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