DESIGN.md — 水彩の夜空ブルー×月黄色の睡眠系サプリ LP（Watercolor Night Sky Wellness Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
• キーワード: 水彩の空・雲の境界・月と星・藍色パネル・月色の数字・夜の休息
• 地の質感: 水彩のにじみ、紙のざらつき、星空のきらめき
• 形: もこもこの雲形でセクションを区切る。角丸は控えめな長方形パネルと円形バッジ
• 温度感: 涼しげな青を地にして、月の黄色で温かみを添える

Colors

• 基本は淡い水色から空色のグラデーション地。雲形で区切って明度を切り替える。
• 成分量やデータは藍色・くすみ青のパネルに、月黄色の大きな数字で載せる。
• 白文字の大見出しは空色の地に置き、うっすら発光する影を付ける。
• 実績・ランキングは金と赤、販売数はクリーム色の地に限定し、ほかの青い世界と分ける。
• 悩みの提起だけはグレーの質感地にし、青い円の吹き出しで暗さを抑える。
• 黄色は数字・星・リボン帯だけに使い、面積を広げない。
• ingredient-circle は文字 #F6FCFE × 背景 #5083B2 のコントラスト比が 3.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4877A3、4.56:1）を使う。

Typography

• 数字は明朝で大きく、単位は小さく添えてサイズに差をつける。
• 見出しでは助詞を一回り小さくし、キーワードを目立たせる。
• 大見出しは字間を広めにし、白文字に青い光彩を付ける。
• 悩みの吹き出しや写真への添え書きには手書き風フォントを使う。
• 注釈は ※ 付きの小さい文字で、パネルの右下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分パネルは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央揃えを基本にする。
• 成分量は 2 列 + 3 列のタイルで並べる。
• 主要成分 4 つは中央の円を囲むように配置する。
• 悩みは写真と円形の吹き出しを左右交互に置く。
• セクション間は下向き矢印でつなぎ、ストーリーの流れを出す。

Elevation & Depth

• パネルは影なしのフラットにし、半透明の青を重ねる。
• 大見出しの白文字には柔らかい光彩を付ける。
• 商品パッケージには薄いドロップシャドウを付けて浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は角丸の長方形か正円で切り抜く。商品は背景なしの切り抜き
• セクション境界: 水彩の雲形の波線と、和紙の破れ風の境界
• 成分パネルは角丸 4px 程度の長方形。
• 悩みの吹き出しは水彩の円にする。
• リボン帯は両端を切り欠いた黄色の帯にする。
• 見出し帯は片側を三角に切った旗形も使う。

Components

• 成分量パネル（ingredient-tile）: 藍色の地に、成分名を白で、量を月黄色の明朝で大きく載せる
• 成分の円形バッジ（ingredient-circle）: くすみ青の正円に成分名・量・一言説明を入れ、中央の白いリングの周りに配置する
• 黄色リボン帯（ribbon-band）: 両端を切り欠いた黄色の帯に、紺の太字でお試しの訴求を入れる
• 悩みの水彩吹き出し（worry-bubble）: 青い水彩の円に白い手書き文字で悩みを書き、写真の横に重ねる
• 線囲みのリード見出し（pill-label）: 細い線のピル枠や斜線で挟んで、大見出しの前置きを置く
• 菌種名チップ（strain-chip）: 藍色の横長の帯に、菌の名前を白い明朝で 2 列に並べる
• 受賞メダル（ranking-badge）: 赤い円と金のメダルを、きらめく金背景に置く
• 子供向けの補足ボックス（info-box）: クリーム色の角丸ボックスに、写真と波線下線付きの青文字を入れる

Do's and Don'ts

Do - 空色の水彩グラデーションと雲形の区切りを、ページ全体で続ける。 - 数字は月黄色の明朝で大きく見せる。 - 星と三日月を余白に散らして、夜の世界観を保つ。 - パッケージ写真を何度も登場させ、記憶に残す。 - 注釈は小さく、パネルのそばに添える。

Don't - 青の地に原色の赤やオレンジを広く使わない（ランキング部分は除く）。 - 角張った直線の区切り線は使わない。 - 数字をゴシックの細字にしない。 - 白地だけのフラットなセクションを続けない。 - 黄色を背景の大きな面に使わない。

Page Structure

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

1. ファーストビュー（休息の世界観と商品の印象を伝える）: 大きな水彩の満月に縦書き風のコピーを載せ、雲の上で眠る人物写真とパッケージを重ねる
2. 成分量の要約（主要成分の量をひと目で見せる）: 白い光彩付きの見出しの下に、藍色パネルを 2 列 + 3 列で並べる
3. ランキング実績（人気を示して信頼を得る）: 赤帯のお礼見出し、金のきらめく背景、メダル、ランキングのキャプチャ
4. 累計販売数（シリーズ全体の実績を見せる）: クリーム色の地に大きな黄色の円と黒の大きな数字を置き、シリーズ商品を 4 つ並べる
5. 悩みの提起（読み手の不調に共感する）: グレーの質感地に旗形の青い見出しを置き、写真と水彩の吹き出しを交互に並べる
6. 解決の提示（商品を答えとして示す）: 斜線で挟んだ見出し、パッケージ、黄色リボン帯
7. 成分の解説（成分ごとの役割を説明する）: 中央の白いリングの周りに円形バッジを 4 つ置き、素材写真を添える
8. 乳酸菌の解説（整える仕組みを伝える）: 青い帯見出しの白いボックスに、黄色マーカー付きの大きな語とイラストを入れる
9. イメージ訴求（飲んだ後の前向きな姿を見せる）: 伸びをする人物の写真に、青い縦組み風のコピーを載せる
10. 数値の比較（含有量の多さを実感させる）: 藍色パネルの上部に写真、下部に巨大な黄色数字と食品の換算を置く
11. 菌種の一覧（配合内容を見せる）: イラストの円アイコン、下線付き見出し、菌種名チップのグリッド
12. 飲み方（手軽さを伝える）: 手順写真、円形の人物写真、箇条書き、クリーム色の補足ボックス
13. 品質へのこだわり（安心感を与える）: 濃い青の地に白い見出しを置き、研究者の写真と製造の説明を載せる

Imagery

• 水彩でにじませた空・雲・満月の背景にする。
• 人物は白い服で、明るく自然光の中で撮る。眠る・飲む・伸びをするといった穏やかな動作にする。
• 黄色の星と三日月を、手描き風のアイコンとして散らす。
• 素材写真は白背景の切り抜きで、山盛りに見せる。
• イラストは線画に淡い塗りの、やさしいタッチにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は縦長の 1 カラム画像 LP。PC では中央 750px 前後で固定し、左右は空色で塗り延ばす。
• SP では成分パネルの 2 列 + 3 列の構成を保ち、数字を 40px 前後にする。
• 円形の成分配置は SP でも維持する。狭い場合は 2×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 行書くと起動時に読み込まれる。