DESIGN.md — ベビーラベンダーの韓国コスメ日焼け止めLP（Baby Lavender Dreamy K-Beauty Sunscreen LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、かわいい、上品・高級、清潔・爽やか
• キーワード: ベビーラベンダー・パステル・欧文セリフ・モデルビジュアル・韓国コスメ・データ訴求
• 地の質感: 小さなハート柄の壁紙、柔らかい拡散光、マットでパウダリーな質感
• 形: 四角の写真ブロックと角丸の白いカード、ピル型のタグ
• 温度感: やや青みのある冷たいパステルで、甘さは控えめ

Colors

• 地はラベンダーグレーとピンク寄りラベンダーを、セクションごとに交互に使う
• 見出しや数値の強調は primary の紫1色にまとめる
• データや図解は白いカードにのせて、地との差を作る
• 黒やビビッドな色は使わない。本文はダークグレーにする
• 比較のグラフでは、使用前をグレー、使用後を紫の濃淡で塗る
• モデルの服は青、肌はピンクにして、全体が紫系になじむ写真を使う
• highlight-band は文字 #FFFFFF × 背景 #A29ED0 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#726CB8、4.61:1）を使う。
• feature-grid は文字 #8882B6 × 背景 #EDE4F7 のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6860A2、4.5:1）を使う。
• pill-combo は文字 #8882B6 × 背景 #EDE4F7 のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6860A2、4.5:1）を使う。
• before-after は文字 #8882B6 × 背景 #FFFFFF のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6860A2、4.53:1）を使う。
• ingredient-circle は文字 #59595B × 背景 #A29ED0 のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#726CB8、4.55:1）を使う。

Typography

• 欧文セリフの大見出しは、字間を詰めて2行に積む
• Point見出しは、リード文（中太）の下に強調行（太字・紫）を置く2段構成にする
• 見出しはすべて中央揃えにする
• 注釈は極小のグレー文字で、左揃えにまとめる
• 写真の上に置く欧文には白またはprimaryを使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。特長の一覧だけ2列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅か、左右に約16pxの余白をとって配置する
• 特長は2×2のグリッドにし、点線で区切る
• グラフカードは縦に積み、間を約24pxあける
• Point章ごとに背景色を切り替える
• 比較表は3列または2列のセルで作る

Elevation & Depth

• カードは影なしか、ごく薄い影にする
• 白カードと淡い地の明度差で階層を表す
• 製品写真には床に落ちる柔らかい影だけを付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は四角く切り抜き、角は直角か小さな角丸にする
• セクション境界: 直線で、背景色の切り替えだけで区切る
• タグや組み合わせ表示はピル型の枠で囲む
• 成分アイコンは淡紫の円の中に線画で描く
• 比較写真のAfter側だけを紫の枠で囲む

Components

• Point見出し（point-heading）: 欧文の番号、グレーのリード文、紫太字の見出しを中央に縦に並べる
• 帯ハイライト見出し（highlight-band）: 紫の帯に白文字を載せて、キーワードを強調する
• 棒グラフカード（chart-card）: 白カードの中で、前後比較の2本の棒と中央の大きな%数値を見せる
• 4ポイントグリッド（feature-grid）: 2×2のセルを点線で区切り、欧文番号・説明・紫太字を入れる
• ピル型組み合わせタグ（pill-combo）: 淡紫枠のピルを2つ「+」でつなぎ、成分やカラーの組み合わせを示す
• ビフォーアフター比較（before-after）: 左右に並べた写真の下にラベルを付け、After側を紫枠で強調する
• チェックリストカード（check-list）: 白カードに紫のチェックボックス付きで項目を並べ、下に認証ロゴを置く
• 成分サークル（ingredient-circle）: 淡紫の円に線画アイコンを入れ、3つを「+」でつなぎ、欧文名と説明を添える
• ラインナップ比較表（compare-table）: 商品画像の下に罫線の表を置き、ドットの段階評価と色付きタグで比べる

Do's and Don'ts

Do - 地にはラベンダー系の淡色を使い、強調は紫1色に絞る - 大見出しは欧文セリフを大きく使う - 数値はグラフと大きな数字で見せる - 試験条件の注釈を各データの直下に必ず置く - モデル写真とテクスチャー写真を交互に入れ、リズムを作る

Don't - 原色の赤やオレンジのボタンを置かない - 黒い背景や太い黒線を使わない - 和文の見出しに明朝体を使わない - 装飾的なグラデーションを文字に使わない - 情報を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（世界観と商品名の印象づけ）: ハート柄の壁紙の前に座るモデルの全身写真。上部に紫の欧文セリフ大見出し
2. 商品紹介（商品の名称と特徴タグの提示）: 欧文と和文の名称、モデルの顔のアップ、ハッシュタグ風の特徴、製品の物撮り
3. イメージビジュアル（色とテクスチャーの訴求）: 顔のアップの上に白抜き欧文、帯ハイライト見出し、クリームのテクスチャー写真2枚
4. 4つの特長（要点の一覧）: クリームを一筋伸ばした写真の下に、2×2のPointグリッド
5. Point1 データ（持続効果の証明）: Point見出しと白い棒グラフカード3枚、その下に注釈
6. Point2 色の理論（補色効果の説明）: 十字矢印の図解カード、ピル型の組み合わせ、ビフォーアフター
7. Point3 耐水性（試験結果の提示）: 紫の地にモデル写真と泡の装飾。白いカードに試験書の抜粋
8. Point4 テクスチャー（使用感の説明）: 塗布写真と、肌断面のイラスト図解
9. 低刺激・成分（安心感）: モデル写真に欧文見出し、チェックリストカード、成分サークル3つ
10. UVカット試験（数値の根拠）: 試験書画像の下に紫の帯と大きな数値の2列カード
11. ラインナップ比較（シリーズの比較）: グレーの帯見出しの下に商品画像と罫線比較表。ドット評価と色タグを使う

Imagery

• モデルはパステルの壁紙と床の前で撮る。青い服でラベンダーの空間になじませる
• 光は柔らかく拡散させ、全体を紫寄りの色調に補正する
• 製品はラベンダーのグラデーション背景に置き、床の影を柔らかく出す
• クリームを一筋伸ばしたテクスチャーをマクロで撮る
• 図解は淡紫・青・ベージュのフラットなイラストで描く
• シャボン玉状の透明な泡を装飾として散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅480〜750px程度のカラムを置き、左右は淡いラベンダーの地で埋める
• グラフや比較表はPCで横並びにしてもよい
• 大見出しの欧文はPCで最大96px程度まで拡大する
• 注釈の文字はPCでも10px以上を確保する

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