DESIGN.md — レモンイエロー×クールグレーの医師監修美容液 LP（Clinical Yellow Gray Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、情報量多め・訴求型
• キーワード: 医師監修・レモンイエロー・クールグレー・成分の雫・縦書きコピー・ラボ感
• 地の質感: ガラスのような透明感のある雫・球体の写真に、平らなグレーと白の面を合わせる
• 形: 四角い面と細い線が基本。成分は丸いバッジ、ピル型ラベル、円形アイコンで見せる
• 温度感: クールなグレーの地に、暖かい黄色・オレンジで勢いを足す

Colors

• 地は白とライトグレーを交互に置き、ときどきブルーグレーやクリームの帯を挟む
• ブランドの黄色は製品パッケージ、ロゴ面、蛍光マーカー風の帯に限る
• 成分は色で分ける。ビタミン系はオレンジ、もう一方の成分はパープル
• 濃い黄色の全面ベタはメーカー紹介の 1 セクションだけにし、文字は白にする
• 強調は黒い吹き出しか黄色いマーカー帯で行う。赤は使わない
• 英字の飾り見出しは淡いグレーかオレンジにする
• free-circles は文字 #F2B211 × 背景 #FFFFFF のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#976F08、4.57:1）を使う。

Typography

• 見出しは細字のリード行と太字の決め行を 2 段で組み合わせる
• 写真の上の大コピーは縦書きにし、白か黄色の帯に乗せる
• 大事な見出しの下には細い下線を引く
• 英字の飾り見出しは大きく淡くして、和文見出しの背後や上に置く
• 本文の強調は太字だけにする。色は変えない
• 成分名には ※番号を上付きで付け、注釈をまとめて小さく載せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長の短語は 3 分割、STEP は「アイコン＋文」の 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右いっぱいに置く。本文は左右に 20px 程度の余白を取る
• セクションは地の色の切り替えで区切る
• 3 つの短い特長を縦線で区切って横に並べる
• 円形の成分バッジは写真の端にはみ出させて重ねる
• 注釈はセクションの終わりにまとめる

Elevation & Depth

• 影はほぼ使わず、平らな面で構成する
• 製品写真だけ床に落ちる柔らかい影を付ける
• 球体の成分画像は光沢と透明感で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は四角い全幅か大きな角版で使う。人物の丸写真と円形アイコンも併用する
• セクション境界: 直線で切り替える。斜めのグレー帯や、下に向かう三角の切り欠きも使う
• 成分ラベルはピル型にする
• 無添加の項目は斜線入りの円で並べる
• 見出しの小ラベルは細い黒枠の四角にする
• STEP のアイコンは細線の円の中に描く

Components

• 監修医×ブランドの掛け合わせ（collab-header）: 医師の丸写真カードとロゴカードを細い×印で並べる
• 3 つの訴求アイコン（trust-icons）: 線画アイコンと 2 行の短い文言を縦線区切りで 3 つ並べる
• 価格ブロック（price-block）: 黒枠の小ラベル、商品名、容量、大きな価格を中央に積む。右に丸い単価バッジを添える
• 黒い吹き出し（speech-bubble-dark）: 白文字の吹き出しで、アンケートの結果発表へつなぐ
• 黄色マーカー帯（marker-band）: 縦書きや横書きのキーワードの背面に置く蛍光黄色の帯
• 成分ラベル（ingredient-pill）: オレンジまたはパープルのピル型に白文字で載せる
• 特長の 3 分割（feature-3col）: 短い単語を縦線で区切り、太字で 3 つ並べる
• 無添加の円バッジ（free-circles）: 斜線入りの細線円にオレンジの文字を入れ、3 個×2 段で並べる
• 使い方の STEP（step-row）: 黒い英字の STEP 番号、円内の線画、説明文の順に並べる
• Q&A（faq-item）: Q. の太字の質問の下に、左に縦線を引いた A. の回答を置く

Do's and Don'ts

Do - 黄色は製品とマーカーに絞り、グレーと白の地を広く取る - 成分ごとに色を決め、ラベル・球体・見出しで同じ色をくり返す - コピーは細字のリード行と太字の決め行で緩急をつける - 医師の権威は丸写真と肩書きの縦書き帯で示す - 成分を出すときは ※注釈を必ず付ける

Don't - 赤や緑の派手な CTA ボタンを置かない - 黄色をページ全体の地に広げない - 影の濃いカードや装飾的な角丸を多用しない - 手書き体やポップな丸ゴシックを使わない - 成分の色（オレンジとパープル）を混ぜて使わない

Page Structure

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

1. ファーストビュー（医師コラボと商品カテゴリを伝える）: コラボカードの下に 2 段の大見出し。黄色地に雫と製品の写真、左右に 2 成分の球体を置く
2. 訴求アイコンと価格（3 つの強みと価格を示す）: 3 分割アイコンを並べ、中央揃えの価格ブロックで締める
3. 監修医の紹介（権威と親しみを伝える）: グレー地に人物写真を置く。縦書きの肩書き帯と、淡い大きな英字を背景に敷く
4. 悩みの提起（アンケートの数字で悩みを裏付ける）: 黒い吹き出し、マゼンタ帯の数字、スマホ画面のモックで見せる
5. ビフォーアフター（肌印象の差を見せる）: ブルーグレー帯に肌のアップ写真を 2 枚並べる
6. 商品の登場（解決策として商品を出す）: 縦書きの黄色マーカーコピーとパウチ写真、黄色地のロゴ面
7. 悩みの部位と想い（悩みのマッピングと開発の想いを伝える）: モデル写真に点線で悩みを囲み、注記を添える。続けて淡い英字を背景にした本文
8. 成分の説明（2 成分の役割を説明する）: 球体の写真、ピル型ラベル、3 分割の特長、浸透の図解
9. サポート成分（配合成分の全体像を示す）: クリーム地に、オレンジのグラデーションで分割した円グラフを置く
10. 鮮度・個包装（個包装にした理由を伝える）: グレー地に手元の写真、縦書きコピー、レモンの比較写真
11. テクスチャーと無添加（使い心地と安心感を伝える）: オレンジの英字見出し、肌アップの写真、円バッジを 3 個×2 段
12. 使い方とシーン（使い方と使う場面を示す）: 線画の STEP、黒丸の POINT 枠、縦書き文言を添えた写真 3 枚
13. メーカー紹介（製造元の信頼性を示す）: モノクロのラボ写真に続けて、濃い黄色地に白文字の本文と製品写真
14. よくある質問とクロージング（疑問を解消し、価格を再提示する）: Q&A の後にモデル写真の大きなビジュアルと縦書きコピー、最後に価格ブロック

Imagery

• 黄色の液体が雫になる様子と、気泡入りの透明な球体を光沢のある質感で撮る
• 肌はツヤのあるアップ写真にし、明るいグレーか生成りの背景を使う
• パウチは黄色く平らな面で見せ、浮遊させたりボケを入れたりして奥行きを出す
• アイコンは細い黒線に黄色を差した、シンプルな人物や手の線画にする
• 分子モデルはオレンジかパープル単色の 3D 風画像にする
• ラボの写真はモノクロにして、黄色の地とのコントラストを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、以下は推奨。PC では本文の幅を 960px 程度に収め、ファーストビューは写真とコピーを左右 2 カラムにする
• 訴求アイコン・特長の 3 分割・シーン写真は横並びのまま広げる
• STEP は横 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 行書くと起動時に読み込まれる。