DESIGN.md — シャンパンゴールド×明朝の年齢肌スキンケアLP（Champagne Gold Mature Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: シャンパンゴールド・明朝の大見出し・細線の円バッジ・逆光のポートレート・大理石・ラボの質感・成分訴求
• 地の質感: 大理石・白タイル・ガラス器具のような、しっとりしたマットな質感。グラデーションと柔らかい光を重ねる
• 形: 細線の正円バッジ、角丸ほぼなしの四角い帯、V字の下向き区切り、ピル型CTA
• 温度感: やや暖かいニュートラル（グレー×ベージュ×ゴールド）

Colors

• 地は淡いグレーを基本に、声・メッセージは生成りベージュ、理由は濃いめのカーキベージュと章ごとに切り替える
• ゴールドは見出しの強調語、円バッジの線、ラベル帯に使い、面で広く塗らない
• セラミド系の訴求だけミントブルーで色分けし、ゴールドの成分と対比させる
• 赤はCTAボタンと価格・割引だけに限定する
• 低刺激の安心訴求はくすみピンクの枠付きボックスで統一する
• 本文の強調は淡い黄色マーカーで下半分を塗る
• badge-circle は文字 #BCAA90 × 背景 #FEFEFE のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#877252、4.57:1）を使う。

Typography

• 見出しは明朝。キーワードを大きく、助詞を小さくしてジャンプ率をつける
• 数字（年齢・個数）は斜体ぎみのセリフで特大にする
• 縦書きの明朝コピーを写真の横に置く
• 本文・注釈はゴシックで小さめにまとめる
• 成分名はゴールドかミントの文字色で区別する
• 価格の数字は太いゴシックの朱赤で大きくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジは 2〜3 列、不使用リストは 2〜4 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅、テキストブロックは左右約 22px の余白を取る
• カードは左右 6% の余白を空けて縦に並べ、点線で縦につなぐ
• STEP 解説は左端に縦書きラベルの帯を置く
• 購入ブロックはゴールドの細枠で囲む
• 購入ブロックはページ内で 3 回繰り返す

Elevation & Depth

• カードはごく淡いドロップシャドウ（0 2px 8px rgba(0,0,0,.08)）で浮かせる
• 円バッジとキーワードボックスは白地に軽い影をつける
• CTA は赤のグラデーションに下方向の影をつける
• 水滴・ガラス玉のような半透明の円を装飾に重ねる

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 四角い全幅か、カード幅の矩形。商品は切り抜きで大理石台の上に置く
• セクション境界: 下向きの V 字（三角の矢羽）でセクションを区切る。ほかは直線の色切り替え
• 成分バッジはゴールドの細線の正円で、下半分をゴールドで塗る
• キーワードタグは白地に細い枠線の小さな四角
• カードの右上を折り返した紙のような三角で飾る
• 番号はゴールドの円の中に斜体の数字を置く

Components

• 主CTAボタン（button-primary）: 赤いピル型で、左に»を付ける。右に商品の切り抜きと円形の訴求バッジを重ねる
• お試しセット購入ブロック（offer-box）: ゴールドの細枠の白いボックス。4 品のステップ表、割引バッジ、大きな価格、2 つの特典枠、CTA の順に並べる
• 成分円バッジ（badge-circle）: 細いゴールド線の正円に明朝の成分名を入れ、下に※を添える。2 つの円を×でつなぐこともある
• セクションラベル帯（label-band）: 全幅の帯に白文字で章名を書き、下を三角にとがらせる
• 番号付き成分見出し（ingredient-heading）: 英字ラベルと 2 桁の数字を入れた円の横に、大きな明朝の成分名を置く
• 低刺激処方ボックス（safety-box）: くすみピンクの枠の中に、白地の帯 2 本でテスト済み項目を並べる
• お客様の声カード（voice-card）: 白カードの右上を折り返す。ゴールドのシルエットと明朝の見出しの下に本文を書き、黄色マーカーで強調する
• 理由カード（reason-card）: カーキ地のカード。上に REASON の番号円、明朝見出し、写真、本文の順。カード同士を点線でつなぐ
• 不使用リスト（free-from-grid）: 白い小さな四角に成分名を入れたグリッド。左に見出しパネルを置く

Do's and Don'ts

Do - 見出しは明朝で大小のジャンプ率をつけ、余白を広くとる - ゴールドは細線と文字を中心に使い、品よく抑える - 購入ブロックは同じデザインで複数回繰り返す - 成分の主張には必ず※注釈を小さく添える - 写真は柔らかい逆光と白っぽい光で統一する

Don't - CTA以外に鮮やかな赤を使わない - 太いゴシックの見出しを多用しない - 黒やビビッドな色の面を広く敷かない - 角丸の大きいポップなカードにしない - 彩度の高いイラストを使わない

Page Structure

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

1. ファーストビュー（年齢の悩みと主要成分を一目で伝える）: 大理石風の淡いグレー地。部位タグ、特大の年齢数字と明朝のコピー、商品の切り抜き、成分円バッジ 2 つ、不使用グリッドを置く
2. オファー（お試しセットの価格を見せて即申込を促す）: ゴールドの枠付き白ボックスに、ステップ表、朱赤の価格、赤いCTAを入れる
3. メディア掲載（人気と信頼を示す）: 明朝見出しの下に雑誌の表紙を斜めに重ねて並べる
4. ブランドの共感（理想の肌像を描く）: ベージュのグラデーションに逆光ポートレートと縦書きコピー。成分円を×でつなぐ
5. ブランドの考え方（科学的なアプローチを説明する）: ラベル帯の下に、ラボのガラス器具の写真と縦書きの大見出しを置く
6. 2つの成分（主要成分の必要性を伝える）: 商品を中央に置き、両脇に縦書きコピー。成分名ボックスを×で並べ、V字で区切る
7. 成分詳細（それぞれの成分の効果を説明する）: 番号付き見出し、マクロ写真、マーカー付き本文、ミントの図解カード
8. 使い方ステップ（4 品の使い方と配合成分を見せる）: 左に縦書き STEP 帯を置いた白カード。円バッジ 3 つと低刺激ボックスを並べる
9. お客様の声（使用感で共感させる）: ベージュ地に右上を折り返した白カードを縦に並べ、ゴールドのシルエットを添える
10. 選ばれる理由（5 つの理由で納得させる）: ゴールドの円の目次の後、カーキのカードを点線でつないで縦に並べる
11. ブランドメッセージ（想いを伝えてブランドを好きになってもらう）: 生成り地に中央揃えの本文。ゴールドの明朝見出しと短い区切り線
12. まとめ（ポイントを振り返る）: 逆光の横顔写真の下に、POINT 番号付きの帯 5 本を線でつなぐ
13. クロージングCTA（最後に申込を後押しする）: ファーストビューのコピーと商品を再び見せ、オファーブロックを繰り返す。最後に濃色のフッター

Imagery

• 白っぽい逆光の中で微笑む 40 代女性のポートレート。肌に手を添える
• 白ボトルとゴールドの帯の商品を、大理石や白木の台、白タイルの前に置く
• ビーカーや乳鉢などのラボのガラス器具で、科学的な印象を出す
• 成分のマクロ写真（スポイトの液滴、ジェルのテクスチャ）や、果実のなる木
• 肌の断面図は淡いミントとベージュのフラットなイラストで描く
• 半透明の水滴やシャボン玉を装飾として散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC では中央 750px 幅の 1 カラムを保ち、左右に淡いグレーの地を敷くことを推奨
• ファーストビューは PC でコピーを左、商品を右の 2 分割にしてもよい
• 声カードと理由カードは PC で 2 列のグリッドにできる
• CTA は最大幅 480px で中央に置く

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