DESIGN.md — 透明感ブルー×白の発光系UVコスメLP（Clear Aqua Glow Skincare UV LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、情報量多め・訴求型、信頼・誠実
• キーワード: 透明感・発光する青文字・水彩の筆跡・水玉の泡・白い余白・医療の信頼感
• 地の質感: 淡いグレーのグラデーションに水面や光のにじみを重ね、ガラスや泡のような透けた質感を出す
• 形: 角丸 8〜12px のカード、平行四辺形の青帯、丸い泡型のバッジ、左端の青い縦線
• 温度感: 寒色寄りで涼しい。香りのパートだけ生成りの暖色に切り替える

Colors

• 地は白と淡いグレーを交互に使い、青は見出し・帯・線にしぼる
• 大きな見出しは青の文字に白〜水色の光彩を付けて光って見せる
• 成分の色は泡ごとに淡い水色・ピーチ・ミントで分け、彩度は低めにする
• 医師監修は青緑の帯とグレーの地にして、医療らしい落ち着きを出す
• 香りパートだけ生成りと金茶の暖色に切り替え、上品なムードにする
• 赤やオレンジの強い色はボタン以外に使わない
• slant-band は文字 #F2F2E7 × 背景 #0197FE のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0171BE、4.54:1）を使う。
• bubble-badge は文字 #0197FE × 背景 #FDFDFD のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0171BE、4.6:1）を使う。
• spec-pill は文字 #0197FE × 背景 #FFFFFF のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0171BE、4.57:1）を使う。

Typography

• 特大の訴求ワードは明朝体にし、青の文字に白い外光を付ける
• 見出しの中で、強調する語だけ文字を大きくして文字サイズに強弱を付ける
• セクションの端に欧文ラベルを字間広めの縦書きで置く
• 本文は 12px 前後で行間を 1.8 にし、左揃えで短く改行する
• 数値（SPF など）は太いゴシックにして白いピルの中に入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードは 2 列、成分の写真は 4〜5 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 各訴求セクションは白いパネルの左端に青い縦線を付けて区切る
• 人物の写真を片側に寄せ、反対側に見出しと本文を重ねる
• 成分の泡は大きさをそろえず、ずらして浮かんでいるように並べる
• セクションの区切りに青い全幅帯や水色の見出し帯を挟む

Elevation & Depth

• カードには薄い青みの影（0 4px 12px rgba(40,120,200,0.15)）を付ける
• 白い数値ピルには軽いドロップシャドウを付けて浮かせる
• 写真フレームは少し傾けたポラロイド風にし、影を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は角版か、背景に溶け込ませる切り抜き。成分は円形の泡に入れる
• セクション境界: 直線で区切り、青い全幅帯を挟む。斜めの平行四辺形の帯も使う
• 機能バッジは円形の泡型にし、中に小さな英字の筆記体を添える
• 前置きの見出しは水彩の筆跡の上に乗せる
• 成分カードは細い水色の枠で囲み、角丸 10px にする

Components

• 発光見出し（glow-headline）: 青い明朝の特大文字に白い光彩を付け、前に水彩の筆跡の前置きを乗せる
• 水彩の筆跡ラベル（brush-lead）: 水色の水彩の筆跡の上に、2 行の前置き見出しを中央に置く
• 青い斜め帯（slant-band）: 平行四辺形の青い帯に白抜き文字で機能名を載せる
• 泡型の機能バッジ（bubble-badge）: 半透明の水色の円の中に、機能名と小さな英字を縦に積む
• 成分カード（ingredient-card）: 水色の枠のカード。成分名・英名・説明を入れ、2 枚の間に＋の丸を置く
• 数値ピル（spec-pill）: 白いピルに太い青文字で SPF などの数値を大きく見せる
• 医師プロフィール（doctor-profile）: 左に角版の顔写真、右に所属と氏名を区切り線と英字併記で並べる
• 水色の見出し帯（section-title-bar）: 全幅の水色の帯に明朝の見出しと、波線付きのサブ見出しを載せる
• 香りの紙タグ（scent-tag）: 生成りの縦長タグに、香りの段階を筆記体の英字の見出しと和文で並べる

Do's and Don'ts

Do - 白と淡いグレーを基調にし、青は要所だけに使って透明感を保つ - 大見出しには必ず光彩を付けて、肌が明るく見える印象を出す - 成分は泡や水滴のモチーフで、透けて見えるように表現する - 訴求セクションごとに前置き・大見出し・本文・補足カードの型をそろえる - 英字の縦書きラベルで、洗練された雰囲気を足す

Don't - 濃い原色の地を広い面に使わない - 見出しをすべてゴシックにしない（明朝との対比が要） - 角の立った硬い枠や太い黒線を使わない - 泡やカードに強い影を付けて重く見せない - 香りパート以外で暖色を主役にしない

Page Structure

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

1. ファーストビュー（商品と 2 つの価値を一目で伝える）: 水面のような淡い青の地に商品ボトルを斜めに置き、右に大きな明朝の見出しと白いラベルを置く
2. メインビジュアル訴求（機能の全体像をまとめて示す）: 人物と商品を並べ、青い発光文字と斜め帯で機能を積む。右に泡型のバッジを縦に並べ、下に青い帯で仕様を載せる
3. 特長1（スキンケア）（保湿成分の価値を伝える）: 前置きの筆跡・大見出し・人物写真を置き、色違いの泡 3 つで成分を説明する
4. 配合成分の一覧（成分数の多さを見せる）: 青帯の見出しの下に、水滴を中心にして泡に入れた成分を円く配置する
5. 特長2（美白）（美白成分を説明する）: 左に青い縦線を付けたパネル。人物写真に発光見出しを重ね、2 枚の成分カードを＋でつなぐ
6. 特長3（メイクキープ）（付加価値を伝える）: 人物を右に寄せ、左に見出しと本文を置く。下に補足のバリアカードを付ける
7. UVの性能（数値で防御力を証明する）: 青空の写真をポラロイド風に傾け、白いピルに数値を積む
8. 髪への効果（使える範囲の広さを示す）: 笑顔の人物に悩みの泡を重ね、矢印で解決のカードへつなぐ
9. 医師監修（信頼性を担保する）: 青緑の帯の下のグレーの地に見出しを置き、医師のプロフィール 2 名と商品ボトルを並べる
10. 天然由来成分（原料の安心感を伝える）: 水色の見出し帯の下に、切り抜いた果実・生薬の写真を名前付きで格子状に並べる
11. 香り（使う楽しさと上品さを伝える）: 生成りの地に金茶の欧文ラベルを置き、花束の写真に香りの紙タグを重ねる

Imagery

• 人物は透明感のある肌のアジア系女性。白い衣服で、柔らかい自然光で撮る
• 商品ボトルは白いマットな質感。斜めに置くか、立てて配置する
• 成分は半透明の泡や水滴の3D表現。淡い色付きのハイライトを入れる
• 水彩の筆跡、光のフレア、水面の揺らぎを背景のアクセントにする
• 原料は白背景に切り抜いた写真。影は控えめにする
• 香りは白い花束と緑を、暖色の柔らかいトーンで撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため、PC では中央に 600〜750px 幅の 1 カラムで置き、左右は淡いグレーの地にする
• PC では人物と見出しの横並びを保ったまま、余白を 1.5 倍にする
• 成分の格子は PC では 1 行に 6 列まで広げる
• 特大の見出しは PC で 80px 程度まで拡大する

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