---
version: alpha
name: Navy Gold Mineral Water Advertorial LP
description: 濃紺と金の明朝見出しで権威づけし、緑のグラデーションCTAを何度も繰り返す情報量の多い記事型LP。明るい水色・グレーの地と、黒・紺の暗いセクションを交互に並べ、受賞・比較表・悩み・解決の順で読ませる。
colors:
  primary: '#0B1C32'
  secondary: '#2A6ABD'
  cta: '#29965B'
  on-cta: '#E7FD2D'
  background: '#FDFDFD'
  background-alt: '#E0F1F9'
  tint-1: '#FCF1DB'
  surface: '#E5E5E5'
  dark-section: '#1E1A17'
  accent-1: '#B8935A'
  accent-2: '#990A29'
  text: '#0B1C32'
  marker: '#29649D'
  on-dark: '#F9F7F4'
  cta-accessible: '#227C4B'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Roboto Condensed
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.12em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 8px
  lg: 40px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 80px
  price-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-2}'
    typography: '{typography.display}'
    height: 560px
  comparison-table:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 300px
  check-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 360px
  label-tag:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 40px
  voice-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 260px
  award-heading:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    height: 200px
  point-block:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 380px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#0B1C32` | ブランドの濃紺（表・見出し帯・暗セクション） | 7% | 画素の主要色に補正 |
| `secondary` | `#2A6ABD` | 比較表の青・小見出しラベル | 6% | 画素の実測 |
| `cta` | `#29965B` | 主CTAの緑グラデーション | 6% | 画素の主要色に補正 |
| `on-cta` | `#E7FD2D` | CTA上の黄色い大文字 | 1% | 画素の実測 |
| `background` | `#FDFDFD` | 基本の白地 | 12% | 画素の実測 |
| `background-alt` | `#E0F1F9` | 淡い水色の地 | 12% | 画素の実測 |
| `tint-1` | `#FCF1DB` | 生成りのポイント解説地 | 6% | 画素の実測 |
| `surface` | `#E5E5E5` | グレーのカード地 | 7% | 画素の実測 |
| `dark-section` | `#1E1A17` | 黒の受賞・悩みセクション | 8% | 推定 |
| `accent-1` | `#B8935A` | 金の見出し・数字 | 2% | 推定 |
| `accent-2` | `#990A29` | 価格・強調の赤 | 1% | 画素の実測 |
| `text` | `#0B1C32` | 見出し・本文の濃紺黒 | 3% | 画素の主要色に補正 |
| `marker` | `#29649D` | 強調語の下線点線・ラベル青 | 1% | 画素の主要色に補正 |
| `on-dark` | `#F9F7F4` | 暗地上の白文字 | 2% | 画素の実測 |
| `cta-accessible` | `#227C4B` | AA を満たす補正値（計算） |  | 計算 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビュー縦書きコピー・大数値 | 明朝 | Shippori Mincho | 800 | 48px | 1.15 | 0.02em |
| `headline-lg` | セクション大見出し（金/濃紺） | 明朝 | Noto Serif JP | 700 | 34px | 1.3 | 0.03em |
| `headline-md` | 中見出し・問いかけ | ゴシック | Noto Sans JP | 700 | 22px | 1.45 | 0.02em |
| `headline-sm` | Point番号下の小見出し | 明朝 | Noto Serif JP | 600 | 19px | 1.5 | 0.04em |
| `body-md` | 本文・口コミ | ゴシック | Noto Sans JP | 400 | 15px | 1.75 | 0.02em |
| `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `accent` | 英字ラベル（COLUMN・VOICE等） | 欧文サンセリフ | Roboto Condensed | 700 | 14px | 1.2 | 0.12em |
| `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 900 | 26px | 1.2 | 0.02em |

- 権威・情緒の見出しは明朝、説明と口コミはゴシックに分ける。
- 数値は特大にし、単位（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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-356cf5a0`（元 LP の URL から採番）
- **元 LP**: https://bmvwater.com/lp/02-r/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。