DESIGN.md — 紺×金の高級感ある痩身エステ LP（Navy and Gold Slimming Salon LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 上品・高級、情報量多め・訴求型、力強い・インパクト
• キーワード: 濃紺・金グラデーション文字・明朝の極太見出し・ビフォーアフター・オファー枠の繰り返し
• 地の質感: 大理石風の白い地、金の紙吹雪とボケ光、濃紺の三角形の幾何学パターン
• 形: 角丸の小さい白カード、下向き三角で区切るセクション境界、ピル型の見出しラベル
• 温度感: 濃紺と黒茶の冷たく重い地に、金と肌色の暖かさを足した中間の温度

Colors

• 地の色は濃紺→白/淡グレー→黒茶の順で切り替え、重い色と明るい色を交互に並べる
• 大見出しは金グラデーションか濃紺の明朝。キーワードだけ金色にして目立たせる
• 数値の成果は赤ピンクの文字に黄色マーカーを重ねる
• CTA は金（電話）と緑（フォーム）の 2 つを必ずセットで横に並べる
• 黒茶の地には金の紙吹雪とボケ光を重ね、高級感を出す
• フォームの必須バッジは赤、任意バッジは水色
• button-form は文字 #FFFFFF × 背景 #228D34 のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#218732、4.59:1）を使う。
• button-tel は文字 #FFFFFF × 背景 #A29265 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#83754F、4.54:1）を使う。
• badge-medal は文字 #F9F8F3 × 背景 #A29265 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#83754F、4.54:1）を使う。

Typography

• 大見出しは太い明朝で、金グラデーションか濃紺の 2 色を語ごとに使い分ける
• 見出しの一部を［ ］で囲んで強調する
• 英字のセリフ体を大きく薄く敷き、和文見出しの背景に重ねる
• 本文はゴシック 13px、行間 1.8
• 数値は明朝で大きく、単位は小さくする
• 成果写真の下には必ず小さい注釈を入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真グリッドは 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは画面幅の 92% の白地で、濃紺の地の上に縦に積む
• オファー枠と CTA ボタン 2 つを 4〜5 セクションごとに繰り返す
• ビフォーアフター写真は 2〜3 枚を横に並べ、間に矢印を置く
• 施術紹介は大きな番号を薄く敷き、写真と文章を交互に置く
• 店舗情報は左に金の見出し列がある 2 列の表で見せる

Elevation & Depth

• 白カードには薄い影と細い濃紺の二重線の枠を付ける
• オファー枠は金の細い枠で写真の上に浮かせる
• ボタンは下に濃い色の影を付けて少し立体的にする

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形で、ビフォーアフターは同じ大きさにそろえる。スタッフ写真は横長の帯
• セクション境界: 濃紺のセクションの下端を下向きの三角に切る。それ以外は直線で切り替える
• CTA ボタンは角丸 4px の長方形で、右に三角を付ける
• 見出しラベルはピル型の濃紺か白の帯
• 吹き出しは白地の楕円で悩みや感想を書く
• 地図の下のボタンだけはピル型の濃紺にする

Components

• フォーム予約ボタン（button-form）: 緑の地に白文字、左にメールアイコン、右に三角
• 電話予約ボタン（button-tel）: 金の地に白文字、左に電話アイコン。フォームボタンと横に並べる
• オファー枠（offer-banner）: 施術写真の上に明朝の極太文字で商品名・回数・価格・期間限定の人数を載せた横長の枠
• 金メダルバッジ（badge-medal）: 金の月桂樹付きの丸メダルを 3 つ並べ、実績を短く書く
• ピル見出しラベル（label-pill）: 大見出しの上に置く濃紺のピル帯に、短い前置きを書く
• 成果カード（card-result）: 番号のエンブレム、年代と施術内容、赤い減量の数値、ビフォーアフター写真、金の帯、サイズの比較を入れた白カード
• お客様の声カード（card-voice）: 黒茶の地に置く二重線枠の白カード。濃紺のピルで番号を書き、明朝の見出しと本文、注釈を入れる
• イラスト付きの短い感想（voice-mini）: 丸い似顔絵イラストと感想を点線で区切って 3 つ並べる。キーワードは赤
• FAQ の質問帯（faq-q）: 濃紺から青のグラデーション帯に、Q のマークと白い明朝の質問文
• フォームの必須バッジ（badge-required）: 赤い小さな角丸バッジを項目名の左に置く

Do's and Don'ts

Do - 大見出しは太い明朝に金グラデーションを付ける - オファー枠と 2 つの CTA ボタンを何度も入れる - 成果の写真や数値の近くに効果の個人差の注釈を必ず入れる - 濃紺・白・黒茶の地を交互に並べ、リズムを作る - 英字のセリフ体を見出しの飾りに使う

Don't - パステル調の淡い色でまとめない - 見出しを細いゴシックにしない - CTA の色を金と緑以外に変えない - 成果の写真を注釈なしで載せない - 余白の多いミニマルな作りにしない

Page Structure

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

1. ファーストビュー（体の変化を実感させ、オファーを最初に見せる）: お腹まわりの写真に極太の明朝コピー。濃紺の帯に金メダル 3 つ、オファー枠、2 つの CTA
2. 部位別の成果スライダー（部位ごとに効果を見せる）: 大理石風の白い地に、部位アイコン付きの写真のカルーセル
3. 共感（なりたい姿を見せる）: 女性の写真のまわりに白い吹き出しを散らす
4. 悩みの提起（続けられない悩みに共感する）: 濃紺の見出し帯の下に、番号付きの悩みカードを写真と交互に並べる
5. 解決の提示（コースへつなぐ）: 体重計の写真に吹き出しを重ね、金の大見出しで解決を言い切る
6. 成果事例（ビフォーアフターで信頼を得る）: 濃紺の地に、番号エンブレム付きの成果カードを 3 つ並べる
7. お客様の声（体験談で安心させる）: 黒茶の地に金の紙吹雪、二重線枠の白カード
8. メディア・著名人の来店（権威付け）: 金のボケ光の地に、写真グリッドと SNS 投稿風のカードを散らす
9. サロン紹介・代表メッセージ（実績と人柄を伝える）: 暗い店内の写真に英字見出しを重ね、白文字の本文と金の『もっと見る』ボタン
10. おすすめの人（自分ごと化）: チェックボックス付きのリストを白いカードにまとめる
11. 施術紹介（機器と手技を説明する）: 大きな薄い番号、金のラベル、濃紺の明朝見出し、短い感想のリスト
12. 施術の流れ（来店の流れを見せる）: 濃紺の三角形のパターンの地に、写真付きの白いステップカードを下向き三角でつなぐ
13. よくある質問（不安を解消する）: 淡いラベンダーの地に、グラデーションの Q の帯と本文
14. 店舗情報・予約フォーム（アクセスを示し、申し込みを受ける）: 金の見出し列の表と地図、黒茶の地に白いフォーム、必須バッジ

Imagery

• 施術中の手元の写真は、暖色の照明で肌をオレンジ寄りに写す
• ビフォーアフターは同じ構図と背景の背中・お腹・脚の写真
• マッサージの動きを示すオレンジやピンクの曲線の矢印と、擬音の手書き文字を重ねる
• 金の紙吹雪とボケ光の背景素材を使う
• 感想には線画の丸い似顔絵イラストを添える
• スタッフは笑顔の制服姿、店内は暗めで金の鏡や花のある雰囲気
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央に幅 750px ほどの SP の列を置き、左右は濃紺で埋める
• 成果写真や施術のグリッドは、PC では 3〜4 列に広げる
• CTA の 2 ボタンは横並びのままにし、PC では追従ヘッダーにも置く
• SP ではヘッダー右上に電話と体験予約のボタンを固定する

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