DESIGN.md — レモン黄×黒金の高機能美容液 LP（Vivid Yellow and Black Gold Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: クール・先進的、清潔・爽やか、力強い・インパクト、情報量多め・訴求型
• キーワード: レモンイエロー・黒×金・透明カプセル・引き出し線・大きな数字・成分訴求
• 地の質感: ツヤのある液体やカプセルの CG 調写真、オーロラの光の反射、黒地に金の光の筋
• 形: 四角い黒帯ラベル、細い引き出し線、角の立った枠、吹き出しは角丸ピル
• 温度感: 明るい黄と冷たいグレーの対比。黒金のパートでは高級感が出る

Colors

• 地は淡いグレーとレモンイエローを交互に使う。
• 中盤の技術説明は黒地にして、金の光の筋で高級感を出す。
• 見出しの一部の文字だけ金のグラデーションにする。
• 小見出しは黒帯に白文字のラベルにする。
• 黄色マーカーは表見出し・番号・注意枠に限って使う。
• Q&A は黄色地に白カードと黒枠で組む。

Typography

• 見出しは極太ゴシックにし、キーワード数文字だけを金のグラデーションにする。
• 見出しの上に英字ラベル（POINT.1 など）を細めの欧文で置く。
• 数字は太いセリフ体で画面幅の半分以上の大きさにし、% は小さく添える。
• 成分名やキャッチには※の上付き注釈を必ず付ける。
• 注釈は 9px 前後で、ブロックの直下にまとめて置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分タグは 2 列、植物の写真は 3 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真とビジュアルは全幅で見せ、テキストは中央揃えにする。
• 成分の説明は写真の上に引き出し線と黒帯ラベルを重ねる。
• 表は左に項目、右に太字の % を置き、細い罫線で区切る。
• Q&A は全幅の 90% の枠で、Q 行と A 行を上下に並べる。

Elevation & Depth

• 影はほぼ使わず、平面とフラットな枠で構成する。
• 立体感は写真の光沢とカプセルの CG で出す。
• 黒地では金の光の筋で奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の長方形。成分写真は角丸なしの四角形にする。
• セクション境界: 背景色を直線で切り替える。グラデーションでぼかす箇所もある。
• ラベル・カード・Q&A 枠は角丸を付けない。
• 悩みの吹き出しだけは角丸の大きいピル型にし、しっぽを付ける。
• フリー成分は円形に斜線を入れたアイコンにする。
• RECOMMEND の見出しは、角を斜めに切ったタブ型の線にする。

Components

• 黒帯ラベル（label-black）: 成分名や効果を示す黒地に白文字の四角いラベル。引き出し線とセットで使う。
• 悩み吹き出し（speech-worry）: 白地に黒線のピル型の吹き出し。左右に互い違いに 5 つ並べる。
• 実感度テーブル（stat-table）: 黄色マーカーの見出し行と、項目・大きな % の行を罫線で区切る表。
• 金ラベル（gold-label）: 黒地のセクションで使う、金の地に黒文字のサブコピー帯。
• 番号付きおすすめリスト（recommend-list）: 黄色の四角い番号と点線の区切りで 4 項目を並べる。
• 使い方のステップ（step-card）: クリーム地のカードに黒い STEP ラベルと説明文を置き、罫線で区切る。最後に黄色の注意枠を置く。
• Q&A アコーディオン（faq-accordion）: 黒枠の Q 行（白い Q 四角と右側にシェブロン）と白い A カード（黄色の A 四角）を組み合わせる。
• フリー成分の円（free-circle）: 黒線の円の中に成分名を入れ、斜線を重ねる。3 個と 2 個で並べる。

Do's and Don'ts

Do - 黄色・グレー・黒の 3 種類の地を交互に入れて、リズムを作る。 - 成分ごとに引き出し線と黒帯ラベルで写真に注釈を付ける。 - 実感度などの数字は極太のセリフで大きく見せる。 - 全ての効果表現に※注釈を添える。 - 見出しのキーワードだけを金のグラデーションにする。

Don't - ラベルやカードを角丸にしすぎない（吹き出しは例外）。 - パステル色やピンクを地の色に使わない。 - 影の強いカードやボタンで立体感を出さない。 - 明朝体を見出しに使わない。 - 黒地のセクションに黄色を広く敷かない。

Page Structure

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

1. ファーストビュー（商品と主要成分を一目で伝える）: 淡い紫グレーの地に泡と商品を置く。縦書きの極太キャッチと、成分ラベルを引き出し線で添える。
2. 悩みの提起（共感を得る）: 方眼柄の地に見出しを置き、5 つの悩みを吹き出しで互い違いに並べる。下向きのシェブロンで次へつなぐ。
3. 商品の紹介（商品の成り立ちを示す）: 黄色地に 3 色のカプセルと商品を置き、配合率を引き出し線で示す。モデルの写真に縦書きの黒帯コピーを重ねる。
4. テクスチャーと実感度（使用感を数字で証明する）: 液体の大きな写真の上に大きな %、その下に実感度の表を置く。
5. 特長 1（黒金）（核となる処方を訴求する）: 黒地に金の光の筋を入れ、カプセルの写真に成分の黒帯ラベルを重ねる。商品写真と保湿の図解も置く。
6. 特長 2（浸透技術を説明する）: 水面調の白地に、2 列の効果別成分タグと肌層の CG を置き、大きな % で締める。
7. 特長 3・4（処方のこだわりとやさしさを伝える）: 黄色地に液体が流れる写真と黒帯ラベルを置く。次にグレー地で植物の写真を 3 列に並べる。
8. フリー成分（安心感を出す）: 斜線入りの円を 5 個並べる。
9. おすすめの方（対象者を絞る）: 商品 3 本の写真と、番号付きのリストを置く。
10. ライン使い（併用商品を提案する）: 2 つの商品の写真に黄色のラベルと説明を引き出し線で付ける。
11. 使い方（手順を示す）: 細い枠の上部に英字の見出しを置く。モデルの写真の下に STEP カードと注意枠を置く。
12. よくある質問（不安を解消する）: 黄色地に Q&A のアコーディオンを 6 個前後並べる。

Imagery

• カプセルや液体のしずくを、光沢の強い CG 調で撮る。
• 商品は黄色い液体が透ける瓶にして、ホログラムのラベルを付ける。
• モデルは韓国系の素肌メイクで、目を閉じたツヤ肌のアップにする。
• 黒地には金の斜めの光の筋とガラスの破片風の装飾を入れる。
• 背景の泡、オーロラの反射、水面のゆらぎで透明感を出す。
• 成分の植物はアップで撮り、明るい自然光にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、中央 420〜480px のカラムを維持し、左右に地の色を延長することを推奨する。
• PC では成分タグを 4 列、植物の写真を 3 列で横幅を広げる。
• PC では大きな数字や見出しを 1.3 倍程度にとどめる。
• 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 行書くと起動時に読み込まれる。