DESIGN.md — ピーチベージュ×水色の柑橘ボディケア LP（Citrus Peach Gradient Body Care LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、ナチュラル、かわいい
• キーワード: ピーチベージュ・水面テクスチャ・柑橘・黄色マーカー・金茶の手書き文字・ふんわりぼかし
• 地の質感: ピーチからクリームへのやわらかなグラデーション地。水面の光が揺れる写真テクスチャを帯状に敷く。白カードは縁をぼかして浮かせる。
• 形: 角丸の大きい白カード、ピル型ボタン、円形の成分アイコン、手描き線の吹き出し。
• 温度感: 暖色の地に水色をアクセントとして入れた、ややあたたかい明るいトーン

Colors

• 地はピーチベージュからクリームへのグラデーションにし、全体をあたたかくまとめる
• 製品を見せる区画は水面テクスチャの水色帯にして、清涼感を出す
• 見出しは金茶で書き、キーワードだけ黄色マーカーを敷く
• 主 CTA はターコイズ一色に白文字。ページ内で最も鮮やかな色にする
• ラインナップはレモン色と水色の斜めの面で交互に分ける
• 注釈は薄いグレーの小さな文字で、CTA や画像の直下に置く
• button-primary は文字 #FFFFFF × 背景 #2ACDD6 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A8288、4.57:1）を使う。
• button-secondary は文字 #957D43 × 背景 #FEEB62 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7B6737、4.5:1）を使う。
• ingredient-circle は文字 #957D43 × 背景 #FFFFFE のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7B6737、4.51:1）を使う。
• point-card は文字 #957D43 × 背景 #FFFFFE のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7B6737、4.51:1）を使う。
• marker-text は文字 #957D43 × 背景 #FFF28C のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7B6737、4.57:1）を使う。
• top-banner は文字 #957D43 × 背景 #FFFEAA のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7B6737、4.57:1）を使う。

Typography

• 見出しは字間を広め（0.06〜0.1em）にとり、ゆったり見せる
• キーワード部分だけ黄色マーカーを文字の下半分に敷く
• 欧文ラベルは細いウェイトの大文字にして、白抜きか細い縁取りで扱う
• 香りの訴求コピーはアーチ状に配置する
• 成分名には ※番号の上付き注釈を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。製品写真と文字を左右に重ねてもよい
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 特長カードは画面幅の約 92% にし、上に POINT 番号ラベルを置く
• CTA は画面幅の約 88% のピル型にし、セクションの終わりに置く
• 注釈は CTA の直下に中央揃えで置く
• 製品ボトルは中央に大きく見せ、柑橘やハーブを周囲に散らす
• ラインナップは左に文字、右に製品写真の 2 分割にする

Elevation & Depth

• 白カードは縁を白くぼかす（大きく拡散する白いぼかし）だけで浮かせ、影は付けない
• CTA ボタンには細い濃い縁と、ごく弱い影を付ける
• 製品写真は切り抜きにし、自然な落ち影を付ける

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 製品は切り抜き。成分アイコンは円形。シーン写真は角丸のない四角か、ぼかした縁にする
• セクション境界: 水面テクスチャ帯の上端をゆるいウェーブにする。ラインナップは斜めのカットで区切る
• ボタンはすべて完全なピル型にし、右端に下向きの山形矢印を付ける
• 吹き出しは手描き風の雲形の線で描く
• 強調したい丸枠は細い白線の円で作る

Components

• 購入 CTA ボタン（button-primary）: ターコイズのピル型ボタン。白文字を中央に置き、右端に下向き矢印を付ける
• 黄色の購入ボタン（button-secondary）: 2 番目の商品用。黄色の地に金茶の文字
• 成分の円形アイコン（ingredient-circle）: 白い円の中に、成分名と素材写真を 3 つ横に並べる
• POINT 特長カード（point-card）: 縁をぼかした白カード。中には細い欧文の番号ラベル、マーカー付きの見出し、チェックリストを入れ、右下に素材写真を置く
• 黄色チェックリスト（check-list）: 黄色い四角にチェック印を付け、各行の下に黄色の下線を引く
• マーカー強調（marker-text）: 見出しのキーワードの下半分に黄色の帯を敷く
• 口コミ吹き出し（voice-bubble）: 金色の手描き線で雲形に囲み、中央揃えの短文を入れる
• 最上部の配合ラベル帯（top-banner）: 薄い黄色の全幅の帯に、金茶の字間広めの文字を置く
• ラインナップ枠（lineup-panel）: 斜めカットの色面。左に商品名・容量・価格と CTA、右に製品写真を置く

Do's and Don'ts

Do - 見出しは金茶で書き、キーワードだけ黄色マーカーで強調する - 製品の周りに柑橘・ハーブ・クリームの質感写真を添えて、香りと使用感を伝える - CTA はターコイズのピル型で統一し、各セクションの区切りに置く - 白カードの縁をぼかして、ふんわりした空気感を出す - 成分の表記には ※ の注釈を必ず添える

Don't - 真っ黒の文字や濃い背景を使わない - 角張ったボタンや強いドロップシャドウを使わない - 原色の赤や紫など、柑橘から外れる強い色を足さない - 文字を詰めすぎず、字間と行間を狭くしない - 写真を硬い矩形の枠線で囲まない

Page Structure

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

1. ファーストビュー（配合成分と、仕上がりのイメージを伝える）: 上部に黄色のラベル帯。手書き風の大きなキャッチ、石や柑橘と並べた製品写真、受賞バッジを置く
2. 成分アイコンと CTA（主要成分を一目で見せ、購入へ誘導する）: 円形アイコンを 3 つ横に並べ、その下にターコイズの CTA と注釈を置く
3. 悩みの提起（乾燥の原因に共感してもらう）: 円ラベル付きのシーン写真を 2 枚並べ、問いかけの見出しにマーカーを敷く
4. 解決策の提示（商品を解決策として紹介する）: 水面テクスチャ帯の上に、マーカー付きの見出しと大きな製品写真、価格、CTA を置く
5. 特長 POINT（3 つの特長を説明する）: 縁をぼかした白カードを縦に 3 枚。番号ラベル、見出し、チェックリスト、素材写真で構成する
6. 香りの訴求（香りの魅力を伝える）: 水面テクスチャの上に、アーチ状のコピーと製品・柑橘・泡を置く
7. お客様の声（使用感を口コミで裏付ける）: 細い欧文の大見出しと、手描きの吹き出しを 2 つ。製品写真を斜めに添える
8. 使用シーン（塗るシーンを見せて、季節のケアを訴求する）: 腕に塗る写真の上に白い大きな文字と、細い白線の円で囲んだコピーを重ねる
9. ラインナップ（商品を並べて購入へつなぐ）: レモン色と水色の斜めの枠を交互に置き、それぞれに商品情報と色違いの CTA を入れる
10. フッター（企業情報を示す）: クリーム色のグラデーション地に、金茶のロゴと小さなリンクを置く

Imagery

• 製品は白ボトルの切り抜き。明るい自然光の下で撮る
• 輪切りのオレンジ、レモン、ラベンダー、カモミールなどの素材を水彩風のリアルな質感で添える
• 揺らぐ光を写した水面写真を背景のテクスチャに使う
• ミルクやクリームのテクスチャ写真で、使用感を見せる
• 肌に塗る手元の写真は、ベージュ地の柔らかいトーンで撮る
• 水滴や泡の写真を、装飾として浮かせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP と同じ 1 カラムのデザインを中央 480px 前後で見せ、左右はグラデーションの地で埋める
• PC に広げる場合、POINT カードは 3 列にしてもよい。その際も縁ぼかしは維持する
• ラインナップは PC では 2 列に横並びにする
• CTA ボタンは PC で最大幅 400px に抑える

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