---
version: alpha
name: Night Navy Survey-Style Supplement LP
description: 濃紺の夜空と青の面を土台に、黄色で選択肢や強調を光らせる設問型のサプリLP。5問のアンケートを進めながら悩み提起→成分の根拠→特典CTAへ導く。明朝の大見出しとゴシック本文を混ぜ、データグラフと線画イラストで信頼感と親しみを両立させる。
colors:
  primary: '#051B50'
  secondary: '#1571B7'
  background: '#FFFFFF'
  background-alt: '#EAF4FC'
  accent-1: '#FEDB53'
  surface: '#CBCBCB'
  text: '#171B41'
  accent-2: '#E2283A'
  tint-1: '#FFF9DB'
  marker: '#FCFD74'
  cta: '#D43B2D'
  on-cta: '#FFF6F4'
  accent-3: '#F47D2C'
  dark-section: '#7095AE'
  cta-accessible: '#D1392B'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 10px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  step-indicator:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 40px
  choice-button:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 70px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.md}'
    height: 95px
  keyword-box:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-lg}'
    height: 50px
  orange-ribbon:
    backgroundColor: '{colors.accent-3}'
    typography: '{typography.headline-sm}'
    height: 100px
  circle-label:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 80px
  data-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 450px
  factor-badge:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 60px
---

# DESIGN.md — 紺×黄のアンケート型サプリ LP（Night Navy Survey-Style Supplement LP）

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

## Overview

- **業種**: 健康食品・サプリメント ／ **雰囲気**: 信頼・誠実、情報量多め・訴求型、清潔・爽やか
- **キーワード**: 夜空の濃紺・アンケート形式・黄色の選択肢・明朝の大見出し・研究データ・V字の区切り
- **地の質感**: 星空ノイズや淡いグリッド、泡のボケを背景に敷き、面は基本フラット。ボタンだけ柔らかい影で浮かせる。
- **形**: 角丸の横長ボタン、正円のステップ番号、下向きV字のセクション終端、ギザ円バッジ。
- **温度感**: 寒色主体でやや冷静。黄・金・オレンジで温かさと高揚感を加える。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#051B50` | 夜空の濃紺セクション地 | 18% | 画素の主要色に補正 |
| `secondary` | `#1571B7` | 鮮やかな青のセクション地 | 10% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 設問エリアの白地 | 20% | 画素の実測 |
| `background-alt` | `#EAF4FC` | 淡いグレー青の地 | 7% | 画素の実測 |
| `accent-1` | `#FEDB53` | 選択中ボタン・現在の番号の黄色 | 4% | 画素の実測 |
| `surface` | `#CBCBCB` | 未選択ボタンのグレー | 7% | 画素の実測 |
| `text` | `#171B41` | 濃紺の見出し・本文 | 3% | 画素の実測 |
| `accent-2` | `#E2283A` | 設問内の強調語の赤 | 0% | 推定 |
| `tint-1` | `#FFF9DB` | クリーム色の研究・特典エリア地 | 6% | 画素の主要色に補正 |
| `marker` | `#FCFD74` | 強調語の黄色ハイライト | 1% | 画素の実測 |
| `cta` | `#D43B2D` | 最終CTAボタンの赤 | 1% | 画素の実測 |
| `on-cta` | `#FFF6F4` | CTA文字（白と黄） | 0% | 画素の実測 |
| `accent-3` | `#F47D2C` | 吹き出し・リボンのオレンジ | 1% | 画素の実測 |
| `dark-section` | `#7095AE` | くすんだ青灰の注意喚起地 | 5% | 画素の主要色に補正 |
| `cta-accessible` | `#D1392B` | AA を満たす補正値（計算） |  | 計算 |

- 設問ブロックは白地、解説ブロックは濃紺か青地で交互に切り替える。
- 黄色は選択中ボタン・現在の番号・強調語の背景に限って使う。
- 未選択ボタンはグレーにして、黄色の1つだけを目立たせる。
- 設問文の強調語だけ赤にし、それ以外は濃紺の文字にする。
- 研究データや特典のパートはクリーム〜金のグラデ地で温かくする。
- 主CTAは赤地に白と黄の文字を使う。ページ内で唯一の赤い面にする。
- `button-primary` は文字 `#FFF6F4` × 背景 `#D43B2D` のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D1392B`、4.56:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 濃紺地に置く巨大キーワード | 明朝 | Shippori Mincho | 700 | 72px | 1.1 | 0.05em |
| `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 700 | 34px | 1.35 | 0.04em |
| `headline-md` | 設問文 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.6 | 0.08em |
| `headline-sm` | 帯見出し・ボックス見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em |
| `body-md` | 解説本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.7 | 0.03em |
| `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em |
| `accent` | 設問番号の上の英字ラベル | 欧文サンセリフ | Montserrat | 500 | 13px | 1.2 | 0.1em |
| `label-button` | 選択肢ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em |

- 情緒的な大見出しは明朝、設問・ボタン・説明はゴシックにする。
- 見出しは強調語だけ1.5〜2倍に拡大し、助詞は小さくする。
- キーワードは青地や黄地の四角に白抜き・濃紺文字で入れる。
- 数値は大きな明朝にし、単位は小さく添える。
- 注釈は※を付け、本文直下に小さいグレーで置く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 89%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- 1つの設問は『番号ステップ→設問文→イラスト→縦並びボタン』の順に置く。
- 選択肢ボタンは幅約89%で、間を約30px空けて縦に積む。
- 設問と設問の間に、濃紺の解説セクションを1〜3つ挟む。
- グラフは白カードに入れ、試験の概要を下に添える。
- 写真は2枚を少しずらして重ねる。

## Elevation & Depth

- 選択肢ボタンには右下方向に柔らかい影（0 4px 8px rgba(0,0,0,.15)）を付ける。
- 白カードは影なしのフラット。地色との差で区切る。
- CTAボタンには下側に濃い影を付けて立体感を出す。

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は角丸なしの矩形。ずらして重ねるか、正円で切り抜く。
- **セクション境界**: 濃紺セクションの下端は中央が尖る下向きV字。山並みや波形の境界も使う。
- ステップ番号は正円にし、間を『>』でつなぐ。
- 要因の列挙はギザ円の濃紺バッジにする。
- ボックスは角括弧状の細い線フレームで囲む。
- 吹き出しは角丸の長方形に三角の尾を付ける。

## Components

- **設問ステップ番号**（`step-indicator`）: 英字ラベルの下に正円を5つ並べ、現在の番号だけ黄色にする。
- **選択肢ボタン**（`choice-button`）: 横長の角丸ボタン。未選択はグレー、選択中は黄色のグラデにして影を付ける。
- **最終CTA**（`button-primary`）: 赤いボタンに白と黄の2行の文字を入れ、右下に指アイコンを添える。
- **キーワード箱**（`keyword-box`）: 青または黄の四角にキーワードを1語ずつ入れる。
- **オレンジ告知帯**（`orange-ribbon`）: 下が尖ったオレンジの帯に、特典の案内を2行で入れる。
- **濃紺の丸ラベル**（`circle-label`）: つなぎの言葉を入れる濃紺の正円。セクションの頭に置く。
- **グラフカード**（`data-card`）: 白地のカードに折れ線グラフ・オレンジ吹き出し・試験概要を入れる。
- **ギザ円要因バッジ**（`factor-badge`）: 濃紺のギザ円に白文字の短い語を入れ、人物の周りに散らす。

## Do's and Don'ts

**Do**
- 設問ごとに黄色の選択肢を1つだけ見せ、回答例を示す。
- 濃紺地には白い明朝の大見出しと星のきらめきを添える。
- データには必ず出典の注釈を付ける。
- イラストは線画に黄と水色を少しだけ差す。
- セクション終端はV字にし、次へ視線を流す。

**Don't**
- 黄色を背景の大面積に使わない（クリーム地は可）。
- 赤をCTAと強調語以外に使わない。
- ボタンをピル型や派手なグラデにしない。
- 明朝を細かい本文に使わない。
- 設問の間に解説を挟まず、長く続けない。

## Page Structure

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

1. **ファーストビュー**（アンケートへの協力を依頼し、特典を予告する）: 濃紺地に写真2枚と縦書きの帯、オレンジの告知帯、白カードに商品と半額訴求を置く。
2. **設問1**（悩みの有無を聞いて自分ごと化させる）: 白地にステップ番号・設問文・線画イラスト・選択肢3つを並べる。
3. **課題データ**（社会的な課題を数値で示す）: 山並みで区切った星空の濃紺地に、巨大明朝・棒グラフ・人物アイコンを置く。
4. **設問2・3**（悩みの具体と普段のケア方法を聞く）: 選択肢5つを縦に並べる。間に濃紺の写真セクションとキーワード箱を挟む。
5. **理想像と原因**（理想を示し、もう一つの要因を提起する）: 円形イラスト、角括弧フレーム、グリッド地のキャラ解説カード、ギザ円の要因バッジを使う。
6. **解決提示**（同時にケアするメリットを示す）: 青地に金のグラデボックスの見出しと笑顔写真を置き、金文字の明朝で結ぶ。
7. **設問4・商品紹介**（認知を確認してから商品を出す）: 青地に白い箱入りの見出し、商品パッケージ、機能性表示の注記を置く。
8. **成分の根拠**（メカニズムと研究データで信頼を得る）: 星空地のメカニズム図、研究者の写真とコメント、クリーム地のグラフカードを並べる。
9. **2つ目の成分**（独自の成分の価値を伝える）: 泡を散らした金のグラデ地に、月桂樹付きの大見出し・青い帯・大きな配合数値を置く。
10. **まとめ**（2つの成分の配合量をまとめる）: 紫と水色の正円に数値を入れて×でつなぎ、生活シーンの写真を添える。
11. **設問5**（魅力を選ばせて購入意欲を固める）: 青地の商品画像の下に、注釈付きの選択肢5つを並べる。
12. **CTA**（特典の案内を受け取らせる）: クリーム地にお礼の明朝見出し、斜線を添えた案内文、赤い大ボタンを置く。

## Imagery

- 人物写真は自然光で、明るい室内や屋外の30〜50代。笑顔と悩み顔を対比させる。
- 悩みの場面は細い黒の線画に、黄・水色の淡い塗りを足したイラストにする。
- 免疫は丸いキャラクターをマンガ調で描き、効果音の文字を添える。
- 夜空の背景は濃紺にノイズの星を散らし、十字のきらめきを置く。
- 成分のパートは金色の泡やボケを敷いた明るいグラデにする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に幅約420〜600pxの1カラムを置き、左右は地色で埋める。
- 選択肢ボタンは最大幅480pxにとどめる。
- 写真2枚の重ね配置は PC で横並びにしてもよい。
- 文字サイズは SP の1.1〜1.2倍を上限にする。

## 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-850fee2b`（元 LP の URL から採番）
- **元 LP**: https://www.wellbeing.kirin.co.jp/lp5/ornithinePROs/enq/tik/010/?
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。