DESIGN.md — 青×白の清潔感ある機能性ヨーグルト LP（Clinical Blue Functional Yogurt Monitor LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、親しみ・手作り感
• キーワード: 青と白・エビデンスグラフ・手描き線画・モニターキャンペーン・価格比較カード・ミルクの清潔感
• 地の質感: フラットな単色面が中心。背景にうっすらと水彩・ガラス風の淡いブルーのにじみを敷く。
• 形: 角丸カード、上辺が角丸の見出し帯、大きく角を丸めたポイントパネル、円形写真、下向きの V 字セクション区切り。
• 温度感: 冷たくなりすぎない爽やかな寒色。オレンジと黄色で温かみを足す。

Colors

• 地の色は白と淡いブルーを交互に使い、FV と申込エリアだけ鮮やかな青で塗る。
• エビデンスは2本立て。1本目は紺、2本目はオレンジの大きな角丸パネルで色を分ける。
• グラフの実験群は黄色、比較群はグレーにする。
• 値引き率・特別価格は赤、継続価格はオレンジにする。通常価格は紺のままにする。
• 主 CTA はオレンジ、定期コースのボタンはミントグリーンにして申込経路を色で分ける。
• 黄色は濃い面の上でマーカーや枠線として使う。
• button-primary は文字 #FFFFFF × 背景 #FE7B02 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD5B01、4.51:1）を使う。
• check-form は文字 #FFFFFF × 背景 #39B5F3 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0B7DB6、4.54:1）を使う。
• deadline-badge は文字 #FFFFFF × 背景 #F18300 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B16000、4.62:1）を使う。

Typography

• 価格数字は 36px 前後の太字にし、円と税込は小さく添える。
• 見出しの一部の語だけを青で色分けする。
• 生活者の本音は手書き風フォントで書き、吹き出しに入れる。
• 注釈は ※ 番号付きで小さく、ブロックの下にまとめる。
• 強調したい語には黄色のマーカーや下線を引く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。用途写真だけ 2 列
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 56px、基本単位 8px、カード内 14px（375px 幅換算）
• カードは左右 12px の余白で、画面いっぱい近くまで広げる。
• ポイントパネルは片側を画面端まで伸ばし、反対側の角だけ大きく丸める。
• 価格カードは上に青い見出し帯、中に通常価格→下向き三角→特別価格の順で縦に積む。
• 購入カードの直後に CTA を置き、その下に補足注記を中央揃えで入れる。
• 悩みイラストは 1 つずつ縦に大きく並べ、余白を広く取る。

Elevation & Depth

• カードには下方向に、濃い青のずらし影（4px のベタ影）を付ける。
• CTA ボタンには淡い色の下ずらし影を付け、厚みを出す。
• 一般の本文ブロックには影を付けない。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物写真は円形か角丸なしの矩形。商品はミルククラウンと並べた切り抜き。
• セクション境界: 下向きの V 字の尖り、ミルクが流れるような波形、平らな色の切り替えを使い分ける。
• 見出し帯はピル型か、上辺だけ角丸にする。
• ポイント番号は黄色地の角丸四角のバッジにする。
• 値引きラベルは赤い四角か白地に赤枠の小さなバッジにする。
• 期限バッジはオレンジの円にする。

Components

• 主 CTA ボタン（button-primary）: オレンジのピル型ボタン。2 行の白文字で、左上に小さな対象者ラベルのタブを付ける。
• 定期コースボタン（button-subscription）: ミントグリーンのピル型ボタン。右端に「…→」の矢印を付ける。
• 価格比較カード（price-card）: 青い上帯の白カード。通常価格ラベル→三角→赤い特別価格ラベルと大きな数字、送料込み枠を並べる。
• エビデンスパネル（point-panel）: 紺またはオレンジの大きな角丸パネル。番号バッジ、見出し、折れ線グラフ、注釈を入れる。
• 特長カード（feature-card）: 青い見出し帯と青枠の白カード。本文の右に小さな正方形写真を置く。
• 悩み吹き出し（thought-bubble）: 線画のもくもく雲に手書き文字を入れ、人物イラストの横に添える。
• アンケートチェック欄（check-form）: 半透明の白枠の中に Q 番号の丸、白いチェックボックス、白文字の設問を並べる。
• 期限バッジ（deadline-badge）: オレンジの円に白文字で日付を入れ、カードの右上に重ねる。
• ピル型見出し帯（pill-heading）: 横長の青いピルに白い太字で入れる小見出し。

Do's and Don'ts

Do - 青系を主役にし、暖色は CTA・価格・2 本目のエビデンスだけに絞る。 - 臨床データは折れ線グラフかドーナツグラフにし、注釈を必ず添える。 - 人物の悩みは青い単色の線画で、ユーモラスに描く。 - 購入カードは FV の直後とページ末尾の 2 回置く。 - 強調語には黄色のマーカーや青い色を付ける。

Don't - 黒や濃いグレーの重い背景は使わない。 - グラフの色を実験群・比較群で逆にしない。 - 手書きフォントを本文や価格に使わない。 - CTA を青系にして背景に埋もれさせない。 - 注釈を省略して効果を断定しない。

Page Structure

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

1. ファーストビュー（2 つの効果と日本初を一目で伝える）: 青の背景に白の大見出しと黄色の波線。商品をミルククラウンと合わせて斜めに置き、縦書きのチェック項目と注釈を添える。
2. 表示区分の注記（法定表示で信頼を担保する）: 淡いブルーの帯に、小さな文字で届出情報をまとめる。
3. キャンペーン告知と価格（期間限定の特別価格で申込へ誘導する）: 雲型の吹き出し見出しと期限バッジの下に、価格比較カードとオレンジの CTA を置く。
4. 悩みの提起（ターゲットの本音に共感する）: 白背景に線画イラストと手書き吹き出しを 3 つ縦に並べる。
5. 解決提示（商品を答えとして紹介する）: 斜めの赤い和紙風ラベルを付けた白カードに、商品の切り抜きを入れる。
6. 特長（3 つの特長を要約する）: 青い見出し帯付きのカードを 3 枚、縦に並べる。
7. エビデンス1（1 つ目の効果を臨床データで示す）: 紺のパネルに折れ線グラフ・ドーナツグラフ・円形の人物写真・線画を入れる。
8. エビデンス2（2 つ目の効果を臨床データで示す）: オレンジのパネルに、下降する折れ線グラフと注釈を入れる。
9. 成分の秘密（独自成分の研究背景を伝える）: 青い V 字の帯で区切り、研究室写真と菌の顕微鏡写真、用語解説のガラス風カードを置く。
10. 続けやすい理由（原材料とサイズの手軽さを伝える）: ピル型見出しの下に原材料表示の拡大と、生活シーンの写真を 2 列で並べる。
11. アンケート応募（申込前の条件チェックをさせる）: スカイブルーの地に手書き見出しを入れ、Q1〜Q4 のチェック欄を置く。
12. 最終 CTA（モニターと定期の 2 経路で申し込ませる）: モニター用の価格カードにオレンジのボタン、定期用のカードにミントのボタンを付け、下にテキストリンクと TOP ボタンを置く。

Imagery

• 商品はボトルを単体で切り抜き、白いミルクのしずくや王冠と組み合わせる。
• 人物は 30〜40 代の男女。自然光の室内でリラックスしている姿や仕事中の姿を、円形または矩形で使う。
• 悩みイラストは青の単色の線画にし、水色のベタを少し入れた漫画風にする。
• 背景に淡い青紫の水彩やガラスのようなにじみを薄く敷く。
• 研究室の写真や顕微鏡画像で科学的な根拠を見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 900px 幅のコンテンツを置き、左右に背景色を伸ばす。
• PC の FV は横長にし、見出しを 1 行にまとめる。
• PC の価格カードは左に価格、右に商品写真の 2 カラムにする。
• PC の特長カードとイラストは 3 列で横に並べる。
• PC のエビデンスは本文とグラフを左右に分けて配置する。
• PC の続けやすい理由は 2 つのブロックを左右に並べる。

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