DESIGN.md — 水色地×白カードの会話型サプリ LP（Sky Blue Dialogue Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、情報量多め・訴求型、信頼・誠実、親しみ・手作り感
• キーワード: 水色地・白カード・吹き出し会話・赤マーカー強調・成分の球体アイコン・グラフで根拠
• 地の質感: 質感のないフラットな単色の面。カードにうっすら影を付け、光沢のある球体アイコンで立体感を足す
• 形: 角丸カード・角丸の吹き出し・ピル型ボタン・円形の成分バッジ
• 温度感: 爽やかで少し涼しい色温度。赤と黄で温かみを足す

Colors

• 水色を地にして、内容はすべて白いカードや吹き出しに載せる
• 強調したい語は赤文字か赤の下線にし、1 文に 1〜2 か所までにする
• 見出しは濃い青緑の文字にし、強調語だけ赤にする
• 吹き出しの文字の下に淡い黄のマーカーを引く
• CTA は緑だけ。ほかの要素に緑を使わない
• 実績・数字のセクションだけ薄いグレー地とベージュの月桂冠で格を出す
• button-primary は文字 #FFFFFF × 背景 #25B512 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1C890E、4.53:1）を使う。
• section-title-bar は文字 #028BAC × 背景 #FDFEFD のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#027F9D、4.59:1）を使う。
• function-heading は文字 #028BAC × 背景 #FEF5C7 のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#027F9D、4.58:1）を使う。
• stat-medal は文字 #028BAC × 背景 #F3F3EC のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#027F9D、4.52:1）を使う。

Typography

• 全体を太めのゴシック体でそろえる
• 見出しはキーワードだけ文字を大きくし、赤にする
• 見出しの左右に斜線の飾り（＼ ／）を付けてリズムを出す
• 数字は欧文の極太書体で、単位より大きく組む
• 注釈は小さいグレー文字で、カードの下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。目次ナビだけ 2×2 のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 吹き出し会話は人物アイコンと吹き出しを左右交互に置く
• 説明は白い大きなカードに入れ、グラフや図版もその中に収める
• セクションの頭に白いピル型の見出しバーを置く
• セクションの間は下向きのシェブロンでつなぐ
• お客様の声は横長のカードを縦に積む

Elevation & Depth

• 白カードには弱い影を付ける（0 2px 8px rgba(0,0,0,.08)）
• 吹き出しは影を付けず白い面だけにする
• 成分の球体アイコンはグラデーションとハイライトで立体的に見せる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を切り抜いて肩から上にする。食材と利用者の写真は角丸の矩形
• セクション境界: 境界は直線。白カードと水色地の切り替えで区切り、シェブロン矢印でつなぐ
• 見出しバーは白のピル型で、太めの水色の枠線を付ける
• 成分は円形のバッジで表す
• 吹き出しには小さな三角のしっぽを付ける
• CTA は全幅に近いピル型にする

Components

• 主 CTA ボタン（button-primary）: 緑のピル型ボタン。右に丸い矢印アイコンを置く
• オファーカード（offer-card）: 赤い見出し帯の下に白地で商品・価格・割引バッジを並べる
• 会話の吹き出し（speech-bubble）: 人物アイコンの横に置く白い吹き出し。強調語は赤文字にして黄のマーカーを引く
• 見出しバー（section-title-bar）: 白のピル型に水色の枠線。見出しのキーワードは赤
• 目次ナビ（nav-tile）: 濃い青緑の角丸タイル。白文字で、下向き矢印の丸アイコンを付ける
• 成分バッジ（ingredient-badge）: 光沢のある円形。成分ごとに青・橙・緑・黄で色を分ける
• 機能の見出し（function-heading）: 番号ラベルとアイコンを上に載せ、淡い黄の帯に大きな見出しを置く
• お客様の声カード（voice-card）: 白の横長カード。左に見出しと本文、右に写真を置き、年代は赤のタグで示す
• 実績の月桂冠（stat-medal）: 月桂冠か円グラフの中に、大きな数字と注釈番号を入れる

Do's and Don'ts

Do - 説明は人物どうしの会話の形で、短い吹き出しに区切って進める - 根拠のグラフには、出典を小さな注釈で必ず添える - 強調は赤文字と黄マーカーに絞る - 水色地と白カードの 2 層構造を最後まで保つ - 成分は色分けした球体アイコンでくり返し見せる

Don't - 地色を暗い色にしない - CTA 以外に緑のボタンを置かない - 本文を長く続けない。3〜4 行ごとに吹き出しか見出しを挟む - 明朝体を使わない - カードの角を直角にしない

Page Structure

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

1. ファーストビュー（問いかけで興味を引き、すぐにオファーを見せる）: 水色地に大きな白文字のキャッチを置き、著名人 2 人の切り抜き写真と成分の図を並べる。その下にオファーカードと緑の CTA
2. 導入の会話（テーマを会話で自然に紹介する）: 人物アイコンと吹き出しを左右交互に置き、研究員が登場する
3. 目次ナビ（読みたい章へすぐ移れるようにする）: 濃い青緑の角丸タイルを 2×2 で並べる
4. 悩み・理由の説明（栄養が必要な理由を示す）: 見出しバーの後に、白カードの中で図解とグラフを見せ、会話を挟む
5. 成分の紹介（注目している成分を紹介する）: 成分の球体バッジと食材の写真を並べる
6. 商品の解決策（商品を答えとして提示する）: 白カードに成分バッジと＋記号を並べ、ボトルの写真と球体を組み合わせる
7. 機能の根拠（3 つの機能を試験データで裏付ける）: 機能ごとに番号付きの黄の見出しを置き、イラストとグラフ、注釈を続ける
8. お客様の声（利用者の実感を伝える）: 写真付きの横長カードを縦に積み、その後に一言コメントのリストを続ける
9. 実績（売上や満足度で信頼を示す）: 薄いグレー地に、商品を集合させた写真、月桂冠の数字、円グラフを並べる
10. キャンペーン告知と CTA（申し込みへ誘導する）: 大きな告知見出しと赤の下向き矢印を置き、赤い帯のオファーカードと緑の CTA を続ける

Imagery

• 人物は白背景で撮った笑顔の写真を、肩から上で切り抜く
• 研究員は白衣を着せ、指差しや商品を持つポーズにする
• 成分は光沢のあるカラフルな球体の 3D 風アイコンにする
• 食材は明るい物撮り写真を角丸で見せる
• 感情を表すのはシンプルな線画のイラストにする（電球・汗など）
• グラフは棒グラフで、赤とグレーの 2 色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元の PC 版は、中央に置いた SP 幅のカラムの左右を水色で埋めるだけのレイアウト
• SP では幅 100% にし、カードの左右に 16px の余白を取る
• PC で広げる場合も、本文カラムは最大 640px 程度にとどめる
• 目次ナビは SP でも 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 行書くと起動時に読み込まれる。