DESIGN.md — 青×白×ピンクの爽やか機能性飲料 LP（Fresh Aqua Blue Functional Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、やさしい・柔らかい
• キーワード: シアンブルー・白カード・ピンクCTA・線画イラスト・波線装飾・価格訴求
• 地の質感: フラットな単色面が中心。所々に水色のミルク波形の地や淡いボケ写真を敷く
• 形: 角丸カード、ピル型ボタン、右下にずらした影付きボタン、円形の割引バッジ
• 温度感: 涼しげで明るい。暖色は価格と CTA だけに使う

Colors

• 地の色は青→白/淡い水色→空色の順に交互に切り替え、単調にしない
• 青い地の上には白い角丸カードを置き、その中に情報をまとめる
• ピンクはお試し購入の帯見出しと主CTAだけに使う
• オレンジはカート投入、緑は定期申込と、ボタンの色で役割を分ける
• 割引価格は赤文字＋黄緑マーカー、割引率は円形のピンク・赤バッジで見せる
• 見出しは紺か青、本文はチャコールにする。黒ベタは使わない
• button-primary は文字 #FEF3FC × 背景 #FE3677 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E1014A、4.52:1）を使う。
• button-cart は文字 #FEF3FC × 背景 #FE7B02 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B35601、4.58:1）を使う。
• button-subscribe は文字 #FEF3FC × 背景 #3D9565 のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#347F56、4.5:1）を使う。
• feature-card は文字 #FEF3FC × 背景 #018CD4 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0176B3、4.58:1）を使う。
• discount-badge は文字 #FEF3FC × 背景 #FE3677 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E1014A、4.52:1）を使う。
• faq-item は文字 #018CD4 × 背景 #FEFFFE のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0176B3、4.6:1）を使う。
• ribbon-label は文字 #FEF3FC × 背景 #FE3677 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E1014A、4.52:1）を使う。
• tab-switch は文字 #018CD4 × 背景 #FEFFFE のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0176B3、4.6:1）を使う。

Typography

• 見出しは太めのゴシックにし、キーワードだけ文字を大きくするか色を変える
• 価格の数字は本文の 3 倍ほどに大きくし、単位と税込表記は小さく添える
• 手書き風の書体は吹き出しとサブキャッチに限って使う
• 注釈は※番号を付けて、本文の下にまとめる
• 英字ラベル（Point・Contents）は細めの欧文サンセリフにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内の価格エリアは画像と価格の 2 分割
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約 16px の余白を空けて置く
• セクション見出しは中央揃えにし、下に波線を引く
• ポイントや味の違いはタブ型の切替で見せる
• お客様の声は横スライダーにし、ドットで送り位置を示す
• 目次はアコーディオンの 2 列グリッドにし、白い下線で区切る

Elevation & Depth

• 白カードは影なし、または非常に淡い影に留める
• 主ボタンは右下に同系色の濃いベタ影を 4〜6px ずらして置く
• FAQカードは影なしの白に角丸を付け、淡い水色の地から浮かせる

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで影なし。人物は円形か不定形の雲型で切り抜く
• セクション境界: 基本は直線で切り替える。一部はミルクが波打つような曲線の境界にする
• カード見出し帯は上側だけ角丸にする
• 割引率は円形のバッジにする
• 送料込みは四角い枠線のラベルにする
• Q アイコンは角丸の正方形にする

Components

• お試しCTA（button-primary）: ピンクのピル型。左に円形の限定ラベル、右に大きな割引率を置き、右下にずらした影を付ける
• カート投入ボタン（button-cart）: オレンジのピル型。カートアイコンを付け、影はずらして置く
• 定期申込ボタン（button-subscribe）: 緑のピル型で、ずらした薄緑の影を付ける
• 購入カード（offer-card）: 白カードの上部にピンクの帯見出しを付け、商品画像・通常価格・割引価格・注意書きを並べる
• 特長カード（feature-card）: 青い見出し帯の下に白い本文を置き、右に小さな写真を添える。全体を青い太枠で囲む
• 波線見出し（heading-wave）: 中央揃えの見出しの下に、黄色か青の波線を引く
• 割引率バッジ（discount-badge）: ピンクか赤の正円に白抜きで％OFFを入れる
• FAQアコーディオン（faq-item）: 白い角丸カード。左に青い四角の Q アイコン、右に＋を置く
• 手書きリボン見出し（ribbon-label）: 赤いかすれた質感のリボンに白い手書き風文字を入れ、枠付きカードの左上に重ねる
• タブ切替（tab-switch）: 選択中は白、非選択はグレーがかった水色。上側だけ角丸のタブにする

Do's and Don'ts

Do - 青地と白カードの組み合わせを全体で繰り返す - 購入カードは中盤と終盤の 2 か所に置く - 割引価格は通常価格と並べて差を見せる - 悩みは線画イラストと手書き吹き出しで柔らかく表現する - 注釈・届出表示は小さい文字でも必ず入れる

Don't - 暗い色や黒ベタのセクションを作らない - ピンクを装飾目的で多用しない - 角の尖ったボタンにしない - 写真を全面背景にして文字を重ねない - 1 枚のカードに CTA の色を混在させない

Page Structure

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

1. ファーストビュー（対象者と機能を一目で伝える）: 青地に白抜きの大見出しを置き、左に商品の切り抜き、右に円形の図解バッジを重ねる。下に届出表示の枠を付ける
2. 目次（ページ内を移動しやすくする）: 青地に、白い下線付きの 2 列アコーディオンリンクを並べる
3. お試しCTA（初回購入へ誘導する）: ピンク帯付きの白カードに、割引バッジ・価格・ピンクのピル型CTAを入れる
4. 悩みの提起（共感を得る）: ミルク波形の水色地に、線画の人物と手書き吹き出しを置き、スライダーで切り替える
5. 解決提示（商品を答えとして示す）: 手書きリボンを付けた枠カードに、本文と商品画像を並べる
6. 特長（3 つの強みを示す）: 青い見出し帯付きのカードを縦に 3 枚並べ、注釈を添える
7. 機能の解説（効果の根拠を伝える）: 青地に波線見出しを置き、Point タブ付きの白カードに博士風の線画とマーカー強調を入れる
8. 成分の秘密（独自素材を訴求する）: 淡い水色地の白カードに、円形アイコンと下線見出し、枠線ボタンを置く
9. 続けやすい理由（継続の不安を解消する）: タブ切替のカードに、原材料表示の画像を添える
10. お客様の声（信頼を補強する）: 空色地の白カード内に、アイコン付きの口コミを横スライダーで並べる
11. 商品ラインナップ・比較（味を選ばせて購入へ導く）: 味ごとに色分けしたタブと購入カードを置き、オレンジのボタンを付ける。下に比較表を添える
12. 定期コース（継続購入を促す）: ピンク帯のカードで、段階的な割引価格を赤枠と黄枠に分けて見せる。緑のボタンを付ける
13. よくある質問（不安を解消する）: 淡い水色地に、Q アイコン付きの白いアコーディオンを並べる
14. フッター（関連リンクを示す）: 濃い青地に、白文字のリンク一覧とSNSアイコンを並べる

Imagery

• 商品はボトルとケース入りを白背景で撮り、切り抜いて使う
• 人物の悩みは青一色の線画イラストにし、手書きの吹き出しを添える
• 笑顔の男女のモデル写真を明るい自然光で撮り、雲型に切り抜く
• ミルククラウンや菌の顕微鏡写真を素材感の補強に使う
• 円形のアイコン（顕微鏡・人物シルエット）は紺と青の 2 色で描く
• 集中線や斜線などの手描き風の線で、NEW 感や勢いを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px で中央に固定する
• 特長カードは PC で横 3 列にする
• 目次は PC で 3 列にする
• 悩みのイラストは PC でスライダーをやめ、3 つ並べる
• FV は PC で見出しと図解を左、商品を右に置く
• フッターは PC で 2 列のリンクと右寄せのSNSにする

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