DESIGN.md — ピンク×ボタニカル緑の訴求型ボディケアLP（Pink and Botanical Green Body Care Sales LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 情報量多め・訴求型、ナチュラル、力強い・インパクト、かわいい
• キーワード: マーカー強調・ローズピンク・オリーブグリーン・価格訴求・植物素材・定期コース
• 地の質感: 白地や生成り地に、和紙風テクスチャ・水面・葉の写真を重ねる。価格帯はベタ塗りのピンク面。
• 形: 角丸カード、正円のバッジ、太いピル型CTA、吹き出し、斜線で区切る見出し
• 温度感: 前半は暖色で熱量が高い。後半は緑で落ち着いた中間の温度。

Colors

• 基本は白とグレーの地。価格オファーは赤ピンクのベタ面に白カードを載せる。
• 効果や価格の数字は、ピンク文字と黄色マーカーの重ねで強調する。
• 成分・POINT・FAQ・特典は、オリーブ緑のラベルでまとめる。
• 悩みパートは、ボルドーとモノクロ写真で重く見せる。
• 主CTAだけを鮮やかな緑のグラデにし、ほかの要素と差をつける。
• 受賞パートはダーク地に金の月桂冠で格を出す。
• button-primary は文字 #FFFFFF × 背景 #24C534 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#198924、4.52:1）を使う。
• offer-card は文字 #D94965 × 背景 #FEFEFE のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D63A59、4.52:1）を使う。
• badge-circle は文字 #D94965 × 背景 #FEFEFE のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D63A59、4.52:1）を使う。

Typography

• 見出しは、一部の語だけを大きくしてピンクにする（大小を混ぜる）。
• 前半の訴求見出しはゴシック。後半の成分・POINT見出しは明朝で上品に見せる。
• 価格は数字を特大にし、「円」と「税込」は小さく添える。
• 強調する語の下には、黄色マーカーを半分の高さで引く。
• 手書き風の添え文字は、見出しの左上に斜めに置く。
• ※注釈は小さいグレー文字で、必ず該当ブロックの直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分写真は 3 列、効果バッジは 3 つ横並び。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 画像の上に大きな見出しを重ね、縦に連続して見せる。
• 価格カードは画面幅の約90%で中央に置く。
• 効果の正円バッジは3つ並べる。
• POINTは番号ラベル、見出し、図解、本文マーカーの順で繰り返す。
• FAQは緑のQ四角と質問の行を並べ、回答は下に置く。
• オファーはページ内で複数回繰り返す。

Elevation & Depth

• 価格カードには薄い影を付ける。
• 受賞メダルは金のグラデと光沢で立体的に見せる。
• CTAは下側に濃い影を付け、押せる立体感を出す。
• そのほかは影なしでフラットにする。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 四角の全幅写真が中心。円形の切り抜きや、白枠の写真フレームも使う。
• セクション境界: 直線で背景色を切り替える。吹き出しの三角や点線で次へ誘導する。
• 効果バッジは白地の正円に太いピンク枠を付ける。
• POINTラベルは黄色の小さいタブに緑の文字を載せる。
• 悩みワードはギザギザの円形スタンプにする。
• ボタンは完全なピル型にし、右端に丸い矢印を付ける。

Components

• 緑グラデのCTA（button-primary）: ピル型。文字の一部を黄色にし、右端に白い丸の矢印を置く。
• 価格オファーカード（offer-card）: ピンク地の上の白カード。写真、黄色の帯見出し、商品、旧価格の取り消し線、特大の価格、送料無料の赤い四角を入れる。
• 効果の正円バッジ（badge-circle）: 白い円に太いピンクの枠。小さいラベルの下に、太いピンクの効果語を入れる。
• POINT番号タブ（point-label）: 黄色のタブにPOINTと数字。下に三角の吹き出しを付ける。
• 黄色マーカー本文（marker-text）: 強調する文の背景に、黄色の帯を敷く。
• お客様の声カード（voice-card）: 人物写真の下に、ピンクの太枠カードを置く。黄色の年齢タグと見出しを入れ、本文の一部をマーカーで強調する。
• 特典の行（benefit-row）: 左に緑の特典番号のブロック、右に白地で価格と特典の説明を入れる。
• FAQ（faq-item）: 緑の正方形にQ、薄いグレーの行に質問を入れる。回答は白地に置く。
• 在庫状況ボックス（stock-status）: グレーのボックスを4つ並べ、中央の1つだけ金色にして強調する。

Do's and Don'ts

Do - 価格・割引率は特大の数字にし、黄色かピンクで目立たせる。 - 強調する語には黄色マーカーを引く。 - オファーとCTAは、ページ内で2〜3回繰り返す。 - 成分・こだわりのパートはオリーブ緑と植物の写真でまとめる。 - 注釈は必ず小さく添える。

Don't - CTAに緑以外の色を使わない。 - ピンクを本文の色にしない。 - 全体を明朝体だけにしない。 - 注釈を省かない。 - 冷たい青系を主役にしない。

Page Structure

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

1. ファーストビュー（悩みと理想像を一瞬で伝える）: ピーチのグラデ地。悩みを2つピンクのタブで出し、太い見出しと人物写真、金の受賞メダルを重ねる。
2. 効果の要約と初回価格（効果と安さを早めに提示する）: 商品写真と白い円の効果吹き出しを3つ置く。下に緑の価格バナーを置く。
3. 受賞・実績（権威付け）: ダーク地に金の月桂冠を置き、ランキングのキャプチャと金のメダルを並べる。
4. メディア・SNSの評判（社会的証明）: 白地にピンクの大見出し。白枠の写真で掲載誌やイベントを見せる。
5. 在庫状況と価格オファー（限定性を示して購入を促す）: 在庫ボックスを4つ並べたあと、ピンク地に価格カードと緑のCTAを置く。
6. 悩みの提起と原因（共感させて問題を深める）: モノクロ写真とボルドーの円、ギザギザのスタンプ、イラスト図解を使う。
7. 解決の提示と成分（商品が解決策だと示す）: 縦書きの白帯見出しを置く。成分の写真と、黄色の吹き出しによる効果ラベルを並べる。
8. POINT 1〜5（特長を詳しく説明する）: POINTごとに背景写真の色（緑・ピンク・青）を変える。明朝の見出しと図解、マーカー本文を入れる。
9. ブランドのこだわり・無添加（安心感を出す）: 白枠の文章、円形のフリー処方アイコン、研究者の円形写真を使う。
10. 使い方・使える部位（使うイメージを持たせる）: 動画枠と、緑のラベル付きの部位写真をバラバラに配置する。
11. お客様の声（共感と信頼）: 人物写真、番号、ピンク枠カードの組み合わせを3件並べる。
12. 返金保証・定期サイクル・特典（購入の不安をなくす）: 緑の円の矢印で保証を示す。3段階の定期表とトラックの矢印、特典の行を4つ置く。
13. よくある質問（疑問を解消する）: 緑のQ四角とグレーの行を並べる。

Imagery

• 商品はベージュのチューブ。中身のジェルを、黄色く透ける粒感で接写する。
• 肌の写真は、明るい寝室で柔らかい自然光を当てた後ろ姿にする。
• 悩みのパートは、モノクロの憂鬱な人物写真にする。
• 成分は、甘草の根・トウモロコシ・柑橘・葉などを実物で接写する。
• ピンクの人物が困っているイラストや、毛穴の断面図解を描く。
• 水面・水滴・葉の写真を背景のテクスチャに使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP の画像を中央に約 750px 幅で並べた 1 カラムとする。
• 左右の余白は、セクションの背景色を全幅に伸ばす。
• 成分写真のグリッドは、PC では 4 列に広げてよい。
• CTA は最大幅 480px で中央に置く。

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