DESIGN.md — 水色×赤の水面質感サプリメント LP（Aqua Blue Water-Texture Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、情報量多め・訴求型、信頼・誠実
• キーワード: 水面テクスチャ・シアン帯見出し・深紅ランキング・明朝×ゴシック・比較表・成分訴求
• 地の質感: 水の波紋や光の反射を淡く敷いた写真背景。ランキング部分は赤のグラデーションに光のボケを重ね、金文字で光沢を出す。
• 形: 角が立った四角の帯とカードが基本。成分タグだけピル型、ビタミンは六角形バッジ。見出し帯の下に小さな三角の吹き出しをつける。
• 温度感: 寒色が中心で清涼感がある。赤と金で熱量を一部に足している。

Colors

• 基本の地は水面テクスチャの淡い水色にし、セクションごとに濃淡を変える。
• セクションの大見出しはシアンの全幅帯に白の明朝で載せ、帯の下端に黄色線を引く。
• 実績やランキングの訴求だけ深紅の地に金と白の文字を使う。
• 比較表は自社列を赤、項目列を青、他社列をグレーにして一目で差がわかるようにする。
• 数値の強調は赤、成分カテゴリは橙と緑で色分けする。
• 明朝の見出しは紺、本文はダークグレーにする。
• band-heading は文字 #FBFEFE × 背景 #37A2C0 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2B7F96、4.52:1）を使う。
• point-card は文字 #F27401 × 背景 #FFFFFE のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#BD5A01、4.54:1）を使う。
• ingredient-tag は文字 #FBFEFE × 背景 #F27401 のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#BD5A01、4.58:1）を使う。
• speech-pill は文字 #FBFEFE × 背景 #37A2C0 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2B7F96、4.52:1）を使う。

Typography

• 情緒的な大見出しは明朝、事実や数値はゴシックの極太にする。
• 強調語は文字を大きくし、残りは小さくして 1 行内で強弱をつける。
• 数値は赤の斜体セリフ体にして目立たせる。
• 強調語の下に黄色の半透明マーカーを引く。
• かぎ括弧で商品名やキーワードを囲んで目立たせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントカードと価格表だけ 2〜3 列にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の背景に切り替え、余白でなく背景の色で区切る。
• 商品パッケージ画像は見出しの横か下に何度も配置する。
• ポイントカードは 2×2 のグリッドにする。
• 比較表は 4 列で、項目・自社・他社 A・他社 B の順に並べる。
• 成分 3 種は丸い写真と説明文を横 3 列に並べる。

Elevation & Depth

• 影はほとんど使わない平面的な構成にする。
• 商品パッケージにだけ薄いドロップシャドウをつける。
• 説明パネルは白の半透明にして写真の上に重ねる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 写真は全幅の角版か丸型に切り抜く。商品は切り抜き画像を使う。
• セクション境界: 直線で区切る。帯見出しの下に三角の吹き出しを出し、ランキング部分の下端は浅い V 字にする。
• カードは角丸なしの細い枠にし、上部にシアンのラベルをつける。
• 成分タグはピル型にする。
• ビタミンは銀枠の六角形バッジにする。
• 誘導ラベルは吹き出し付きのピル型にする。

Components

• シアン帯見出し（band-heading）: 全幅のシアン帯に白の明朝で 2 行の見出しを載せる。下端に黄色線と三角をつける。
• ランキング訴求ブロック（ranking-hero）: 深紅の地に王冠エンブレムと金文字の大きな順位を置き、ランキング画面のキャプチャを添える。
• まとめ買い価格表（price-table）: 単品・2袋・3袋を比べる表。見出し行は黒、割引率は赤。下に赤の「お得額」タブを並べる。
• 悩みチェックリスト（worry-checklist）: 暗いグレー写真の上に、赤いチェックボックスと白文字の悩みを 4 行並べる。
• ポイントカード（point-card）: 上部にシアンの番号ラベルがある枠付きカード。本文は橙と青の太字ゴシックにする。
• 他社比較表（comparison-table）: 項目列は青、自社列は赤の地に黄色の太字、他社列はグレー。
• 成分タグ（ingredient-tag）: 橙または緑のピル型タグを 3 列に並べ、カテゴリ色の枠で囲む。
• 六角形ビタミンバッジ（hex-badge）: 銀の枠と白い半透明の内側をもつ六角形。中に黄色マーカー付きの太字を入れる。
• 誘導吹き出しラベル（speech-pill）: シアンのピル型に白の太字を入れ、下に三角をつけて次のセクションへ誘導する。
• 監修者プロフィール（expert-profile）: 左に肩書と明朝の大きな氏名、右に白衣の人物写真を置く。下に経歴の本文を続ける。

Do's and Don'ts

Do - 地は淡い水色の水面テクスチャにして清涼感を保つ。 - 大見出しは明朝、数値はゴシックの極太か赤の斜体にして強弱をつける。 - 商品パッケージ画像を各セクションに繰り返し登場させる。 - 比較表とポイントカードで、根拠を数字で見せる。 - セクションの区切りにはシアンの帯と黄色線を使う。

Don't - 暖色の地をページ全体に広げない。赤はランキングと比較表に限る。 - 角丸を大きくした柔らかいカードを多用しない。 - 明朝を本文の小さい文字に使わない。 - 影を強くかけた立体的な UI にしない。 - 見出しを装飾なしの黒文字だけで済ませない。

Page Structure

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

1. ファーストビュー（商品と主な配合量・機能を一目で伝える）: 白い浴室で撮った脚の写真の右に商品パッケージを置く。左に丸いバッジを 2 つ、上に青のゴシックのキャッチを載せる。
2. ランキング実績（人気を示して信頼を得る）: 深紅のグラデーションに王冠と金文字の大きな順位を置き、ランキング画面のキャプチャを添える。
3. まとめ買い価格（複数袋の購入を促す）: 金色の見出し帯の下にセット商品の画像と赤い割引バッジ、価格比較表を置く。
4. 悩みの提起（読み手に自分ごと化させる）: 暗いグレー写真の上に、白の大見出しと赤チェック付きの悩みを 4 つ並べる。
5. 原因の提示（成分不足が原因かもしれないと気づかせる）: 明朝の紺の見出しと黄色マーカー付きの説明文を置き、横に商品を配置する。
6. 解決提案（商品で解決できることを示す）: 青い水面写真の上に白の明朝コピーと商品を載せる。
7. 特長ポイント（主な特長を 4 つに絞って示す）: シアン帯見出しの後、赤の斜体で数値を訴求し、2×2 のポイントカードを並べる。
8. 他社比較（優位性を見せる）: 女性の写真と明朝の見出しを置き、4 列の色分け比較表を続ける。
9. 成分紹介（主要成分とその他の配合成分を伝える）: 丸く切り抜いた成分写真を 3 列に並べる。その他の成分は橙と緑のタグ群で見せる。
10. 機能性の説明（食品区分の安心感を伝える）: 枠で囲んだ明朝の大見出しの後、研究室写真の上に六角形バッジと半透明の説明パネルを重ねる。
11. 専門家監修（専門家の監修で権威を示す）: シアン帯見出しの後、プロフィールと写真、コメント本文、注釈を置く。
12. 品質管理（製造の安心安全を伝える）: 明朝の見出しを罫線付きのサブ見出しで挟み、工場写真と認証マーク、説明文を横並びにする。

Imagery

• 水面の波紋や光の反射を淡い水色で撮った写真を背景テクスチャに使う。
• 白く明るい浴室や室内で、素足や脚を見せる女性のモデル写真を使う。
• 成分は素材のクローズアップ写真を丸く切り抜く。
• 研究室や工場の青みがかった写真で、清潔さと信頼を表す。
• 王冠エンブレムや金属光沢の文字で、実績の訴求に高級感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は SP 想定の縦長画像を PC 中央に約 720px 幅で置いた構成。
• SP では 1 カラムで、見出しは 24〜28px にする。
• PC に広げるときは本文を 720〜960px の中央にまとめ、背景のテクスチャだけ全幅に伸ばす。
• 比較表は SP でも 4 列のままにし、セル内の文字を縮める。
• 成分の 3 列は SP でも維持し、説明文は 12px まで下げてよい。

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