DESIGN.md — 水彩ラベンダー×くすみピンクの女性向けサプリLP（Soft Watercolor Lavender Femtech Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、かわいい、ナチュラル、親しみ・手作り感
• キーワード: 水彩にじみ・ラベンダー・くすみピンク・手描きイラスト・ハーブ・白カード
• 地の質感: 水彩のにじみ・白木目・淡いグラデーション背景。全体に紙っぽい柔らかさがある
• 形: 角丸カード、円形の写真切り抜き、ハート形、雲形の吹き出し
• 温度感: 暖かくやさしい中間色。彩度は低めで、パステル寄り

Colors

• 基本は白地とグレー地を交互に敷き、水彩の淡色を背景に重ねる
• ラベンダーはQ&A見出し帯・バッジ・成分セクション背景に使う
• くすみピンクは強調ワード・ハート・実績帯など、感情や信頼の訴求に限って使う
• 数値の訴求だけ黒板グリーンを使い、白い文字で引き締める
• 彩度の高い原色は使わない。どの色も白を混ぜたトーンにする
• badge-circle は文字 #FEFEFE × 背景 #9A85B5 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#846AA5、4.54:1）を使う。
• label-tag は文字 #FEFEFE × 背景 #A893C4 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8568AD、4.55:1）を使う。
• faq-item は文字 #FEFEFE × 背景 #A893C4 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8568AD、4.55:1）を使う。
• trust-band は文字 #FEFEFE × 背景 #D39DAB のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B45870、4.56:1）を使う。

Typography

• 見出しは字間を広めにとり、助詞だけを小さくしてリズムを出す
• 成分名の横には欧文スクリプトの装飾文字を半透明で重ねる
• 数値は明朝、単位は小さく組む
• 吹き出しの文字は手書き風の書体で2〜3行に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードは写真と文字の左右交互配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 大見出しは中央揃えにし、上下に水彩の装飾を置く
• 成分カードは写真と文字を半分ずつに分け、左右を交互に入れ替える
• 丸い写真と白いラベルカードは少し重ねて散らす
• Q&Aは紫の帯（Q）と白い本文カードの組み合わせを縦に積む

Elevation & Depth

• 白カードにはごく薄いぼかし影（0 2px 8px rgba(0,0,0,.08)）を付ける
• ラベルカードは写真の上に重ね、浮いて見える程度の影にする
• 強い影や立体ボタン表現はしない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 円形の切り抜き、角丸の長方形、ハート形のフレーム
• セクション境界: 水彩のにじみや雲形で境界をぼかす。直線では切らない
• カードは8px前後の角丸にする
• バッジは正円かピル型にする
• 悩みは雲形の吹き出しで囲む

Components

• 悩みの雲吹き出し（worry-cloud）: 手描きの女性を中心に置き、雲形の吹き出しに悩みを短く6つ散らす
• 黒板風の数値パネル（chalk-panel）: 木枠つきの深緑パネルに、成分量を白い明朝で大きく表示する
• 無添加の丸バッジ（badge-circle）: 紫の正円に白文字で2行。5つ横に並べる
• 成分カード（ingredient-card）: 写真と白地の文字を半分ずつ配置し、欧文スクリプトを重ねる
• ラベルタグ（label-tag）: 白カードの上辺に付ける紫のタグ
• Q&A（faq-item）: 紫の水彩帯に花形のQアイコンと質問文。下の白カードに点線つきで回答を書く
• 信頼の帯（trust-band）: ピンクの帯に白い枠線のラベルとリボン装飾を重ね、製造の安心感を伝える
• 見出しのマーカー（heading-marker）: キーワードだけを大きくし、その下にピンクの水彩線を引く

Do's and Don'ts

Do - 水彩のにじみや花・ハーブのイラストを余白に散らす - 手描きキャラを語り手として各セクションに登場させる - 成分の写真は自然光の柔らかいものにする - 数値の訴求は黒板パネルに集めて目立たせる - 注釈は小さい文字で必ず添える

Don't - 原色や蛍光色を使わない - 角張った硬いボタンやカードにしない - 黒ベタの重い背景を広く敷かない - 効果を断定するような強い煽り表現の装飾をしない - 写真をフチなしの直線で並べるだけにしない

Page Structure

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

1. 悩みの提起（FV）（女性の日常の悩みに共感する）: 水彩の空色背景に大見出しを置き、手描きの女性と雲の吹き出し6つを配置
2. 商品紹介（商品の位置づけと主成分の量を示す）: 白木目の背景にマーカー付きの見出しと黒板パネル2枚、商品パッケージ、猫キャラを配置
3. 無添加バッジ（安心感を伝える）: 紫の丸バッジ5つを横に並べ、下に注釈
4. 主要成分（ハーブ成分を1つずつ説明する）: 薄ラベンダーのグラデーション背景に、写真と文字のカードを左右交互で4枚
5. 副成分（その他の栄養素を見せる）: 円形写真と白いラベルカードを散らし、紫のタグを付ける
6. ベネフィット（飲んだ後の理想の毎日をイメージさせる）: ハート形の装飾に短いワードを入れ、女性の生活写真をコラージュ
7. 信頼の訴求（国内製造などの安心感を伝える）: 研究者の写真とピンクの帯を左右に並べる
8. よくある質問（飲み方・年齢・併用の疑問を解消する）: キャラ付きの見出しの下に、紫帯と白カードのQ&Aを4つ
9. 開発者メッセージ（開発者の想いと資格で信頼を高める）: 淡い女性写真の上に長文を載せ、資格証と顔写真、肩書きを添える

Imagery

• 人物は、細い線のパステル塗りで手描きする（黄色い髪の女性）
• マスコットは紺色の猫。絵本のようなタッチで描く
• ハーブや花の写真は自然光で、背景を少しぼかす
• 女性の写真は明るいハイキーで、笑顔の生活シーンにする
• 余白に水彩の花・鳥・きらめきの装飾を置く
• 成分写真の上に欧文スクリプトの名前を半透明で重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅の画像をPCで中央に置く1カラム構成。PCでも最大幅480〜750pxで中央寄せにする
• PCでは左右の余白に淡い背景色や水彩の模様を広げる
• 成分カードの左右交互配置は、SPでもそのまま維持する
• 丸バッジ5つは、SPで小さく1行か3+2の2行に収める

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