DESIGN.md — 金と深緑の美容液クレンジング LP（Golden Yellow & Deep Green Beauty Cleansing LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、清潔・爽やか、ナチュラル
• キーワード: レモンイエロー・深緑・金箔文字・泡と水滴・円形バッジ・受賞メダル
• 地の質感: 光沢のあるグラデーション地に泡・水滴・金の紙吹雪を重ね、みずみずしさと高級感を出す
• 形: 円形バッジと泡、角丸小さめの矩形カード、斜めや波形のセクション境界
• 温度感: 黄色パートは明るく暖かく、緑・黒パートはしっとりと落ち着いた温度

Colors

• 黄色・白・クリームの明るいパートと、深緑・黒緑の濃いパートを交互に並べてリズムを作る
• 権威づけの数字や受賞まわりは金色のグラデ文字と月桂冠で統一する
• 3 タイプの商品は黄・緑・ピンクで色分けし、各紹介セクションの地色もその色に合わせる
• 悩みパートだけはモノクロや紺黒に落として、解決パートとの対比をつける
• 赤は限定・在庫の訴求帯だけに使う
• tag-pill は文字 #FAFFFB × 背景 #919D82 のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#6D795F、4.56:1）を使う。
• heading-band は文字 #FAFFFB × 背景 #CFA16C のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9B6A33、4.61:1）を使う。
• speech-balloon は文字 #FAFFFB × 背景 #919D82 のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#6D795F、4.56:1）を使う。

Typography

• 大見出しは明朝体にして、金のグラデか濃茶色で大きく組む
• 数字はセリフ体のイタリックで本文の 2〜3 倍に大きくする
• 縦書きの明朝コピーを人物写真の左右に重ねる
• 注釈は 10px 前後の小さい文字で、各セクションの末尾に必ず置く
• 本文中の強調は黄色マーカーか金色の文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジは 3 つ横並び、SNS 投稿は 4 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面幅いっぱいの地色ブロックとして積む
• 円形バッジは 3 つを横一列に並べる
• 成分カードは写真とテキストカードを左右交互に重ねる
• 注釈はセクションの下端にまとめる

Elevation & Depth

• 円形バッジは白〜淡色の放射グラデに薄い影をつけ、泡のような立体感を出す
• テキストカードは白地に細い金色の線で囲み、影はほとんどつけない
• 商品写真は床面に落ちる柔らかい影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物と商品は角なしの矩形で全幅に配置し、店舗ロゴやアイコンは円形に切り抜く
• セクション境界: 直線を基本とし、斜めの切り替えや水しぶき・波形の境界を混ぜる
• 特長・数値のバッジは正円にする
• タグはピル型にする
• 受賞は月桂冠付きの金メダル型にする
• 見出し下には下向き三角の吹き出しを使う

Components

• 泡の円形バッジ（badge-circle）: 放射グラデの正円に 2 行の短い特長を入れ、3 つを横に並べる
• 特長タグ（tag-pill）: オリーブグレー地に白文字のピル型タグを複数並べる
• 受賞メダル（award-medal）: 金の月桂冠と王冠で囲み、数字と部門名を入れる
• 金の見出し帯（heading-band）: 金グラデの横長帯に白文字を入れ、両端を矢羽根形に切る
• Point 番号ラベル（point-label）: 金地のリボンに筆記体で Point と数字を書く
• 成分カード（ingredient-card）: 白カードに金色の線を引き、小見出しラベル・成分名・説明・注釈を入れる。写真と重ねて置く
• 専門家コメント（quote-box）: 白地に大きな金の引用符を置き、重要な文だけ金色の文字にする
• 在庫訴求ボックス（urgency-box）: 深緑地の上に白カードを置き、中の一文だけを赤帯で強調する
• 吹き出し（speech-balloon）: 半透明のオリーブ地に白文字を入れ、下に三角をつける

Do's and Don'ts

Do - 実績の数字は金のセリフ体で特大にし、※注釈を添える - 泡・水滴・金の紙吹雪を背景に散らして、みずみずしさを出す - 商品の 3 色展開に合わせて、紹介パートの地色を変える - 明るいパートと濃い緑のパートを交互に置く - 人物写真には縦書きの明朝コピーを重ねる

Don't - 原色の青や紫を主役の色にしない - 角丸の大きいポップなボタンやカードを多用しない - 見出しを細いゴシックだけで組まない - 注釈なしで効果や数字を言い切らない - 金色をフラットな黄土色の単色にしない（グラデにする）

Page Structure

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

1. ファーストビュー（商品と主要ベネフィットを一目で伝える）: 黄色の光沢地に 3 本の商品を置き、明朝の特大コピーと円形バッジ 3 つ、特長タグを並べる
2. 実績・権威（受賞数・出荷数で信頼を得る）: 金のセリフ数字、月桂冠メダル、金の帯見出しを使う
3. ベネフィット提示（1 本で複数の悩みに効くことを示す）: 悩みのキーワードを円形に配置し、ピーチ地の人物写真に縦書きコピーを重ねる
4. タイプ別紹介（3 タイプから選べることを示す）: 深緑の吹き出し見出しの下に、黄・緑・ピンク地のパートを順に並べ、商品写真に円バッジを添える
5. 専門家の声（プロの推薦で信頼を補う）: モノクロの人物写真に金ラベルを付け、引用符付きの白カードを置く
6. 処方・機能の説明（2 層構造と多機能性を説明する）: 層ごとのラベル、手元の写真、機能名を円形に配置する
7. 開発ストーリー（作り手の想いで共感を得る）: グリッド地に円形の人物写真を置き、緑のボックスに引用見出しと本文を入れる
8. 販路・メディア・ランキング（社会的証明を重ねる）: 円形の店舗ロゴ、雑誌の表紙、金メダル 3 つ、紙吹雪、テレビ紹介を並べる
9. SNS の口コミ（利用者のリアルな声を見せる）: 深緑地にハッシュタグのタグを置き、投稿写真を 4 列グリッドで並べる
10. 成分紹介（こだわり成分を見せる）: 黄色地に写真と白カードを交互に置き、金のグラデ背景に成分名のリストを並べる
11. 在庫訴求（購入を急がせる）: 深緑地に金の明朝見出しと白カードを置き、赤帯で一文を強調する
12. 悩みの提起（肌ダメージへの危機感を高める）: モノクロ写真と紺黒の地に、グレーのタグ、悩み写真、アイコンを並べる
13. 解決・Point 解説（ポイントごとに効果を論証する）: 緑の水しぶきで切り替え、黒緑地に Point リボン、金の明朝見出し、成分カードを置く
14. クロージング（利用後の姿を想像させ、ブランドメッセージで締める）: 笑顔の人物と商品に縦書きの金コピーを重ね、黄色地に明朝のメッセージを置く

Imagery

• 商品は半透明ボトルに柑橘・ハーブ・木の台などの素材を添え、自然光で撮る
• 人物は素肌感のある女性で、目を閉じたりコットンを当てたりする仕草のアップにする
• 背景に CG の泡・水滴・オイルのしぶきを重ねる
• 受賞まわりは金の紙吹雪と月桂冠のイラストで飾る
• 悩みパートはモノクロ写真と線画の顔アイコンを使う
• SNS の口コミは正方形の投稿写真にアカウント名を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では SP のデザインを幅 750px 程度の中央カラムにして、左右を淡い黄色か深緑で埋めることを推奨
• 円形バッジと受賞メダルは PC でも 3 つ横並びのまま、少し大きくする
• SNS 投稿グリッドは PC では 6 列まで広げてよい
• 縦書きコピーは 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 行書くと起動時に読み込まれる。