DESIGN.md — 赤×青二分割の機能性乳飲料 LP（Red and Blue Split Functional Dairy LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 力強い・インパクト、信頼・誠実、ポップ・元気、情報量多め・訴求型
• キーワード: 赤青二分割・対比訴求・白抜き極太ゴシック・臨床データ・帯見出し・角ばった枠
• 地の質感: ベタ塗りの原色の面が基本。データ部は薄いグレーの水玉地にする。FV の下端に金色のグラデーション帯を 1 本入れる。
• 形: 角丸なしの矩形と太い枠線が中心。人物写真は金縁の正円にする。サブボタンだけピル型。
• 温度感: 赤の温かさと青の冷静さを半分ずつ。全体ではやや熱量が高め。

Colors

• FV と動画セクションは中央で左右に分け、左を赤、右を青で塗る。
• 赤は 1 つ目の機能、青は 2 つ目の機能に固定する。見出し・説明文・グラフの色も、この割り当てに合わせる。
• 大見出しは赤帯と青帯をずらして重ね、白抜き文字を載せる。
• 結論文は濃いグレーの地文の中で、キーワードだけを赤または青の極太文字にする。
• グラフは自社側をマゼンタ、対照側をグレーで塗る。
• Q は白い面に青枠、A は赤い面に白文字。A の中の強調は白地のマーカーに赤文字で入れる。

Typography

• 見出しは 900 ウェイトの極太ゴシックで統一する。
• ひらがなの助詞（や・の・など）は小さく、名詞は大きくして、ジャンプ率を作る。
• 英字ラベルは見出しのすぐ上に、小さく赤で置く。
• 注釈は ※ で始め、11px 程度で長くてもまとめて載せる。
• 明朝体と手書き体は使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FV と動画セクションだけ左右二分の 2 カラムにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 二分割の部分は、背景を画面中央で真っ二つに分ける。
• データ表は青い太枠の箱に入れ、タイトル帯・グラフ・出典欄の順に積む。
• 結論文は中央揃えで、データ表のすぐ下に置く。
• Q&A カードは幅 75% 程度で中央に縦に並べる。
• セクションの間は白地を広めに取る。

Elevation & Depth

• 影はほぼ使わない。平面のベタ塗りと太い枠線で階層を出す。
• 商品パッケージ画像だけ、ごく薄い落ち影を付けてよい。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 30px。ボタンはピル型。
• 写真の切り抜き: 人物は金縁の正円で切り抜く。商品は背景を抜いた切り抜きにする。
• セクション境界: 直線で区切る。FV の下に金色のグラデーション帯を 1 本入れる。
• 表・Q&A・帯見出しは角丸 0 の矩形にする。
• サブボタンは細い色枠の白いピル型にし、右端に「>」を付ける。
• 吹き出しは角丸の矩形に三角のしっぽを付け、白地に黒文字で書く。
• Q と A は面の左上に正方形のバッジとして置く。

Components

• 左右二分ヒーロー（split-hero）: 左が赤、右が青の地に、それぞれの機能のコピーを白抜きで置く。中央に商品を大きく配置する。
• 赤青帯の見出し（band-heading）: 赤帯と青帯を段違いに重ね、極太の白抜き文字を載せる。上に小さな英字ラベルを添える。
• 金縁の丸バッジ（badge-circle）: 白い円に金縁を付け、短い特長を 2 行で入れるバッジ。
• 臨床データの枠（data-table）: 青い太枠で囲み、タイトル帯・グラフ・出典欄を順に入れる。右上に青地の「変化量」タグを付ける。
• 詳細リンクボタン（button-secondary）: 白地に赤または青の細い枠を付けたピル型のボタン。
• 購入先の案内帯（store-band）: 赤帯と青帯を上下に重ね、白抜き文字を中央に置く。
• Q&A 開閉カード（faq-card）: 青枠の白カードの左上に Q バッジ、中央に質問文と青いアイコンを置く。下の帯の「回答を見る」で、赤地の A 面が開く。
• ボトル形のページトップ（pagetop-bottle）: 商品ボトルのシルエットを青で塗り、白で文字と上向きの矢印を入れる。

Do's and Don'ts

Do - 2 つの機能の色を、赤と青に一貫して割り当てる。 - 見出しには極太ゴシックの白抜き文字を使う。 - 根拠のデータと注釈は省略せず、枠の中にきちんと並べる。 - 結論文のキーワードは、色を変えて大きくする。 - FAQ のアイコンは青一色のフラットなイラストにする。

Don't - 淡いパステルやグラデーションの地を主役にしない。 - 角丸の大きいカードや影を多用しない。 - 赤と青以外の強い色を、見出しや帯に足さない。 - 細い明朝や軽いウェイトで見出しを組まない。

Page Structure

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

1. ファーストビュー（2 つの機能を対比して一目で伝える）: 赤と青の二分割の地に白抜きのコピーを置く。中央に商品、周りに丸バッジを散らす。
2. 成分の紹介（成分ごとの働きを説明する）: 左右それぞれに、金色の見出し・円形の人物写真・説明文・小さなアイコンを置く。
3. 締めのコピー（両方の価値をまとめる）: 二分割の地をまたいで、白抜きの極太 2 行コピーとロゴを置く。
4. 動画（CM の世界観で興味を引く）: 白い吹き出しの見出しの下に、赤青の枠付きサムネイルと別編へのバナーを置く。
5. 臨床試験の結果（科学的な根拠を示す）: 水玉地の上に帯見出しを置く。青枠の表にグラフと出典を入れ、注釈と結論文を続け、ピル型ボタンで締める。
6. 2 つ目の成分の研究（もう一方の根拠を示す）: 同じ表の型で棒グラフを入れ、青の強調で結論を書く。
7. 商品情報（商品の仕様を伝える）: 左に商品の切り抜き、右に商品名・容量タグ・説明・ピル型ボタンを置く。下に黒枠の表示事項欄を付ける。
8. 購入先の案内（買える場所を伝える）: 赤青 2 段の帯に白抜き文字を入れる。
9. よくある質問（不安を解消する）: 帯見出しの下に、Q&A カードを縦に積む。A は赤面で開く。
10. フッター（関連リンクとページトップへの導線）: ボトル形のページトップボタンを置く。小さなテキストリンクを右に寄せ、コピーライトを添える。

Imagery

• 人物は赤または青の衣装で、明るく笑う広告らしい写真にし、正円で切り抜く。
• 商品は背景を抜いた正面の切り抜きにし、大きく見せる。
• アイコンは青一色のフラットな図形にする（時計・分子・カプセルなど）。
• グラフはシンプルな折れ線と棒にし、マゼンタとグレーの 2 色で塗る。
• 動画のサムネイルには網点のテクスチャを重ね、吹き出しの文字を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも左右二分割を保ち、コピーを商品の左右に横並びにする。
• PC ではデータ表を 2 つ横に並べる。
• PC の FAQ は Q と A を市松状の 2 カラムにし、A を常に表示する。
• 帯見出しは PC では 1 行に収める。
• コンテンツ幅は PC で 1000px 前後に収める。

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