DESIGN.md — グレージュ×金と朱赤のパーソナルジム LP（Greige and Gold Personal Gym Conversion LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、力強い・インパクト
• キーワード: グレージュ地・金茶の帯・朱赤の特典・黄色マーカー・線画イラスト・実績ローレル
• 地の質感: 紙っぽい細かなノイズ入りのグレージュ地に、白カードと金のグラデーション装飾を重ねる
• 形: 角丸の白カード、ピル型の金茶ラベル、円形の写真とアイコン枠、下向き三角でつなぐ
• 温度感: やや暖かいニュートラル。金と朱赤で熱を足す

Colors

• 地はグレージュと明るいグレーを交互にしてセクションを区切る
• 内容は白カードに載せる
• 金茶は帯見出し・ラベル・番号・強調文字に使う
• 朱赤は特典カードの見出しだけに使う
• 主 CTA は緑、補助の CTA 帯はオレンジにして目立たせる
• キーワードには黄色マーカーかピンク赤の文字を使う
• button-primary は文字 #FFFFFF × 背景 #2DB04A のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#238739、4.57:1）を使う。
• cta-band は文字 #E8336A × 背景 #FEA500 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• label-pill は文字 #FFFFFF × 背景 #A4833C のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8E7134、4.6:1）を使う。
• point-number は文字 #A4833C × 背景 #FEFEFE のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8E7134、4.56:1）を使う。
• laurel-stat は文字 #A4833C × 背景 #FEFEFE のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8E7134、4.56:1）を使う。

Typography

• 見出しは極太ゴシックで、要点に黄色マーカーをひく
• 大きな数字は単位より 1.5 倍以上大きくする
• 本文の強調は金茶の太字にする
• 写真の上のコピーは白い箱に縦書きで載せる
• 番号は細い欧文の数字を円弧で囲む
• 注釈は ※ で始め、小さい灰色の文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンは 3 列、実績は 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面端から 16〜24px 内側に置く
• セクションの間は縦線か下向き三角でつなぐ
• CTA は 2〜3 セクションごとに入れる
• 写真は全幅で敷き、その上にカードを少し重ねる
• アイコンは円形の枠で 3 つ並べる

Elevation & Depth

• 白カードに薄い影（0 2px 8px rgba(0,0,0,.08)）をつける
• CTA ボタンには下側に濃い影をつけて立体的にする
• 特典カードは金の細い枠で縁取る

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 全幅の矩形、円形、上がアーチの楕円
• セクション境界: 直線の切り替えと下向き三角、ドーム型の上端
• ボタンとラベルはピル型にする
• 特典見出しの左上に金の斜め三角リボンを付ける
• アイコンは円形の細い線の枠に入れる
• 吹き出しの尾は三角にする

Components

• 緑のピル型 CTA（button-primary）: 左に円で囲んだ 0 円バッジ、右に矢印。上段に小さい誘導文、下段に申込文を置く
• オレンジ帯の CTA（cta-band）: 全幅のオレンジ帯に白いピル型ボタンを置き、左に赤い所要時間バッジを付ける
• 特典カード（benefit-card）: 朱赤の見出し帯と金リボンの番号、写真、相当額のピル、説明文で構成する
• 金茶ピル見出し（label-pill）: セクションの導入や日付に使う金茶の横長ピル
• 番号付きカード（point-number）: 写真に重ねた白カードの上端に、細い数字を半円で囲んで置く
• 利用者の声の吹き出し（voice-bubble）: 左に円形の人物アイコン、右にクリーム色の吹き出しを置き、強調語は金茶にする
• ローレル付き実績数値（laurel-stat）: 金の月桂冠で大きな % の数値を囲み、2 列に並べる
• チェック付きメリット（check-list）: クリーム色のピル型行の左に金のチェックを付ける

Do's and Don'ts

Do - グレージュ地の上に白カードと金茶を重ねる基本形を守る - 見出しの要点に黄色マーカーをひく - CTA を何度も入れ、緑とオレンジで目立たせる - 料金や実績は大きな数字で見せる - 線画イラストで悩みを 3 つ並べる

Don't - 青や紫などの寒色をメインに使わない - 朱赤を特典以外に多用しない - 白地だけの平坦なページにしない - 細い明朝体を見出しに使わない - 注釈を省かない

Page Structure

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

1. ファーストビュー（サービスの価値と実績を示す）: モノトーンのジム写真の上に、白と金の大見出し、縦書きの白箱、ローレル付きの数字を 2 つ置く
2. 入会特典（期間限定の特典でお得さを伝える）: 金のピルで日付、金グラデーションの見出し、朱赤の特典カードを 4 枚、合計額、緑の CTA の順に並べる
3. 動画（話題性を示す）: 白地に見出しと、黒の動画枠を置く
4. 無料カウンセリング案内（相談で得られることを示す）: マーカー付きの吹き出し見出し、スタッフ写真、線画アイコン 3 つ、オレンジの CTA
5. ビフォーアフター（成果を見せる）: オレンジ地の写真カルーセルに、Before/After の斜めラベルと名前のオレンジ帯を付ける
6. 悩みの共感（対象者の悩みに寄り添う）: 白カードの中で線画イラストをスライダー表示し、吹き出しの尾で次へつなぐ
7. 成功の理由（専任担当の価値を伝える）: 全幅写真に白箱のコピー、オリーブ色のブロック、マーカー見出し、円形アイコン 3 つ
8. トレーナーの質（指導の質を証明する）: 番号付きの白カードを 3 枚並べ、利用者の声の吹き出しを添える
9. 満足度の実績（数値で信頼を補強する）: 白カードにローレル付きの % を 5 つ並べる
10. トレーナー紹介（人柄を見せる）: 写真カードの横スライダーにドットのページ送りを付ける
11. メッセージ（背中を押す）: 写真に縦書きの白箱、金茶の帯見出し、罫線入りの白カードの本文
12. メソッド（手法を順に説明する）: 番号入りの欧文見出し、全幅写真に縦書きコピー、ポイントの白枠カード、事例スライダー、1 週間のタイムライン

Imagery

• 実在感のあるジムの写真。黒いウェアのトレーナーと利用者を明るく撮る
• ファーストビューはモノクロ寄りの暗いトーンにする
• 悩みやメリットは黒の線画に黄色を差したフラットなイラストで描く
• アイコンは細い線で描き、円形の枠に入れる
• 背景にうっすら手書き風の英字を装飾として置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため、SP の 1 カラムを幅 480〜600px の中央カラムにして左右をグレージュ地で埋める
• 特典カードとトレーナー紹介は PC では 2〜3 列に並べてもよい
• CTA の幅は最大 480px にする
• 全幅写真は高さを抑えてトリミングする

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