DESIGN.md — 銀灰×くすみピンクの先端研究系スキンケア LP（Silver Lab Minimal Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、クール・先進的、清潔・爽やか、シンプル・ミニマル
• キーワード: 銀灰・透明な水滴・縦書き・細字・研究室・くすみピンク
• 地の質感: メタリックな容器と水滴・細胞球の透明感。光が差すマットな面
• 形: 正円の成分バッジ、大きめ角丸の白カード、ピル型 CTA
• 温度感: やや寒色寄りのニュートラル。CTA のピンクだけが温度を足す

Colors

• 地は白・淡グレー・寒色パステルを交互に置き、セクションを分ける
• 製品 STEP ごとに淡ブルーグレー→ラベンダー→グレージュと地色を変える
• くすみピンクは価格・送料無料バッジ・CTA だけに使う
• グレー地の上の小見出しは淡黄で目立たせる
• 強調文はベージュの下線マーカーで示す
• 原色や彩度の高い色は使わない
• button-primary は文字 #FEFBFC × 背景 #DA8394 のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C8465F、4.54:1）を使う。
• price-block は文字 #DA8394 × 背景 #FEFEFE のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C8465F、4.57:1）を使う。

Typography

• 見出しは細字（300〜400）で字間を広くとり、上品に見せる
• 感情に訴えるコピーは縦書きにする
• 欧文ラベルは細い幾何学サンセリフで大きく置く
• 太字は CTA・価格まわり・下線つきの強調だけに使う
• 写真の上の見出しは白帯で抜いて読ませる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理由ブロックは写真と文章の 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算）
• 写真は端まで広げる全幅と、左右に寄せる非対称を交互に置く
• TRIAL SET のブロックを 4 回くり返す
• 成分は 4 つの円を横に並べる
• 白カードは色地の上に左右 16px の余白をとって置く

Elevation & Depth

• 影はほぼ使わない
• 特典帯にだけ薄いドロップシャドウ
• 白カードはフラットにし、地色との差で浮かせる

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 成分写真は正円。製品写真は角なしの長方形。悩みのワードは白い正円バッジ
• セクション境界: 直線で地色を切り替える
• 成分名の枠は角丸なしの細い線囲み
• 特徴ラベルの枠には左上に三角の切り欠き装飾を付ける
• 白カードの角丸は 24〜28px

Components

• トライアル CTA（button-primary）: 全幅のピル型。くすみピンクに白い太字、右端に細い山括弧
• 初回価格ブロック（price-block）: 上下をピンクの細線ではさんだ見出し、ピンクの大きな価格、円形の送料無料バッジ
• 条件ラベル枠（benefit-tag）: グレーの線枠を 2 つ並べ、左上に三角の切り欠きを付ける
• 特典帯（gift-band）: アイボリーの角丸帯。左に特典ラベル、右に円形の数量限定バッジ
• 縦書き欧文ラベル（vertical-label）: TRIAL SET などを右端に縦に置き、左に細い縦線を添える
• POINT カード（point-card）: 白の大きな角丸カード。ベージュの POINT 番号、短い線、下線で強調した本文
• 成分円写真（ingredient-circle）: 正円の写真を 4 つ並べ、下に成分名を中央揃えで置く
• 番号付き試験リスト（number-list）: グレー地の上に濃グレーの丸数字、白い見出しと説明、細い区切り線
• フリー表示（free-circle）: 白カードの中に、斜線入りの円を 2×2 で並べる

Do's and Don'ts

Do - 余白を広くとり、細字で静かに見せる - 購入ブロック（価格と CTA）は同じ形のまま数セクションおきに置く - 水滴・スポイト・ガラス器具など研究室らしい静物写真を使う - セクションの地色は寒色パステルの範囲で変える

Don't - CTA 以外にピンクを広く使わない - 太いゴシックの見出しを多用しない - 派手なグラデーションやドロップシャドウを付けない - 暖色の鮮やかな写真を主役にしない

Page Structure

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

1. ファーストビュー（先進的で上質な世界観を伝える）: 濃灰の地に製品ボトルと透明な球体。左右に明朝の縦書きコピー、下にロゴ
2. 受賞実績（第三者の評価で信頼を得る）: 淡グレーの地に月桂樹の装飾とピンクの受賞エンブレム
3. トライアル CTA（初回購入へ導く）: セット写真、特典帯、ピンクの価格、条件ラベル 2 つ、ピル型ボタン
4. ブランドの考え方（肌の悩みと解決の考え方を物語として語る）: 光の差す白い背景に縦書きの見出しと中央揃えの短い段落。肌写真に円形の効果バッジを重ねる
5. 成分の説明（独自成分の価値を伝える）: 藤グレーの地。白帯で抜いた見出し、細胞の写真、白い円 2 つを×でつなぐ図、成分名の線枠グリッド
6. 選ばれる理由（効果の根拠を示す）: 縦書きの導入、Reason 番号付きで写真と文章を左右交互に置く
7. イメージビジュアル（研究と技術の印象を強める）: スポイトとビーカーの写真に明朝の縦書きコピー
8. 製品ラインナップ（使う手順ごとに 3 品を紹介する）: ITEM ラベルと STEP 番号を大きく。STEP ごとに地色を変え、成分の円写真と POINT カードを置く
9. 悩みへのアプローチ（対応できる肌悩みを並べる）: 製品写真の上に悩みワードの白い円を散らし、縦書き見出しを添える
10. ベネフィット（使った後の気持ちを想像させる）: 笑顔の肌写真の下端に、白帯付きの大きな明朝コピーを重ねる
11. 安全性（不安を取り除く）: グレーの地。ピル型の白見出し、淡黄の小見出し、4 つのフリー表示、番号付きの試験リスト
12. 製造へのこだわり（品質の根拠を示す）: 白地に文章、小さな写真 2 枚を左右に寄せて非対称に置く
13. クロージング CTA（最後のひと押しで購入へ導く）: 3 品の集合写真と明朝コピーの後に、トライアル CTA をもう一度置く

Imagery

• マットな銀色のボトルを、グレーの背景に柔らかい光で撮る
• 透明な水滴・気泡・細胞のような球体を CG で浮かべる
• スポイト・ビーカー・シャーレなど研究室の静物を寒色の低彩度で
• 肌のアップは白背景で明るく、清潔感を出す
• 植物成分は正円の切り抜きで彩度をやや残す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP と同じ 1 カラムを中央に約 30% 幅で置く
• PC の左右の余白は、光の筋と細胞球の写真を並べた背景で埋める
• PC で広げる場合も本文は最大 480px にとどめ、縦書きを保つ

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