DESIGN.md — 金とプラムの童話風コスメ LP（Fairytale Gold and Plum Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、かわいい、ラグジュアリー・ダーク、レトロ
• キーワード: 童話・孔雀の羽・金箔・アンティーク額縁・甘い黒・きらめき
• 地の質感: 金色のボケと光の粒を散らした背景。羽や星を手描き風のイラストで重ねる
• 形: ピル型のボタン、両端が渦巻き飾りのリボン帯、円や額縁で切り抜いた写真
• 温度感: 暖かく、甘い色。後半は暗く、しっとりした色

Colors

• 前半は金色のきらめく地、中盤は白いカード、後半はプラム色の暗い地の 3 段で構成する
• マゼンタは購入ボタン・NEW バッジ・機能見出し・順位の数字だけに使う
• 見出しの帯は商品の色に合わせ、プラム・黒・ブラウンで塗り分ける
• 金茶色は枠線・サブボタン・STEP ラベルに使い、高級感を出す
• サブボタンは白地に金茶色の文字と枠線にする
• button-secondary は文字 #B8893A × 背景 #FFFFFE のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#956F2F、4.57:1）を使う。
• step-label は文字 #F2E6E6 × 背景 #B8893A のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#956F2F、4.58:1）を使う。

Typography

• 英字の見出しは細いセリフ体で大きく置き、下に日本語の小見出しを添える
• キャッチコピーは明朝体のプラム色にして 2 行で中央に揃える
• 機能見出しは両側に四芒星（✦）を付けてマゼンタにする
• ストーリーの本文は暗い地に白い太字で中央揃えにし、行間は広めにとる
• 本文はほぼすべて中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能カードとファイバー説明は 2 列に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• CTA は幅 92% のピル型にして、購入ボタンの下にサブボタンを縦に並べる
• 機能説明は白いカード 1 枚にまとめ、四隅を金の装飾枠で囲む
• 色違いのバリエーションは同じ型を繰り返す（帯 → コピー → 商品と目元の写真）
• 商品情報と CTA のブロックは、ページの最初と最後の 2 回置く
• 誘導用のバナー（ファンクラブ、バーチャルメイク）は横長のクリーム色カードにする

Elevation & Depth

• 影はほとんど使わず、枠線と装飾で奥行きを出す
• ボタンには影を付けない
• バナーカードに薄い影を付ける程度にとどめる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 目元の写真は円・ドット円・アンティークの額縁で切り抜く。人物写真は円か角版にする
• セクション境界: 直線で切り替え、孔雀の羽の柄の帯や金色の枠飾りを境目に置く
• 帯の見出しは両端に金色の渦巻き飾りを付ける
• ファイバー説明の円は、上半分をマゼンタ、下半分を白にして金色の枠を付ける
• アイコン付きの機能カードは角丸 12px にし、金色の枠と下部の黒い帯で作る
• ストーリー見出しは巻物のようなリボン型にする

Components

• 購入ボタン（button-primary）: マゼンタのピル型ボタン。中央に白い文字、右端にカートのアイコンを置く
• 詳細ボタン（button-secondary）: 白地に金茶色の枠線と文字のピル型ボタン。右端に矢印を置く
• 渦巻き飾りの帯見出し（ribbon-heading）: 商品色の帯の両端に金色の渦巻き飾りを付け、中に白い明朝体の文字を入れる
• 受賞歴の枠（award-box）: 白地に金色の装飾枠を付ける。✦の箇条書きで受賞歴を並べ、順位はマゼンタにする
• NEW の旗バッジ（new-badge）: マゼンタの旗に白い筆記体で NEW と入れ、斜めに置く
• STEP ラベル（step-label）: 金色のセリフ体で STEP と数字を入れ、下に金茶色の角丸ボックスと白い説明文を置く
• 成分の説明円（fiber-circle）: 上半分がマゼンタ、下半分が白の円に金色の枠を付ける。2 つを＋でつなぐ
• 誘導用のバナーカード（banner-card）: クリーム色の横長カード。左に画像、中央に説明文、右に丸い矢印アイコンを置く
• 白い吹き出し（speech-bubble）: 商品写真に重ね、短いうたい文句を 2 段で入れる白い雲型の吹き出し

Do's and Don'ts

Do - 金色の背景には光のボケと星屑を必ず散らす - 見出しの帯は商品の色に合わせて塗り分ける - 孔雀の羽や額縁など、アンティーク調の装飾を写真の周りに置く - 購入ボタンはマゼンタのピル型にし、下に白いサブボタンを並べる - 後半は暗いプラム色の地で、物語調の白い文字を中央に揃える

Don't - 寒色の背景やフラットなグレーの地を使わない - マゼンタを広い面に塗らない - 角張ったモダンな太いゴシック体を見出しに使わない - 装飾のない四角い写真だけを並べない - 強い影や立体的なボタンにしない

Page Structure

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

1. ファーストビュー（世界観と新商品の印象を伝える）: 装飾を付けたモデルの写真に商品を重ね、下部に白い手書き風のキャッチを 2 行で置く
2. 商品の紹介（色のバリエーションと価格を示す）: 金色の地に商品を 3 本並べ、下に色名を添える。明朝体のプラム色のコピー、商品名、価格、注記を続ける
3. 受賞歴（信頼性を示す）: 白い装飾枠の中に、✦の箇条書きで受賞歴を並べる
4. CTA（購入へ誘導する）: マゼンタの購入ボタン、白い詳細ボタン、口コミへのテキストリンクを順に置く
5. 関連サービスへの誘導（会員登録とバーチャルメイクへ誘導する）: クリーム色の横長バナーカードを 2 枚置く
6. 新色の紹介（新色の魅力を訴求する）: 英字のセリフ見出しとプラム色の帯を置き、額縁で切り抜いた目元の写真に吹き出しを重ねる
7. ほかの色（既存色を比べてもらう）: 色ごとの帯、コピー、商品、ドット円の目元写真を繰り返す
8. 特長・詳細（機能を説明する）: 羽柄の帯の上に白いカードを載せる。ビフォーアフター、STEP、成分の円、アイコンのカードを順に並べる
9. 組み合わせの提案（関連商品を併せて買ってもらう）: 円で切り抜いた目元写真と商品を × でつなぎ、横長のバナーを置く
10. ルックブック（メイクの提案で憧れを作る）: 暗い地に金色のボケを散らし、モデルの写真と商品を並べ、白いピル型のボタンを置く
11. ストーリー（世界観に浸ってもらう）: リボン型の見出しの下に、手描きのイラストと白い物語文を交互に置く。円形のモデル写真で締める
12. 最後の CTA（もう一度購入へ誘導する）: 商品の紹介と CTA のブロックを、同じ形でもう一度置く

Imagery

• モデルは黒いレースのベールと大ぶりの宝石を身に着け、手を顔の前にかざすポーズで撮る
• 目元はアップで撮り、明るく柔らかい光でまつげの質感を見せる
• 商品は白抜きで切り抜き、ブラシとマスカラ液の筆跡を添える
• 孔雀の羽、星、ティーカップ、城などをペン画風に描き、金とプラムで着色する
• 背景は金色のボケと光の粒を散らす。暗い面にはプラム色のボケを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像がないため推奨: 中央に幅 750px 前後のカラムを置き、左右に金色の背景装飾を広げる
• PC では色違いの紹介を、写真とコピーの横 2 列にしてよい
• CTA は最大幅 400px のピル型で中央に置く
• ストーリーのイラストは拡大しすぎず、本文の幅は 600px 以内にする

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