DESIGN.md — オレンジ×ブラウンの推し香水コラボ LP（Celebrity Collab Fragrance Subscription LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、上品・高級、情報量多め・訴求型、ポップ・元気
• キーワード: 推し活・オレンジグラデーション・雑誌風スタイル提案・手書きコメント・サブスク料金訴求・紫アクセント
• 地の質感: ふんわりした粒子感のあるオレンジグラデーションと、フラットな単色ブロックを交互に使う
• 形: 角丸の大きいカード、円形バッジ、ピル型 CTA、細いオレンジの横罫線
• 温度感: 暖色寄り。後半は紫とピンクの淡いグラデーションでやや甘く

Colors

• コラボ特典・クーポン・CTA はオレンジのグラデーション面と白文字で統一する。
• スタイル別セクションは3色（濃茶・グレー・グレージュ）を切り替え、どの面でも文字はオレンジにする。
• サービス説明の後半は白地か淡いラベンダー地にして、数字の強調には紫を使う。
• 比較表は列ごとに色分けし、推奨コースはオレンジ、他のコースは紫とくすみブラウンにする。
• 赤は値下げの価格表示だけに限って使う。
• button-primary は文字 #FFF8E6 × 背景 #FD9B53 のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BC5102、4.59:1）を使う。
• coupon-card は文字 #FFF8E6 × 背景 #FE9B52 のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE5101、4.54:1）を使う。
• compare-table は文字 #FD994D × 背景 #FFFFFF のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C35602、4.51:1）を使う。

Typography

• 価格や件数の数字は本文の 2〜3 倍の太字にし、単位は小さく添える。
• ブランド名・アイテム名は字間を広めにした欧文サンセリフで、オレンジ文字にする。
• 画面端には大きな英字を縦書きの装飾として置く。
• タレントコメントは必ず手書き風書体で、背景色の上にオレンジ文字で置く。
• 一部の見出しは中央揃えにし、斜線（＼ ／）で挟む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は左に情報、右に傾けたカードの 2 分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• ブランドとアイテムのラベルは左端に縦書きで置き、横罫線で行を区切る。
• 特典は写真と文字を左右交互にずらして配置する。
• 比較表は 4 列で、ヘッダーを色分けする。
• ブランド一覧とお客様の声は横スクロールにする。
• CTA バナーはセクションの間に繰り返し置き、画面下部にも固定する。

Elevation & Depth

• 商品カードは白地に淡い影を付け、少し傾ける。
• 料金カードや手順カードは影なしか、ごく弱い影にする。
• CTA は影を付けず、フラットな面にする。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物写真は全幅の角型、プロフィールは円形、商品は切り抜き
• セクション境界: 直線で色面を切り替える。背景には有機的な曲線のブロブを置く
• 特典の限定ラベルは白線の円形バッジにする。
• 推し香水バッジはオレンジの塗り円にする。
• 見出しラベルはピル型にする。
• 手順番号は括弧状の曲線で囲む。

Components

• 人物入り CTA バナー（button-primary）: オレンジのピル型。左上に白い吹き出しラベル、右端に人物の切り抜きを重ねる。
• 限定円バッジ（badge-limited）: 白い細線の円の中に、限定条件を3行で書く。
• 推し香水バッジ（badge-oshi）: オレンジの塗り円に濃茶の文字。商品カードの左下に重ねる。
• スタイル見出し（style-header）: 上にオレンジの長い罫線。右側に Style と大きな番号、下に大きな和文と英字のシーン名を置く。
• クーポンカード（coupon-card）: 上半分がオレンジ面に白抜きの割引額、下半分が白面にコード表記。
• 特典比較表（compare-table）: 白いセルとオレンジ罫線で作る。特典ラベルはオレンジのピル、可否は大きな○と×で示す。
• コース料金カード（price-card）: 上部にピル見出し。推奨コースは紫の枠線と王冠で囲む。
• 悩み吹き出し（worry-bubble）: グレーの角型吹き出しを左右交互に 4 つ並べる。
• お客様の声カード（voice-card）: 方眼地の上に紫帯の見出しを置き、本文の要所に紫の下線を引く。
• Q&A アコーディオン（faq-item）: 白地に罫線で区切り、右端に下向きの山矢印を置く。

Do's and Don'ts

Do - コラボ要素はオレンジ、サービス要素は紫と、色で領域を分ける。 - スタイル別セクションごとに背景色を変え、写真のトーンと揃える。 - 価格の数字は大きく見せ、取り消し線の旧価格を添える。 - 商品カードは傾けて置き、手作り感のある雑誌風に見せる。 - 特典は写真＋短い説明＋円バッジのセットで見せる。

Don't - オレンジ面に紫を混ぜない。 - 手書き書体を料金や注釈に使わない。 - スタイルセクションの背景に派手な原色を使わない。 - CTA を角型にしない。 - 本文を全幅に詰めず、左右の余白を確保する。

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 人物写真を横スライドで見せ、縦書き明朝のコピーを重ねる。上部にロゴの掛け合わせ表記を置く。
2. コラボ導入（推し香水の企画を紹介する）: オレンジのグラデーション面に白見出しを置き、香水ボトルを一列に並べる。
3. プロフィール（人物を紹介する）: 淡いオレンジ地に円形写真を置き、ふりがな付きのオレンジ名前と経歴を添える。
4. コラボ特典（登録の動機づけ）: オレンジ面に白抜きの大見出しを置き、特典 3 点を左右交互に並べて円バッジを添える。
5. クーポン・コース（割引とおすすめコースを示す）: クーポンカードの下に、価格・特典一覧・CTA をまとめた淡いオレンジのカードを置く。
6. 特典比較表（コースごとの差を見せる）: 列ごとに色分けした 4 列の表に、○×を大きく表示する。
7. よくある質問（短）（特典に関する疑問を解消する）: 白地のアコーディオンを 3 件並べる。
8. スタイル別おすすめ（シーンごとの香りを提案する）: 濃茶・グレー・グレージュの 3 ブロックで構成する。各ブロックは大見出し、全幅写真、ブランド＋商品カード、手書きコメントの順に並べる。
9. 特典再掲・動画（もう一度訴求する）: オレンジの特典ブロックを再掲し、続けて動画サムネイルを置く。
10. サービス紹介（サブスクの概要を伝える）: 淡いピンクのグラデーションを敷き、縦書きの英字を装飾に置く。基本料金と初回お届けイメージを見せる。
11. ラインナップ・料金（品揃えとお得さを示す）: 紫の巨大な数字、ブランドの横スクロール、2 枚の料金カード、限定特典の紫枠を順に並べる。
12. 楽しみ方・実績（使い方のイメージと信頼を伝える）: 女性イラストと吹き出しで月ごとの例を見せる。続けて SNS のスマホ画面とメディアロゴを並べる。
13. 悩み・お客様の声（共感を得て体験談で裏付ける）: グレーの吹き出しで悩みを 4 つ見せ、方眼地の声カードを横スクロールで並べる。
14. 使い方ステップ・CTA・Q&A（手順を示して申込につなげる）: 番号付きの 3 ステップをカードで見せ、人物入り CTA を置いて、アコーディオン形式の Q&A で締める。

Imagery

• 人物写真は自然光か、暖色の室内灯で撮ったシネマ風にする。シーン（くつろぎ・仕事・家）ごとに衣装と背景色を合わせる。
• 香水ボトルは白背景の切り抜きで、淡い影を付ける。
• 商品カードは白地に淡い色のブロブと細い曲線を描き、ボトルを置く。
• 後半は線画ベースのフラットな女性イラストにする。オレンジの髪と淡い色の香水ボトルを描く。
• 背景にはピンク・ラベンダー・ベージュの大きな有機ブロブを敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 375〜450px）のカラムを置き、左右を淡いグレー地にする。
• PC に広げる場合、スタイル別セクションは写真と商品情報を左右 2 カラムにする。
• 比較表と料金カードは PC では横幅を広げ、カード同士の間隔を空ける。
• 横スクロール要素は 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 行書くと起動時に読み込まれる。