DESIGN.md — 紺×金×緑ボタンの訴求型ミネラル水LP（Navy Gold Mineral Water Advertorial LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 情報量多め・訴求型、上品・高級、清潔・爽やか、信頼・誠実
• キーワード: 濃紺と金・水しぶき・受賞・権威・比較表・繰り返しCTA・明朝見出し
• 地の質感: 水しぶき・氷・金の紙吹雪の写真質感。明るいセクションは淡い方眼紙やグレーのぼかし背景。
• 形: 四角い表とカード、斜めのセクション切替、円形バッジ、角丸の太いピル型CTA。
• 温度感: 明るい部分は爽やかで涼しく、暗い部分は黒×金で重厚。全体はやや冷たい色温度。

Colors

• 明るい地（白・淡水色・生成り）と暗い地（濃紺・黒）を数画面ごとに交互にする。
• 暗い地の大見出しは金のグラデーション明朝、明るい地の大見出しは濃紺明朝。
• CTAだけは緑グラデーション＋黄文字に固定し、他要素に緑を使わない。
• 価格・OFF表示・悩みの強調語は赤系で示す。
• 比較表は自社列を濃紺、他社列を白、項目列を青にして差を見せる。
• 強調語は青文字＋点線下線か、濃紺ベタ帯に白抜き。
• button-primary は文字 #E7FD2D × 背景 #29965B のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#227C4B、4.56:1）を使う。

Typography

• 権威・情緒の見出しは明朝、説明と口コミはゴシックに分ける。
• 数値は特大にし、単位（mg・円）は小さく添える。
• 見出し上に小さな英字ラベルや問いかけの小見出しを置く。
• 強調語だけ色を変える。1行の中で2〜3語まで。
• CTAは上段にスラッシュで挟んだ小コピー、下段に大きな行動文の2段構成。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表のみ 4〜5 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の背景で区切り、内側カードは左右6%の余白。
• 主CTAは1〜2画面ごとに挿入する。
• 画像と大見出しは中央揃え、本文は左揃え。
• 悩みチェックリストは白カード内で縦に並べる。
• 価格ボックスは白カードに商品写真→商品名→価格→CTA→注釈の順。

Elevation & Depth

• CTAボタンは濃い下影で立体的な押しボタン風に。
• 白カードはごく薄い影（0 2px 8px rgba(0,0,0,.1)）。
• 暗いセクションは影なし。光や紙吹雪の写真で奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は全幅の角なし。人物は背景を抜いて大きく配置。成分は円形バッジ。
• セクション境界: 斜めカットと下向き三角の矢印。直線も混ぜる。
• CTAは角丸の大きいピル型で右端に白い三角アイコン。
• ラベルは角なしの濃紺・青ベタ帯。
• 強調の囲みには角括弧型の線枠を使う。
• 成分・効果は円形の青バッジで散らす。

Components

• 緑グラデCTA（button-primary）: 緑グラデのピル型。上段に白い小コピー、下段に黄色い大文字、右端に三角。
• お試し価格カード（price-box）: 暗地の上に白カード。商品の集合写真、セット数、取り消し線の通常価格、赤い大価格、赤丸のOFFバッジ。
• 成分比較表（comparison-table）: 自社列は濃紺地に白の太字、他社列は白地、項目列は青地。重要セルは金枠で囲む。
• 悩みチェックリスト（check-list）: 白カードに赤いチェックボックスと悩み文を並べる。強調語は赤文字＋点線下線。
• 見出しラベル（label-tag）: 事実・つまり・注目などの短い語を入れた濃紺/青の四角ラベルや円形バッジ。
• 口コミカード（voice-card）: 線画の人物アイコンに年代・地域の青丸、濃紺帯の見出し、本文の順。
• 金の受賞見出し（award-heading）: 黒地の紙吹雪写真に、金グラデの明朝大見出しとメダル画像。
• Point番号ブロック（point-block）: 生成り地に金色の Point 01 表記、明朝の小見出し、横長写真、本文。

Do's and Don'ts

Do - CTAは同じデザインで何度も繰り返す。 - 受賞・認証・比較の数値で権威を積み上げる。 - 明暗のセクションを交互に置いてリズムをつける。 - 強調語は色＋下線、または濃紺ベタ帯の白抜きにする。 - 注釈は小さいグレー文字で必ず添える。

Don't - CTAを緑以外の色にしない。 - パステルや丸ゴシック中心のかわいい雰囲気にしない。 - 大見出しを細いゴシックだけで済ませない。 - 金色を本文に使わない。 - 余白を広く取りすぎたミニマルな構成にしない。

Page Structure

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

1. ファーストビュー（商品の価値と権威を一目で伝える）: 上部に金帯と数値、人物写真、商品ボトル、縦書きの明朝コピー、満足度メダル、受賞バッジ。
2. お試しオファー（最初の申込導線）: 濃紺地に金の明朝見出し、白い価格カードとCTA。
3. 受賞・認証（信頼性の裏付け）: 黒地に金の紙吹雪写真、金の見出し、白枠の認証ロゴ。
4. 成分比較（他社との差を数値で示す）: 濃紺・青・白の比較表と補足のグレーボックス。
5. アンバサダー・SNS（社会的証明）: 青〜紫グラデ地に人物写真、SNS投稿のグリッド。
6. 悩みの提起（自分ごと化）: グレー地に濃紺帯の白抜き見出しとチェックリスト。黒地で原因を明朝の大見出しで示す。
7. 知識解説・コラム（必要性を教育する）: グレーカードの図解、水色方眼地に線画イラスト、事実・つまりのラベル。
8. 解決のポイント（生活改善を提案して商品へ橋渡し）: 生成り地にPoint番号と写真を縦に並べる。
9. 産地・商品紹介（原産地の物語と商品価値）: 風景写真、水しぶきの商品ビジュアル、円形の成分バッジ、金の大数値。
10. 含有量・食材換算（手軽さを数値で実感させる）: 斜め切替の青背景、食材写真に金の特大数字。
11. お客様の声（飲用体験の共感）: 水色地に線画アバター、濃紺帯の見出しの口コミカード。
12. 利用シーン提案（新しい用途で需要を広げる）: 人物写真に白の明朝大見出し、方眼地の白カードで解説。
13. クロージングCTA（最終申込）: 金帯の呼びかけ、商品と笑顔の人物写真、CTA。

Imagery

• 青ラベルのボトルを水しぶきや氷と合成した、涼しげな商品写真。
• 健康的な人物が水を飲む・汗をぬぐう、明るい青空背景の写真。
• 黒背景に金の紙吹雪やメダルを置いた受賞演出。
• 湖や森、古城などヨーロッパの自然風景を俯瞰で撮った写真。
• 悩み解説は青と黄を差し色にした簡素な線画イラスト。
• 食材を画面いっぱいに敷き詰めた物量感のある写真。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅約480〜600pxのSPレイアウトを置き、左右は淡い背景で埋める。
• 比較表は横幅を広げても列数を変えない。
• CTAはPCでも最大幅480px程度のピル型を中央に置く。
• ファーストビューの縦書きコピーはPCでも縦のまま残す。

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