DESIGN.md — 深緑×テラコッタのボタニカルヘアオイルLP（Botanical Green Organic Hair Oil LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ナチュラル、情報量多め・訴求型、やさしい・柔らかい、信頼・誠実
• キーワード: ボタニカル・深緑の帯・テラコッタ見出し・ピンク価格・植物写真・口コミカード
• 地の質感: 白地に葉や花・水滴を散らした淡いグラデーション。木目やファーの写真背景も使う
• 形: 円形バッジ、角丸カード、矢印型の三角、波型・山型のセクション境界
• 温度感: やや暖かい自然色。深緑で締め、ベージュとテラコッタで温かみを出す

Colors

• 地は白・ベージュ・ミントを、セクションごとに交互に切り替える
• セクション見出しの帯は深緑のグラデーションにし、白文字を乗せる
• 価格・割引率・OFF表示はコーラルピンクに限る
• 特典の強調語と情緒的な大見出しはテラコッタにする
• CTAは青緑の地に黄色文字で目立たせる
• 悩みセクションだけはグレーとチャコールにして、暗めのトーンで対比をつける
• button-primary は文字 #F4F25A × 背景 #23937B のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1D7865、4.51:1）を使う。
• price-block は文字 #FFFFFF × 背景 #FB526D のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EC052A、4.54:1）を使う。
• present-box は文字 #FB526D × 背景 #FFFFFE のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EC052A、4.54:1）を使う。

Typography

• 情緒的なコピーは明朝のテラコッタ、数字や価格は極太ゴシックで使い分ける
• 数字は周囲の文字より2倍前後大きくし、単位は小さく添える
• 見出しの上に英字の小ラベルを添える
• 強調語には黄色マーカーの下線を引く
• 注釈は10px程度にまとめ、ブロックの最後に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードや悩み写真は 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの区切りは背景色の切り替えで示す
• 帯見出しは画面幅の約92%で中央に置く
• 価格ブロックは左に通常価格の矢印ボックス、右に大きな特価を並べる
• セクションの間に下向きの三角を3つ並べて誘導する
• 商品ボトルは2本並べて写す

Elevation & Depth

• カードは影なしで、2〜4pxの色枠を付ける
• CTAボタンには薄いドロップシャドウを付ける
• 写真の上の円形バッジは半透明の金色グラデーションで少し浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は角丸の矩形か大きな円で切り抜く。成分は正円で切り抜く
• セクション境界: 波型の曲線、山型の三角、ガーランドの装飾。基本は直線
• 特徴の訴求は深緑の正円バッジを3つ並べる
• 価格ボックスは右向きの矢印形にする
• 悩みは角丸のチャコール吹き出しを写真に重ねる
• 特典番号は下がV字に切れたリボンタグにする

Components

• CTAボタン（button-primary）: 青緑の角丸ボタン。黄色の大文字と右向きの三角を入れ、左端に商品ボトルを重ねる。上には白い保証タグを乗せる
• 緑帯見出し（band-heading）: 深緑グラデーションの横帯に、白太字の見出しを入れる
• 特徴の円バッジ（circle-badge）: 深緑の正円に白文字2行。3つ横に並べる
• 口コミカード（review-card）: 白地にブラウンの太枠。アイコン・日付・本文・いいね数を入れ、2列で並べる
• 特典番号タグ（offer-tag）: ベージュのリボン形にoffer番号を入れる。右には強調語をテラコッタの極太文字で置く
• 価格ブロック（price-block）: ピンク地の矢印ボックスに、取り消し線付きの通常価格を入れる。右にはピンクの特大特価とOFFの円バッジを置く
• 悩み吹き出し（trouble-bubble）: チャコールの角丸吹き出しに白文字2行。悩みの写真の上部に重ねる
• プレゼント枠（present-box）: 緑の太い角丸枠の中に、黄色ラベルとピンクの大見出し、商品写真を入れる

Do's and Don'ts

Do - 価格や割引の数値は、極太の大きな数字で見せる - 見出しは緑帯か明朝のテラコッタに揃える - 植物・柑橘・花の素材を、商品の周りに散らして添える - 背景は白・ベージュ・ミントを交互に切り替える - CTAの近くに返金保証の文言を添える

Don't - 原色の青や紫を使わない - 価格以外にピンクを広い面積で使わない - 写真の角を鋭い直角のまま並べない - 見出しを細いゴシックだけで済ませない - 注釈を本文と同じ大きさにしない

Page Structure

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

1. ファーストビュー（商品の世界観と特長をひと目で伝える）: 深緑のヘッダーと帯の下に、横顔の人物と商品ボトルを置き、植物を散らす。極太コピーと深緑の円バッジを3つ配置する
2. ブランドの背景（プロデューサーや店舗の物語で信頼をつくる）: 人物と店舗の写真を全幅で見せ、青緑の帯に説明文を入れる
3. SNSでの紹介（著名人の利用を見せて信頼を補強する）: 木目の背景にSNSのスクショを横並びのカルーセルで置き、月桂樹付きの一文で締める
4. 実績（No.1実績を示す）: ミント地に月桂樹で囲んだ大きな数字を置き、プロジェクトの画面キャプチャを添える
5. お客様の声（支援者の数と口コミで共感を得る）: ベージュ地にガーランドを飾る。テラコッタの大きな数字を見せ、ブラウン枠のカードを2×2で並べる
6. 特典（定期便の特典を4つ提示する）: ファー写真の背景に明朝の大見出しを置き、白いパネルに番号タグとテラコッタの強調語を点線区切りで並べる
7. クーポン（送料無料のコードを伝える）: ベージュの帯に白いボックスを置き、コードを黄色マーカーで強調する
8. 価格・オファー（2つのプランと価格を提示する）: 白いカードにボトル写真を置き、ピンクの価格ブロック、プレゼント枠、CTAボタンの順に並べる
9. 悩みの提起（髪の悩みに共感する）: グレーの雲形見出しの下に、悩み写真とチャコールの吹き出しを2列で並べる
10. 解決提示（商品が解決策であることを示す）: 葉の装飾を山型の境界で区切り、淡い緑の水彩地にボトルと金色の円バッジを置く
11. ベネフィット（使った後の姿をイメージさせる）: テラコッタの明朝コピーに笑顔の人物写真を合わせ、テラコッタ帯でWの効果を示す
12. 成分・こだわり（天然成分を一つずつ説明する）: POINT番号を付けた白いカードの下に、成分の正円写真を3列で並べる

Imagery

• 自然光で撮った、明るく柔らかい人物写真。目を閉じたり微笑んだりして心地よさを表す
• 商品ボトルは柑橘・金木犀・ハーブ・葉と一緒に置いた切り抜き合成にする
• 背景には舞う葉や水滴の玉、水彩の淡い緑を使う
• 成分は素材のアップ写真を正円で切り抜く
• 悩みの写真は傷んだ髪のアップや頭を抱える人物で、彩度を落とす
• 手描き風の線（ガーランド、集中線、Present の文字）を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約480〜950pxの固定幅でSPのレイアウトを流用し、左右は余白にする
• FVはPCでは人物を右、コピーを左に置く横構図にする
• 実績セクションはPCでは数字とキャプチャを左右2カラムにする
• PCでは特典パネルの3と4を横並びにまとめる
• PCでは悩み写真を3列と2列で並べる

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