DESIGN.md — 水色×シャンパンゴールドの保湿スキンケアLP（Aqua Blue and Champagne Gold Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい、信頼・誠実
• キーワード: 透明感・水のきらめき・シャンパンゴールド・明朝見出し・余白多め・お試しオファー
• 地の質感: 水面・泡・光のにじみを使った淡い水色のグラデーション。ゴールドの帯はメタリックなグラデーション
• 形: 角丸はほぼ使わず、細い罫線の四角形が基本。ゴールドのリボン見出しと下向きの逆三角形の吹き出しがある
• 温度感: やや涼しげ。ゴールドとクリーム色で冷たくなりすぎないようにしている

Colors

• 地は白と淡い水色が基本。水色の光のグラデーションで透明感を出す
• 見出しの強調にはシャンパンゴールドを使い、細い金の罫線を添える
• マゼンタピンクはお試しオファー（割引帯・価格・CTA）にだけ使う
• 成分カードは白地に水色の細い枠、見出しは水色、下線は水色の点線
• 満足度のブロックは全幅のゴールドグラデーションの帯。円グラフはクリーム色
• 共通情報エリアはクリーム色の地にオレンジ・水色・緑のボタンを使う
• button-primary は文字 #FFFFFF × 背景 #F2228B のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E30D79、4.57:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #3AABE2 のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1A7EAE、4.53:1）を使う。
• button-outline-gold は文字 #B8944A × 背景 #FEFEFE のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8D7137、4.58:1）を使う。
• badge-round-gold は文字 #FFFFFF × 背景 #DDC482 のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8E7127、4.62:1）を使う。
• discount-bar は文字 #FFFFFF × 背景 #F2228B のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E30D79、4.57:1）を使う。
• ingredient-card は文字 #1E8FCF × 背景 #FEFEFE のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#1A7BB2、4.61:1）を使う。
• rank-tag は文字 #FFFFFF × 背景 #DDC482 のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8E7127、4.62:1）を使う。

Typography

• 情緒的な見出しは明朝、本文と価格情報はゴシックにする
• 本文は行間を2.0前後と広くとり、字間も少し空ける
• 価格の数字は太いゴシックを特大にし、円と（税込）は小さく添える
• 満足度の数字はイタリックの欧文セリフで大きく見せる
• 注釈は10px程度でまとめて下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。おすすめ商品は2カラムのグリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• コンセプト本文は白いカードに入れ、淡い水色の背景の上に置く
• カードの上辺には細いゴールドの罫線を引く
• 見出しは左揃えにし、下に金の罫線を全幅で引く
• オファー枠は画面幅の約90%で、ピンクの細枠で囲う
• CTAボタンは画面幅の約80%で中央に置く

Elevation & Depth

• 基本はフラットで、影はほとんど使わない
• 共通情報のカードにだけ、ごく薄い影を付ける
• オファー枠は影ではなく枠線で区切る

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いまま。商品は白〜淡い水色の地に切り抜いて置く
• セクション境界: 直線で区切る。満足度ブロックは下向きの逆三角形の吹き出しで円グラフにつなぐ
• ボタンは角丸のない長方形で、右端に細い「>」を付ける
• 成分カードは1pxの水色の枠にし、右下に細い斜めの矢印を置く
• ランキングの番号はゴールドのしおり型のタグにする
• ゴールドのリボン見出しは、左に折り返しがある帯の形にする

Components

• お試しCTA（button-primary）: ピンクのグラデーションの長方形ボタン。右に「>」を付ける
• 水色のサブボタン（button-secondary）: 商品一覧へ誘導する水色グラデーションのボタン
• 白いボタン（ゴールド帯の上）（button-outline-gold）: ゴールドの帯の上に置く白い長方形のボタン。文字はゴールド
• お試しオファー枠（offer-box）: ピンクの細枠で囲う。左上にゴールドのリボン、右に円形のバッジ、割引帯、大きな価格を置く
• 特典の丸バッジ（badge-round-gold）: ゴールドの円の中に、特典を白文字で2行入れる
• 割引率の帯（discount-bar）: マゼンタの全幅の帯に、白文字で割引率を大きく入れる
• 成分・理論カード（ingredient-card）: 上に水の写真を置き、下に小さな前置きと水色の見出しを2組。見出しには点線の下線を付ける
• ランキング番号（rank-tag）: 商品画像の左上に付けるゴールドのしおり型の番号
• ゴールドの罫線見出し（heading-gold-rule）: ゴールドの明朝見出しを左揃えにし、下に細い金の線を引く

Do's and Don'ts

Do - 淡い水色と白の地で透明感を保つ - 情緒的な見出しはゴールドの明朝で上品に見せる - ピンクはオファーとCTAに絞って使う - 本文は短い行に分け、行間を広くとる - 数値や効能の表現には※を付け、注釈を必ず添える

Don't - ブランドのエリアで原色の赤やオレンジを使わない - 見出しを太いゴシックで大きく詰めて組まない - ボタンを丸いピル型にしない（共通情報エリアは除く） - 濃い影や立体的な装飾を付けない - ゴールドの帯に明るすぎる黄色を使わない

Page Structure

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

1. ファーストビュー（ブランドの世界観と商品ラインを伝える）: 水色の光のグラデーションの上に、明朝の大見出しと商品写真、右下にロゴを置く。スライダーのドット付き
2. お試しオファー（初回限定のセットで申込みにつなげる）: ピンクの枠にゴールドのリボン、セットの写真、特典の丸バッジ、割引帯、大きな価格、ピンクのCTAを並べる
3. 商品ラインアップへの誘導（全商品を見てもらう）: 淡い水色の地に商品を横一列に並べ、下に水色のボタンを置く
4. ブランドのコンセプト（めざす肌と想いを伝える）: 左にゴールドの見出し、右に肌の写真。その下の白いカードに、ゴールドのリード文と長めの本文を入れる
5. 成分・技術（保湿の仕組みを伝えて信頼を得る）: 水の写真と水色の見出しを組んだ枠付きカードを縦に2枚。最後に注釈
6. 満足度の実績（数字で信頼してもらう）: ゴールドの全幅帯に逆三角形の吹き出しを置き、円グラフと大きな%、白いボタン、注釈を並べる
7. おすすめ商品ランキング（定番の商品を案内する）: 2カラムのグリッドに商品画像とゴールドの番号タグ、水色の商品名を並べる
8. 商品カテゴリーへの導線（ほかの商品を探してもらう）: クリーム色の地に白いカードを置き、色分けした全幅のボタンを付ける
9. 送料・支払い・返品（購入前の不安をなくす）: オレンジのアイコン、オレンジの見出し、本文、右寄せの水色ピル型ボタンを、点線で区切って縦に並べる

Imagery

• 商品は白〜淡い水色の地に置き、斜め上から光を当てて映り込みを入れる
• 背景は虹色がかった淡い光のにじみやプリズムの表現にする
• 水面の波紋や泡のマクロ写真で、うるおいを表現する
• 人物は肌と口元をアップにし、やわらかい自然光で撮る
• アイコンは共通情報エリアだけで使う、オレンジのフラットなイラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央のコンテンツ幅を約1000pxにし、左右に背景を広げる
• PCのファーストビューは、左に商品、右に見出しとロゴを置く横長の構成
• PCのオファー枠は横長にし、左に情報、右に写真とCTAを置く
• PCの成分カードは2枚を横に並べる
• PCの満足度の帯は、左に文言、右に円グラフを置いて高さを抑える
• PCの共通情報は5つのカードを横一列に並べる

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