DESIGN.md — 夜空紺×深紅の美容サプリ LP（Night Sky Crimson Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 夜空・深紅・桃色グラデーション・明朝体・特許成分・定期通販
• 地の質感: 星空写真や光のボケ、ぼかしたグラデーションを重ねた艶のある質感。白カードには薄い影。
• 形: 成分写真は円形にくり抜き、ピンクの光る輪で囲む。カードは角丸が小さい。セクションの区切りには下向きの V 字を使う。
• 温度感: 夜の濃紺は寒色で落ち着きがあり、深紅と桃色は温かみがある。対比ははっきりしているが、全体はやわらかく見える。

Colors

• 購入ブロックは、深紅の地に白カードを載せる形で統一する。
• 悩み提起とブランドストーリーは、濃紺の星空の地に白文字で置く。
• 特長セクションは、白〜淡い桃色のグラデーションの地にする。
• 見出しの強調語はマゼンタにし、残りの語は濃いグレーで書く。
• 緑は購入ボタンだけに使う。
• 金色は権威づけ（医師推奨）のパートだけに限定する。
• button-primary は文字 #FFFFFF × 背景 #4BAD33 のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#3A8627、4.55:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #838383 のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 見出しは明朝体にする。助詞は小さく、名詞は大きくしてサイズに強弱をつける。
• 強調したい語だけをマゼンタにする。
• point 番号は、筆記体風の大きな数字に小さな欧文を添える。
• 本文は中央揃えにし、行間を広く取る。
• 価格の数字は太い欧文で特大にし、税込・送料無料は小さな赤い枠で囲む。
• 注釈は※付きで、小さな灰色文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 購入カードは画面幅の約88%で中央に置く。
• 成分は円形写真と説明文を左右交互に配置する。
• 特長は角丸の白い半透明カードに、point 番号付きで入れる。
• 購入ブロックを 4 回前後繰り返して配置する。
• 定期のお届けサイクルは 3 列の表で見せる。

Elevation & Depth

• 白カードには薄いぼかし影を付ける。
• CTA は立体的なグラデーションにし、下側に影を付ける。
• 円形の成分写真には外側にピンクの光彩を付ける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 成分は正円、人物は矩形、お客様の声は矩形写真に丸バッジを重ねる
• セクション境界: 下向きの V 字と、グラデーションによる自然な切り替え
• バッジ（割引率・年代）は正円にする。
• CTA は完全なピル型にする。
• 価格ラベルは右向きの矢羽根型にする。

Components

• 購入ボタン（button-primary）: 緑のグラデーションのピル型。左に下向きの山形矢印を付ける。
• 単品購入ボタン（button-secondary）: 灰色のピル型。左にカートのアイコン、右に矢印を付ける。
• 価格カード（price-card）: 深紅の地に白カードを載せる。中には商品画像・商品名・割引バッジ・特大の価格・注釈を入れる。
• 割引率の丸バッジ（discount-badge）: マゼンタの正円に白文字で割引率を入れる。
• 悩みチェックリスト（worry-checklist）: 濃紺の地に細い白枠を引き、チェック付きの悩みを 5 行並べる。
• 成分の円形写真（ingredient-circle）: 光る輪で囲んだ円形写真から引き出し線を伸ばし、成分名と特許番号を書く。
• 理由カード（point-card）: 半透明の白カード。point 番号、明朝の見出し、中央揃えの本文を入れる。
• お客様の声（voice-card）: 矩形の写真に、年代を書いたマゼンタの丸バッジを重ね、下に感想文を置く。
• 医師推奨の帯（authority-band）: 金色の帯に白文字を載せ、月桂冠付きの大きな数値とメダルを並べる。

Do's and Don'ts

Do - 夜空・深紅・桃色の 3 種類の地を交互に使い、リズムを作る。 - 「A×B」の大見出しを、明朝のマゼンタで繰り返す。 - 価格カードは同じ形のものを複数回配置する。 - 注釈を細かく添えて、誠実さを示す。 - 成分は円形写真に引き出し線を付けて説明する。

Don't - CTA の緑を装飾に使わない。 - 見出しを太いゴシックにしない。 - 地を単調なベタ塗りだけにしない。 - 円形の写真を四角にしない。 - 価格の数字を小さくしない。

Page Structure

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

1. ファーストビュー（世界観と成分の訴求）: 星空から深紅へのグラデーションの上に、眠る女性の写真、商品画像、円形の成分バッジを配置する。
2. 価格CTA（初回の割引で即購入を促す）: 深紅の地に白い価格カードと緑ボタンを置く。
3. 悩みの提起（共感）: 濃紺の夜空に人物写真を重ね、チェックリストを置く。最後は V 字で区切る。
4. 解決提示（商品で悩みを解決できることを示す）: 桃色から金色の朝焼けグラデーションの上に、明朝の大見出しと筆記体の装飾を置く。
5. 権威づけ（医師の推奨率を示す）: 金色の帯、月桂冠付きの数値、メダルを並べる。
6. 成分紹介（特許成分を説明する）: 深紅の地に白カードを置き、円形写真を 3 つ交互に並べる。
7. 商品紹介CTA（再度の購入導線）: 青から桃色のグラデーションの上に、商品画像と緑ボタンを置く。
8. 選ばれる理由（特長を 4 つ伝える）: point 番号付きのカードを、淡い背景写真の上に並べる。
9. ブランドストーリー（開発の想いを伝える）: 星空の地に中央揃えの白い明朝文字を置き、その下に商品画像を配置する。
10. お客様の声（実感を伝える）: 写真と年代バッジを付けた声を 3 件並べ、注釈を添える。
11. 最終CTA・定期サイクル（定期購入と単品購入を案内する）: 価格カードの下に 3 列のお届けサイクル表を置き、その下に単品購入カードを置く。

Imagery

• 目を閉じた女性の写真を、白い寝具の上でやわらかい光のもと撮る。
• 星空や夕焼けのグラデーション、光のボケを背景にする。
• 穀物・粉末・液体などの原料は、俯瞰で撮って円形に切り抜く。
• 工場の写真は清潔感のある寒色寄りの色味にする。
• シャボン玉のような半透明の球体を装飾として散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も約 430px 幅の 1 カラムを中央に置く。
• PC 版の左右の余白には、桃色・橙色のぼかし模様を敷く。
• FV だけは PC で全幅にし、見出しを横並びにする。

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