DESIGN.md — ベージュ×金茶の植物系サロン導入 LP（Botanical Gold Salon Wholesale LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 金茶の明朝体・ベージュとミントの地・六角形のポイント番号・細い金線の枠・施術写真の多用・ビフォーアフター
• 地の質感: 半透明の白カードを、ぼかした植物や花の写真、シルクのような光沢背景に重ねる。金のグラデーションでツヤを出す。
• 形: 角の丸いカード、L字に回り込む細い金線、六角形バッジ、下向きの金三角
• 温度感: 温かい（ベージュ・金）に、清涼なミントグリーンを差す

Colors

• 地はオフホワイト・ベージュ・クリーム・ミントをセクションごとに切り替える
• 見出しの装飾・帯・番号は金茶 1 色にそろえる
• 金にはグラデーションでツヤを出し、立体的なバッジにする
• 2 商品の比較は緑系と赤系で色分けする
• 数字の強調には黄色マーカーを使う
• CTA は明るい緑のみ。他の要素に同じ緑を使わない
• button-primary は文字 #FFFFFF × 背景 #33C46D のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#23874B、4.53:1）を使う。

Typography

• 見出しは明朝を基本にし、字間を広めに取る
• 大見出しは「数字だけ大きく」「装飾の十字線ではさむ」形にする
• 価格・数値表は太いゴシックで読みやすくする
• 欧文のサブ見出しは金茶のセリフ体を見出しの上に置く
• お悩みのキーワードは手書き風の吹き出しにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表のみ 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面端から 12px ほど内側に置く
• ポイントは「見出し＋番号バッジ → 写真 → 本文」の順にし、L 字の金線で囲む
• 導入先の紹介は写真 2 枚をずらして重ね、下にベージュの名札パネルを付ける
• 施術ステップは写真の上にステップラベルを重ね、間を下向き三角でつなぐ
• レビューカードは縦書きの Voice ラベルとシルエットを左右交互に配置する

Elevation & Depth

• カードには、ぼかしの大きいごく薄い影を付ける
• 円形の特典バッジは金縁＋内側の影で立体的にする
• 背景のぼかし写真の上に半透明の白カードを重ねる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形が基本。FV の施術写真は楕円で切り抜く
• セクション境界: 直線で背景色を切り替える。区切りに金の下向き三角を置く
• ポイント番号は金グラデーションの六角形にする
• 特典は円形 4 つを横に並べる
• シミュレーションは角丸の枠線ボックスにし、上辺中央に見出しを置く

Components

• LINE 問い合わせボタン（button-primary）: 緑の角丸ボタン。上に白いピル型の吹き出しと、限定数を示すギフトアイコンを付ける
• 六角形のポイント番号（point-badge）: 金のグラデーションの六角形に、欧文の小さいラベルと大きな数字を入れる
• 金茶の見出し帯（ribbon-band）: 全幅の金茶帯。左右に斜線を入れ、下に三角を付ける
• レビューカード（voice-card）: 半透明の白い角丸カード。属性と星を並べ、明朝の見出しと縦書きの Voice ラベルを入れる
• 収益シミュレーション表（price-box）: 緑またはクリムゾンの枠線ボックス。色付きラベル＋大きな金額を置き、利益は黄色マーカーで示す
• 施術ステップラベル（step-label）: 写真の右下に重ねるピル型ラベル。番号はピンクで示す
• 悩みのチェックリスト（check-list）: 白いカードに緑のチェックボックスと区切り線を並べる
• フリー成分タグ（tag-chip）: 金の細枠の長方形タグを 3 列に並べる
• ビフォーアフター（before-after）: 写真を 2 枚並べ、間にピンクの矢印を置く。下にセリフ体で Before/After と属性を書く

Do's and Don'ts

Do - 見出しは明朝体にし、金茶で上品にまとめる - 背景の地色はベージュ・クリーム・ミントを交互に使う - 数値で訴求する箇所は黄色マーカーと太いゴシックで目立たせる - ポイントは六角形の番号＋細い金線の枠でそろえる - 注釈は小さく、該当箇所のすぐ近くに置く

Don't - 原色の背景を広い面積で使わない - 見出しを丸ゴシックにしない - 金茶以外の装飾色を増やさない - 濃い影や太い枠線は使わない - CTA と同じ緑を装飾に使わない

Page Structure

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

1. ファーストビュー（商品の世界観と安心感を伝える）: モデルの顔写真を大きく使い、縦書きのコピー帯、商品の容器、円形の特長 3 つを配置する
2. CTA（LINE での問い合わせに誘導する）: コーラル地に施術写真を 2 枚、限定特典の吹き出しと緑ボタンを置く
3. アンバサダー紹介（知名度のある人物の愛用で信頼を得る）: SNS 投稿風の写真と金茶の明朝見出しを組み合わせる
4. 導入先紹介（導入実績で権威付けする）: 院内写真をずらして 2 枚重ね、ベージュの名札パネルを付ける
5. 悩みの提起（サロン経営者の課題に共感する）: 写真の上に白帯の悩みリスト、手書き風の吹き出し、チェックリストカードを置く
6. 解決提示・メソッド説明（課題を解決できることを示す）: ミント色のタグと赤い下線で強調し、白いカードで説明文を見せる
7. 導入サポート（導入後も安心できることを伝える）: 認定証の見本と円形の特典 4 つをクリーム地に並べる
8. 施術の流れ（施術の手順を具体的に見せる）: ミント地にステップ写真を縦に並べ、金の三角でつなぐ
9. 選ばれるポイント（成分の特長を伝える）: 植物の写真、六角形の番号、L 字の金線枠を 3 つ並べる
10. 無添加・比較表（やさしさと 2 商品の違いを伝える）: 金枠のタグを並べ、緑とローズの 2 列比較表で違いを示す
11. 収益シミュレーション（費用を回収できることを数値で示す）: 色分けした枠ボックスに価格ラベル、太い金額、黄色マーカーを入れる
12. ビフォーアフター（効果を証明する）: クリーム色のカードに写真を 2 枚並べ、間に矢印を置く
13. お客様の声（サロンと利用者の満足度を示す）: 金茶の帯、円グラフ風の大きな％、Voice カードを交互に配置する
14. 導入方法（問い合わせまでの手順を簡単に見せる）: 金茶の丸バッジ、欧文のスクリプト体、STEP ラベルの付いたアイコンリストで構成する

Imagery

• 柔らかい自然光で撮った、透明感のある女性の肌のアップ写真
• 緑のハーブクリームを顔に塗っている施術シーン
• 明るいベージュ系の院内・サロンの内装写真
• ハーブ・バラ・ツボクサなど植物のクローズアップ写真
• 背景はぼかした植物、シルクのような光沢、金のリボンで装飾する
• 肌の断面図など、金色の粒子を使った成分イメージ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として記載する
• PC では本文幅を 600px 前後で中央にそろえる
• ポイントやレビューのカードは PC で 2〜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 行書くと起動時に読み込まれる。