DESIGN.md — 柑橘とハーブの水彩ボタニカル・ヘアケアLP（Botanical Citrus Organic Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ナチュラル、清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ボタニカル水彩・柑橘とラベンダー・クリームイエロー地・深緑グレーの見出し・ゴールド数字・マーカー強調
• 地の質感: 水彩風の植物写真と、オイルの雫やクリームの質感写真を背景に重ねる。面はフラットで、少し透ける白カードを置く
• 形: 四角いカード、淡い波形のセクション境界、リボン形ラベル、斜線入りの丸アイコン
• 温度感: 暖かく明るい。黄色とクリームに、緑とゴールドで締める

Colors

• 地は白とクリームイエローを交互に使い、セクションを分ける
• 見出しは深いグリーングレーの単色。黒は使わない
• 数字と飾りの欧文はゴールドで書き、自然派の高級感を出す
• 赤は価格と購入ボタンだけに使う
• 購入ブロックは緑帯の上に白カードを置き、ページの中で唯一の強いコントラストにする
• 本文の要点は淡い黄色のマーカーで強調する
• button-gold は文字 #326064 × 背景 #AC8D3E のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DECEA5、4.5:1）を使う。
• ribbon-label は文字 #FEF7F3 × 背景 #AC8D3E のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DECEA5、4.6:1）を使う。
• tag-corner は文字 #FEF7F3 × 背景 #AC8D3E のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DECEA5、4.6:1）を使う。

Typography

• 見出しは字間を少し広げた太いゴシックで、2〜3行に分けて組む
• 数字はゴールドの斜体セリフで大きく書き、和文の見出しと組み合わせる
• 本文は字間を広めにし、行間を約1.9とる
• 強調したい語は太字にして、黄色マーカーを引く
• FVのキャッチは2文字の漢字を特大にし、商品写真を重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。成分やアイコンは2列から4列のグリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右に約30pxの余白をとり、本文は中央寄せのブロックに収める
• 植物の装飾は画面端からはみ出させ、余白を埋める
• Pointの見出しは左に番号の画像、右にテキストの横並びにする
• 購入ブロックはページの中盤と最後の2回置く
• セクション内は見出し、リード、図版の順に縦に積む

Elevation & Depth

• 購入ボタンにだけ、下に落ちる影と上部のハイライトでツヤを付ける
• 白カードは影なし、または非常に淡い影にする
• 植物写真はレイヤーとして文字の背後に重ねる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と植物は切り抜きで配置する。人物は全幅写真、または3分割の縦長四角で見せる
• セクション境界: ゆるい波形の曲線、または植物でぼかした境界
• ボタンは角丸の小さい長方形
• 成分名はリボン形のゴールドラベルに入れる
• フリー処方は斜線入りの細い円で表す
• 見出しのラベルは半透明の長方形帯にし、下に小さい三角を付ける

Components

• 赤い購入ボタン（button-primary）: グラデーションでツヤのある赤い長方形。右に丸囲みの矢印を付ける
• FVのゴールドボタン（button-gold）: 金属調ゴールドの横長ボタン。文字は深いグリーン
• 価格カード（price-card）: 緑帯の上に置く白カード。ミントの見出し箱、限定の枠付きラベル、赤い大きな価格、赤帯の補足、ボタンの順に並べる
• 半透明の帯ラベル（label-band）: スレート色の半透明の帯に白文字。下に吹き出しの三角を付ける
• リボン形の成分ラベル（ribbon-label）: 両端に切れ込みのあるゴールドのリボンに白文字。下に2行の説明を置く
• フリー処方アイコン（free-icon）: 細いグレーの円に斜線を入れ、中に成分名を書く。4列×2段で並べる
• Point番号付きの訴求（point-item）: クリーム状の塊の画像にゴールドの番号を載せる。右に小さいリードと、マーカー付きの太字見出しを置く
• 黄色マーカー（text-marker）: 本文の要点の背景に淡い黄色の帯を敷く
• コーナーラベル（tag-corner）: カード左上に重ねるゴールドの小さな四角ラベル。白文字で2行

Do's and Don'ts

Do - 見出しと装飾の間に余白をとり、柑橘とラベンダーの植物を画面の端に散らす - 数字はゴールドの斜体セリフで大きく見せる - セクションごとに白とクリームの地を交互にする - 本文の要点には黄色マーカーを使う - 購入ブロックは緑帯に白カードの型で統一する

Don't - 赤を見出しや装飾に使わない - 純黒の太い見出しにしない - 角丸の大きいポップなカードや、ピル型ボタンにしない - フラットなベクターイラストで植物を描かない - 濃い地のセクションを多用しない

Page Structure

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

1. ファーストビュー（商品の位置づけと世界観を一瞬で伝える）: 白地の上下を植物で囲む。帯ラベル、小リード、特大キャッチに商品写真を重ね、英字の商品名とゴールドボタンを置く
2. 主成分の訴求（成分の純度を示す）: クリーム地にオイルの雫写真を散らす。ゴールドの大きな%と深緑の見出し、マーカー付きの本文、下に人物写真を置く
3. 購入ブロック（中盤）（早めに購入へ導く）: 緑帯に白い価格カードを置き、赤い価格と赤いボタンを入れる
4. 香り・精油の紹介（情緒的な価値を伝える）: 白地。果実や花の水彩写真の下にリボンラベルと説明を付け、1つ目を中央、残り2つを横並びにする
5. こだわり処方（配合成分とフリー処方で安心感を出す）: クリーム地に植物を飾り、白カード2枚を並べる。1枚目は成分の2列リスト、2枚目は斜線円アイコンの4列
6. 使用感のポイント（効果を4つに分けて伝える）: クリームの質感写真を背景にした大見出し。番号付きの行を4つ縦に並べる
7. 共感・ターゲット訴求（忙しい人への共感で後押しする）: 後ろ姿の髪の写真の下に帯ラベル、特大キャッチと商品を置き、本文で締める
8. 容量・コスパ（経済性と家族での利用を示す）: ゴールドの大きな数字の見出しと本文。下に生活シーンの写真3枚を横並びにする
9. 購入ブロック（最後）（最終的な購入を促す）: 中盤と同じ緑帯と白カードの構成を繰り返す

Imagery

• オレンジの断面、ラベンダー、ベルガモット、緑の葉を水彩風に高精細に描き、切り抜きで四隅に配置する
• 黄金色のオイルの雫やクリームの渦をマクロで撮り、質感の背景にする
• 人物はツヤのある黒髪を見せる。明るい自然光の笑顔と、後ろ姿のストレートヘア
• 商品チューブは黄色。正面から撮って切り抜き、見出しに重ねる
• 生活シーンは白とナチュラル色の室内で、柔らかい逆光にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版は中央に約480〜600pxのSPレイアウトを置き、左右を淡い背景で埋めることを推奨する
• PCに広げるときは植物装飾を左右の余白に大きく配置する
• 成分の写真や生活写真は、PCでは横一列に並べる
• 価格カードは、PCでは商品写真と価格を横並びに保ったまま幅を最大560pxにする

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