DESIGN.md — 夜空の紺×金月の快眠ハーブ茶 LP（Starry Night Blue Functional Herbal Tea LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ラグジュアリー・ダーク、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: 夜空・星と三日月・発光する明朝・エビデンスグラフ・ハーブ・白木
• 地の質感: 紺のグラデーション夜空にキラキラの星。中盤は方眼紙のような淡い格子の地。後半は白木の板目テクスチャ
• 形: 角丸の白カード、丸く切り抜いた素材写真、黄色のピル型ラベル、下向きの山型でつなぐセクション境界
• 温度感: 前半と最後は冷たく静か。後半は黄色とハーブの緑で少し温かくなる

Colors

• FV・機能紹介・締めの 3 か所は紺の夜空グラデーションにする
• 根拠データは白いカードに淡いミントか水色の枠を敷き、棒グラフはグレー対ティールで比べる
• 番号・三日月・大見出しの一部は金で、高級感を出す
• 注意の呼びかけやラベルは黄色のピル型だけに使う
• 後半の自然素材パートは白木の地に緑と黄色を足して温かくする
• グラフの結果を示すラベルは青い帯に白文字にする

Typography

• 情緒的な見出しは明朝、データと説明はゴシックと使い分ける
• 夜空の上の見出しは白か緑白に外光彩（グロー）をつける
• 見出しの括弧内の補足は一段小さく組む
• 注釈は【項目】の形で行頭をそろえ、小さなグレー文字で一覧にする
• 成分名などの主役の語は大きなセリフ体にし、ルビを振る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材写真は 3〜4 列の丸型グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に 6% ずつ余白をとって置く
• 機能 3 つは三角形の配置で光の円に入れる（SP は縦積みでもよい）
• 各機能ブロックは金の番号→明朝の見出し→グラフカード→注釈の順に並べる
• グラフカードの上に結果の吹き出し帯を重ねる
• 写真とテキストを交互に置くパートは左に写真、右に文章

Elevation & Depth

• 白カードはごく弱い影（0 2px 8px rgba(0,0,0,.08)）をつける
• 夜空の光の円は白い柔らかな外光彩で浮かせる
• パッケージ写真は影つきで手前に置く

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 素材写真は正円で切り抜く。人物は角の形を変えた雲形や角丸。メイン写真は全幅で、端をぼかして地になじませる
• セクション境界: 紺の帯の下に向けて山型（V 字）でつなぐ。夜空と写真の境はグラデーションでぼかす
• ラベルはピル型にする
• 機能ブロックの白パネルは上の角を大きく丸める
• 帯見出しは両端をリボン状にカットしてもよい
• 吹き出しは雲形や角丸にしっぽをつける

Components

• 発光見出し（glow-title）: 夜空の上に置く、外光彩つきの白・緑白の明朝見出し
• 黄色ピルラベル（badge-pill）: カードの上辺に半分かけて置く注意喚起のラベル
• 悩みチェックカード（check-card）: 白カードにチェックボックスと点線の区切りで悩みを並べる
• 金の三日月番号（number-moon）: 三日月の弧の中にセリフ体の番号を入れる
• エビデンスグラフカード（graph-card）: 淡いミントか水色の枠に、グレー対ティールの棒グラフと結果の吹き出し帯を置く
• 結果吹き出し帯（result-callout）: 青い帯に白い太字で結果を書き、しっぽをグラフに向ける
• 素材の丸写真（ingredient-circle）: 正円の素材写真の下に素材名を小さく添える
• スタッフの声カード（staff-review）: 淡い黄色のカードに、丸いイラストの顔と点線の罫入りの感想文
• リボン帯見出し（ribbon-heading）: 紺の帯の中に白い明朝で小見出しを入れる

Do's and Don'ts

Do - 夜空の場面には星のきらめきと金の三日月を必ず添える - データには被験者・試験方法・出典の注釈を漏れなく小さく添える - 機能は番号つきの 3 つにそろえ、同じ型でくり返す - 素材は正円写真のグリッドで見せる - 最後は FV と同じ夜空のパッケージ訴求で締める

Don't - 夜空パートにビビッドな赤やオレンジを入れない - グラフを派手な 3D や多色にしない - 見出しをすべてゴシックにしない（明朝の情緒を残す） - 注釈を本文と同じ大きさにしない - 白木パートに紺のベタ面を大きく広げない

Page Structure

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

1. ファーストビュー（眠りの心地よさと商品名を一目で伝える）: 紺の夜空に星と月。眠る人物とカップの写真に発光明朝の商品名、成分帯、3 行のリード文を重ねる
2. 悩みの提起（眠りの悩みに共感してもらう）: 青みの寝具写真を地に、黄色ラベルつきのチェックカードと、図解入りの解説カードを置く
3. 商品紹介（機能と特徴を示す）: 夜空にパッケージとカップ、金の大見出し、丸いバッジ、ピル型ラベル
4. 3 つの機能（機能性関与成分の効果をまとめる）: 光る円 3 つを三角形に置き、中央にパッケージ。下に届出表示の注釈
5. 機能ごとのエビデンス（データで根拠を示す）: 方眼紙の地の白パネルに、金の番号→明朝見出し→グラフカード→注釈を 3 回くり返す
6. ビフォーアフター（すっきり目覚めるイメージを伝える）: 明るい寝室で伸びをする人物写真に、緑に光る見出しと吹き出し写真
7. 素材紹介（自然派の原料を見せる）: 白木の地にハーブの切り抜き写真。主役素材のカードと、7 種の丸写真グリッド
8. 風味とスタッフの声（飲みやすさを伝える）: 柑橘のイラスト、明朝見出し、黄色のスタッフの声カード
9. 飲み方（使い方を案内する）: 青い石目の地にカップの写真とリボン見出し、手順文と注釈
10. 情緒訴求（夜のくつろぎを想像させる）: 暖色の写真の上に白い明朝の大見出しと本文
11. 締めの商品訴求（最後に商品を印象づける）: FV と同じ夜空にパッケージ、カップ、バッジを再び並べる

Imagery

• 夜空は紺から青へのグラデーションにし、白と金の小さな星を散らす
• 青いハーブティーのカップを真上か斜め上から撮り、ハーブを横に添えて切り抜く
• 人物は淡いグレーの部屋着。眠る・伸びをする・カップを持つ場面を自然光で撮る
• 素材は寄りで撮って正円に切り抜く
• スタッフは線画のやさしいイラストにする
• 図解は夜と昼を半分ずつにした丸いイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は SP の縦長構成で、PC は中央 375〜480px の 1 カラムで見せる想定
• PC では左右の余白を夜空や白木の地で埋める
• 3 つの機能の三角配置は、PC では大きく広げる
• 素材グリッドは PC で 4〜7 列にしてもよい
• グラフカードは PC でも最大幅 560px にとどめる

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