DESIGN.md — 水色×シャンパンゴールドの薬用美白化粧品 LP（Clear Sky Blue & Champagne Gold Whitening Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 透明感・水滴・水面・シャンパンゴールド・明朝体・医薬部外品の信頼感・トライアル訴求
• 地の質感: 水面・水滴・光のぼかし写真を背景に薄く敷く。半透明の白カードで清潔感を出す。
• 形: 四角の白カードが基本。成分写真は正円で切り抜く。見出しには帯ラベルとシェブロン状のセクション境界を使う。
• 温度感: やや寒色寄りの爽やかさ。ゴールドとベージュで温かみを足す。

Colors

• 外側は水色ベタ、中央の本文カラムは白か淡い水色で、全体を水色基調に保つ
• 強調語は金のグラデーション文字かローズレッドの 2 系統に限る
• CTA は金オレンジの横長ピル 1 種類に統一する
• 悩みセクションだけグレージュ地にし、くすみ感を表現する
• 成分のカテゴリは帯の色で分ける（ゴールド・グリーン・ブラウン）
• 注釈は灰色の小さな文字で、各セクションの下に置く
• button-primary は文字 #FFFFFF × 背景 #EBB44C のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9C6C11、4.6:1）を使う。
• benefit-tag は文字 #FFFFFF × 背景 #C8A06A のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#976E38、4.56:1）を使う。
• point-badge は文字 #6CABD4 × 背景 #FEFEFE のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#327CAD、4.5:1）を使う。
• label-band は文字 #FFFFFF × 背景 #6CABD4 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#327CAD、4.54:1）を使う。
• vertical-band は文字 #FFFFFF × 背景 #928576 のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#817466、4.54:1）を使う。

Typography

• 見出しは明朝体にする。キーワードだけ 1.4 倍に大きくする
• 強調語は金のグラデーションかローズ色で、1 見出しにつき 1〜2 語までにする
• 助詞は小さくして、キーワードとのメリハリをつける
• 価格の数字は太い明朝体で特大にし、単位は小さくする
• 英字のサブ見出しは字間を広くとり、小さめの灰色にする
• 注釈の記号（※1 など）は肩付きで小さく入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央 750px 前後の 1 カラムで、左右は水色背景
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の背景写真か色面で区切る
• 商品説明は、左に製品写真・右に仕様テキストの 2 分割を入れ子で使う
• 成分は丸写真を 2 列か散らし配置にする
• オファーカードはページの上部と中盤に繰り返し置く
• セクション間を十字の細線や縦線でつなぐ

Elevation & Depth

• 白カードには薄い影（0 2px 8px rgba(0,0,0,0.08)）をつける
• CTA ボタンは下方向に影をつけ、少し浮かせる
• 製品写真の足元に反射とぼかし影を入れる

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物は角丸なしの長方形か正円で切り抜く。成分と悩みの肌アップは正円
• セクション境界: V 字のシェブロン、水面の波、直線を使い分ける
• カードの角はほぼ直角（2〜4px）
• タグは小さな角丸の長方形
• 丸の写真は白い縁取りと薄い影つき
• POINT ラベルは台形の帯でカード上辺に重ねる

Components

• 金オレンジの申込ボタン（button-primary）: 横長のピル型。右端に丸い矢印を置き、グラデーションと影をつける
• トライアルオファーカード（offer-card）: 白カードに商品セット写真・内容リスト・特大価格・送料無料バッジを入れる
• 効能タグ（benefit-tag）: 金色の角丸ボックスに白い明朝の短い言葉を入れ、横に並べる
• POINT 番号バッジ（point-badge）: 白い円に「POINT」と数字を入れ、セクションの頭に置く
• 水色の見出し帯（label-band）: 幅いっぱいの水色帯に白文字でサブコピーを入れる
• 縦書き成分帯（vertical-band）: セージかブラウンの縦帯に、白い明朝の縦書きを入れる
• 成分丸写真（ingredient-circle）: 正円の素材写真の下に成分名を 2 行で添える
• 成分表セル（spec-table）: 淡い水色とクリーム色のセルを交互に並べ、成分名を中央揃えにする
• 送料無料バッジ（price-badge）: ローズの枠線とローズ文字の四角バッジ

Do's and Don'ts

Do - 水色・白・金の 3 色を基調に保つ - 見出しは明朝体にし、要所だけ金のグラデーション文字にする - 効能の表記には必ず注釈記号と注釈文を添える - 成分写真は白い縁取りの正円で統一する - オファーは複数回繰り返し、毎回同じカードデザインにする

Don't - 濃い原色や黒ベタの面を広く使わない - 見出しを丸ゴシックやポップ体にしない - CTA の色を複数にしない - 注釈を省いて効能を断定しない - 写真を角丸の大きいカードに入れない

Page Structure

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

1. ファーストビュー（商品の独自性と美白を一瞬で伝える）: 光が差す白地に製品 4 本を並べ、明朝のキャッチと金の丸バッジを重ねる
2. 効能タグと実績（効果の範囲を一覧で示す）: 水色地に金タグを 2 段で並べ、大きな明朝の一行を置く
3. オファー（トライアル購入へ誘導する）: 白カードにセット写真、ローズの特大価格、金ピルの CTA を配置する
4. 悩みの提起（共感を得る）: グレージュ地に肌アップの丸写真を 3 枚ジグザグに置き、点線で短い悩みの言葉をつなぐ
5. 解決策の提示（成分によるアプローチを示す）: 水色地に金帯の見出し、2 つの成分を大きく「×」で結ぶ
6. ステップケア概要（4 ステップのライン使いを説明する）: 丸ラベル 4 つと製品 4 本を横に並べ、大きな欧文の番号を添える
7. ポイント解説（アイテムごとの役割と成分を示す）: 水滴の背景に POINT バッジ、成分表、製品写真、白い説明カードを置く
8. こだわり成分（保湿成分の豊富さを訴求する）: ピーチの円を重ね、丸写真グリッドと縦書き帯で成分を一覧にする
9. モデルイメージ（仕上がりの印象を伝える）: 女性の横顔写真に明朝の大きなコピーを重ねる
10. 2 回目のオファー（読んでいる途中で購入を促す）: 冒頭と同じオファーカードを繰り返す
11. アイテム詳細（各製品の仕様と使い心地を示す）: 大きな番号と商品名、水色帯、製品写真と仕様、テクスチャーの丸、POINT カードと図解を並べる

Imagery

• 白いボトルと金キャップの製品を、明るい白背景・柔らかい光・反射つきで撮る
• 水面・水滴・光のぼかしを、薄い水色で背景に敷く
• 肌のアップは自然光で撮り、正円で切り抜く
• 植物や生薬の素材は真上から撮り、白縁の正円で見せる
• 肌の断面はやさしい色のフラットなイラストで、矢印で浸透を表す
• テクスチャーの質感は白いクリームの丸で見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 程度の固定カラムにし、左右を水色ベタで埋める
• SP はカラムを幅いっぱいにし、左右に 16px の余白をとる
• 製品写真と仕様の 2 分割は、SP でも左右配置を保つ（写真は 40% 幅）
• 成分の丸写真は SP で 2 列にする
• 見出しの文字サイズは PC の約 0.8 倍を目安にする

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