DESIGN.md — 夜空ネイビー×夕焼けコーラルの睡眠美容 LP（Midnight Navy to Coral Gradient Sleep Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、クール・先進的
• キーワード: 夜空グラデーション・濃紺と珊瑚色・マーカー強調・細い線画・透明な泡
• 地の質感: 平らな面とグラデーションが中心。泡や水滴の写真で透明感とうるおいを出す
• 形: ピル型の帯見出し、正円の効果バッジ、細い線の枠と吹き出し
• 温度感: 濃紺の落ち着きに、夕焼けの暖色で少し温かさを足す

Colors

• ライトグレーの地と濃紺の地をセクションごとに交互に置く
• 大きな転換点では濃紺から紫、コーラルへ縦方向のグラデーションをかける（コンセプト・商品紹介）
• 帯の見出しは左が濃紺、右がコーラルの横グラデーションのピル型
• 強調したい語は文字色を変えず、下半分にピンクのマーカーを引く
• 濃紺地の上の見出しマーカーはくすんだローズを使う
• 原色や彩度の高い色は使わない。暖色はグラデーションとマーカーだけ

Typography

• 見出しは太めのゴシック、本文は細めで字間をやや広げる
• 商品名は字間を0.2em以上あけて上品に見せる
• 英字ラベルはサンセリフで小さめにし、下にマーカーを引く
• ロゴ風の文字は斜体のセリフ体と丸いサンセリフを組み合わせる
• 注釈は※番号つきで本文の直下に小さく置く
• 本文は1行を短めにして改行で区切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。効果バッジは 3〜4 列、カテゴリアイコンは 3〜4 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右に約 25px の余白をとる
• 写真はコンテンツ幅いっぱい、または画面幅いっぱいに置く
• ピル帯の見出しのあとに左揃えの本文を置く
• 濃紺セクションの中は中央揃えが基本
• Q&A は細い白枠で囲んだ箱にする
• お客様の声は吹き出しと線画の人物を左右交互に置く

Elevation & Depth

• 影はほぼ使わない。フラットな面とグラデーションで奥行きを出す
• 奥行きは泡の写真と半透明の球体で表現する
• カードは影ではなく細い線の枠で区切る

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。FV と商品写真は端を白くぼかす
• セクション境界: 直線で切り替える。グラデーションで色を移していく
• 帯見出しは完全なピル型
• 効果バッジは白い細線の正円
• 吹き出しは角丸10px の細線の枠に小さな尻尾
• 購入ボタンは角丸なしの細い白枠の長方形に右向き矢印
• チェック項目は円とチェックマークの線画アイコン

Components

• グラデーションのピル見出し（pill-heading）: 濃紺からコーラルへの横グラデーションのピル型に白い太字を中央寄せで置く。悩みへの問いかけや転換の一言に使う
• マーカー強調（marker-text）: 強調語の下半分にピンクの帯を敷く
• チェックリスト（check-list）: 円とチェックの線画アイコンに悩みの短文を添え、4 行並べる
• 月桂冠の実績バッジ（award-badge）: 金色の月桂冠で数字の実績を囲み、3 つ横に並べる
• 効果の円バッジ（effect-circle）: 濃紺地に白い細線の正円。中に効果名を太字で、補足を小さな文字で入れる。上に斜線で挟んだ小見出しを置く
• お客様の声の吹き出し（voice-bubble）: 線画の女性イラストと、白地に細線の吹き出しを左右交互に並べる
• 枠線の購入ボタン（button-primary）: グラデーション地の上に白い細枠の長方形を置き、英字と長い矢印を入れる
• Q&A 枠（faq-box）: 濃紺地に白い細線の四角い枠。大きな？アイコンと質問を置き、円形イラストと回答を続ける
• カテゴリの線画アイコン列（line-icon-row）: 枕カバー・タオル・衣類などを細い線画で描き、下に英字のラベルを付ける

Do's and Don'ts

Do - 濃紺からコーラルへのグラデーションを大きなセクションの地に使う - 強調はピンクのマーカーで控えめにする - アイコンは 1px 前後の細い線画でそろえる - 注釈は※番号を付けて小さく、きちんと添える - グレーの地と濃紺の地を交互に置いてリズムを作る

Don't - 赤や黄色のベタ塗りの大きな CTA ボタンを使わない - 強い影や立体的なボタンを付けない - 太いポップ体や手書き風の書体を使わない - グラデーションに彩度の高い紫や青を足さない - 文字を詰めすぎない

Page Structure

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

1. ヘッダー（ブランドの表示とショップへの導線）: 白地に左ロゴ、右に濃紺のショップボタン
2. ファーストビュー（悩みと解決後の姿を対比して見せる）: 鏡に映る人物写真に、青紫に寄せたビフォーを重ねる。キャッチは白地の帯とピンクの帯で組む
3. 実績バッジ（信頼の補強）: 月桂冠の金色バッジを 3 つ並べる
4. 商品の導入（カテゴリと商品名を見せる）: 小見出しとマーカー付き商品名、寝姿の写真に半透明の球体バッジを重ねる
5. 悩みの提起（共感を集める）: ピル見出し、短い本文、マーカーの問いかけ、4 行のチェックリスト
6. 解決策の提示（新しい考え方を示す）: ピル見出しとマーカー文、生活シーンの写真、もう一度ピル見出しと本文
7. コンセプト（シリーズの世界観を伝える）: 濃紺からコーラルへのグラデーション地に泡のビジュアルと白い大見出し
8. 動画・カテゴリ・効果（ラインナップと効果を一覧で見せる）: 濃紺地に動画、線画アイコン 3 つ、肌用と髪用の円バッジ群
9. 仕組みの説明（効く理由を示す）: 泡と人物の写真を 2 分割。濃紺地に左揃えの見出しと、線画の仕組み図
10. お客様の声（使った人の実感を伝える）: グレー地に線画の人物と吹き出しを交互に 3 件
11. よくある質問（購入前の不安を消す）: 濃紺地の細線の枠に、円形イラストと回答
12. 商品・購入 CTA（購入へ導く）: グラデーション地に商品写真、ロゴ、価格、色の丸いチップ、枠線ボタン
13. ラインナップ・フッター（ブランドサイトへの回遊）: グレー地に線画アイコン 4 つとバナー。最下部に濃紺の帯のフッター

Imagery

• 人物写真は白い光が回る寝室や洗面所で撮り、肌の質感が柔らかく見える明るさにする
• ビフォーの写真は青紫の色を重ねて沈ませる
• 泡・水滴・ジェルのマクロ写真でうるおいを表す
• 線画のイラストは細い線の単色で、女性の顔は目を閉じた穏やかな表情にする
• 商品写真はリネンと植物を添えたグレートーンの静物にする
• 濃紺から夕焼け色のグラデーション空に、半透明の球体を浮かべる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央に幅約 375px の SP レイアウトで置き、両側に固定の背景ビジュアルを敷く
• PC の左の背景にロゴとショップボタン、右の背景に企業ロゴを置く
• 左右の背景は青紫の布やシルクの写真で世界観を広げる
• 中身の構成と順序は 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 行書くと起動時に読み込まれる。