DESIGN.md — 銀灰とくすみ色の再生美容スキンケア LP（Silver Gray Clinical Luxury Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、クール・先進的、シンプル・ミニマル、信頼・誠実
• キーワード: シルバーグレー・縦書き明朝・くすみパステル・研究・透明感・余白・白カード
• 地の質感: メタリックなボトル、ガラスのスポイトや水滴、虹色の光の反射。面はマットな単色グレー。
• 形: 直線的な四角が基本。成分画像やバッジは正円、白カードは大きめの角丸。
• 温度感: クールで無機質寄り。CTA の暖色だけがアクセント。

Colors

• 地はシルバーグレーと白を交互に置き、全体を無彩色寄りにまとめる
• 暖色は CTA のサーモンオレンジだけに使う
• 商品工程ごとに水色・藤色・グレージュのくすみ色で背景を切り替える
• POINT 見出しと強調下線はベージュゴールドで上品にする
• 価格は黒の極太数字、取り消し線は赤で通常価格を示す
• 濃いグレー地の小見出しは淡い黄色で目立たせる
• button-primary は文字 #FEFDFA × 背景 #F4B27D のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B95B10、4.52:1）を使う。
• badge-lottery は文字 #FEFDFA × 背景 #7E95A6 のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5F788A、4.55:1）を使う。

Typography

• 感情に訴えるキャッチは明朝の縦書きにし、字間を広く取る
• 英字見出しは細いジオメトリック書体を大きく使う
• 白い帯に明朝をのせた見出しを写真の上に重ねる
• 本文は小さめのゴシックで行間を広く取る
• 価格だけは極太の数字にして他との差を最大にする
• 強調はベージュの下線マーカーと太字で控えめに
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分は 4 列、成分名ボックスは 2 列、Reason は写真とテキストの左右 2 分割
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• オファーは灰色地の上に白カードを浮かせ、左右 14px 程度の余白を残す
• 縦書き見出しを左右どちらかに寄せ、残りに商品写真を置く
• Reason は写真の左右配置を交互に入れ替える
• オファーブロックはページ内で 3 回繰り返す
• セクション間は広めの余白で区切る

Elevation & Depth

• 影はほぼ使わず、色面の差で階層を作る
• 白カードは影なしで、グレー地とのコントラストで浮かせる
• 金色の成分球体だけに柔らかい光彩を付ける

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品と人物写真は全幅の四角。成分写真やバッジは正円で切り抜く
• セクション境界: 直線の色切り替え。区切り線や装飾波は使わない
• CTA は完全なピル型
• POINT カードと見出し囲みは大きめの角丸
• 成分名ボックスは角丸なしの細い枠線
• 悩みキーワードは白い正円に入れて散らす

Components

• 申込 CTA（button-primary）: サーモンオレンジのピル型ボタン。白い太字と右向き矢印。下に規約同意のチェックを置く
• オファーカード（offer-card）: 灰色地に浮く白カード。明朝の大見出し、取り消し線付きの通常価格、極太の価格、チェックリストを入れる
• 抽選人数バッジ（badge-lottery）: カード右上に置くブルーグレーの正円。人数を白文字で入れる
• 応募条件ボックス（condition-box）: 薄灰の箱。左右に線を引いた中央見出し、吹き出し型の白ラベル、黒丸数字のリストで構成
• POINT カード（point-card）: 白い角丸カード。ベージュの POINT 番号、短い区切り線、下線で強調した本文を並べる
• 成分円形写真（ingredient-circle）: 成分写真を正円で 4 つ並べ、下に成分名を小さく添える
• 白帯見出し（heading-band）: 写真や灰色地に重ねる白い帯。中に明朝の見出しを入れる
• 番号付き試験リスト（number-list）: 濃灰の丸数字、白の見出し、細い区切り線を組み合わせた縦リスト
• 不使用マーク（free-circle）: 斜線入りの細い線の円。中央に不使用成分名を入れて 2×2 で並べる

Do's and Don'ts

Do - 無彩色のグレー階調を主役にし、色は控えめに使う - 感情に訴える見出しは明朝の縦書きにして余白を広く取る - オファーブロックはファーストビュー直後・中盤・末尾に繰り返す - 商品工程ごとにくすみ色の背景で区別する - 研究感はガラス・水滴・細胞のビジュアルで表現する

Don't - CTA 以外で鮮やかな暖色や原色を使わない - 太いゴシックの大見出しを多用しない（価格の数字だけは例外） - 濃い影やグラデーションのボタンを使わない - 装飾的なイラストやポップなアイコンを入れない - セクション境界に波や斜めの形を使わない

Page Structure

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

1. ファーストビュー（悩み訴求とブランドの印象づけ）: グレー地に人物と虹色の光。左に明朝の大見出し、下に商品ボトルと受賞バッジを並べる
2. セット内容（トライアル内容を見せる）: 縦書き見出しとパウチ入りの箱の写真。内容を右寄せの小さい文字で記載
3. オファー・CTA（低価格トライアルへの申込）: 白カードに価格、抽選バッジ、ピル型 CTA、チェックリスト、応募条件ボックス
4. ブランドストーリー（研究背景の共感づくり）: 白い光の背景に縦書きの明朝と、短い段落の本文
5. 効果イメージ（肌悩みへの効果を連想させる）: 肌の写真の上に、金色の球体に入れた効果キーワードを散らす
6. 成分紹介（独自成分を説明する）: 白帯の見出し、細胞の写真、白い円 2 つの掛け合わせ図、枠線付きの成分リスト
7. 理由（Reason）（成分の根拠を伝える）: 細い英字の Reason 番号と、写真＋本文の左右交互配置
8. イメージビジュアル（浸透感を世界観で伝える）: スポイトの水滴が落ちる全幅写真に白い縦書きの明朝を重ねる
9. アイテム紹介（STEP）（3 工程の商品を解説する）: STEP ごとに背景のくすみ色を変える。大きな番号、商品写真、円形の成分写真、POINT カード
10. アプローチ（対応する悩みを網羅して見せる）: 大きな英字見出しとボトルの写真の上に、悩みキーワード入りの白い円を散らす
11. 安全性（信頼性の担保）: 中灰の地に白いピル型の見出し、淡黄の小見出し、不使用マーク、番号付き試験リスト
12. クロージング・CTA（最終的な申込を促す）: 白帯の見出しと商品写真、セット内容とオファーカードを再掲
13. 電話問い合わせ（電話での申込先を案内する）: グレー地に白枠の電話番号ボックスと受付時間

Imagery

• マットなシルバーのボトルを明るいグレー背景で撮り、影を柔らかく落とす
• 人物は透明感のある肌の女性。プリズムの虹色光を差し込ませる
• ガラスのスポイト、水滴、ビーカーをクールなグレートーンで接写する
• 細胞や泡を思わせる透明な球体の CG を使う
• 成分は植物の実物写真を明るく撮り、円形に切り抜く
• 効果キーワードは金色の液体が入った球体に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため以下は推奨。中央 480〜600px 幅の 1 カラムにし、両脇をグレーで埋める
• PC では Reason や STEP を写真とテキストの左右 2 分割に広げてよい
• オファーカードは最大 560px 幅で中央に置く
• 縦書きの見出しは PC でも縦書きのまま残す
• 成分の円形写真は PC では 4〜6 列で並べる

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