DESIGN.md — グレージュ×ベージュの上品な美白美容液 LP（Greige Beige Elegant Whitening Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、清潔・爽やか
• キーワード: グレージュ・くすみベージュ・明朝見出し・円形バッジ・白カード・シルバーグラデーション
• 地の質感: 光沢のあるシルバーグレーのグラデーションと、つや感のある肌写真。泡や水滴の装飾で透明感を出す
• 形: 角が直角の白カードと、円形のバッジ・成分写真の組み合わせ。斜めに切った面で動きをつける
• 温度感: やや暖かいニュートラル（ベージュ寄り）

Colors

• 地は白・淡ベージュ・シルバーグレーをセクションごとに交互に使う
• ブランドを感じさせる面はくすみベージュの帯やラベルにまとめる
• 見出しは純黒を避け、ダークグレーかブラウンにする
• 悩みのセクションだけ暗いグレーの地にして、トーンを切り替える
• 赤は価格表の割引・お得額だけに使う
• ゴールドは悩みテキストのマーカーとランキングの王冠だけに使う
• circle-badge は文字 #88726B × 背景 #E9C9B5 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#665550、4.53:1）を使う。
• label-band は文字 #FFFFFF × 背景 #D4B5A0 のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9E6A47、4.56:1）を使う。

Typography

• 見出しは明朝体で、字間をやや広げる
• 本文はゴシック体で行間を広め（1.8）にとる
• 見出しの上に英字の小見出しを細く添える
• キーワードは引用符「“ ”」で囲み、大きな明朝で見せる
• 注釈は小さいグレーの文字で、ブロックの右下か下に置く
• 価格表だけは太いゴシックの数字で強く見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（成分紹介は 2 列、バッジは 4 列のグリッド）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 白カードは左右に 5% ほど余白をとって中央に置く
• 写真とテキストを左右に分けた横長カードを縦に並べる
• 大きな人物写真は全幅で敷き、上に見出しを重ねる
• 円形バッジは 4 列×2 段のグリッドで並べる
• セクションの頭に見出しと帯ラベルを中央揃えで置く

Elevation & Depth

• 白カードには薄いドロップシャドウ（0 2px 8px rgba(0,0,0,.1)）をつける
• 円形バッジにはごく薄い影をつけて、浮いて見せる
• 大きな影や強い立体表現は使わない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は四角か全幅で切り抜く。成分写真は正円で切り抜く。商品は切り抜き画像で置く
• セクション境界: 直線で区切るのが基本。一部の地は斜めの面や下向き三角で区切る
• カードの角は直角か 4px 程度の小さな角丸にする
• 年代ラベル・バッジ・ポイント番号は正円にする
• STEPラベルや帯見出しは角を丸めたピル型にする
• 比較図の見出しは台形のタブにする

Components

• 特長の横並びカード（feature-card）: 左に写真、右に明朝の見出しと短い説明。カード同士は細い線で区切る
• 無添加の円形バッジ（circle-badge）: 薄いベージュの正円に明朝の文字を中央に入れ、4 列で並べる
• ベージュの帯ラベル（label-band）: 見出しの下や画像の上に置く、ベージュ地に白文字の帯
• まとめ買いの価格表（price-table）: 黒いヘッダーの表で、割引率を赤字にし、お得額を赤いブロックで強調する
• お客様の声カード（voice-card）: 左に人物写真と円形の年代ラベル、星の評価。右に明朝のタイトルと感想
• POINT番号（point-number）: 円の中に大きな数字を入れ、円弧の上に小さく英字を添えた番号バッジ
• 悩みのチェックリスト（worry-list）: 暗い地にチェックボックスと白文字を並べ、要所にゴールドのマーカーを引く
• 使い方のSTEPカード（step-card）: ピル型のSTEPラベル、説明文、ベージュの補足ボックス、右に人物写真
• ランキングの月桂冠（ranking-badge）: ベージュの月桂冠と王冠で囲んだ大きな明朝の順位表示

Do's and Don'ts

Do - 見出しは明朝体で、ダークグレーかブラウンにする - 地の色は白・淡ベージュ・グレーをセクションごとに切り替える - 成分写真は正円に切り抜いて並べる - 注釈（※）は小さく丁寧に添える - 泡や水滴の装飾で透明感を出す

Don't - 価格表以外で鮮やかな原色を使わない - 見出しを太いゴシックにしない（価格表は例外） - 角の大きな丸いカードでカジュアルに見せない - 背景に柄や派手な模様を入れない - 白文字を淡いベージュの上に置かない（読みにくくなる）

Page Structure

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

1. ファーストビュー（効果のキャッチと商品を一目で伝える）: シルバーグレーの地に女性の顔写真と商品の切り抜き。大きな明朝のキャッチを置き、下にベージュ帯で商品の特徴を入れる
2. 効能の要約（主な効能を 3 つ示す）: 白カードの中に写真と明朝見出しの横並び行を 3 段。下にベージュのタグを 2 つ置く
3. 無添加の訴求（やさしさを示す）: グレーの地に円形バッジを 4 列×2 段で並べる
4. まとめ買い（セット購入をすすめる）: 茶色の帯の見出し、商品を並べた写真、赤・黒の価格表
5. ランキング実績（社会的な証明）: ベージュの枠の中に月桂冠と大きな順位表示
6. お客様の声（使用感への共感を得る）: 英字の小見出しと明朝見出し。斜めのベージュ面の上に声カードを 3 枚並べる
7. 悩みの提起（悩みに共感する）: 肌のアップ写真から暗いテクスチャの地へつなぎ、チェックリストを 4 項目並べる
8. 解決の提示とブランド紹介（商品とブランドを紹介する）: 白地の中央見出しとベージュ帯。続けてグレー地に女性の写真と縦長の紹介文
9. コンセプト（総合的にケアできることを伝える）: 3 つの円を重ねた図と商品写真、本文
10. ポイント詳細（成分）（有効成分と美容成分を説明する）: 全幅の人物写真にPOINT番号を重ねる。ベージュの地に大きな数字見出しと成分の円形写真、カプセル別の成分表
11. ポイント詳細（技術）（浸透の技術を示す）: 泡が浮かぶグレー地に大きな明朝見出し。比較図を 2 つ並べ、白い説明ボックスを置く
12. こだわり（使用感・信頼）（品質と安心感を伝える）: 円形のこだわりラベル、手の写真、無添加バッジの再掲、認証マーク入りの白カード
13. 使用方法（使い方を示す）: ベージュ地に英字を添えた見出し。STEPカードを下向きの矢印でつないで縦に並べる

Imagery

• 30〜50代の女性が肌に触れる、明るく柔らかい光の写真を使う
• 白い背景、または淡いグレー背景で撮る
• 商品は白いチューブを切り抜き、透明なジェルのしずくを添える
• 成分は自然素材のアップを正円に切り抜く
• 泡・水滴・シルバーの光沢を装飾に使う
• 比較図は淡いピンクの肌の層と青い矢印のフラットなイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元のLPは縦長の画像を中心にした 1 カラムで、PC でも約 720px 幅のまま中央に置く
• SP では幅を 100% に縮め、文字サイズは上記の推奨値で組む
• PC では最大幅 720px 前後に固定し、左右を淡いグレーで埋める
• 円形バッジの 4 列は SP でも保ち、小さい端末では 2 列にする

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