DESIGN.md — 透明感ブルー×白の洗顔料スキンケアLP（Clinical Clear Blue Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、クール・先進的、シンプル・ミニマル
• キーワード: 透明感・クリニカル・泡・くすみブルー・明朝グラデーション・ガラス質感
• 地の質感: 白い泡やガラス、濡れた肌のつやを大きな写真で見せる。地は白〜淡い水色のグラデーションで、柔らかく光が回っている。
• 形: 成分写真は円形のガラス皿風に切り抜く。特長は丸バッジ、悩みは白いピル型吹き出し。角ばったラベルは小さな四角。
• 温度感: やや寒色寄りで涼しく、肌写真で少し温かみを足す

Colors

• 地は白と淡い水色を交互にし、境目はグラデーションでなじませる
• 大見出しのキーワードはくすみブルー、続く文はグレーで書いて差をつける
• 見出しの青は上から下へ濃くなるグラデーションにする
• 特長バッジは青の円形グラデーションにし、文字は白にする
• 価格帯だけ彩度の高いアクアブルー地にして目立たせる
• ゴールドは実績メダル 1 点だけに使う
• feature-circle は文字 #EAFDFE × 背景 #4F7FA3 のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4A7799、4.55:1）を使う。
• ingredient-label は文字 #EAFDFE × 背景 #658FAF のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4E7796、4.54:1）を使う。
• price-block は文字 #EAFDFE × 背景 #4FB3D3 のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#267B96、4.59:1）を使う。

Typography

• 大見出しは明朝体にし、キーワードを大きく、助詞を小さくする
• キーワードには青のグラデーションをかけ、それ以外の語はグレーにする
• 成分の注釈番号は見出し・本文とも右上に小さく付ける
• 本文はゴシック体の細めのウェイトで行間を広くとる
• タグラインはゴシック体で字間を広くとる
• 見出しは左揃えと右揃えを交互にしてリズムを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面端まで裁ち落とし、テキストはその上や横に重ねる
• 成分紹介は円形写真 2 枚を左上と右下に互い違いに置く
• 特長の丸バッジは縦に重ねて並べる
• 各セクションの末尾に注釈をまとめる
• 本文ブロックは左右どちらかに寄せ、写真との余白を活かす

Elevation & Depth

• 吹き出しには薄く柔らかい影を付ける
• 円形の成分写真は白いガラス縁とぼかした影で浮かせる
• 丸バッジは影を付けずグラデーションだけで立体感を出す
• メダルは金属調で、少しだけ影を付ける

Shapes

• 角丸: 小 2px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物と泡は全幅の角版。成分は円形のガラス皿風に切り抜く
• セクション境界: 直線か、背景グラデーションでなめらかにつなぐ
• 悩みの吹き出しはピル型で、しっぽを付ける
• 成分ラベルは角丸ほぼなしの四角い青帯
• 特長は正円のバッジ
• 本文を載せる白カードは角丸大きめ

Components

• 悩み吹き出し（worry-bubble）: 白いピル型の吹き出しに、悩みを短い問いかけにして 4 つ縦に並べる。写真の上に重ねる
• 特長丸バッジ（feature-circle）: 青グラデーションの正円に、線画アイコン・明朝見出し・小さな説明を入れる。縦に 3 つ並べる
• 成分ラベル（ingredient-label）: 円形写真の縁に重ねる小さな四角い青帯ラベル
• グラデ明朝見出し（gradient-heading）: キーワードを青グラデーションの大きな明朝体にし、続く言葉はグレーで小さくする
• 下線付き見出し（underline-heading）: 写真の上に置くキーワードに、細い青線を下線として引く
• 説明カード（body-card）: 写真の上に置く白い角丸カード。中央揃えで本文を入れる
• 価格ブロック（price-block）: アクアブルーの帯に商品名・容量、白枠のラベル、大きな明朝体の価格を並べる
• 実績メダル（achievement-medal）: 金の縁取りがある白い円形メダル。販売実績を短く書く
• 注釈（footnote）: 成分の注釈番号と説明を、セクションの下に小さく並べる

Do's and Don'ts

Do - 白と淡い水色の地を保ち、透明感を最優先にする - 見出しは明朝体にし、キーワードに青のグラデーションをかける - 泡・水滴・素肌の写真を全幅で大きく使う - 成分写真は円形のガラス皿風にそろえる - 注釈番号と注釈文をきちんと入れ、信頼感を出す

Don't - 赤やオレンジなど暖色の強い色を CTA や見出しに使わない - ポップな丸ゴシックや太いゴシック体を見出しに使わない - 要素を詰め込んで余白をなくさない - 影の濃いカードや太い枠線を使わない - ゴールドを何か所にも散らさない

Page Structure

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

1. ブランドイメージ（シリーズの世界観を示す）: ボトルをガラス玉越しに写したビジュアルの下に、字間の広いタグラインとロゴを置く
2. ファーストビュー（商品の価値を一言で伝える）: 泡で洗う人物の写真の右側に、青グラデーションの明朝キャッチと小さな商品写真を置く
3. 悩みの提起（ターゲットの不安に共感する）: 人物写真の上に白いピル型の吹き出しを 4 つ並べ、下の白カードで解決策を示す
4. 商品紹介・特長要約（3 つの特長をまとめて見せる）: 淡い水色の地に、商品と泡の写真、右側に青い丸バッジを 3 つ縦に並べる
5. 成分の特長 1（成分の働きを説明する）: 右寄せの明朝見出しと、円形の成分写真 2 枚、青ラベル、左寄せの本文
6. 成分の特長 2（吸着成分の働きを説明する）: 左寄せの見出しにし、円形写真と右寄せ本文、最後に注釈を置く
7. 泡の特長（使い心地を伝える）: 泡を持つ手の全幅写真に、下線付き見出しを重ね、下に本文を置く
8. イメージ写真（使った後の肌の状態をイメージさせる）: 濡れた素肌のアップ写真を全幅で入れる
9. オファー・価格（購入の後押しをする）: 人物写真に大キャッチと実績メダルを重ね、アクアブルーの帯に商品・価格を置く

Imagery

• 白い背景に、柔らかい光で撮った素肌の人物アップ写真
• 濃密な白い泡を手や顔に乗せた質感の写真
• 成分の原料（粉・果物・炭など）を真上から撮り、ガラス皿風の円で切り抜く
• 白いボトルに水滴と泡を添えた商品写真
• ガラス玉や水の反射で透明感を出す
• アイコンは細い白線の線画を円の中に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はスマホ幅の縦長デザインを PC の中央に置いた構成。PC でも幅 480〜640px 程度の中央カラムで表示する
• PC では左右の余白を淡いグレーや水色の無地で埋める
• SP では見出しを 28〜44px にし、改行位置を固定する
• 丸バッジは SP では幅の 40% 程度にし、縦に並べる

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