DESIGN.md — ブロンズ×金×ローズの上質スキンケアLP（Bronze Gold Luxury Skincare Cream LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実
• キーワード: ブロンズブラウン・ゴールド帯・ローズピンク・光沢・白カード・明朝見出し
• 地の質感: 斜めの光の帯が入ったブロンズのグラデーション地。後半はシルクのようなクリーム色の流れる背景にする
• 形: 大きな角丸のヒーロー、ピル型CTA、正円バッジ、角丸の白カード
• 温度感: 暖色。茶と金で温かく、ローズで女性らしさを足す

Colors

• 前半はブロンズのグラデーション地にして、文字は白にする
• 後半の声・FAQはクリーム色の地に白か生成りのカードを置く
• ローズピンクはCTA・バッジ・明るい地の見出し・Q記号だけに使う
• 金は商品カテゴリの帯と光の表現だけに使う
• 暗い地の円バッジはクリーム色の地にローズ文字
• 本文は真っ黒にせず濃い茶色にする
• button-primary は文字 #FFFFFF × 背景 #DC5E72 のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D53C55、4.56:1）を使う。
• badge-new は文字 #FFFFFF × 背景 #DC5E72 のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D53C55、4.56:1）を使う。
• benefit-circle は文字 #C95E6C × 背景 #FAF1E4 のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BF4152、4.58:1）を使う。

Typography

• 見出しは明朝体にして、字間を広めに取る
• 本文はゴシックで行間を2.0程度にゆったり取る
• 効能の表現には*番号を上付きで付け、近くに小さな注釈を置く
• 見出しは中央揃えにし、本文は左揃えにする
• 価格は明朝で数字を少し大きくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は本文と画像の 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 16px の余白で画面いっぱいに近い幅にする
• 成分特長のカードは本文を上、写真を下に置き、写真はカード幅いっぱいにする
• 低刺激の項目は2列グリッドのセルに入れ、最後の注意書きは1列でベージュの地にする
• 使用の目安は正円の数値バッジを2個＋1個で三角形に並べる
• 声カードは左に円形のアバター、右に本文を置く

Elevation & Depth

• 白カードには下方向に柔らかい影（0 4px 8px rgba(80,50,20,.2)）を付ける
• 円バッジには外側に淡い光彩を付ける
• FAQはフラットにして、行の区切り線だけで分ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: ヒーローは大きな角丸の有機的な枠、動画は角丸の長方形、アバターは正円にする
• セクション境界: 直線で区切り、地の色を切り替える
• CTAはピル型にして右に矢印を付ける
• 数値バッジは上部をローズで塗った正円にする
• 低刺激の項目セルは角丸なしで細い枠線にする
• 右上に正円の新登場バッジを置く

Components

• 主CTAピルボタン（button-primary）: ローズの塗りに白文字、右に矢印を付ける
• 新登場の円バッジ（badge-new）: ヒーロー右上に置く、ローズの正円に白い明朝文字
• 金の見出し帯（gold-label-band）: 金のグラデーション帯に、濃い茶色の明朝でカテゴリ名を入れる
• 効果の円バッジ（benefit-circle）: 商品の周りに6個を六角形に配置し、線と三角でつなぐ
• 白い特長カード（feature-card）: ローズの明朝見出し、本文、下端いっぱいの写真で構成する
• 低刺激項目セル（free-grid-cell）: 2列に並べる細枠のセルで、文字は中央揃え
• 使用の目安の円（usage-badge）: 上部はローズの地に白ラベル、下部は灰色の地に大きな数値
• お客様の声カード（review-card）: 左に円形のシルエットアバター、右に本文を置く白カード
• FAQアコーディオン（faq-item）: ローズのセリフ体でQを置き、質問文と右端の薄い＋を並べる
• 動画サムネイル（video-thumb）: 角丸の写真の上に半透明の白を重ね、中央に円形のPLAYボタンを置く

Do's and Don'ts

Do - 見出しは明朝で字間を広く取り、上品にする - 前半を暗いブロンズ、後半を明るいクリームにして、明暗で章を分ける - ローズは要所だけに絞る - 効能の表現には注釈番号を付ける - カードは余白をたっぷり取り、行間を広くする

Don't - 原色や寒色を使わない - ローズを広い面の地に使わない - 見出しを太いゴシックにしない - 角ばった四角いCTAにしない - 本文を純黒で詰めて組まない

Page Structure

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

1. ファーストビュー（新しくなった商品とキーコピーを印象づける）: 光の粒の中に商品を置いたイメージを大きな角丸で切り抜き、明朝の大コピーと新登場の円バッジを添える
2. 商品紹介（商品名と価格を示し、詳細へ誘導する）: ブロンズの地に商品とパッケージの写真を置き、金帯、白の商品名、価格、ピル型CTAを並べる
3. 効果の全体像（複数の悩みにまとめて応えることを示す）: 白の明朝見出しの下で、6つの円バッジを商品の周りに配置し、白文字の本文と注釈を続ける
4. 動画（商品の世界観を伝える）: 角丸の動画サムネイルを置き、PLAYボタンを重ねる
5. 成分の特長（配合成分を訴求する）: 白カードにローズの見出しと本文を入れ、下に成分名を添えた透明な泡の写真を置く
6. 低刺激へのこだわり（敏感肌の人に安心感を与える）: 白カードの中で、無添加の項目を2列の枠セルに並べ、テスト済みの注記をベージュのセルに入れる
7. 使い方（使う量と手順を説明する）: 白の見出しと本文、塗る位置を点で示した線画の顔イラストと、灰色の円の吹き出し、動画を置く
8. 使用の目安（量・回数・日数を示す）: 左揃えの見出しの右に線を伸ばし、上部がローズの正円バッジ3つを並べる
9. お客様の声（使用感で共感を得る）: クリーム地にローズの明朝見出しを置き、アバター付きの白カードを縦に並べて、注釈を添える
10. よくある質問（不安を解消する）: 生成りのアコーディオンにQ記号と＋アイコンを付け、区切り線で仕切る

Imagery

• 商品は光沢のある白い容器と金のキャップを、柔らかい逆光で撮る
• 背景には金色の泡や光の粒、プリズムの光の筋を散らす
• 成分は透明なしずくや泡の写真で表し、成分名を明朝で重ねる
• 使い方は細い線画の女性の顔にピンクの点を打って示す
• アバターはベージュの円の中に茶色の女性シルエットを描く
• 地にはブロンズのグラデーションと斜めの光の帯を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは商品紹介を左に写真、右に商品名・価格・CTAの2カラムにする
• PCでは成分カードを本文と写真の横並びにする
• PCでは低刺激の項目を3列グリッドにする
• PCではお客様の声を2列のカードにする
• PCではFAQを1行に収め、幅を広く取る
• PCでは使い方を左に動画、右に本文とイラストを置く

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