DESIGN.md — 夜空紺×ベリーピンクの美容ドリンク LP（Night Violet and Berry Pink Beauty Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 朝と夜の対比・夜空グラデーション・ゴールドの品格・ピンクの潤い・明朝見出し・定期通販
• 地の質感: 夜空の星やきらめくボケ光の写真背景に、白いカードを重ねる。金はグラデーションの箔調。
• 形: カードは小さめの角丸。主 CTA はピル型で立体感のあるグラデーション。丸いバッジを 3 つ並べる。
• 温度感: 暖色ピンクと寒色ネイビーを半々にした、しっとりと落ち着いた温度感。

Colors

• 前半は濃紺の夜空とピンクの朝を左右で対比させ、商品の二面性を色で示す。
• 金は帯・見出しの下線・Point枠などの格付けにだけ使う。
• 主 CTA はコーラル赤のグラデーション。ブランドのピンクとは別の色にして目立たせる。
• サブ CTA（単品購入）は青のグラデーションにして主 CTA と区別する。
• 後半の申込エリアは白・淡青灰・淡ピンクで情報を落ち着かせる。
• 文字は純黒を避けて濃紺グレーにする。強調はピンクか金で入れる。
• button-primary は文字 #FFF2ED × 背景 #F0606E のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD1528、4.55:1）を使う。
• heading-gold-marker は文字 #FFFFFF × 背景 #C9A45C のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#917030、4.6:1）を使う。
• point-box は文字 #C9A45C × 背景 #FFFFFF のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#917030、4.6:1）を使う。

Typography

• 情緒的な見出しは明朝、価格・ボタン・本文はゴシックで使い分ける。
• 見出し中のキーワードは金の地にマーカー風に敷いて強調する。
• 見出しの上に小ラベルとスラッシュ風の線を置く。
• 価格数字は単位より 2〜3 倍大きくし、赤にする。
• 注釈は※番号付きで小さく、本文のすぐ下に置く。
• 明朝見出しは字間を広めにして上品さを出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列も可。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅背景＋中央寄せのコンテンツにする。
• 比較や対比は左右 2 分割にする。
• バッジは 3 つ横並びの円形で並べる。
• 価格カードは白地で中央に置き、背景はラベンダーのグラデーションにする。
• FAQと商品情報表、フォームはページ末尾にまとめる。

Elevation & Depth

• 価格カードと情報カードは薄い影で浮かせる。
• CTA ボタンは下に濃い影を付けて立体感を出す。
• 夜空背景の上の白カードは影を付けず、白抜きで見せる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は角版。商品写真は切り抜き。成分写真は背景になじませる。
• セクション境界: FV下は緩やかな弧で区切る。他は直線か背景グラデーションで切り替える。
• ボタンはすべてピル型にする。
• 特典バッジや割引バッジは正円にする。
• 吹き出しは角丸四角に三角のしっぽを付ける。
• 口コミカードは細い二重枠の角版にする。

Components

• 購入ボタン（button-primary）: コーラル赤グラデのピル型ボタン。下に影を付ける。
• 商品画像付き誘導ボタン（button-header）: ピンクのピル型。左に商品写真、右に矢印を置く。
• 特長丸バッジ（badge-circle）: ピンクの光沢球に白文字の短い特長を入れる。3 つ並べる。
• 金マーカー見出し（heading-gold-marker）: 明朝見出しのキーワードに金の地を敷く。
• Point枠（point-box）: 金の細線のかぎ括弧枠。左に円形のPointラベルを置く。
• 定期コース価格カード（price-card）: 上部に金の帯の見出し。中に割引円バッジ、取り消し線付きの通常価格、赤の大きな価格を入れる。
• FAQアコーディオン（accordion-faq）: ピンクの細枠。左にQ、右に＋を置く。
• 口コミカード（review-card）: 淡ピンクか淡紫の地に装飾枠。見出し・本文・年代を入れる。
• 特典円（benefit-circle）: 紺と赤の大きな円に、特典番号ラベルと特典内容を入れる。

Do's and Don'ts

Do - 朝と夜を色と写真で対比させる構成にする。 - 金の装飾は細線や小面積に限定し、品よく見せる。 - 価格は通常価格と割引価格を並べ、割引率を円バッジで示す。 - 機能性表示や出典の注釈を必ず添える。 - 定期コースの不安を吹き出しで挙げ、安心ポイントで解消する。

Don't - 原色の黄色や緑を主要色に使わない。 - 見出しをすべてゴシックにしない。上品さが失われる。 - CTA の色をブランドピンクと同じにしない。 - 夜空セクションに濃い影付きのカードを重ねない。 - 注釈なしで効果を断定しない。

Page Structure

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

1. ファーストビュー（商品とベネフィットを一目で伝える）: ピンクの水面写真に明朝の大コピーと商品ボトルを置く。金の円バッジを添え、下端は弧で区切る。
2. 導入・CTA（購入導線と商品コンセプトの提示）: 白地にピル型ボタンと短いリード文を置く。
3. ダブル訴求（2つの効果を対比する）: 左を朝のピンク空、右を夜の星空に斜めで分割し、中央に商品を置く。下に丸バッジを3つ並べる。
4. 共同開発（信頼性の提示）: 夜空背景に白カードを置き、2社の枠を×でつなぐ。
5. 悩みの提起（睡眠と肌の悩みに共感する）: チェックリストと人物写真を並べ、半透明の白カードに入れる。
6. 成分解説（成分の必要性を伝える）: ベージュ地に減少グラフとPoint枠、商品写真を並べる。
7. 研究報告・トピック（エビデンスと詳細情報）: キラキラ背景で金帯カードに2ポイントを並べる。紫→ピンクのグラデ面に白のアコーディオンを置く。
8. お客様の声（選ばれる理由を示す）: 2×2の装飾枠カードに口コミを入れる。
9. 味・ブランド（おいしさとメーカーの信頼を伝える）: フルーツ写真、円グラフ、吹き出し、金の箔帯、認証マークを並べる。
10. 使用シーン（習慣化を提案する）: ピンクのボケ背景に、手順を円と三角でつないで示す。
11. 価格・定期コース（購入を後押しする）: ラベンダー背景に白い価格カードを置き、赤と青のCTAを配置する。
12. 定期コース説明（不安の解消）: 淡青灰地に特典円2つ、悩むイラストと吹き出し、安心ポイントのカードを置く。
13. よくある質問（疑問を解消する）: 淡ピンク地にピンク枠のアコーディオンを並べる。
14. 商品情報・購入フォーム（その場で申込を完了させる）: 罫線表、必須ラベル付きのフォーム、青フッターの順に置く。

Imagery

• 朝の光の中で頬に手を当てる女性と、夜にベッドで眠る女性の写真を対にする。
• 星空と山のシルエットのラベンダー〜濃紺グラデ背景を使う。
• 金や白のボケ光（グリッター）の背景を使う。
• 柑橘やピンクグレープフルーツの断面、水滴、氷の明るい俯瞰写真を使う。
• 細い線画の女性イラストで不安や習慣を表す。
• ボトルは切り抜きにし、光沢を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 640px に絞り、中央寄せにする。
• SP では左右分割の朝夜ビジュアルを上下に積むか、幅を縮めて斜め分割を維持する。
• 口コミ 2×2 は SP で 1 列にする。
• 価格カードは SP で全幅近くにし、CTA を幅 90% にする。
• フォームは 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 行書くと起動時に読み込まれる。