DESIGN.md — 水色と泡が透ける清涼スキンケアLP（Aqua Bubble Clinical Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、クール・先進的、上品・高級、シンプル・ミニマル
• キーワード: 透明感・水滴・泡・ターコイズ・細罫線・筆記体アクセント・成分訴求
• 地の質感: ガラスや水面のつややかな反射。淡いグラデーションの地に半透明の球体が浮かぶ
• 形: 角の立った白カードに細い線を組み合わせる。丸は泡や成分アイコンだけに使う
• 温度感: 寒色寄りで涼しい。白とラベンダーで冷たくなりすぎないようにする

Colors

• 地はラベンダー白（#EEF0FF）と淡い水色で、セクションごとに少しずつ変える
• ターコイズは見出し・数字・筆記体アクセントに使い、本文には使わない
• 濃い水色やシアンの面はファーストビューと購入エリアだけに使う
• 購入ボタンは濃いめのターコイズに白文字。購入ボックスは白で浮かせる
• 成分の写真に色を一点だけ入れる（例：赤）のは可。UIの色は増やさない
• 関連商品はそれぞれの商品色の枠で区別してよい
• point-heading は文字 #2CC5DB × 背景 #DFF2F8 のコントラスト比が 1.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#177785、4.53:1）を使う。
• benefit-icon-tile は文字 #2CC5DB × 背景 #FEFEFE のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#177785、4.54:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #00A1B9 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#008295、4.54:1）を使う。

Typography

• 和文は細めのゴシックで、字間を広めにとる
• 英字ラベルは「POINT 1 | 英語の短文」のように、縦線で区切って並べる
• 筆記体の英字は見出しの下や写真の横に、ターコイズで添える
• 成分名の右上に※番号を小さく付け、注釈はブロックの下にまとめる
• 大きな数字は細いウェイトのターコイズにし、小さな筆記体と組み合わせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードは2列、効能は2列×2段
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• POINT見出しは上下の細罫線で挟み、幅いっぱいに置く
• 成分カードは写真を上、文字を下にする。写真の横に筆記体を縦に置く
• 使い方は線画のイラストと、線の上に乗った番号を組み合わせて4ステップ
• 購入エリアは、シアンの写真背景の上に白い購入ボックスを重ねる
• セクションの間はたっぷり空け、泡のオブジェクトを余白に浮かべる

Elevation & Depth

• カードや購入ボックスは影をつけず、白い面と地の色の差で浮かせる
• 泡やガラス球には光沢と透明感を出し、立体的に見せる
• 商品写真には反射と柔らかい影をつけ、ガラスの台に置いたように見せる

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は正方形〜横長の長方形。人物は顔を寄りで切り抜く。商品は角版の写真か切り抜き
• セクション境界: 直線で区切る。セクションの境目に泡やガラス球をまたがせる
• 購入ボタンは角丸が小さい長方形
• 成分アイコンは円の中に線画のしずく
• 低刺激の特長は細線の円の中に斜線と文字を入れる
• 一覧へ戻るボタンだけピル型の枠線にする

Components

• POINT見出し（point-heading）: 上下の細罫線に「POINT 番号 | 英語」を挟み、下に淡い水色の帯とターコイズの副題を置く
• 成分カード（ingredient-card）: 白いカードの上に成分のマクロ写真、下に成分名と本文。横に筆記体の英字を縦に添える
• 効能アイコンタイル（benefit-icon-tile）: 写真の上に、効能ラベル付きの丸いしずくアイコンを重ねたタイル。下に成分名
• 無添加バッジ（free-badge）: 細線の円に斜線を入れ、中に無配合の項目を書く。横に4つ並べる
• 使い方ステップ（step-number）: 線画イラストの下に、ターコイズの横線とその中央に乗る大きな数字
• 購入ボックス（purchase-box）: 上部にターコイズの見出し帯、商品写真、割引バッジ、価格、ボタンを並べた白いボックス
• 購入ボタン（button-primary）: 幅いっぱいの濃いターコイズのボタンに白文字
• 情報アコーディオン（accordion）: 下罫線だけの行。中央に項目名、右端に＋
• 関連商品カード（series-card）: 商品の色の枠に、写真・商品名の帯・価格・詳細ボタンを入れたカード

Do's and Don'ts

Do - 泡・水滴・ガラスで透明感を全体に通す - 見出しに筆記体の英字を添え、上品さを出す - 成分の根拠は※注釈で丁寧に示す - 余白を広めにとり、一つの画面に一つの要素を見せる - 購入ボックスは白で目立たせ、ボタンはターコイズで統一する

Don't - 暖色の太い文字や、ギラついた赤い強調で煽らない - カードに重い影や太い枠線をつけない - ピル型のポップなボタンを多用しない - 本文を太字やターコイズでベタ塗りしない - テクスチャのない真っ白な地を続けない

Page Structure

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

1. ファーストビュー（商品の世界観と効能を一目で伝える）: 水色の地にガラスの台と球を置き、商品パッケージを中央に。上にロゴとキャッチ、右に円形の効能バッジ
2. 悩みの提起（肌の悩みへの共感を得る）: 左に短い見出しと説明、右にマスクを着けた横顔の写真。背景に大きな英字を透かす
3. 成分の導入（成分へ話をつなぐ）: 宙に浮かぶ商品と泡、曲線。下に見出しと筆記体の英字
4. 特長1（成分）（主な成分の働きを説明する）: POINT見出しの下に、2列の成分カード
5. 特長2（保湿成分）（保湿・整肌の成分を並べる）: POINT見出しの下に、アイコン付きの写真タイルを4つ並べる
6. 特長3（シート）（使い心地を伝える）: とろけるシートの写真、筆記体、構造の図解
7. 低刺激の訴求（毎日使える安心感を伝える）: 大きな商品写真の下に大きな数字、短いコピー、無添加バッジ4つ
8. 使い方（使う手順を伝える）: 枠付きのタイトルの下に、線画と番号で4ステップ。下に補足の白い帯
9. 購入（定期購入と通常購入へ誘導する）: シアンの写真背景に商品、右に白い購入ボックスを2つ
10. 商品情報（全成分や注意事項を補足する）: 罫線のアコーディオンを2行
11. 関連商品（シリーズの他の商品へ回遊させる）: 色とりどりの商品とカラーボールの写真、筆記体の見出し、商品カード3枚、ピル型のリンク

Imagery

• 商品は水面やガラスの台に置き、青白い光の反射を入れて撮る
• 成分は水滴・ジェル・泡のマクロ写真。白〜水色のトーンでそろえる
• 背景にCGの半透明の球体や、細い曲線を浮かべる
• 手順は細い黒の線画の人物に、ターコイズの部分色を入れる
• 人物は肌の質感が伝わる、白背景での顔の寄り
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央480px相当の幅で、背景だけ全幅にする構成。SPでもほぼ同じ組み方にする
• SPの成分カードは2列のまま。文字が窮屈なら1列にする
• 効能タイルはPCの4列から、SPでは2列×2段にする
• 購入エリアはSPでは商品写真を上、購入ボックスを下に縦に積む
• 関連商品カードはSPでは横スクロールか、縦に積む

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