DESIGN.md — ピンク×水色×アプリコットの3色美容液LP（Pastel Tri-Color Serum Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: 透明感・泡・水滴・3色テーマ切替・個包装・注釈付き訴求・パステル
• 地の質感: 光のにじみや虹色のハレーション、泡と水滴を写真で重ねた、つややかで透明な質感
• 形: 角丸の白カード、ピル型のラベル、円形の成分バブル、斜線入りの禁止マーク付き正方形
• 温度感: やや温かいパステル。水色パートだけ涼しげにする

Colors

• 商品タイプごとにテーマ色を1つ決め、そのパートの地・ラベル・強調文字を同系色でそろえる
• 地は白に近い淡いトーンにして、写真の光とグラデーションでつなぐ
• 強調語だけをテーマ色の濃いめで塗り、ほかは濃いグレーにする
• 濃い色の面は小さなラベル帯だけに使う
• 注釈はグレーの極小文字で見出し下か区画の下端に置く
• pill-label は文字 #FEFDFD × 背景 #5FB3AE のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3C7F7B、4.58:1）を使う。

Typography

• 大見出しは2行で改行し、強調語だけテーマ色にする
• 見出しの語尾に※番号を小さく上付きで添える
• 明朝とゴシックをパートごとに使い分けて緩急をつける
• スラッシュで囲む見出し「＼ ／」をサブ見出しに使う
• 本文は短く2〜3行で区切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード群は2〜3列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは背景写真を全幅で敷き、文字を上に重ねる
• 悩みは2×2のピル型カードか、縦の箇条書きにする
• 使い方は丸番号のステップを横に3つ並べ、矢印でつなぐ
• 注釈はセクションの下端に左寄せでまとめる
• 商品写真は見出しの右や下に大きく斜めに置く

Elevation & Depth

• 白カードにごく薄い影（0 4px 12px rgba(0,0,0,.06)）をつける
• 泡や個包装の写真で奥行きを出し、面の影は控える
• 悩みボックスは半透明の白をにじませて浮かせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。ステップ画像は角丸の正方形か円形
• セクション境界: 直線で切り替え、背景のグラデーションでつなぐ
• 成分は円形の泡の中に文字を入れる
• 「〜フリー」は正方形の枠に斜線を入れた禁止マークにする
• ラベルはピル型か小さな角丸の矩形

Components

• テーマ色のピルラベル（pill-label）: 効果や使い方の要点を入れる、塗りのピル型ラベル
• 濃色タグ（dark-tag）: 見出し上に置く短い訴求タグ
• 悩みカード（worry-card）: アイコン円と2行の悩みを入れた白いピル型カードを2×2で並べる
• 不使用バッジ（free-badge）: 斜線入りの正方形枠に成分名を入れる
• 成分バブル（ingredient-bubble）: 透明な泡の円の中に、成分名とチェック付きの効果を入れる
• 使用ステップ（step-flow）: 丸番号・画像・名称を横に3つ並べ、中央に目印のラベルを付ける
• 処方特長カード（feature-card）: 上にテーマ色の見出し帯、丸番号、説明、質感写真を縦に積むカード
• 注釈（note-text）: ※番号付きの小さなグレー文字

Do's and Don'ts

Do - テーマ色はパートごとに1色だけ使う - 泡・水滴・光のにじみで透明感を出す - 強調語はテーマ色で太く、見出しの中で1〜2語に絞る - 効果の訴求には必ず注釈番号を付ける - 白カードは角丸にして余白を広めにとる

Don't - 原色や彩度の高い赤・青を広い面に使わない - 1つのパートに複数のテーマ色を混ぜない - 背景を真っ白の単色だけにしない - 角の鋭い重たい枠線を多用しない - 注釈を本文と同じ大きさにしない

Page Structure

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

1. ファーストビュー（3タイプの商品を一目で見せる）: 水面と泡の写真の上に、3色のパッケージを斜めに重ねる。左側にロゴ風の明朝見出しを置く
2. タイプ選択（肌悩み別に3種を比較する）: 3色の箱を横に並べ、下に悩みと略称ラベルを置く
3. 商品A訴求（主成分と鮮度を伝える）: ピンク地に大見出しと濃色タグを置き、個包装の写真を大きく見せる
4. 悩みの提起（共感を得る）: 半透明の白ボックスに、点付きの太字の悩みを縦に5つ並べる
5. 不使用成分（安心感を伝える）: 斜線入りの正方形バッジを4+3個のグリッドで並べる
6. 使い方（習慣化のイメージを伝える）: 丸番号の3ステップと、Step筆記体付きの手順写真を並べる
7. 商品B訴求（水色タイプの価値を伝える）: 水色地で、泡の中に個包装を置いたビジュアルにする
8. 悩みカード（タイプ別に共感を得る）: 2×2のアイコン付きピルカードと商品写真、スラッシュで囲んだ締めの見出し
9. 成分の解説（Wケアと保湿成分を伝える）: 左右2つの泡の円にチェックリストを入れる。成分名の泡を散らす
10. 処方の特長（低刺激設計を伝える）: 3列の特長カードと質感の写真
11. 商品C訴求（エイジングケアのタイプを伝える）: アプリコット地で、悩みカード・成分の泡・使い方を同じ型で繰り返す

Imagery

• 泡や水滴を明るい逆光で撮り、虹色のハレーションを入れる
• 個包装やパッケージは切り抜いて斜めに配置し、柔らかい影を落とす
• テクスチャ（ジェル・クリーム・水）は白い背景でマクロ撮影する
• 手のひらや頬に塗る女性の写真は、明るく清潔なトーンにする
• 線画アイコンは細線にして、テーマ色の円の中に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPC画像だが、幅の狭い縦長の画像主体で組まれているので、SPでもほぼそのまま1カラムにする
• PCでは中央に約480〜750pxの列を置き、左右は淡いテーマ色で埋める
• SPでは2×2カードを維持する。文字が詰まる場合は1列にする
• SPでは3列の特長カードを横スクロールか縦積みにする
• SPでは大見出しを36〜40pxに抑え、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 行書くと起動時に読み込まれる。