DESIGN.md — 桃色の光沢×夜空ネイビーの美容サプリ LP（Pink Sparkle and Night Navy Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 淡いピンクのグラデーション・キラキラの光彩・夜空ネイビー・大きな欧文の透かし文字・ピンクの帯の見出し
• 地の質感: ボケた光の玉と十字の星が光る、つやのあるグラデーション地。夜のセクションには星空のテクスチャを使う
• 形: 三角に割ったコラージュ写真、正円のイラスト枠、角の小さいカード、ピル型ボタン
• 温度感: 暖かく甘いピンクが中心。中盤のネイビーで落ち着きと夜の空気を出す

Colors

• 基本の地は淡いピンクのグラデーションにする。白い光の玉を重ねる
• ブランドの物語の転換点（夜の習慣）は、全面をネイビーの星空にして空気を切り替える
• ネイビー地の上下は、ゴールドの細線を添えた波形で区切る
• 見出しはピンク〜ラベンダーの帯に白文字を載せる
• コーラルレッドは購入・詳細ボタンと推し商品の枠だけに使う
• 本文中の強調語は濃いピンクの太字で色を変える
• heading-band は文字 #FFFBFD × 背景 #D8A0D8 のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B249B2、4.56:1）を使う。
• button-primary は文字 #FFFBFD × 背景 #EC4D3A のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E02B16、4.52:1）を使う。
• button-pink は文字 #FFFBFD × 背景 #EC93B3 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DA2B6A、4.51:1）を使う。

Typography

• 見出しは帯の上に白文字で載せる。小さいラベル帯と大きい帯の 2 段で組む
• 夜のセクションの見出しだけ明朝体にし、上品さを出す
• 背景の英字はセクションごとに巨大なサイズで置く。透明度は 10〜20% にする
• 強調語はピンクの太字にする。下線は引かない
• 本文は中央揃え、行間は 1.8 前後にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。体験アイコンは 3 列、商品・メニューは 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは帯見出し→リード文→コンテンツの順に中央揃えで組む
• 口コミの吹き出しは左右交互に寄せ、近くに人物アイコンを置く
• 夜のセクションでは、ネイビー地の中に枠線付きの大きな箱を置き、レシピを並べる
• データは中央にレーダーチャートを置き、凡例を下に付ける

Elevation & Depth

• 吹き出しカードは白地にごく淡い影を付ける
• 商品カードは影なし。推し商品だけコーラルレッドの 1px 枠で囲む
• 光の玉や星の装飾をレイヤーとして重ね、奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: ファーストビューは三角に割ったコラージュにする。イラストは正円、料理写真は角の小さい長方形で切る
• セクション境界: ネイビー地の上下は、ゴールドの線を添えた緩い波形で区切る。それ以外はグラデーションでなだらかにつなぐ
• ボタンはすべてピル型にし、右矢印を付ける
• 見出しの帯は角丸なしの長方形にする
• 吹き出しは角の小さい白の四角にする

Components

• 帯付きのセクション見出し（heading-band）: ラベンダーピンクの帯に白文字の見出しを載せ、上に小さなラベル帯を重ねる
• 詳細ボタン（button-primary）: コーラルレッドのピル型ボタン。白文字に右矢印を付ける
• ピンクの誘導ボタン（button-pink）: ページ内リンク用のブランドピンクのピル型ボタン。2 行の文字を入れる
• 口コミの吹き出し（voice-bubble）: 白いカードに強調語をピンクで入れ、人物アイコンと年代ラベルを添える
• 正円のシーンイラスト（circle-illust）: 淡ピンクの円の中に線画の人物イラストを入れ、下に短いラベルを付ける
• レシピカード（recipe-card）: ネイビー地に料理写真を置き、下に白文字で 2 行の名称を入れる
• 商品カード（product-card）: 商品写真・商品名・説明・詳細ボタンを縦に並べる。推し商品だけ赤い枠で囲む
• 動画サムネイル（video-thumb）: 再生ボタン付きの動画枠。右に明朝の見出しと説明を並べる

Do's and Don'ts

Do - 淡いピンクのグラデーションに光の玉と星の装飾を必ず散らす - セクションごとに巨大な欧文の透かし文字を背景に置く - 物語が切り替わる場面ではネイビーの星空セクションを使い、明暗の差を付ける - 強調語はピンクの太字にする - 購入・詳細の導線はピル型ボタンでそろえる

Don't - 原色の鮮やかな赤を広い面に使わない - 角ばった太い黒枠を使わない - ネイビーのセクションを複数作らない（特別感が薄れる） - 見出しを帯なしのただの黒文字にしない - ポップな手書きフォントを多用しない

Page Structure

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

1. ヘッダー（ナビゲーションと購入導線）: 白地にロゴとメニューを横に並べ、右端に赤い小さな購入ボタンを置く
2. ファーストビュー（商品と理想の女性像を伝える）: ピンクの三角コラージュに笑顔の女性写真を入れ、左に白文字のキャッチと商品パッケージ、丸いバッジを置く
3. リニューアル告知（改良点と利用シーンを示す）: 帯見出しとリード文の下に、正円のイラストを 3 つ並べ、ピル型ボタンを置く
4. お客様の声（飲みやすさの実感を伝える）: 商品画像と見出しの後に、吹き出しを左右交互に並べる
5. データ比較（従来品との違いを数値で見せる）: ピンク系のレーダーチャートを中央に置き、注釈を小さく添える
6. 夜の習慣提案（新しい飲用シーンを提案する）: 星空ネイビー地に明朝の見出しと動画を置き、枠の中にシーン別のレシピカードを並べる
7. 製品情報（商品ラインナップと購入導線）: タイプ別のラベル帯の下に商品カードを並べ、各カードに詳細ボタンを付ける
8. スペシャルコンテンツ（CM やマッサージ動画で関心を深める）: 濃いピンク地に動画サムネイルと説明を左右に組んで並べる
9. フッター（関連ブランドと規約リンク）: 白地にバナーを並べ、細いリンク列とコピーライトを置く

Imagery

• 30〜40 代の女性が白い服で自然に笑う写真。柔らかい逆光のハイキーで撮る
• 利用シーンは細い線画の人物イラストにし、淡いピンクで塗る
• 料理・ドリンクの写真は明るい俯瞰か斜めから撮る
• 装飾は光の玉、十字のきらめき、ガラス玉のような球体を使う
• 夜のセクションは星が散らばる深い青のグラデーションにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央幅およそ 1000px で、3〜4 列のカードを並べる。SP は 2 列か 1 列に落とす
• ファーストビューのコラージュは、SP では写真を縦に重ね、キャッチを上に置く
• 巨大な透かし英字は SP では縮小し、一部を画面外にはみ出させる
• 口コミの吹き出しは SP では幅 90% にして、左右交互の配置を保つ

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