DESIGN.md — 深緑×ラベンダーの植物系スキンケア LP（Botanical Lavender Gentle Cleansing LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 植物由来・ラベンダー・深緑・明朝見出し・透明感・割引訴求
• 地の質感: 白地に細い方眼、水滴やグラデーション、木漏れ日の写真背景
• 形: ピル型ボタン、角丸カード、円形の写真、六角形バッジ、V 字のセクション区切り
• 温度感: やや涼しく清潔。ベージュや桃色のパートでぬくもりを足す

Colors

• 外側はグレー地に植物の影を置き、中央カラムは白、ベージュ、淡いグラデーションで切り替える
• 主 CTA は深緑のピル型に統一する
• 割引・価格・クーポンだけに赤ピンクを使い、訴求をはっきりさせる
• 紫は商品とキービジュアルの見出しに限定する
• 本文の強調は、ピンクの文字か黄色マーカーのどちらかにする
• offer-box は文字 #E25666 × 背景 #FDFDFD のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC3145、4.52:1）を使う。
• ingredient-badge は文字 #FFFFFF × 背景 #5EACB3 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#3F8085、4.53:1）を使う。

Typography

• 情緒的な見出しは明朝、説明と訴求はゴシックで分ける
• 見出しの 1 語に黄色マーカーを引くか、色を変えて強調する
• 見出しの上に小さなリード文を添える
• 英字見出しは筆記体寄りのセリフ体にし、下に和文の小見出しを置く
• 注釈は 10px 程度のグレーでまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央の 1 カラムで、左右にナビと CTA を固定する
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの背景は端まで塗り、本文は左右 16〜20px の余白で組む
• Point セクションは、円バッジの番号、見出し、写真、本文の順に積む
• 写真は横幅いっぱいか、四方に 16px の余白を取って置く
• 商品カードは縦に並べ、左に画像、右に説明を置く

Elevation & Depth

• お客様の声と商品カードには、ごく薄い影（0 2px 8px rgba(0,0,0,.08)）を付ける
• 悩みの吹き出しは平面の黒灰で、影は付けない
• ボタンは影なしで、平面のピル型にする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 基本は四角。生活シーンの写真は大きな円で切り抜く
• セクション境界: V 字の矢印カット、波形、写真の境界で直線に切り替える
• Point 番号は白い半円の上に重ねる
• 成分は六角形か円形のバッジで示す
• 価格ボックスは赤ピンクの細い枠と角丸で囲む

Components

• 購入ボタン（button-primary）: 深緑のピル型。右側にカートアイコンを置く
• ブランドサイトボタン（button-outline）: 白地に濃色の細い枠を付けたピル型。右に矢印を置く
• 初回割引ボックス（offer-box）: 赤い円形の割引バッジ、通常価格に打ち消し線、大きな割引価格、ピンクのクーポン帯を組み合わせる
• 悩みの吹き出し（worry-bubble）: モノクロの肌写真の上に黒灰の雲形吹き出しを置き、白文字の一部を黄色にする
• Point 番号（point-badge）: 白い半円の中に、筆記体の Point と大きな数字を入れる
• 成分バッジ（ingredient-badge）: ティールの円の中に成分名を白文字で入れる
• お客様の声カード（review-card）: 白い角丸カード。星評価、ピンクの強調文、本文を並べ、右下に年代とアイコンを置く
• 関連商品カード（product-card）: 左に商品画像、右に商品名・価格・説明を置き、深緑の VIEW MORE ボタンを添える

Do's and Don'ts

Do - CTA は深緑、価格訴求は赤ピンクと、役割で色を分ける - セクションごとに淡い地色やグラデーションを切り替えて、リズムを作る - 情緒的な見出しは明朝で、行間を広めに組む - 植物の葉や影を、背景の余白にうっすら重ねる - 成分には※番号を付け、注釈を小さく添える

Don't - ビビッドな原色で広い面を塗らない - 主 CTA を角張ったボタンにしない - 赤ピンクを見出しの装飾に多用しない - セクション内で書体を 3 種類以上混ぜない - 写真に強いフィルターをかけて彩度を上げすぎない

Page Structure

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

1. ファーストビュー（商品の印象と、主な訴求点 3 つを伝える）: ラベンダーの光のグラデーションの上に商品ボトルを置き、縦書きの明朝キャッチと六角形バッジ 3 つを配置する
2. 初回オファー（割引価格で購入を促す）: 赤ピンク枠の価格ボックス、クーポン帯、深緑の購入ボタンを並べる
3. 悩みの提起（共感を呼ぶ）: モノクロの肌写真に黒灰の吹き出しを 4〜5 個散らす。下端は V 字で区切る
4. 原因の提示（悩みの原因を説明する）: 白地にゴシックの見出しを置き、キーワードに黄色マーカーとピンクの強調を付ける
5. 解決策と成分（独自の成分を訴求する）: 水滴のテクスチャを背景に、ティールの円バッジと青い明朝の見出しを置く
6. Point 1〜5（特長を順に説明する）: 方眼の白地に番号バッジ、見出し、写真、強調入りの本文を繰り返す。果実成分は円形のアイコンで並べる
7. 使用感と比較（使い心地と、使用前後の変化を見せる）: ベージュ地に線画イラストと植物の線画を添え、使用前後の写真を左右に並べる
8. 生活シーン（使う時間をイメージさせる）: 桃色から紫へのグラデーション地に、円形の写真と短い文を左右交互に置く
9. お客様の声（信頼を得る）: 黄緑のグラデーション地に、英字の筆記体見出しと白い角丸カードを 4 枚置く
10. ブランド紹介（ブランドの背景と理念を伝える）: 木漏れ日の緑の写真を背景に、ロゴ、明朝のコピー、集合写真、枠線ボタンを置く
11. 関連商品（ほかの商品へ誘導する）: 英字の見出しの下に、白い商品カードを縦に 4 枚並べる
12. クロージング CTA（最後に購入を後押しする）: 商品画像、大きな価格、購入ボタンを置き、初回オファーをもう一度見せる

Imagery

• 商品は白背景か、光が拡散したラベンダーのグラデーションの上で撮る
• 人物は明るい自然光で、タオルや手を頬に当てる柔らかい表情を撮る
• 成分は果実、花、塩などの素材を、明るく清潔に撮る
• 背景に葉の影や木漏れ日をうっすら重ねる
• 使用感は淡いピンクの線画で女性を描く
• 水滴や泡で透明感と潤いを表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも本文は幅 375px 前後の中央カラムに収める
• PC の左右の余白はグレー地にし、植物の影を重ねる
• PC の左側にはロゴとアンカーナビを固定する
• PC の右側には購入ボタン、ブランドボタン、筆記体の英字を固定する
• SP では左右の固定要素をなくし、中央カラムだけを全幅で見せる

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