DESIGN.md — 深紅×金×薔薇の大人向けファンデ LP（Rose Crimson Gold Cosmetic Offer LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 深紅と金・薔薇の花びら・明朝見出し・ピンクグラデ背景・初回限定価格・大人の艶肌
• 地の質感: パール光沢と金箔風グラデ、薔薇の写真で艶やかに見せる
• 形: 四角いカードと帯見出しが基本。機能は円形バッジ、購入ボタンはピル型
• 温度感: 暖色寄り（ピンク・ワイン・ゴールド）

Colors

• 外側はピンクのグラデで、中央カラムは白か淡ピンクにする。
• 深紅は帯見出し・円形バッジ・オファーのビジュアルにだけ使う。
• 金色はオファー枠・リボン見出し・暗地の見出しに使い、高級感を出す。
• 価格の数字はローズレッドで大きく出し、割引ラベルは赤地に白文字にする。
• 購入ボタンだけ鮮やかな緑にして、ほかの色と分ける。
• 暗いブラウン地は動画など一部のセクションだけに使う。
• button-primary は文字 #FFFEFF × 背景 #2ECC40 のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1F872A、4.58:1）を使う。
• button-order-gold は文字 #FFFEFF × 背景 #E4CAAD のコントラスト比が 1.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#9D009D、4.57:1）を使う。

Typography

• 見出しは明朝体で、上品さを出す。
• 価格の数字は明朝の太字で本文の3倍以上に大きくする。
• セクション見出しの中で大事な語だけ金色やローズで大きくする。
• 筆記体はポイント番号や英字の飾りにだけ使う。
• 注釈は※付きの小さい文字で、該当する要素のすぐ下に置く。
• お客様の声は手書き風の文字に黄色マーカーを引いて強調する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央の約 700px カラムに 1 カラムで組む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文はカード化した白い縦長カラムの中に入れる。
• ポイントは「番号＋見出し帯→本文→図解」の順で縦に並べる。
• テキストと写真・図は左右に並べ、SP では縦に積む。
• 価格表は商品ごとにカードを分け、上に深紅の帯見出しを付ける。
• 機能紹介は商品写真のまわりに円形バッジを散らして置く。

Elevation & Depth

• 白カードには薄い影（0 2px 8px rgba(0,0,0,.1)）を付ける。
• 商品写真には光沢と落ち影を付けて浮かせる。
• 購入ボタンは影なし、またはごく弱い影にする。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物は四角に切り抜き、成分の写真は小さな正方形にする。機能は円形バッジで見せる
• セクション境界: 見出しエリアの下端をV字（下向き矢印形）にする。それ以外は直線で切り替える
• カードや帯はほぼ角のない四角にする。
• 購入ボタンだけ完全なピル型にし、右端に丸い矢印を付ける。
• SPF表示などは円形の枠に入れる。
• 限定見出しは金色のリボン型にする。

Components

• 購入ボタン（button-primary）: 緑のピル型ボタン。白い太字で、右端に「＞」矢印を付ける
• 金色の注文ボタン（button-order-gold）: オファー枠の中に置く、ブラウンから金色へのグラデのボタン
• 価格カード（price-card）: 深紅の帯見出しを付けた白カード。打ち消し線の通常価格・赤いラベル・大きい価格・商品写真を入れる
• ポイント見出し（point-heading）: 筆記体の番号を添えたベージュ帯に、明朝の見出しを置く
• 機能の円形バッジ（feature-circle）: 深紅の円に白文字で機能名を書き、商品写真を囲むように散らす
• お客様の声カード（voice-card）: 白カードにピンクの横顔シルエットと年齢入りの円を付け、コメントにマーカーを引く
• 開閉する帯（accordion-bar）: 深紅の帯に「＋」アイコンと白文字を置いた開閉ボタン
• 限定リボン見出し（limited-ribbon）: オファー枠の上に置く、金色のリボン型の見出し

Do's and Don'ts

Do - 薔薇の花びらと光沢のある商品写真で華やかさを出す。 - 数字（価格・年齢・機能の数）は大きく明朝で見せる。 - 効果の表現には必ず※注釈を添える。 - ポイントは同じ型で番号順に繰り返す。 - 購入ボタンは価格の直下に毎回置く。

Don't - 深紅・ピンク・金以外の強い色を足さない（緑は購入ボタンだけにする）。 - 見出しをゴシックの極太にしてカジュアルにしない。 - 外側の背景を白一色にしない。 - 角丸の大きいポップなカードにしない。 - 注釈を省略しない。

Page Structure

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

1. ファーストビュー（悩みを解決することと実績を一目で伝える）: ピンクと深紅のグラデ地に、明朝の大きなキャッチ・商品写真・薔薇・CM放映の円形バッジを重ねる
2. ビフォーアフター（効果を見て信じてもらう）: 使用前と使用後の人物写真を矢印でつなぎ、筆記体のBefore/Afterを添える
3. 動画紹介（CMを見せて信頼感を出す）: 濃いブラウン地に金色の見出しを置き、動画を埋め込む
4. 初回オファー（早い段階で特別価格を見せる）: 金色の枠にリボン見出し、セット写真、大きな価格、色見本、金色のボタンを並べる
5. お客様の声（共感と安心を生む）: 年齢入りの円を付けた白カードを左右交互に3枚並べる
6. 設計のこだわり（技術力を伝える）: くすみブルーの見出し帯の下をV字にし、Point1〜3のカードに図解を入れる
7. 機能一覧（多機能さを伝える）: 大きな数字の見出しと、商品写真を囲む深紅の円形バッジで見せる
8. 5つのポイント（成分と性能を詳しく説明する）: 筆記体の番号付きベージュ帯の見出し、本文、図解、成分写真のグリッドを並べる
9. 使い方ステップ（使い方をわかりやすく見せる）: 2列×2段の写真カードに、step番号と短い説明を付ける
10. オファーのビジュアル（購入する気持ちを後押しする）: 深紅の地に商品写真・薔薇・割引バッジを置く
11. 価格表（購入プランを選んでもらう）: 深紅の帯見出し付きのカードを縦に並べ、それぞれに緑のピル型ボタンを付ける
12. 商品情報・注意事項（成分や注意を法令どおりに表示する）: 白カードに小さい文字で成分を並べ、最後に注意事項の箇条書きとSSL表示を置く

Imagery

• 商品はパール光沢のある容器を斜め上から撮り、強めのハイライトを入れる。
• 深紅の薔薇と散る花びらを画面の端に配置する。
• 人物は40〜60代の女性で、明るい自然光の中で頬に触れる笑顔にする。
• ファンデのテクスチャを塗り広げた写真を、色見本として使う。
• 図解は淡ピンクとベージュでフラットに描き、ラベルを付ける。
• 金色のキラキラや光の玉を、背景にうっすらと重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約700pxカラムに固定し、左右にピンクのグラデ背景を見せる。
• SPではカラムを画面幅の90〜100%に広げる。
• PCで左右に並べているテキストと写真は、SPでは縦に積む。
• SPでは使い方ステップを2列のまま縮めるか、1列にする。
• SPでは機能の円形バッジの直径を56〜64pxにする。
• SPでは価格の数字を40px前後にする。

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