DESIGN.md — 紺×淡グレーの質問形式サプリ LP（Navy Survey-Style Sleep Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 紺・アンケート形式・白衣キャラ・斜めタイル・V字区切り・臨床データ
• 地の質感: フラットな面が中心。商品写真まわりだけ淡いグレー青のグラデと柔らかい影を使う
• 形: 角丸カード、ピル型の回答ボタン、平行四辺形の機能タイル、下向き V 字のセクション終端
• 温度感: 寒色寄りで落ち着いた印象。購入まわりだけ赤と金で温度を上げる

Colors

• 白地と淡いグレー青の地を交互に置き、解説パートは紺の地に白カードを載せる
• 紺は質問番号、機能タイル、帯見出しに使う。広い面の主役は紺にする
• 赤は主 CTA ボタンと価格だけに使う
• 金は割引率の丸メダルだけに使う
• 専門家の声は生成りベージュの地にして、温かみで区別する
• 本文中の強調は淡青のマーカーか、ローズ赤の文字で行う

Typography

• 見出しは極太ゴシックで、助詞だけ小さくして要点の語を大きく見せる
• 数字は欧文の極太書体で特大にし、斜体を使ってもよい
• 質問番号は英字ラベルと 2 桁の数字を 2 段に組む
• 注釈は 8px 前後のグレー文字で、ブロックの直下に置く
• 臨床パートの見出しは明朝体にして、権威感を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能タイルは 4 個と 3 個の 2 段、写真ギャラリーは 2 列
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 質問 → 写真 → 回答ボタン → V 字矢印 → キャラの吹き出し、の流れを 1 ユニットとして繰り返す
• 紺のセクションには左右に約 12px の余白を取り、白カードを内側に置く
• 回答ボタンは全幅のピル型を 12px 間隔で縦に並べる
• 写真は本文幅いっぱいに、角丸で入れる

Elevation & Depth

• 回答ボタンの下に濃いグレーのずらし影を付け、押せる見た目にする
• 質問番号の箱と見出し枠にも、右下へ薄い影を付ける
• 白カードは影なし、または非常に弱い影にする
• CTA ボタンは暗赤の下影で立体的にする

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。成分写真だけ正円で切り抜く
• セクション境界: 紺やグレーのセクションの下端を下向き V 字に尖らせる
• 機能タイルは平行四辺形に傾け、左上にアイコンの小箱を重ねる
• 吹き出しは角丸の白い箱に細い枠線を付け、尾をキャラ側へ向ける
• 帯見出しは角のない長方形にする

Components

• 質問番号バッジ（question-badge）: 紺の角丸の箱に、英字ラベルと 2 桁の番号を入れる。右側に質問文を置く
• 回答ピルボタン（answer-button）: グレーのピル型ボタンに白文字を入れ、下にずらし影を付ける。YES/NO の 2 列か、選択肢の縦並びにする
• 白衣キャラの吹き出し（doctor-bubble）: 左に線画の博士キャラを置き、右の吹き出しで要点を淡青マーカー付きの大きな文字で示す
• 斜め機能タイル（function-tile）: 紺の平行四辺形に、白文字で 2 行の機能名を入れる。アイコンの小箱を重ねる
• 濃紺帯見出し（dark-band-heading）: 全幅の濃紺の帯に白い極太文字を入れ、結論や訴求を見せる
• 金メダル割引バッジ（discount-medal）: 金色の円形バッジ。割引率を明朝やセリフ体で入れる
• 赤の大型 CTA（button-primary）: 幅いっぱいの赤ボタンに、白文字の 2 行コピーを入れる。価格だけ黄色の極太数字にする
• 専門家の声カード（expert-quote）: ベージュの地に人物写真を置き、紺の肩書きプレートを重ねる。白マーカー付きの引用見出しと本文を続ける
• 定期購入オファーカード（offer-card）: 白カードの上部に金のグラデ帯の見出しを置く。商品画像、紺のラベル、赤の大きな価格を並べる

Do's and Don'ts

Do - 質問と回答ボタンを繰り返し、読者が参加しながら進む流れにする - 各ブロックの間を V 字の細い線矢印でつなぐ - 数字や成分名などの根拠は、注釈と出典を小さい文字で必ず添える - 紺と白を主役にして、清潔感と信頼感を保つ - キャラの吹き出しで、次のセクションへの橋渡しをする

Don't - 赤を CTA と価格以外に広く使わない - 暖色の地を多用しない（ベージュは声のセクションだけ） - 回答ボタンを紺や赤にしない（グレーで中立に見せる） - 写真を角張った全面ブリードで並べすぎない - 装飾フォントを本文に使わない

Page Structure

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

1. ファーストビュー（悩みへの呼びかけと、配合量や機能の提示）: 上部に紺の帯で呼びかけ。淡いグレー青の地に、紺枠の見出し、2 つの効果を×でつなぐ表示、素材を散らした商品写真を置く
2. 機能一覧（機能の多さを一目で伝える）: 極太見出しに特大の斜体数字。紺の斜めタイル 7 個と小さな注釈
3. 特別価格の予告（アンケートに答えると特典がある、と動機づける）: 紺の地に白帯の見出し、金メダルの割引率、白文字の見出し
4. 質問1と原因の解説（悩みを共感させ、原因を示す）: 質問バッジ、写真、YES/NO ボタン、博士の吹き出し。続いて紺セクションの白カードに半円 2 色の図解とノート風の説明
5. 質問2と解決の提示（症状を選ばせ、解決策へ誘導する）: 選択肢 4 つのピルボタンを縦に並べ、吹き出しで成分名を強調する
6. 成分の紹介（成分の身近さと特長を伝える）: 紺の地に白カード。商品と素材の写真、濃紺帯の成分名、大きな紺の強調文字
7. 臨床データ（根拠を示す）: 明朝のグレー帯見出し。スライダー式の折れ線グラフカードに赤い吹き出しバッジと出典を付ける
8. 質問3と追加成分（関心点を選ばせ、配合成分の多さを訴求する）: 縦並びのピル選択肢。紺セクションに円形の成分写真 3 つと、黄色の換算吹き出し
9. 美容面の補足（副次的なメリットを訴求する）: 淡グレー青の角丸カードに濃紺のラベル見出し、人物写真、泡の円に成分名
10. 専門家・著名人の声（権威付け）: 影付き枠の吹き出し見出し。ベージュ地に人物写真、紺の肩書きプレート、マーカー付きの引用
11. 愛用写真ギャラリー（生活の中での使用感を伝える）: ベージュ地に 2 列 4 段の正方形写真。下端を V 字にする
12. 質問4とお礼（購入の意思を確認する）: 手のひらと商品の写真、YES/NO ボタン、お礼の吹き出し
13. オファー・CTA（割引価格で申込へ導く）: 商品画像と紺の斜体の価格、下向き三角。赤の大型 CTA と、定期購入のオファーカード

Imagery

• 人物写真は白い室内で自然光を使い、明るく淡いトーンにする（悩み顔や笑顔）
• 商品写真は白〜淡いグレー青の背景に影を落とし、関連素材を周囲に散らす
• 博士キャラは白衣の線画イラスト。指差しや本を持つなど、ポーズを変えて使う
• 成分写真は正円に切り抜き、下に名前を添える
• 図解はフラットな配色（オレンジ×紺など）のシンプルな円グラフや折れ線にする
• ギャラリーは SNS 風の日常スナップを正方形でトリミングする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 480〜600px 程度の SP レイアウトを置き、左右を淡いグレー青で埋める構成を推奨
• 機能タイルは PC で 7 個を 1 段、または 4+3 段のまま拡大する
• ギャラリーは PC で 3〜4 列に広げてよい
• YES/NO ボタンは最大幅を固定し、間延びさせない

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