DESIGN.md — 深緑×金の植物派ヘアカラーLP（Botanical Green Hair Color Treatment LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ナチュラル、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 深緑・金グラデ・明朝の大見出し・植物・水滴・月桂樹の実績・大人女性
• 地の質感: 水滴・大理石・葉の写真を淡く敷いた透明感のある地に、暗い緑の自然写真セクションを差し込む
• 形: 角のある白カードに細い枠線、円形の成分イメージと円形の手順写真、斜めに切ったリボン型の見出し帯
• 温度感: やや涼しい緑基調に、金とベージュで温かみを足す

Colors

• 地は白・淡い若葉色・大理石グレーを交互に使う。そのうえで、ページの中盤に暗い緑の写真セクションを 1〜2 回入れて締める
• 見出しは深緑の明朝体を基本にする。実績や数字は金グラデにする
• 帯見出しには深緑か若葉色の面に白文字を乗せ、斜めのリボン形にする
• 価格の強調には赤系を少しだけ使う。それ以外の場所では赤を使わない
• 本文の強調は黄色マーカーと金茶の文字色で行う
• FAQ の Q・A ラベルだけ青にして、他の要素と区別する

Typography

• 大見出しは明朝で、強調したい語だけ 1.5〜2 倍に大きくする（ジャンプ率を高くする）
• 数字は明朝で大きく、単位は小さく添える
• 帯の中・ラベル・本文はゴシックで統一する
• ※注釈は 8px 前後の灰色文字で、各ブロックの下に置く
• 見出しは中央揃え、本文は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分・色見本は 2〜3 列で並べ、写真と文章の横並びも使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに背景写真か地の色を切り替えて区切る
• カードは画面幅の約 88% で中央に置く
• 手順は円形写真と文章をジグザグに配置し、曲線の矢印でつなぐ
• 注釈はカードの外側、右下か下部に置く

Elevation & Depth

• 白カードには淡いぼかしの影（0 2px 8px rgba(0,0,0,.08)）を付ける
• 円形の成分イメージは光沢グラデと外側の発光で立体的に見せる
• 商品写真には床への落ち影を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と髪は角丸なしの四角か、全幅の切り抜き。手順写真は円形にして緑の弧のフチを付ける
• セクション境界: 直線で背景を切り替える。帯見出しは端を斜めに切ったリボン形にする
• カードは角丸ほぼなしで、細い枠線を内側に二重に入れる
• バッジは円形か角丸の小さい四角
• 見出しの帯は平行四辺形かリボン形にする

Components

• 月桂樹の実績表示（laurel-badge）: 金の月桂樹で、金グラデの数字実績を左右から挟む
• リボン帯見出し（ribbon-heading）: 端を斜めに切った深緑の帯に白文字を乗せる
• 円形特長バッジ（circle-badge）: 深緑の円に白文字で、特長を 2 つ並べる
• セット価格ボックス（price-box）: 緑枠のカードに通常価格→大きな特価を示し、赤い送料無料バッジと割引の円を添える
• 悩みチェックリスト（check-list）: チェックボックスのアイコンに、黄色の下線付きで悩みを 4 行並べる
• 円形ステップ（step-circle）: 円形写真の左上に若葉色の「ステップ番号」ラベルを重ね、曲線の矢印で次へつなぐ
• お客様の声カード（voice-card）: 白カードの上辺に若葉色の傾いた帯で見出しを付け、本文の一部を黄色マーカーで強調。右下に年代を書く
• Q&A カード（faq-card）: 白カードに青い Q の明朝質問、青い A ラベルと枠付きの答えを置き、下に本文を続ける
• 詳細ボタン（button-primary）: 深緑の角丸四角に、白い三角アイコンと白文字

Do's and Don'ts

Do - 見出しは明朝で大きく、強調語のサイズに強い差を付ける - 水滴・葉・大理石など、自然で清潔な背景写真を淡く敷く - 実績は月桂樹と金グラデで格調高く見せる - ※注釈を省かず、小さく添える - 暗い緑の写真セクションを挟んで、ページに抑揚を付ける

Don't - ビビッドな原色やネオン色は使わない - 大見出しを丸ゴシックやポップ体にしない - 角丸の大きいピル型カードは使わない - 緑と金以外の強調色を増やさない - 背景を真っ白の単色だけで続けない

Page Structure

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

1. ファーストビュー（実績・特長・商品を一目で伝える）: 若葉色の水滴背景に大人女性の写真。左に縦組み気味の明朝大コピー、上部に月桂樹の実績、下に円形バッジと商品ボトル
2. セット価格（まとめ買いのお得さを示す）: 深緑グラデの帯の下に、枠付きの価格ボックスと割引の円バッジ
3. 実績（信頼を高める）: 白い水面の背景に、月桂樹付きの金グラデ数字を 2 段で置く
4. ベネフィット（染まる効果を訴える）: 髪の後ろ姿の写真の横に、超大の明朝コピーとテスト済みラベル
5. 悩みの提起（共感を得る）: ベージュの室内写真にチェックリスト。下に悩みの部位の写真を 3 枚並べ、吹き出しを付ける
6. 特長（手軽さ・塗りやすさを伝える）: 緑の斜め帯、大見出し、頭頂部の写真
7. 成分の解説（染まる仕組みと自然由来の成分を説明する）: 白枠のカードにイラストと素材の丸写真
8. 原料産地のこだわり（原料の希少性を伝える）: 暗い緑の自然写真の背景に、光る円形の成分 3 つ。風景写真と文章を交互に並べる
9. 補修成分（ケア効果を補足する）: 花畑の背景に、ベージュのカードと 2 列のラベル帯
10. カラー展開（色を選ばせる）: 深緑の帯に明朝見出しと人物。下に髪の毛束の色見本を 2×2 で並べる
11. 使い方（簡単さを示す）: 円形写真の 3 ステップをジグザグに置き、曲線の矢印でつなぐ。水色背景で応用の手順も載せる
12. お客様の声（体験談で後押しする）: 葉の背景に、2 列の声カードと円形の見出しバッジ
13. よくある質問（不安を解消する）: 若葉色のぼかし背景に、Q&A カードを縦に並べる
14. 製造元・付属品（安心感と特典を伝える）: 青空と工場の写真に明朝のメッセージ。付属ブラシの紹介に詳細ボタンを添える

Imagery

• 40〜60 代の女性モデルが髪に触れる柔らかい自然光のポートレート
• 髪のツヤを強調した後ろ姿と頭頂部のクローズアップ
• 海藻・花・葉・水滴・水面などの自然素材写真を背景に淡く敷く
• 成分は光沢のある球体や、プラス・マイナスの粒子のイラストで表現する
• 商品ボトルは切り抜きで、落ち影付き
• 月桂樹の金のイラスト、カモミールの花など植物の装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP 幅の列を置き、両側に淡い緑の背景を敷く想定
• PC に広げる場合、色見本や声カードは 3〜4 列に広げてもよい
• 大見出しは PC で 1.3 倍程度にとどめ、明朝のジャンプ率を保つ
• 手順のジグザグ配置は PC では横 3 列にする

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