DESIGN.md — 桃色グラデと空色の美容サプリ LP（Sunny Pink Gradient Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型、ポップ・元気
• キーワード: 日差し・グラデーション文字・空色・ミント地・引用符カード・太陽の放射線
• 地の質感: フラットな淡色の面にやわらかなグラデーションと光のボケを重ねる。カードは薄い影で少し浮かせる
• 形: 角丸小さめのカード、円形のアイコン台座、波形のセクション境界、V字の矢印
• 温度感: 暖かく明るい。ピンクの暖色を空色とミントで爽やかに中和

Colors

• 地は白を基本に、提案は空色グラデ、特長はミント、口コミはクリームとセクションごとに切り替える
• 最重要の見出しは赤橙→ピンク→紫の横グラデーション文字にする
• 本文の強調語はピンク文字か黄マーカーで示す
• Point見出しの主語は緑青で、ピンク系と補色関係にする
• ラベルや番号バッジは濃ピンクの塗りに白文字
• 濃い色の面は使わず全体を明るく保つ

Typography

• 見出しは中央揃え、字間を広めにとる
• 訴求したい語だけ文字サイズを1.3〜1.5倍に上げる
• グラデ見出しは2行以内に収める
• 本文は左揃えで行間1.9前後
• Point番号はセリフ体の大きな数字で、日本語と書体を対比させる
• 悩みカードの文は中央揃えで2行構成
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の比較だけ2列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約6%の余白をとる
• セクション間はV字矢印でつなぎ、流れを示す
• Pointカードは左上に円形番号をはみ出して置く
• アイコン円と文を左右に並べるリストにする
• 口コミの吹き出しは左右交互にずらす

Elevation & Depth

• カードには薄い灰色のドロップシャドウ（下と右へ4px程度）
• Pointカードの右下に緑青の帯をずらして重ね、厚みを出す
• 商品写真には床への映り込みを入れる
• 吹き出しにはごく弱い影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 成分やアイコンは淡いミント／黄緑の正円の台座にのせる。人物は角のない背景なじませ
• セクション境界: ゆるい波形カーブと、下に向けたV字矢印
• ラベルはピル型
• 年代バッジは小さな正円
• Point番号は大きな正円
• 悩みカードは左上と右下に大きな引用符を置く

Components

• グラデーション見出し（gradient-headline）: 赤橙からピンク、紫へ流れる極太の訴求見出し
• 悩み引用カード（worry-quote-card）: 淡い青白のカードに薄い影、左上と右下に青い大きな引用符
• Point番号バッジ（point-badge）: 濃ピンクの正円に白の英字とセリフ数字、カード左上にはみ出す
• 特長カード（point-card）: 白いカードに影と緑青のずれ帯。見出しの下にピンクの下線
• ピルラベル（pill-label）: 濃ピンクのピル型に白文字。成分名などのタグ
• 吹き出しタブ（speech-tab）: 白い吹き出しにピンク文字で問いかけを書き、見出しの上に置く
• 円アイコン付き説明行（icon-circle-row）: 淡い黄緑の円に線画アイコン、右に強調語ピンクの説明文
• 口コミ吹き出し（review-bubble）: 白い吹き出しを左右交互に配置し、右下にマゼンタの年代丸バッジ
• 黄マーカー強調（text-marker）: 本文の重要語を太字にし、下半分に黄色マーカーを引く
• 共同研究ベン図（venn-diagram）: ピンク・オレンジ・青の円を重ね、中央に商品の粒を置く

Do's and Don'ts

Do - 見出しのキーワードはグラデーションと大きい文字で目立たせる - セクションの地の色を淡い色で切り替えて区切る - 太陽の放射線や光のボケを薄く添えて日差し感を出す - 強調はピンク文字・黄マーカー・ピルラベルに限る - 注釈は※付きの小さい文字でカード下に置く

Don't - 黒や濃紺の重い面を使わない - 角の鋭い直角のボックスを多用しない - グラデ見出しを長文に使わない - 写真を強い彩度や暗いトーンにしない - ピンク・緑青・空色以外の強い色を増やさない

Page Structure

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

1. ファーストビュー（商品と世界観を一目で伝える）: ピンクのグラデ地に帽子姿の笑顔の女性、大きなグラデのロゴ風タイトル、斜めの手書き風コピー、商品ボトルと丸バッジ
2. 共感の導入（日常の場面に引き込む）: 白地に薄い太陽の放射線、細字の数字と太字の一文
3. 悩みの提起（外側ケアだけの不安を言語化する）: 問いかけ見出しの一部を青字にし、引用符つきカードを4つ縦に並べる
4. 解決の提案（飲むケアを提案する）: 波形で切り替わる空色グラデ地、V字矢印、大きなグラデ見出しと映り込みつきの商品写真
5. 信頼の根拠（国産と共同開発で安心感を出す）: 丸い文字バッジの見出し、3色の円を重ねたベン図
6. ベネフィット宣言（内側からのサポートを強調する）: V字矢印のあとにグレーとピンクの段組み、大きなグラデ見出し
7. 特長ポイント（成分と手軽さの2つの理由を説明する）: ミント地に吹き出しタブと放射線つき数字、Point番号つき白カード2枚に成分の円写真・ラベル・アイコン行
8. お客様の声（利用者の実感を伝える）: クリーム地に線つき見出し、白い吹き出しを左右交互に並べ年代バッジ

Imagery

• 人物は屋外の自然光で、帽子姿で上を見上げる明るい笑顔
• 商品は白背景か空色背景で正面から撮り、下に映り込みを入れる
• 成分は葉の水彩風イラストを淡い円にのせる
• 動作アイコンは緑青の細い線画
• 太陽の放射線と、ピンク・黄の光のボケを薄く散らす
• ビタミンなどは顔のついた丸いキャラクターでかわいく見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅の1カラムを中央に置いたPC版。PCでも幅480〜750px程度の中央カラムを保つ
• PCの左右余白は各セクションの地の色を延ばす
• SPでは見出し34px前後、本文14pxを目安に
• 成分2列はSPでも2列のまま、アイコン行は横並びを保つ
• FVの人物と商品はSPで重ねて配置し、タイトルは上部に置く

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