DESIGN.md — 紺×クリームの睡眠サポート飲料 LP（Navy and Cream Sleep Wellness Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 濃紺・クリーム地・赤の価格強調・夜と眠り・グラフ訴求・通販オファー
• 地の質感: フラットな単色面に、帯部分だけ紺の縦グラデーションを敷く。写真は柔らかい肌色トーン
• 形: 角丸のカード、ピル型ボタン、下向き三角で終わる帯、丸バッジ
• 温度感: クリームで温かい地に、濃紺の落ち着いた夜の色を重ねた中間の温度

Colors

• 地はクリームにして、カードは白またはオフホワイトにする
• セクション見出しの帯は濃紺。左右を暗くする縦グラデーションを入れてよい
• 赤は価格、割引率、お試しの主 CTA、強調語だけに使う
• 通常購入と定期便のボタンは紺のグラデーションにする
• 黄色はラベル帯と、紺地に置く数字の強調だけに使う
• 定期便のブロックは薄紫の地にして、他のプランと区別する

Typography

• 悩みや効果を語る情緒的な見出しは明朝にする
• 価格や数字の見出しは極太ゴシックにする
• 価格の数字は大きく、円や（税込）は小さく添える
• 強調語だけを赤または太字にして、文字サイズを一段上げる
• キーワードの下に赤い下線を引いて強調する
• 見出しはすべて中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長バッジは 3 列、悩みの丸ラベルは 2 列と 1 列
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 20px の余白を取り、中央に置く
• 価格カードは左に商品写真、右に価格情報の 2 分割にする
• 口コミはイラストと吹き出し枠を左右交互に並べる
• セクションの区切りは全幅の紺帯の見出しで示す
• グラフは白いカードに入れて、出典を下に添える

Elevation & Depth

• 価格カードには弱い影を付けて浮かせる
• CTA ボタンには下方向の濃い影を付けて立体的にする
• 悩みの丸ラベルや効果の丸バッジは、黄色をずらして重ねた影で縁取る
• その他はフラットにする

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物と商品は切り抜きか、全幅の四角。口コミのイラストは四角枠に入れ、角に紺の三角ラベルを重ねる
• セクション境界: 紺帯やカードの下端を下向き三角（矢印形）にして、次のセクションへ視線を誘導する
• CTA はピル型にし、右端に白丸の再生アイコンを入れる
• 効果の番号ラベルは紺のピル型にし、白丸に番号を入れる
• 悩みや効果は紺の楕円・正円バッジで表す
• おすすめプランは左上に紺の斜め帯を付ける

Components

• お試し購入ボタン（button-primary）: 赤からピンクのグラデーションのピル型。右に白丸の矢印
• 通常・定期購入ボタン（button-secondary）: 紺から青のグラデーションのピル型。右に白丸の矢印
• 紺帯見出し（band-heading）: 全幅の紺グラデーションの帯に白の太字を中央揃えで置く
• 価格カード（price-card）: 白い角丸カード。通常価格に取り消し線、赤の割引帯、特別価格を大きな赤数字で表示
• 割引帯（discount-ribbon）: 赤や紺の帯の下端を切り込みにし、白抜きで割引率を入れる
• 効果番号ラベル（effect-label）: 紺のピル型に白文字と白丸番号。黄色の影をずらして重ねる
• 理由カード（reason-card）: 白い角丸カード。左上に紺丸の番号、タイトル、右にイラスト
• 口コミ枠（review-box）: 紺の細線の四角枠とイラストを交互に置き、紺三角に年代を入れる
• 黄色ラベル帯（yellow-label）: 黄色のピル型に紺文字。特典やサポートの見出しに使う
• 商品情報表（spec-table）: 紺の見出し行。項目セルは淡い青、値セルは白

Do's and Don'ts

Do - 価格は大きな数字にして、単位と税込は小さく添える - セクション見出しは紺帯と下向き三角でつなぐ - 数値の根拠にはグラフと出典の注釈を添える - 主 CTA は赤、それ以外の購入ボタンは紺と、役割で色を分ける - クリーム地の上に白カードを置いて、情報をまとまりで区切る

Don't - 赤を背景の広い面に使わない - 黒い太い帯や原色の青を使わない - 明朝を価格表示に使わない - カードを地に直接べた置きして、境界をなくさない - 写真を暗く強いコントラストにしない

Page Structure

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

1. ファーストビュー（人物と商品で認知させ、効能を一言で伝える）: 肌色背景に人物と商品を切り抜きで配置。上部に明朝のコピー、下に白い角丸の特長カードを 3 つ並べる
2. キャンペーン CTA（冒頭ですぐに購入へ誘導する）: 紺帯見出しの下に価格カードを 2 つ。三角の矢印でお試しを推す
3. CM 動画（話題性を出す）: クリーム地に見出し、全幅の動画、中央揃えの短い説明
4. 悩みの提起（アンケート結果で共感させる）: 明朝の問いかけ、円グラフの周りに吹き出し、紺の結論帯を下向き三角で締める
5. データでの危機感（公的データで問題を示す）: 白カードに折れ線グラフと紺丸の数値。リスクは楕円バッジで示す
6. 解決策の提示（成分を紹介する）: 紺帯の上に白ピル型の見出し。赤の大きな成分名、黄色の曲線装飾
7. 効果の説明（3 つの効果を順に示す）: 紺の細枠カードに番号ラベル、明朝の説明、写真とイラストの循環図。カード間は紺の＋でつなぐ
8. 商品紹介（商品と特長をまとめて見せる）: 人物の全身と商品、白の特長カード、紺地に白丸の効果バッジを 3 つ
9. 選ばれる理由（味・価格・飲み方を訴求する）: 紺地のバナーの後に、番号付きの白い理由カードを 4 枚並べる
10. お客様の声（満足度と口コミで信頼を得る）: 赤い満足度の数字を見出しにし、イラストと細枠の吹き出しを左右交互に並べる
11. お試しオファー（初回購入を促す）: 金色系の地に、紺見出し付きの白カードと赤 CTA を置く
12. 定期便コース（継続購入へ誘導する）: 薄紫の地に、おすすめの斜め帯付き価格カードと、赤枠の 3 大特典カードを置く
13. 通常購入コース（単品購入の受け皿）: クリーム地に価格カードを 2 つと紺の CTA を置く
14. 商品情報（原材料や成分を表示する）: 紺の見出し行と淡い青の項目セルを持つ 2 列の表

Imagery

• 人物は光沢のあるパジャマ姿。肌色・ベージュの背景で柔らかく明るく撮る
• 商品は白背景で切り抜き、下に映り込みの反射を付ける
• 人物イラストは細い線画に淡い色を少し塗った大人の女性像
• 月・太陽・星の線画アイコンで、夜と朝を表す
• グラフは紺・青紫・グレーの塗り分けで、強調値は紺丸で示す
• 成分の紹介部分には、黄色からオレンジの流れる曲線の装飾を薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 820px の固定幅カラムを置き、左右はクリーム地にする
• PC の価格カードは、写真・価格・送料ラベルを横に並べてコンパクトにする
• PC の理由カードは 3 列にし、4 番目は横長カードにする
• PC の悩みの丸ラベルは 3 つを横一列に並べる
• PC の見出しは改行を減らして 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 行書くと起動時に読み込まれる。