DESIGN.md — オリーブ金×濃茶のパーソナルジム LP（Olive Gold Personal Gym Diet LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 上品・高級、情報量多め・訴求型、信頼・誠実
• キーワード: オリーブゴールド・ビフォーアフター・白カード・金の紙吹雪・繰り返す CTA・アコーディオン
• 地の質感: 生成りの無地に白カードを置く。写真背景にはぼかしと半透明の金を重ね、紙吹雪で祝祭感を出す
• 形: 角丸 8px 前後のカード。金の細い枠線、V 字のセクション境界、円形の数値バッジを使う
• 温度感: 温かく落ち着いた中間色。オレンジの CTA だけを熱い差し色にする

Colors

• 地色は生成りの #F6F3EE を基本にし、情報は白カードに載せる
• 悩み・店舗一覧・フッターは濃いオリーブ #3C3200 に反転し、文字は白にする
• 見出しの強調語・数値・特典名はオリーブゴールドか金文字にする
• オレンジのグラデーションは主 CTA だけに使い、ほかの部品には使わない
• 写真を背景に敷くときは、ぼかしと半透明の金をかぶせて文字を読ませる
• 減量数値などの大きな数字は金系の色で目立たせる
• button-primary は文字 #FFFFFF × 背景 #E39D02 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9C6C01、4.61:1）を使う。
• badge-result は文字 #C3994F × 背景 #FFFFFF のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#937032、4.56:1）を使う。
• band-guarantee は文字 #FFFDED × 背景 #B4A354 のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#827539、4.51:1）を使う。
• accordion-area は文字 #FFFDED × 背景 #B4A354 のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#827539、4.51:1）を使う。

Typography

• 見出しは太いゴシックで中央揃えにし、キーワードだけ金色にする
• 数値は欧文サンセリフで大きく組み、単位は小さく添える
• 見出しの両脇に短い横線を置いた『— 見出し —』型を地域見出しなどに使う
• 本文は行間 1.8 程度にして、読みやすさを確保する
• CTA の上には小さい補足コピーを 1 行添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列（悩み）または 1 列で積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央の本文ブロックは PC で約 600px 幅に収める
• セクションの切り替わりは地色の反転で示す
• CTA ブロックはページ内で 3〜4 回、同じ構成で繰り返す
• ビフォーアフターは横スライダーに収める
• 店舗一覧は地域見出しの下に県別アコーディオンを並べる

Elevation & Depth

• 白カードには弱い影（0 2px 8px rgba(0,0,0,.08)）をつける
• CTA ボタンの下辺に濃いオレンジの影を落とし、立体感を出す
• FAQ とアコーディオンは影なしで、1px の区切り線を使う

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は角丸の矩形。減量数値は円形バッジで写真に重ねる
• セクション境界: 基本は直線。悩みから解決への切り替わりだけ V 字に切る
• CTA は角丸 6px 程度の横長ボタンにし、右端に矢印を置く
• 特長カードは金の細枠で囲み、左上に王冠と番号を置く
• 体験談のカードは角丸を大きめ（16px）にする

Components

• 主 CTA ボタン（button-primary）: オレンジのグラデーションに白太字。上に小さい補足コピー、右端に矢印を置く
• 減量数値バッジ（badge-result）: 白い円に金の数値と小ラベル。写真の下端に重ねる
• 保証の帯（band-guarantee）: オリーブゴールドの全幅帯に白の細枠。中に白文字で保証内容を入れる
• 悩みの吹き出しカード（card-worry）: 濃色地に白カードを 2×2 で並べる。下にしっぽを付ける
• 番号付き特長カード（card-feature）: 金の細枠カード。王冠と番号、見出し、本文、写真を並べる
• 特典カード（card-campaign）: 白カードに冊子などの画像と、金文字の数値入り見出しを入れる
• 料金表（price-table）: 金の見出しバーと番号の下に、取り消し線の旧価格→新価格と黒丸の限定バッジを置く
• FAQ アコーディオン（faq-item）: 白い行の左に金の虫眼鏡アイコン、右にプラス記号を置く
• 店舗アコーディオン（accordion-area）: 金の県名バーを開くと、白地の店舗リストが出る

Do's and Don'ts

Do - 変身前後の写真と数値（体重・ウエスト・体脂肪率）をセットで見せる - 期限付きのカウンセリング CTA ブロックを同じ型で繰り返す - 強調語は金色、それ以外は濃い茶黒で統一する - 実績数値は大きな欧文数字にアイコンを添える - 比較表では自社の列を金のヘッダーで目立たせる

Don't - 純黒や原色の青・赤を使わない - オレンジを CTA 以外に広げない - カードを角張らせすぎたり、太い枠にしたりしない - 写真の上にぼかしなしで文字を載せない - 見出しを細字や明朝体にしない

Page Structure

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

1. ファーストビュー（結果と特別価格を一目で伝える）: ぼかした写真背景に白の太字見出し、変身前後の写真、円形の回数バッジ、価格、CTA を置く
2. 保証の帯（不安を取り除く）: 金の全幅帯に細枠で囲んだテキストを入れる
3. 実績の写真列（成果を直感的に見せる）: 前後写真を横に並べ、減量数値の丸バッジを重ねる
4. キャンペーン特典（今申し込む理由を作る）: 金の見出しの下に白い特典カードを 2 枚置く
5. メディア実績（社会的証明）: 金の紙吹雪の背景に実績数値カードと動画を置く
6. 悩みの提起（共感）: 濃いオリーブ地に吹き出しカード 2×2。下端を V 字に切り、トレーナー写真を添える
7. 解決策の提示（科学的な手法の訴求）: 生成り地に金の強調見出しと図解カードを置く
8. CTA（カウンセリング予約）: 金をかぶせた写真背景に、期限ラベル、白カード 3 つ、オレンジボタンを置く
9. 特長（選ばれる理由）: 番号付きの金枠カードを縦に積み、トレーナー紹介とアプリ紹介を挟む
10. お客様の声（変身の証拠）: 前後比較のスライダーと、金地に白カードの体験談を置く
11. 料金・比較（価格の納得感を出す）: ステップ表示、金バーの料金表、他社比較表を並べる
12. よくある質問（疑問の解消）: 白い行のアコーディオン
13. 店舗一覧（通える店舗を探してもらう）: 濃色地に地域見出しと金の県別アコーディオンを並べる
14. フッター（運営情報と最後の CTA）: 白カードに運営会社情報、その下に CTA と濃色のコピーライト帯を置く

Imagery

• スポーツウェアの女性の全身写真で、変身前後を白背景で並べる
• トレーナーは黒ウェアの笑顔の写真。上部に欧文の名前を大きく重ねる
• 背景はジムの写真を強くぼかし、金の半透明をかぶせる
• 金の紙吹雪や光の粒で祝祭感を出す
• アイコンは金の円の中に白線で描く（再生・手紙・チェック）
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 今回は PC 画像のみ。PC では中央 600px ほどのカラムに収め、左右は地色だけで埋める
• SP では本文幅を約 90% にし、特典カードと CTA 下のカードは 1 列に積む
• 悩みカードは SP でも 2 列のまま、文字を小さくして並べる
• SP の比較表は横スクロールにする
• ヘッダーは SP ではロゴと小さな CTA だけにする

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