DESIGN.md — ローズ×ゴールドの女性向けパーソナルジムLP（Rose Gold Gradient Women's Fitness LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: ローズゴールド・明朝見出し・数字訴求・白と黒の交互・女性向け
• 地の質感: なめらかなグラデーションの面と、ぼかした暗い写真の背景。光の粒の装飾を少し入れる
• 形: 角丸は小さめのカード、角丸のタグ、ドーナツ型の円グラフ、細い枠線のボックス
• 温度感: 暖色寄り。ピンクとベージュの温かみを黒で引き締める

Colors

• 地は白と生成りが基本で、理由やトレーナー紹介だけ黒い帯にする
• 見出しの強調語はピンク→ゴールドのグラデ文字にする
• CTA と申込み帯はピンクから黄土色へ縦に流れるグラデにする
• タグはピンクとオレンジ系の角丸帯で、文字は白にする
• 数字の下に黄色マーカーを敷いて金額を目立たせる
• 黒地の上の文字は白とゴールドだけにする
• button-primary は文字 #FFFFFF × 背景 #E38983 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D3443A、4.51:1）を使う。
• guarantee-box は文字 #A98243 × 背景 #FFFFFF のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#93713A、4.5:1）を使う。
• accordion-store は文字 #F5F5F5 × 背景 #A98243 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#93713A、4.59:1）を使う。

Typography

• 見出しは明朝体で、本文はゴシック体にする
• 強調語は見出しより約1.4倍大きくし、グラデ色にする
• 金額の数字はとても大きく、単位は小さく添える
• 欧文の飾り文字は写真の端に半分重ねる
• 本文は小さめにして、行間は広くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真と文を左右交互に並べ、写真の小カードは 4 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真と文を左右交互にずらして配置する
• 見出しは中央揃えで、上に小さな導入文を置く
• ビフォーアフターは 3 列のカードで並べる
• 流れは番号付きの横長カードを縦に並べる
• CTA はグラデ帯のセクション内に何度か入れる

Elevation & Depth

• カードには薄くぼかした影をつける
• CTA ボタンには下に柔らかい影をつける
• 黒い帯の背景はぼかした写真にして奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。人物は切り抜いて円グラフや帯に重ねる
• セクション境界: 直線で切り替える。帯の色が変わることで区切る
• タグは角丸4pxの横長の帯にする
• 保証ボックスはゴールドの太い枠で囲む
• 割合はドーナツ型のグラデ円グラフで見せる
• 小さな数字バッジは正円にする

Components

• グラデ申込みボタン（button-primary）: ピンク→ゴールドの横長ボタン。上に斜線で挟んだ短い一言、下に大きなラベルを置く
• 悩みタグ（tag-ribbon）: 理由カードの上に置く角丸の帯。対象者を短く書く
• 特典カード（offer-card）: 白いカードの中で、ラベルと大きな金額をマーカーつきで並べる
• ビフォーアフターカード（before-after-card）: ゴールドの枠のカード。2枚の写真、減量の円バッジ、数値表、感想を入れる
• 保証ボックス（guarantee-box）: ゴールドの枠に、日数入りの円バッジと明朝の大見出しを置く
• 流れのカード（step-card）: 左に写真、右に番号の円と説明を入れた横長の白カード
• 料金カード（price-table）: ワインレッドの見出し帯の下に、ラベルと価格を3列で並べる
• FAQの行（faq-item）: ゴールドのQの後ろに質問を書き、下に区切り線を引く
• 店舗アコーディオン（accordion-store）: ゴールドの帯に白文字を置き、右端に＋をつける

Do's and Don'ts

Do - 強調語や数字はピンク→ゴールドのグラデで見せる - 見出しは明朝体にして上品にする - 明るいセクションと黒い帯を交互に置く - 金額や割合は大きな数字に黄色マーカーを添える - 写真は明るく清潔な女性トレーニングの写真にする

Don't - 原色の赤や青を使わない - 見出しを太いゴシックにしない - 大きな角丸やピル型を多用しない - 黒い帯に派手な色を入れない - 文字だけの殺風景なセクションを作らない

Page Structure

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

1. ファーストビュー（特典と強みをひと目で伝える）: 暗い写真の背景に女性2人を切り抜いて置く。左に明朝の見出しと大きな金額、下に丸い実績バッジを3つ並べる
2. キャンペーン（期間限定の特典で申込みを促す）: タグの下に見出しを置く。ピーチのグラデ面に人物と特典カードを重ね、CTA ボタンを入れる
3. 受賞バナー（第三者からの評価を伝える）: 黒地に光の粒を散らし、ゴールドの月桂樹で順位を囲む
4. 通いやすさ（続けやすさを伝える）: グラデ文字の見出しの下に、写真と短い文を4列で並べる
5. 特長（トレーニングやサポートの中身を説明する）: 生成り地に、写真と文を左右交互に置く。欧文の飾り見出しを写真に重ねる
6. 選ばれる理由（5つの差別化を伝える）: 黒地に番号、写真、タグ、説明を左右交互に並べる
7. 実績（成果を数字と写真で示す）: ドーナツ型の円グラフで割合を見せ、ビフォーアフターのカードを3列で並べる
8. 返金保証（申込みの不安を減らす）: ゴールドの枠のボックスに日数の円バッジを置く
9. 無料カウンセリングCTA（体験予約を促す）: ピンク→黄土色のグラデ帯に人物と特典カードを置き、流れを5段階のカードで見せる
10. 料金プラン（価格をわかりやすく示す）: 白地にワインレッドの見出し帯がついた料金カードを置く
11. トレーナー紹介（専門性を伝える）: 黒地に2人を並べ、経歴や資格を箇条書きにする
12. 適用条件（特典の条件を明示する）: 生成り地に、細い罫線で区切った2列の表を置く
13. よくある質問（疑問を解消する）: Q印と罫線のリストにする
14. 店舗情報・問い合わせ（来店と電話につなげる）: ゴールドのアコーディオンで店舗を並べ、最後にベージュの帯で電話番号を大きく見せる

Imagery

• 自然光の明るいスタジオで、笑顔の女性がトレーニングする写真を使う
• 人物は切り抜いて、グラデの面や円に重ねる
• 施設は清潔な個室・設備を明るく撮る
• ビフォーアフターは同じ構図・同じ背景でそろえる
• 黒い帯の背景はぼかしたジムの写真か、金の光の粒にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため、PC にするときの推奨を書く
• PC では中央に最大 1000px 前後の幅で置き、左右は地の色で埋める
• 特長や理由は写真と文を横に並べて交互に配置する
• ビフォーアフターは 4 列にし、写真の小カードは 1 行に並べる
• ファーストビューは人物を右に大きく置き、見出しを左に置く

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