DESIGN.md — 深緑×赤の自然派ボディケア訴求 LP（Natural Green Body Scrub Direct-Response LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ナチュラル、情報量多め・訴求型、上品・高級、清潔・爽やか
• キーワード: 自然派・オリーブグリーン・黄色マーカー・限定価格訴求・権威付け・明朝×ゴシック
• 地の質感: 白〜生成りの地に、和紙のような漆喰テクスチャ・水面・森の写真を背景として敷く。価格ブロックは平面的な白カードで見せる。
• 形: 角張った枠線カードと正円バッジが中心。CTA は立体感のあるピル型、吹き出しはギザギザの星形を使う。
• 温度感: 基本は穏やかで温かみのある中間色。価格訴求の部分だけ赤と黄で一気に温度を上げる。

Colors

• 地は白と淡いグレー緑を基本にし、深緑は見出しの帯・枠線・ラベルだけに使う。
• 価格訴求のブロックだけは赤帯と黄色の大きな数字に切り替え、温度を上げる。
• 悩みの提起はワインレッドの円と帯でまとめ、ネガティブな話題であることを示す。
• 本文中の強調は黄色マーカーか、深緑地に白抜き文字のどちらかで行う。
• 受賞・ランキングのセクションは黒地に金のメダルで高級感を出す。
• button-primary は文字 #FFFFFF × 背景 #759D61 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#5F7F4E、4.53:1）を使う。
• sale-banner は文字 #EBE543 × 背景 #D92E35 のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C02329、4.5:1）を使う。

Typography

• 情緒的なコピーは明朝、価格や数字はゴシックの極太で書き分ける。
• 価格の数字は本文の 4〜5 倍の大きさで斜体気味に置き、「円」は小さく添える。
• 見出しは一部の語だけ色を変えるか、手書き風の斜体にして強調する。
• 写真の上には縦書きの短いコピーを白帯に載せる。
• 注釈は 10px 前後とし、該当ブロックの直下にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円バッジ・成分写真・お届けサイクルは 3 列グリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の背景写真またはテクスチャで区切る。
• 価格カードは白地にし、左に商品画像、右に価格を置く。
• CTA ボタンは画面幅の約 80% で中央に置く。
• 特長は POINT 番号のタブ・見出し・図解・本文の順に縦へ積む。
• 口コミはモデル写真の上に枠線カードを重ねる。

Elevation & Depth

• CTA ボタンには下方向の柔らかい影と上部のハイライトを付け、立体的に見せる。
• 白い価格カードは影を付けず、写真背景の上に平面的に載せる。
• 受賞メダルは金のグラデーションと影で浮かせる。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は全幅の角型か正円で切り抜く。比較写真は円形のレンズ風にする。
• セクション境界: 直線で区切るのが基本。赤帯の下だけ三角の矢印形で次のセクションへつなぐ。
• カードは角張らせ、深緑の 3px 前後の枠線で囲む。
• 特長バッジは正円にし、セージ色の太い縁を付ける。
• 悩みの吹き出しはギザギザの星形にする。
• ラベルは角の取れた小さな矩形にする。

Components

• 主 CTA ピルボタン（button-primary）: 緑のグラデーションのピル型ボタン。白文字で、一部の語を黄色にし、右端に「>」を付ける。
• 価格カード（price-card）: 白カードに通常価格の取り消し線・赤い定期ラベル・赤の大きな価格・黄色の割引率の円を並べる。
• 特長の円バッジ（feature-badge）: セージ色の縁の正円 3 つを横に並べる。小さな前置き文と、黄色マーカーを引いた太字で構成する。
• POINT 番号タブ（point-tab）: 黄色地のタブに、英字の POINT と大きな数字を入れる。下向きの三角を付ける。
• 口コミカード（voice-card）: 写真に重ねた深緑の枠カード。左上に黄色の年齢ラベル、明朝のタイトル、マーカー付きの本文を入れる。
• 深緑のラベル（label-green）: 深緑地に白文字の小さな帯。部位名や見出しのリードに使う。
• 割引訴求の赤帯（sale-banner）: 赤地に白と黄の極太文字で割引率を見せ、下辺は矢印形にする。
• 悩みの吹き出し（trouble-bubble）: ワインレッドの星形または円に、悩みを白文字で 2〜4 字ずつ入れる。
• 黄色マーカー（marker-highlight）: 本文中の重要語の下半分に、黄色の帯を引く。

Do's and Don'ts

Do - 価格訴求のブロックは同じデザインで 3 回以上くり返す。 - 成分は実物の素材写真と短い説明をセットで見せる。 - 強調は黄色マーカーと深緑ラベルの 2 種類に絞る。 - 明朝の見出しは字間を広めに取る。 - 注釈は該当箇所の直下に小さく入れる。

Don't - 緑のセクションに赤を多用しない。 - カードに大きな角丸を付けない。 - ネオンなどの彩度の高い寒色を使わない。 - 写真を使わずにベタ塗りだけのセクションを続けない。 - 本文を明朝で書かない。

Page Structure

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

1. ファーストビュー（悩みの部位と理想の姿を示す）: 二の腕の写真に、マゼンタと黒の縦書き明朝コピーを重ね、商品を右下に置く。
2. 効果の要約（3 つの効果をひと目で伝える）: 淡い光の背景に、マゼンタの球体バッジを 3 つ置く。
3. 保証・価格の導入（不安を減らし、初回価格を提示する）: 金の月桂樹付きの保証帯と、緑のグラデーションの価格バナーを置く。
4. 受賞・メディア掲載（権威付け）: 黒地に金のメダルとランキングのキャプチャを並べ、続けて雑誌掲載・イベントの行列写真・SNS 投稿を見せる。
5. 数量限定・CTA（緊急性を出して購入を促す）: 在庫状況の表のあと、赤帯で割引率を見せ、森の写真の上に白い価格カードと CTA を置く。
6. 悩みの提起（共感を得る）: ワインレッドの吹き出しと人物のイラストで、悩む人の割合を示す。
7. 原因の解説（悩みの理由を図で示す）: 毛穴の断面イラストと星形の吹き出しを使い、ワインレッド系でまとめる。
8. 解決策の提示（商品を紹介する）: 深緑の明朝見出しに、ジェルを手に取る写真、特長の円バッジ 3 つを続ける。
9. ビフォーアフター（変化をイメージさせる）: ワインレッドの地に、2 つの円レンズで肌を比べる。
10. 成分紹介（根拠を示す）: 漆喰テクスチャの地に、素材写真・黄色の吹き出し・成分名を並べる。
11. お客様の声（実感の共有）: 番号付きの英字ラベル、モデル写真、深緑枠のカードで構成する。
12. 5 つのポイント（特長の詳細）: セクションごとに背景写真の色を変え、POINT タブ・図解・マーカー付き本文を置く。
13. ブランドの思想・無添加・使い方（ブランドへの信頼を得る）: 白い枠のカード、円の中に斜線を引いた無添加アイコン、部位ごとの写真グリッドで見せる。
14. 返金保証・定期便・特典（購入時の不安を解消する）: 緑の円形矢印で保証を示し、3 列のお届けサイクル図と、番号付きの特典リストを並べる。

Imagery

• 自然光で撮った、白い衣服の女性と肌のクローズアップ。
• 森・葉・水面・柑橘などの自然素材の写真を、セクション背景に敷く。
• 成分の原料は白い漆喰の上で物撮りする。
• 肌の断面図は、ベージュとピンクのフラットなイラストで描く。
• 悩みの場面はモノクロ寄りの人物写真にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。中央 750px 程度の 1 カラムにし、左右に森の背景を広げる。
• 円バッジや成分の写真グリッドは、横に 4〜5 列まで広げる。
• 価格カードは横並びのまま幅を広げる。
• 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 行書くと起動時に読み込まれる。