DESIGN.md — 深紅×夕焼けオレンジのエイジングケア化粧品LP（Warm Burgundy and Sunset Orange Anti-Aging Cream LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: えんじ色の価格帯・夕焼けグラデーション・金色の光沢帯・赤い割引価格・青緑CTA・明朝見出し
• 地の質感: グラデーション地に光の粒やボケを重ね、白カードは平面的。見出し帯には金色の光沢グラデーションを使う。
• 形: 角丸は小〜中のカード。円形のバッジや六角形のラベル、吹き出しを散りばめる。
• 温度感: 暖色中心。CTAだけ寒色の青緑にして目立たせる。

Colors

• 購入エリアはえんじ地に白カードを並べ、ほかのコンテンツは淡いクリームやピンクの地で区切る。
• 価格は赤だけで強調し、白抜きの赤帯と赤丸の％OFFバッジをセットで使う。
• CTAはすべて青緑にして、暖色の中でボタンだけが際立つようにする。
• 特長セクションはローズピンク、悩みとQ&Aはオレンジ系。テーマごとに強調色を分ける。
• 見出し帯には金〜ベージュの光沢グラデーションを敷き、高級感を出す。
• 本文の要点は淡い橙のマーカーで下線のように強調する。
• button-primary は文字 #F0FFFE × 背景 #199A9F のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#158085、4.58:1）を使う。
• badge-off は文字 #F0FFFE × 背景 #F02828 のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E71010、4.56:1）を使う。

Typography

• 感情に訴える見出しは明朝、情報を伝える見出しはゴシックで書き分ける。
• 価格の数字はセリフ体で極太にし、円・税込の表記は小さく添える。
• 成分名や効能にはすべて小さな※番号を付け、ブロックの下に小さな注釈を置く。
• CTAの文字は白の太字ゴシックで、右端に矢印を付ける。
• 見出しは字間を少し広めにして上品に見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。画像と説明や吹き出しだけ2カラムにする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 32px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約4%の余白をとり、地色を額縁のように見せる。
• 価格カードは1セットにつき1枚。中身は上から商品名、仕様、画像と価格、CTA、注釈の順にする。
• 価格カードは高額なセットから順に縦に並べる。
• 同じ購入エリアをページ中盤と末尾の2回置く。
• Q&Aと使い方は白やベージュのカードを縦に積む。

Elevation & Depth

• CTAは下側に濃い影と内側のハイライトを付け、立体的な押せるボタンにする。
• 白カードは基本影なしの平面。
• 吹き出しの声カードには下と右に淡い黄色のずれ影を付ける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真や人物イラストは円形に切り抜く。使用シーンの写真は角丸なしの長方形。
• セクション境界: 基本は直線で切り替える。悩みセクションの下端だけ波形、見出し帯は下向き三角の形にする。
• CTAは角丸10px前後の横長ボタン。
• 割引はOFFと書いた赤い円形バッジで示す。
• 効能は白い六角形のラベルで示す。
• 理由の番号は金色の六角形バッジにする。

Components

• カートCTA（button-primary）: 幅いっぱいの青緑ボタン。下半分に明るい光沢を入れ、右に矢印を付ける。
• 価格カード（price-card）: 白カードに商品画像、通常価格、赤い特別価格帯、大きな赤い価格を並べる。
• ％OFF丸バッジ（badge-off）: 赤い円に白文字で割引率を入れ、価格の右肩に重ねる。
• 金光沢の見出し帯（heading-gold-band）: カード上部に金〜ベージュのグラデーション帯を敷き、明朝で見出しを書く。下端は三角に尖らせる。
• ピンク枠の特長見出し（feature-header）: ローズピンクの帯に白い二重線の枠を入れ、白い明朝で見出しを書く。
• お客様の声の吹き出し（voice-bubble）: 円形の人物イラストの横に、白い吹き出しとVoice番号を置く。人物は左右交互に配置する。
• Q&Aカード（faq-card）: オレンジの丸に白いQを入れ、見出しの下に点線を引いて回答を書く。
• 使い方のステップタブ（step-tab）: 3つの濃茶タブのうち、現在のSTEPだけオレンジにする。下にイラストカードを置く。
• 悩みのチェックリスト（check-list）: 点線枠の中に、オレンジの丸チェックと悩みを3行並べる。

Do's and Don'ts

Do - 購入エリアはえんじ地に白カードで統一する。 - CTAは青緑の光沢ボタンに限定する。 - 割引価格は赤い帯と丸バッジで二重に強調する。 - 効能表記には※注釈を必ず添える。 - セクションごとに地色をクリーム、ピンク、オレンジと切り替える。

Don't - CTAを暖色にしない。 - 見出しをすべてゴシックにしない（上品さが消える）。 - 白カードに強い影を付けない。 - 寒色の地色を広い面に使わない。 - 価格の数字を細い書体にしない。

Page Structure

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

1. ファーストビュー（効能と割引を一目で伝える）: オレンジのグラデーション地に明朝の大見出し、商品、笑顔の女性、六角形の効能ラベル、ビフォーアフターの円を配置。下に3つの用途ボタンを並べる。
2. キャンペーン・価格（まとめ買いと定期購入へ誘導する）: えんじ地に期間を示し、白い価格カードを3〜4枚縦に並べる。各カードに青緑のCTAを置く。
3. 悩みの提起（季節の悩みに共感させる）: クリーム地に白カード。オレンジ帯の見出し、マーカー付きの本文、点線枠のチェックリストを置く。
4. 解決策の提示（ケアの方向性を示す）: 斜線の装飾で囲んだオレンジの見出しと、オレンジ地の白抜きキーワードを並べる。
5. 商品紹介（商品のコンセプトと用途を示す）: ピンクのグラデーション地に商品画像、明朝コピー、円形の用途バッジ、使用写真、小さなCTAを置く。
6. 特長（成分と仕組みを説明する）: ピンク帯の見出しの下に白カードを積み、肌断面の図解と円形の成分写真を添える。
7. お客様の声（使用感で安心させる）: オレンジ帯のタイトルとボケた金色の地。円形のイラストと吹き出しを左右交互に並べる。
8. よくある質問（不安を解消する）: オレンジの波形見出しのあと、クリーム地にQ&Aの白カードを並べる。
9. 価格（再掲）（読み終えた人を購入へ導く）: 冒頭と同じえんじ地の価格カードを繰り返す。
10. 定期購入の理由（継続購入を後押しする）: ベージュの額縁ボックスに月桂樹の装飾と明朝の大見出し。赤い円の特典とチェック付きの白カードを置く。
11. 使い方（使用手順を示す）: オレンジ地に英字の大見出し、STEPタブ、線画の顔イラストを3枚並べる。

Imagery

• 商品はメタリックな質感のチューブ。光沢と映り込みを付けて切り抜く。
• モデルは40〜50代の女性。笑顔で目元をケアするアップ写真を使う。
• FVはオレンジの放射状の光とボケで華やかにする。
• 成分は円形のマクロ写真（金色の雫、青い分子など）にする。
• お客様の声と使い方は細線の手描き風人物イラスト。オレンジの点や矢印で塗る位置を示す。
• 肌断面の図解はパステル調のイラストにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はないため推奨を書く。PCでは中央に幅480〜750pxのカラムを置き、左右に地色を伸ばす。
• 価格カードはPCでも縦積みのまま、または2列にする。
• 背景のグラデーションは画面幅いっぱいに広げる。
• 文字サイズはSPの約1.3倍にする。

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