DESIGN.md — モーヴ×オリーブのクラシカル化粧品 LP（Antique Mauve & Olive Classic Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型、レトロ
• キーワード: くすみモーヴ・オリーブグリーン・アンティーク額縁・ミルク・泡の質感・明朝の見出し・通販オファーの反復
• 地の質感: 大理石や布のような微細なノイズが乗った背景に、ミルクしぶき・泡・水滴の写真を重ねる。金茶の細い装飾線で額縁を描く。
• 形: 四角い帯と額縁が基本。円形バッジ、角丸のボタン、縦書きの帯ラベルで変化をつける。
• 温度感: やや暖かく落ち着いた中間色。彩度は低い。

Colors

• 地はオフホワイトか生成りベージュにし、モーヴとオリーブの帯をセクションごとに交互に入れる。
• オファーのブロックはモーヴの地に白カードを置き、ボタンはオリーブ系にする。
• 強調語は濃いワインモーヴか、白地に黒の太字（マーカー風）で示す。
• 装飾線と額縁は金茶の細線に限る。
• 悩みの提起だけ暗いグレー地にして、ネガティブな空気を出す。
• 原色や高彩度の色は使わない。
• button-primary は文字 #FFFFFF × 背景 #949F7E のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#707A5B、4.54:1）を使う。
• bonus-ribbon は文字 #EBEDE7 × 背景 #9D7383 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#885F6F、4.55:1）を使う。
• vertical-label は文字 #EBEDE7 × 背景 #9D7383 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#885F6F、4.55:1）を使う。
• compare-table は文字 #2E2A2A × 背景 #9D7383 のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#885F6F、4.54:1）を使う。

Typography

• 感情に訴える大きなコピーは明朝、説明はゴシックにする。
• 字間はやや広め（0.05〜0.1em）で上品に組む。
• 見出しは中央揃えで 2 行に分ける。
• 英字のブランド名は字間の広い細長いサンセリフにし、筆記体は飾りとして添える。
• 本文の強調は太字に黒いマーカー、または濃いモーヴで示す。
• ※注釈は小さく、ブロックの右下か下端に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の比較は 2 列、バッジは 2〜3 列にする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面幅いっぱいの帯で区切る。
• オファーのブロック（価格カード＋特典＋保証）は同じ形で 4〜5 回繰り返す。
• 写真は画面幅いっぱいに置き、コピーを重ねる。
• ポイントは番号付きのリストを枠で囲む。
• 左右の余白は 20px 前後を保つ。

Elevation & Depth

• 基本は影なしのフラット。
• 額縁カードは細線の二重枠で奥行きを出す。
• 白カードには薄い影（0 2px 6px rgba(0,0,0,.08)）を付ける。
• 泡や水滴は写真の立体感で表す。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角か全幅で置く。人物は切り抜いて背景になじませる。成分は円形のバッジにする。
• セクション境界: 基本は直線の帯で区切る。ところどころ白い波形を入れる。
• ボタンは角丸 10px 程度の横長にする。
• 特長と悩みは円形のバッジで並べる。悩みは波形の縁にする。
• 価格カードはアンティーク額縁の細線枠で囲む。
• 縦書きのコピーは縦長の帯ラベルに入れる。

Components

• 申込ボタン（button-primary）: くすみオリーブの横長ボタン。白文字で中央揃え。
• 額縁オファーカード（offer-frame-card）: 金茶の装飾枠に、商品写真・セット内容・大きな初回価格・送料無料の印を入れる。
• 特典の帯見出し（bonus-ribbon）: モーヴの帯の左端に丸い「さらに」バッジ、右端にギフトのアイコンを置く。
• 返金保証ボックス（guarantee-box）: 生成りの地に二重線の額縁。保証を大きな明朝で示す。
• 円形の特長バッジ（circle-badge）: 白〜金のグラデーションの円に短い語を 2〜3 行で入れる。
• 番号付きポイント（numbered-point）: オリーブの見出しボックスの下に、丸枠の番号と短文を並べる。
• 縦書きの帯ラベル（vertical-label）: モーヴの縦長の帯に白い明朝の縦書きコピーを入れ、写真に重ねる。
• しずく型の番号（drop-number）: 白いミルクのしずくの形に、こだわりの番号を明朝で入れる。
• 比較表（compare-table）: モーヴの地に VS を置き、自社側の丸印・中央の項目ラベル・他社側の 3 列で比べる。

Do's and Don'ts

Do - モーヴとオリーブの帯を交互に入れて、リズムを作る。 - 価格は大きな明朝の数字にし、税込と送料無料を添える。 - オファーのブロックは毎回同じ見た目で繰り返す。 - ミルクや泡など白くとろける質感の写真を多く使う。 - ※注釈を必ず小さく添える。

Don't - 鮮やかな赤や青のボタンは使わない。 - ポップな丸ゴシックや手書き体は使わない。 - 装飾線は金茶の細線以外にしない。 - 余白を詰めすぎない。 - 濃い影やグロス表現は使わない。

Page Structure

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

1. お知らせの帯（数量の限定を伝えて急がせる）: オリーブの地に白文字の短い告知文。左上にラベルを置く。
2. ファーストビュー（悩みの解消と商品の印象を伝える）: ミルクのしぶきと商品の写真に、縦書きの大きな明朝コピーとモーヴの帯ラベルを重ねる。
3. オファー（お試しの申込を促す）: モーヴの地に額縁の価格カード、特典の帯、返金保証ボックス、オリーブのボタンを並べる。
4. 多機能の訴求（効果の幅を示す）: 中央に商品を置き、左右に円形バッジを 6 個並べる。
5. 使用感の実演（落ちる様子を見せる）: モーヴの地に手元の写真。使用前後を 2 列で比べる。
6. 開発の背景（研究の権威を示す）: ラボの写真、開発者の写真と本文、番号付きの 3 つのポイント、オリーブの共同開発ボックスを並べる。
7. ベネフィット（理想の肌をイメージさせる）: 女性の写真に縦書きの大コピーとモーヴの帯ラベルを重ねる。
8. 実績・SNS（人気を証明する）: モーヴやオリーブの帯見出しの下に、イベントや SNS の写真をグリッドで並べる。
9. 悩みの提起（一般的な商品の問題点を示す）: 暗いグレーの地に困った表情の人物。悩みを波形の縁のバッジで並べる。
10. 解決と比較（違いを明確にする）: 泡の写真に「そこで」の見出し、解説カード、VS の比較表を続ける。
11. 3 つのこだわり（成分の根拠を示す）: 成分の写真を背景に、しずく型の番号と白カードの説明を置く。
12. やさしさ・品質（安全性と安心を伝える）: 無添加の項目を円形バッジで並べ、テストの実施を囲み枠で示し、工場の写真を添える。
13. お客様の声（共感を得る）: オリーブの帯見出しの下に、額縁カードで写真・肩書きラベル・感想を入れる。スライダーにする。
14. 使い方（使うイメージを持たせる）: STEP のリボンと額縁の写真を左右交互に並べる。

Imagery

• ミルクのしぶき・泡・水滴を白〜生成りのトーンで撮る。
• 女性のポートレートは柔らかい光にし、白い背景に溶け込ませる。
• 金の油滴やハーブ・花など、成分を連想させる素材の写真を使う。
• アンティークな額縁・ロゴ紋章・筆記体などクラシカルな装飾を添える。
• 背景に布や大理石のような微細なノイズを入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP と同じ幅約 375px の 1 カラムを中央に置く。
• PC の左右の余白は、モーヴがかった紫の模様のある背景で埋める。
• PC の上部の左右に、商品の画像やブランドのバナーを小さく置く。
• 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 行書くと起動時に読み込まれる。