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

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

Overview

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

Colors

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

Typography

• 情緒的な大見出しは明朝、設問・ボタン・説明はゴシックにする。
• 見出しは強調語だけ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

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

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