DESIGN.md — 水面ブルーと淡ピンクの保湿クリーム LP（Aqua Hydration Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、情報量多め・訴求型
• キーワード: 水面・泡・みずみずしさ・明朝見出し・番号付きこだわり・成分の丸アイコン
• 地の質感: 水面の光や泡、粒子のボケ、パール感のあるグラデーション。白い霞で写真どうしをつなぐ
• 形: 成分や悩みは円形のバッジ。見出しの帯は角丸の小さい四角。こだわり番号は上辺が半円のタブ
• 温度感: 青で涼しく清潔に見せ、ピンクやゴールドで肌のぬくもりを足す。全体はやや涼しめ

Colors

• 基本は白と淡い水色。保湿の訴求には青のグラデーション地を使う
• ハリ・エイジングの訴求はローズピンク、安全性はゴールド、使い方はクリーム色の地に切り替える
• 悩み提起だけはチャコールの石目調の地にして、暗い円バッジでコントラストをつける
• 見出しの色はセクションの地色に合わせる（青い地なら青、ピンクの地ならローズ、無添加はターコイズ）
• 本文で強調したい部分は太字にして、黄色かローズの文字色をつける
• heading-band は文字 #FDFDFD × 背景 #1BA2B3 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#15808D、4.58:1）を使う。
• ingredient-bubble は文字 #FDFDFD × 背景 #629EC3 のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3D7BA0、4.55:1）を使う。
• test-card は文字 #493F3D × 背景 #C2A06A のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#C7A877、4.51:1）を使う。

Typography

• 大見出しは明朝体で画面幅いっぱいに大きく組む。数字や漢字を大きくして、ひらがなは小さくする
• 見出しの文字に白い光彩か薄い影をつけ、写真の上でも読めるようにする
• 帯の見出しはゴシックの白抜き文字にする
• 手書き書体は吹き出しと縦書きのコピーだけに使う
• 注釈には＊を付け、本文より小さく薄い色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分アイコンは 5/4/4 個、無添加の円は 4 列で並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面幅いっぱいに配置し、テキストは左右に約 5% の余白をとる
• こだわりの各ブロックは、番号タブ→見出し→図解→本文→注釈の順に並べる
• 見出しの下には必ずビジュアルを入れ、本文は 3〜4 行に収める
• 注釈はブロックの右下か本文の直下に置く

Elevation & Depth

• カードには薄い影（0 4px 12px rgba(0,0,0,.08)）をつける
• 泡や円バッジは光沢と内側の影で立体感を出す
• 写真どうしの境目は白い霞のグラデーションでなじませる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は四角く裁ち落とすか円形に切り抜く。成分の写真は正円にする
• セクション境界: 白い霞のグラデーションか、上辺が半円になった番号タブでつなぐ
• 悩みや成分を示すバッジは正円にする
• 見出しの帯は角丸 4px の長方形にする
• カードの右上の角を折り返した紙のように見せる装飾を使う
• 無添加は円に斜線を引いた禁止マークで表す

Components

• こだわり番号タブ（number-tab）: 上辺が半円の白いタブに、小さなラベルと明朝の数字を入れる
• 帯見出し（heading-band）: ターコイズか青の帯に白文字を入れる。左右に斜線を添えた小さなリードと組み合わせる
• 悩みの円バッジ（worry-circle）: チャコールの墨のような円に白文字で悩みを書き、人物写真のまわりに散らして置く
• 成分の泡バッジ（ingredient-bubble）: 青い球体や透明な泡の中に成分名を入れる
• 成分写真のアイコン（ingredient-icon）: 正円に切り抜いた植物や素材の写真の下に、小さい成分名を添える
• 無添加マーク（free-from-mark）: ターコイズの線の円に斜線を引き、中に成分名を入れる
• テスト済みカード（test-card）: ゴールドの枠の中に、白い角丸カードを 3 つ横に並べる
• 手書きの吹き出し（speech-bubble）: 線画の吹き出しに手書き書体で短い言葉を入れる
• 比較ラベル（compare-label）: 肌の断面図の下に置く、線だけのピル型ラベル（青と茶）

Do's and Don'ts

Do - 保湿の訴求には水面・泡・水滴のビジュアルを必ず入れる - 大見出しは明朝体で大きく組み、セクションの色に合わせる - 成分や悩みは円形のバッジにして視覚的に並べる - こだわりは番号タブで区切り、上から順に読めるようにする - 効果をうたう表現には注釈の＊を付け、ページ下部か本文直下に小さく載せる

Don't - 原色の赤や黒を大きな面で使わない（悩み提起のセクションは例外） - 見出しを細いゴシックだけで組まない - 角ばった太い枠や影の強いカードを多用しない - 本文を長く続けず、1 ブロック 4 行程度に収める - 手書き書体を本文に使わない

Page Structure

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

1. ファーストビュー（保湿の持続力と商品を一目で伝える）: 水面の写真を地にして青の明朝で大コピーを置く。人物を円形に切り抜き、商品と成分の泡バッジを並べる
2. 悩みの提起（読者の肌悩みに共感する）: チャコールの石目調の地に人物写真を置き、暗い円バッジで悩みを 4 つ並べる
3. 原因の説明（肌のバリア機能が乱れていることを説明する）: 角を折った紙のようなカードに肌の断面図を 2 つ並べて比べる。キーワードは茶系の文字色で強調する
4. 解決の提示（クリームで解決できることを示す）: 斜線を添えた小見出しとターコイズの帯を置き、大きな明朝見出しの下に人物と商品の写真を合わせる
5. こだわりの導入（特長の数を示す）: 白地に英字の飾りタイトルを置き、青で大きく数字見出しを組む
6. 特長1・2（テクスチャーと保湿成分を伝える）: 青のグラデーション地に番号タブを置く。ジェルの質感写真、泡の成分バッジ、断面図を並べる
7. 特長3（エイジングケア成分の多さを伝える）: 白い光の地にローズの明朝見出しを置き、正円の成分写真をグリッドで並べる。注目成分はピンクベージュのカードで解説する
8. 特長4（外からの刺激への対策を伝える）: 虹色のパール調の地に、禁止マークを重ねた円形写真を 2 つ並べる
9. 情緒カット（使ったあとのイメージを伝える）: 人物写真を画面幅いっぱいに置き、縦書きの大きなコピーと手書きの吹き出しを添える
10. 無添加（肌へのやさしさを示す）: ターコイズの二重線とタブ見出しで囲み、禁止マークの円を 4 列で並べる
11. 安全性テスト（安心感を補強する）: ゴールドの枠の中に白いカードを 3 つ並べ、下に注釈を添える
12. 全成分（成分を正確に開示する）: 白地に小さい文字で詰めて組む
13. 使い方（使う手順を説明する）: クリームと黄色の光の地に英字セリフ体のタイトルを置き、イラストと本文を左右に並べる。最後は白抜き文字の帯で締める

Imagery

• 水面のゆらぎ、泡、水滴のボケを背景に重ね、みずみずしさを出す
• 人物は 30〜40 代の女性が頬に手を添えるポーズ。明るい自然光で撮る
• 肌の断面図はピンクとベージュのやさしいイラストで描く
• 成分は植物などの素材写真を正円に切り抜く
• 使い方の説明は淡い色の線画イラストで描く
• ジェルやクリームの質感は、白背景に光沢を出したマクロ写真で見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 480〜750px のカラムを置き、SP の構成をそのまま使う
• 背景の水面やグラデーションは左右いっぱいまで延ばす
• 成分アイコンは PC では 1 行に 6〜7 個並べる
• 見出しの文字サイズは SP の 1.3 倍程度を上限にする

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