DESIGN.md — 琥珀ブラウン×生成りの上品美容液 LP（Amber Brown Elegant Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 琥珀ブラウン・生成り・明朝見出し・成分訴求・大人の肌・ナチュラル高級
• 地の質感: 焦げ茶のグラデーション帯と、紙のような淡いベージュ地。大理石風の薄いテクスチャを背景に敷く箇所がある
• 形: 四角い帯見出しと細い枠線のカードが基本。成分写真やキーワードは正円で見せる
• 温度感: 暖色寄り。茶とベージュで温かく落ち着いた印象

Colors

• 地色は生成り・グレージュ・白を交互に変えて、セクションの切れ目を見せる
• 要所は焦げ茶から茶への縦グラデーション帯で締める
• 成分見出しの帯と大見出しの強調はテラコッタ色にする
• 赤は価格のお得額と割引率だけに使う
• 悩み項目のキーワードには薄い藤色のマーカーを引く
• 黒帯は小見出しラベルや製造訴求の見出しに限って使う
• discount-badge は文字 #C8202A × 背景 #E7E2DC のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C41F29、4.56:1）を使う。
• band-heading は文字 #FDF9F8 × 背景 #C56437 のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B35B32、4.5:1）を使う。

Typography

• 見出しは明朝体、本文と表はゴシック体で分ける
• 大見出しの数字や強調語は文字を一回り大きくする
• 価格や割引の数字は極太ゴシックにして、単位は小さく添える
• 欧文は大きく薄い色で背景の透かしにする
• 注釈には ※ を付けて小さい灰色の文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分は 3〜4 列、無添加は 2〜4 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の 90% で中央に置き、左右に地色を見せる
• 帯見出しはカード幅いっぱいに敷き、文字は左寄せにする
• セクションの区切りに丸い下向き矢印アイコンを置く
• 比較図は 2 カラムの左右対比にする

Elevation & Depth

• 影はほぼ使わず、平面的に作る
• カードは白い面か細い枠線で浮かせる
• 商品ボトルの写真だけ、写真自体の陰影で立体感を出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は正円に切り抜く。人物写真は角丸なしの四角か正円にする
• セクション境界: 直線で地色を切り替える。丸い矢印アイコンをつなぎに使う
• 帯とカードは角丸なしにする
• キーワード（ハリ・弾力など）は細い枠線の正円で並べる
• STEP の間には細い V 字の線を置く

Components

• まとめ買い価格表（price-table）: 単品と複数セットの列見出しは黒地に白文字。最下段は赤地で白抜きのお得額を見せる
• 割引率の丸バッジ（discount-badge）: 商品写真に重ねる赤枠・白地の円。中に赤文字で割引率を入れる
• 帯見出し（band-heading）: テラコッタ・オリーブゴールド・焦げ茶のいずれかの地に、白の明朝体を左寄せで置く
• 黒ラベル（label-black）: 大見出しの上に置く短い黒帯。白文字のリード
• 悩みチェックリスト（check-list）: 人物写真の上に白い帯を重ね、チェックボックスと文を並べる。キーワードには藤色のマーカーを引く
• 口コミカード（review-card）: 白いカードに明朝の見出しと本文。右上に、年代と日付を入れた藤色の円バッジを重ねる
• 成分の丸写真（ingredient-circle）: 正円の素材写真の下に、成分名を小さく 2 行で入れる
• キーワードの丸枠（keyword-ring）: 細線の正円の中に短い語を入れ、× でつないだり格子状に並べたりする
• 使い方 STEP カード（step-card）: 白いカード。左に欧文セリフの STEP 番号と説明、右に正円の人物写真を置く

Do's and Don'ts

Do - 地色は茶系とベージュ系の範囲で切り替える - 見出しには明朝体を使い、余白を広めに取って上品に見せる - 成分は正円の写真をグリッドに並べて見せる - 数字の訴求は大きく、単位は小さくする - 注釈はセクション末に小さくまとめる

Don't - 蛍光色やビビッドな青・緑を面に使わない - 赤を価格以外の場所に広げない - 見出しを丸ゴシックにしない - 強い影や大きな角丸で、ポップな印象にしない - 1 セクションに地色を 3 色以上混ぜない

Page Structure

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

1. ファーストビュー（効果のイメージと商品を一目で伝える）: 大人の女性の写真に明朝の大キャッチを重ねる。下は焦げ茶の帯にボトル写真と受賞バッジ
2. リニューアル告知（容量や処方の改善を知らせる）: 白いカードに、新旧のボトル比較と強調色の数字を置く
3. まとめ買い価格（セット購入のお得感を示す）: 金茶の見出し帯、商品写真と割引バッジ、比較表、赤地のお得額の順
4. 主成分の訴求（核となる成分と効果を伝える）: 焦げ茶のグラデーション地に細線の枠。キーワードは丸枠を × でつなぐ
5. 無添加・香り（安心感を補う）: 生成りのカードに、項目を 2 列の枠付きセルで並べる
6. ブランド紹介（ブランドへの信頼をつくる）: 細い枠線の淡いカードに明朝の見出し。本文の要所にマーカーを引く
7. 悩みの提起（読み手の悩みに共感する）: 黒ラベルと大見出しの下に、人物写真とチェックリスト 4 項目を重ねる
8. お客様の声（実際の使用感で後押しする）: 生成りの地に白い口コミカードを縦に並べ、藤色の年代バッジを付ける
9. 浸透技術の説明（技術的な裏付けを示す）: 焦げ茶の帯見出しのあと、従来品との違いを 2 カラムの図解で見せる
10. 配合成分（成分の豊富さを伝える）: テラコッタの大見出しとテラコッタの帯。丸写真の成分グリッドを入れる
11. 体験の訴求（使ったあとの理想の姿を想像させる）: 茶のラベル、明朝の大見出し、笑顔の人物写真と商品の順
12. 信頼・品質（製造品質と無添加を示す）: オリーブゴールドの帯、無添加の丸枠グリッド、黒帯の製造見出しと認証マークを入れたカード
13. 使用方法（使い方を示し、不安をなくす）: 欧文の大きな透かし文字を敷き、STEP カードを V 字線でつなぐ

Imagery

• 30〜60 代の女性が頬に手を添える、白背景で柔らかい自然光の写真
• 琥珀色のスポイトボトルを正面から撮り、白ラベルが見えるようにする
• 成分は果実・花・葉の接写を正円に切り抜く
• 肌の断面は、ピンクのタイル状の層と水色の矢印で描く図解にする
• 背景にはごく薄い大理石やボケのテクスチャを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像も 1 カラムの縦長構成で、SP と同じ並びで作る
• PC はコンテンツ幅を 720px 程度に固定し、左右には地色を延ばす
• SP では成分グリッドを 3 列にし、植物成分は 3〜4 列にする
• 価格表は SP でも横 3 列を保ち、数字を少し小さくする

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