DESIGN.md — 桃色水彩にじみのフェムケア化粧品 LP（Watercolor Blush Femcare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、かわいい、ナチュラル
• キーワード: 水彩にじみ・コーラルピンク・ラベンダー差し色・半透明カード・広い字間・手描きイラスト
• 地の質感: 紙に絵の具がにじんだような水彩テクスチャ。かすれた筆跡の帯や、泡のような半透明の円を重ねる
• 形: 角の柔らかい半透明カード、にじんだ円形の塗り、筆で描いたラフな帯
• 温度感: 暖色寄り。ピンク・ピーチが主で、ラベンダーで少しだけ冷たさを足す

Colors

• 地は白と水彩ピンクの 2 種類だけにし、セクションごとに交互に切り替える
• 見出し・強調数字・本文はサーモン系の暖色で統一し、黒は使わない
• ステップ1はローズピンク、ステップ2はラベンダーで色を分ける
• 強調したい文はピーチ色のマーカーを文字の下半分ではなく行全体に敷く
• 補足説明や使い方はグレーに落として、情報の階層をつける
• ラベンダーは差し色にとどめ、面積は全体の 1 割以下にする
• page は文字 #CA8C87 × 背景 #FFFFFF のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#B45D55、4.53:1）を使う。
• worry-card は文字 #C75F56 × 背景 #FEF4F3 のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF493F、4.59:1）を使う。
• marker-text は文字 #CA8C87 × 背景 #FCEFEA のコントラスト比が 2.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#B45D55、4.56:1）を使う。
• watercolor-circle は文字 #FBFEFE × 背景 #D1838B のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BE515C、4.58:1）を使う。
• step-label は文字 #D1838B × 背景 #FFFFFF のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BE515C、4.55:1）を使う。
• brush-band は文字 #C75F56 × 背景 #FFFFFF のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF493F、4.54:1）を使う。

Typography

• 見出しは小見出しと主見出しの 2 段にし、中央揃えにする
• 本文は字間を 0.1em 以上とってゆったり見せる
• 英字は細く幾何学的な書体で、飾りとして添える
• 数字は大きく太くし、単位は小さく右下に添える
• 本文は左揃え。見出しだけ中央揃えにする
• 見出しの太字はサーモン色で書き、縁取りは付けない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 悩みカードは 3 個＋2 個の段組にし、中央に寄せる
• セクションの上下に水彩のにじみを大きくかぶせて境界をぼかす
• ステップは大きな水彩円と商品写真を左右に重ねて配置する
• 成分のフリー表記は打ち消し線付きの単語を 3〜4 列に流して並べる
• テスト済みなどの項目は、筆で描いたような白い帯を縦に積む
• 本文ブロックの左右の余白はおよそ 24px にする

Elevation & Depth

• 影はほぼ使わず、半透明の重なりで奥行きを出す
• カードは白 60% 程度の半透明にして、背景の水彩を透かす
• 商品写真にだけ、接地感の出る淡い影を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を切り抜いて配置。人物と下着は手描きイラストにする
• セクション境界: 水彩のにじみやかすれた筆跡で不規則にぼかした境界
• 悩みカードは角丸 10px 前後のほぼ正方形にする
• ステップの見出しは不定形の水彩円の中に置く
• ステップ番号のラベルは、筆で塗ったような白い帯にする
• 直線の罫線や枠は使わない

Components

• 悩みカード（worry-card）: 半透明の白い四角に、悩みを 2〜4 文字で大きく入れる
• 2 段見出し（heading-two-tier）: 小見出しの下に大きい主見出しを中央揃えで置く
• マーカー強調（marker-text）: 本文中の要点の行にピーチ色の帯を敷く
• 水彩円バッジ（watercolor-circle）: にじんだ円の中に白文字で動詞を置き、ピンクとラベンダーの 2 色を使い分ける
• ステップラベル（step-label）: 白い筆の帯に、細い英字でステップ番号を書く
• 筆の帯リスト（brush-band）: かすれた白い帯に、処方の特長を 1 行ずつ中央揃えで入れる
• 倍率比較の行（stat-row）: イラストから点線を引き出し、部位名と大きい数字を並べる
• 無添加リスト（strike-free-list）: グレー文字に手描き風の打ち消し線を重ねた単語を並べる

Do's and Don'ts

Do - 背景には必ず水彩のにじみを使い、手描きの温かさを出す - 白地と水彩地を交互に並べてリズムをつくる - ステップごとに色を分けて、2 段階のケアをわかりやすくする - 文字は字間を広げ、ゆったり読ませる - 強調はマーカーと文字の大きさで行う

Don't - 黒文字や原色の赤を使わない - 直線の枠やはっきりした影のカードを使わない - 写真の人物を出さず、身体の表現はイラストに置き換える - 濃い色のベタ塗りセクションを作らない - ボタンや装飾にメタリックやグラデーションの光沢を付けない

Page Structure

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

1. ファーストビュー（商品カテゴリを伝え、2 本セットの商品を見せる）: 水彩背景の上部に白い大見出し、中央に切り抜いた商品 2 本を置き、周りに円形の英字ロゴタイプを回す
2. 悩みの提起（対象となる悩みを短い言葉で 5 つ示す）: 半透明の悩みカードを 3 個＋2 個で並べ、下に注釈を添える
3. 問題の説明（部位が敏感であることを伝える）: 白地に 2 段見出しとマーカー入りの本文を置き、物干しに下着が並ぶイラストを添える
4. データ比較（吸収率の高さを数字で示す）: 水彩地に女性のイラストを置き、点線で部位名と大きな倍率の数字につなぐ
5. 解決策の提示（2 段階のケアを提案する）: 2 段見出しと薄い英字、ピンクとラベンダーの水彩円を & でつないで並べる
6. 商品詳細（ステップ1）（洗浄料の特長と使い方を伝える）: ピンクの大きい水彩円に白い動詞、横に商品と泡の写真。下に英字の商品名、本文、使い方を続ける
7. 商品詳細（ステップ2）（美容液の特長と使い方を伝える）: ラベンダーの水彩円で同じ型をくり返し、本文もラベンダー色にする
8. 処方の安心感（テスト済みであることや低刺激を伝える）: 水彩地に白い筆の帯を縦に積み、成分の注釈を小さく添える
9. 無添加の訴求（配合していない成分を示す）: 白地に打ち消し線付きの単語を並べ、手のひらのイラストを置く
10. 香りの紹介（香りの魅力を伝える）: 水彩地に商品を中央に置き、左右に白い花とハーブのイラストを散らす

Imagery

• 背景はピンク・ピーチ・ラベンダーの水彩を、大きな筆の跡でにじませて描く
• 商品は白背景で撮影して切り抜き、正面から見せる
• 人物と下着は線の少ない淡い水彩イラストにする
• 泡や水滴は半透明の円として、余白に散らす
• 花は白い花弁と黄色い芯に緑の葉を添えたフラットなイラストにする
• ステップの写真には泡やテクスチャの見本を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文を中央の 640px 前後の幅に収め、左右に水彩背景を広げる
• 悩みカードは PC では 5 個を 1 行に並べる
• ステップは PC で水彩円と商品写真を左右 2 カラムにする
• 見出しは PC で 1.3 倍程度まで大きくする
• 倍率比較は PC でイラストと数字の列を左右に並べる

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