DESIGN.md — 夜空ネイビー×薔薇×金の高級夜用クリーム LP（Midnight Navy Rose Gold Luxury Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型
• キーワード: 夜空・濃紺グラデーション・薔薇の花びら・シャンパンゴールド・明朝体・特典訴求
• 地の質感: 星屑がきらめく濃紺グラデーションと、サテン調のアイボリー地。金の箔風グラデーション帯
• 形: 角丸の白カード、金の細枠、リボン型見出し、円形バッジ
• 温度感: 冷たい夜の濃紺に、薔薇ピンクと金で温かみと艶を足す

Colors

• 地は濃紺〜夜空の黒紺を基本にし、口コミやコラムだけ白・淡いピーチに切り替えて呼吸させる
• 金は帯・細枠・ラベル・円バッジに限定し、面積を小さく保つ
• 購入行動は深紅のピル型ボタンと赤い価格数字だけに使う
• 薔薇ピンクは写真と口コミ見出し・マーカーで反復させる
• 濃紺地の大見出しは白〜淡い金のグラデーション文字にする
• コラムの強調は黄色マーカー、口コミの強調はピンクマーカーで使い分ける
• badge-circle は文字 #B8975A × 背景 #FEFEFF のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8E713D、4.55:1）を使う。
• gold-band は文字 #303658 × 背景 #B8975A のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8E713D、4.54:1）を使う。

Typography

• 見出し・本文とも明朝体を基本にし、上品さを統一する
• 注釈とボタンのみゴシックにする
• 濃紺地の見出しは金〜白のグラデーション文字にする
• 価格は大きなセリフ数字で「円」を小さく添える
• 番号やラベルは欧文セリフのイタリックで装飾する
• 手書き風の短い吹き出しコピーをワンポイントで使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典・価格はカード積み重ね
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面端から約 6% の余白をとり中央配置
• 特典カードは文章左・商品写真右の重ね配置
• 価格ブロックは金帯見出し→商品写真→特典枠→価格→ボタンの順
• ポイントは中央揃えの番号と見出し、本文は左揃え
• 注釈は各ブロック直下に小さくまとめる

Elevation & Depth

• 白カードに薄い影を付けて濃紺地から浮かせる
• カートボタンは金縁と下方向のドロップシャドウで立体感
• 商品写真の下に映り込み・水面で奥行きを作る
• 口コミの見出し枠は白地に淡い影

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き、口コミの人物は円形、使用感写真は大きな円形・楕円トリミング
• セクション境界: 大きな円弧で濃紺地を区切る、金の二重線で区切る
• 特典カードは金の細枠+角丸 12px
• セット数・全員プレゼントは金縁の円形バッジ
• お得額は右向き矢印型の赤タグ
• 見出しはリボン形の金帯

Components

• カートボタン（button-cart）: 深紅グラデのピル型、金の縁取り、右に > 矢印
• 特典カード（present-card）: アイボリーサテン地+金細枠。上辺中央に金の PRESENT 番号ラベル
• 円形バッジ（badge-circle）: 白地に金の線の円で「個数セット」等を表示
• リボン見出し（ribbon-heading）: アイボリー〜金の帯を左右に折り返したリボン形。星のきらめき装飾
• 価格ブロック（price-block）: 取消線付き通常価格、赤い矢印タグのお得額、大きな赤い価格数字、送料無料の円バッジ
• 金のセット見出し帯（gold-band）: 金のグラデ帯に明朝のプラン名、下に淡金帯で月当たり価格
• 口コミ（voice-item）: 円形イラスト人物+紺の見出し、点線罫の本文にピンクマーカー、右下に年代
• ポイント番号（point-number）: POINT 小文字+大きな斜体数字、左右に金の二重線
• 成分ラベル（ingredient-label）: ローズ紫の帯に白文字の成分名

Do's and Don'ts

Do - 濃紺の夜空に星屑と水滴付きの薔薇の花びらを散らす - 金は細線・帯・バッジに絞り高級感を保つ - 見出しは明朝で、ゆったりした字間をとる - 特典はカードを番号付きで縦に積む - 各価格ブロックの直後に必ずカートボタンを置く - 注釈は小さいゴシックでブロック直下にまとめる

Don't - ビビッドな原色や蛍光色を使わない - 丸ゴシックやポップな書体を見出しに使わない - 深紅をカート以外の大面積に使わない - 金を太いベタ面で多用しない - 白地を連続させて夜のトーンを失わない - 角の尖った無装飾ボタンにしない

Page Structure

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

1. ファーストビュー（夜の高級ケアの世界観提示）: 黒紺地に大輪の薔薇と商品、縦書き明朝コピー、金縁の円バッジ
2. コンセプト導入（進化を短く伝える）: 星空地に金グラデ見出しと白い短文、右に商品
3. 購入特典（特典で購入意欲を高める）: 円弧で区切った紺地にリボン見出し、番号付き特典カードを 4 枚
4. お客様の声（実感の共有）: 大理石風の白地、円形イラスト人物と点線罫本文、ピンクマーカー
5. 使用感ビジュアル（テクスチャを見せる）: 手書き風見出しと手の甲の円形写真
6. 価格プラン（まとめ買いへ誘導）: 濃紺地に白カード 3 つ。金帯見出し、特典枠、赤価格、カートボタン
7. 商品の実績（信頼性の訴求）: 薔薇と水しぶきの商品写真に金メダル風円バッジ
8. コラム（悩みの背景をデータで示す）: 淡いピーチ地、茶系明朝の大見出し、イラスト、白カードの棒グラフ
9. 開発者メッセージ（作り手の想い）: 白地に白衣の人物写真、金の二重線で上下を区切る
10. 中間 CTA（再度購入を促す）: 紫紺地に手のひらと商品、縦書きコピー、価格とカートボタン
11. 新ポイント解説（処方の特長を 3 点解説）: 紺紫グラデ地に POINT 番号、成分ラベル、肌断面図、円形成分写真
12. 使用感の要素（色・香り・感触を五感で伝える）: 細い白枠内に円形写真と短文を縦に並べる
13. パッケージ紹介（容器改良の説明）: 白サテン地、細い線枠見出し、商品の開封写真

Imagery

• 水滴が付いた濃いローズピンクの薔薇・花びらを黒紺背景で艶やかに撮る
• 濃紺に金のバンドが入ったジャー容器を中央に、下に水面の波紋や映り込み
• 星屑・金の粒子のきらめきを背景に散らす
• 人物は線画風のやさしいイラストを円形背景に置く
• 成分は円形トリミングのマクロ写真
• 白いサテン生地や大理石調のテクスチャを淡い地に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 600〜750px のカラムに SP デザインを据え、左右は濃紺の星空背景を広げる
• FV は横長にし、薔薇と商品を中央、コピーを左右に配置
• 特典カードと価格カードは 2〜3 列にせず縦積みを維持して読み順を保つ
• 文字サイズは SP の約 1.2 倍、カート幅は最大 400px

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