DESIGN.md — 水滴と若草グリーンの美容サプリ LP（Fresh Green Water-Drop Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 水滴・うるおい・若草グリーン・青×ピンクの対比・球体バッジ・番号付きポイント
• 地の質感: 水しぶきや泡の写真、紙のようなテクスチャ、光沢のある球体でみずみずしさを出す
• 形: しずく形・円形のバッジと、横長の帯見出しが中心
• 温度感: やや涼しげ。差し色のピンクと黄色の円であたたかさを足す

Colors

• 基本は白地にする。セクションの区切りには若草グリーンの帯を使う。
• 成分の対比は必ず青（外側・守る）とピンク（内側・蓄える）のペアで見せる。
• リード文（小見出し）は緑の太字にして、本文のグレーと区別する。
• 悩みや原因の提起だけは紺を使い、少し深刻なトーンを出す。
• 図解の背後には淡い黄色の円を敷いて、視線を集める。
• ページ末尾の企業紹介は淡い黄緑の地で区切る。

Typography

• 感情に訴える大見出しは明朝、説明はゴシックと使い分ける。
• 見出しの中のキーワードだけを拡大したり、青・ピンクに色を変えたりする。
• 数値（含有量）はバッジの中で太く大きく見せる。
• リード文は緑の太字で 2 行程度にまとめる。
• 注釈は「・」始まりの小さな文字で、ブロックの下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイント内だけ本文と図解を左右 2 分割にする
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• 各ポイントは「番号しずく＋緑の帯見出し → 緑のリード文 → 左本文・右図解」の順に並べる。
• セクション見出しは画面幅いっぱいの緑の帯にする。
• 悩み提起は中央に大きなしずくを置き、四隅に写真を配置する。
• 対比は左右対称にし、中央に×記号を置く。
• 注釈はブロック下の左寄せにまとめる。

Elevation & Depth

• 球体バッジは光沢のグラデーションとハイライトで立体的に見せる。
• 帯見出しの下端には淡い影かグラデーションを付ける。
• 詳細ボタンはグレーのグラデーションに軽いドロップシャドウを付ける。
• 写真カードは紙の上に置いたような薄い影にする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 悩み写真は角丸なしの矩形。図解は円の中に収める。
• セクション境界: 直線の緑の帯。背景色を水平に切り替える
• 番号はしずく形の中に大きく黒字で置く。
• 成分バッジは正円で、2 個を×でつなぐ。
• 吹き出しは淡い黄色の角丸長方形にする。
• 見出し帯は角丸なしの長方形にする。

Components

• 緑の帯見出し（band-heading）: 画面幅いっぱいの緑の帯に白い太字の見出しを置く。上に小さな前置きを付けてもよい。
• 番号しずく（point-number-drop）: 虹色に光る透明なしずくの中に大きな数字を置く。緑の帯の左端に重ねる。
• 成分球体バッジ（ingredient-badge）: 青とピンクの光沢のある円。中に成分名と含有量を白文字で入れ、間を×でつなぐ。
• 緑のリード文（lead-text）: 帯見出しの直下に置く 2 行程度の緑の太字コピー。
• 黄色の吹き出し（speech-label）: 図解の上に置く淡い黄色の吹き出し。手書き風の文字を入れる。
• 悩みチェックラベル（worry-check）: 写真の下にチェックボックスと手書き風の短い悩み文を置く。
• 詳細ボタン（button-detail）: 白からグレーのグラデーションの角丸ボタンに、太字の文字と矢印を入れる。
• 商品仕様表（spec-table）: 淡い黄色の見出しセルと白い値セルを組み合わせた 3 行の表。

Do's and Don'ts

Do - しずく・泡・水しぶきのモチーフを各所に入れる。 - 成分は常に青とピンクのペアで対比させる。 - ポイントは番号付きで同じ型を繰り返す。 - 感情を動かす見出しは明朝で大きく組む。 - 注釈を所定の位置に小さく添える。

Don't - 濃い色や黒の背景を広く使わない。 - 緑・青・ピンク以外の強い色を増やさない。 - ポイントごとにレイアウトを変えない。 - 本文を明朝にしない。 - 角張った硬いアイコンを使わない。

Page Structure

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

1. ファーストビュー（誰向けの商品かと、二重の効果を一目で伝える）: 水しぶきが入った水色の背景。左に明朝のキャッチと成分バッジ 2 個、右に商品パッケージを置き、下に注釈を添える。
2. 悩みの提起（日常の乾燥シーンに共感してもらう）: 紙のテクスチャの上で、中央の紺のしずくに問いかけを入れ、四隅に悩み写真とチェックラベルを置く。
3. 原因の提示（悩みの原因を 1 語で示す）: 明朝の大きな 1 語に、紺の筆致の装飾を付ける。その下に肌断面の比較図解を左右に並べる。
4. 解決の提示（2 つの成分の役割を対比させる）: 青とピンクの吹き出しの下に、大きな明朝で「守る×蓄える」の型を置き、成分名を色分けする。
5. 情緒コピー（使ったあとの気持ちをイメージさせる）: ピンクの筆文字風の大きな語を、透明な水滴のイラストで挟む。
6. 4 つのポイント（特長を順番に説明する）: 緑の帯の見出しに続けて、番号しずく・帯見出し・緑のリード文・本文と円形図解を 4 回繰り返す。
7. 商品詳細（仕様と購入導線を示す）: 緑の帯見出しの下に、左にパッケージと仕様表、右に商品名・説明・詳細ボタンを置く。
8. 企業紹介（メーカーの信頼感を補う）: 淡い黄緑の地に緑の見出しを置き、商品ラインナップのバナーを載せる。

Imagery

• 人物写真は自然光で撮った肌のアップや日常の動作。明るく柔らかいトーンにする。
• 水しぶき・泡・透明な水滴を、光沢が出るように合成する。
• 図解はパステル調のイラストで、肌の層や矢印をシンプルに描く。
• 手のひらにカプセルを乗せた写真などを、淡い黄色の円の中に配置する。
• 商品パッケージは白背景で、正面から撮った切り抜き写真にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として記載する。
• PC では本文の幅を 960px 程度に収め、緑の帯は画面幅いっぱいに広げる。
• ポイントの本文と図解は、PC では左右の比率を 1:1 にする。
• 悩みセクションは中央のしずくを大きくし、写真を左右 2 枚ずつ並べる。
• FV は左にコピー、右に商品のまま、背景の水しぶきを横に広げる。

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