DESIGN.md — 紺×朱赤×黄のスポーティなジム LP（Bold Navy Sporty Fitness Gym LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: スポーティ、力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 濃紺ベース・朱赤アクセント・筆ストローク・アウトライン英字透かし・実写トレーニング写真・繰り返しCTA
• 地の質感: ベタ面中心。筆で掃いたようなかすれストローク（黄・緑・紺）を見出し脇に置く
• 形: 四角いカードと小さめの角丸。CTAボタンだけピル型
• 温度感: 温かめで活発。紺の落ち着きを赤と黄で熱く盛り上げる

Colors

• 地は紺→白→グレージュ→紺→深緑→朱赤と大きく切り替えてリズムを作る
• 見出しの一語だけ朱赤にし残りは紺で組む
• 黄色は期間帯・マーカー・紺地上の強調語に限定
• 主CTAは朱赤、LINE誘導は緑ピルで並べる
• 紺地の本文は白、白抜き文字に白帯マーカーを敷く
• button-primary は文字 #FEF4EF × 背景 #FE4125 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD1D01、4.56:1）を使う。
• button-line は文字 #FEF4EF × 背景 #05C554 のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#038237、4.56:1）を使う。
• campaign-box は文字 #E8462A × 背景 #FEFFFF のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#DE3518、4.53:1）を使う。

Typography

• 見出しは極太ゴシックで詰め気味に組む
• セクション見出しの背後に大きな線だけの英字を薄く重ねる
• 金額の数字は本文の3倍以上に大きくし単位は小さく
• 紺地の白本文には白帯マーカーを部分的に敷く
• ラベルは小さな英字POINTを細線アウトラインで添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントは写真と文の交互配置を縦積みに
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅帯で挟み区切りに使う
• CTAブロックは数セクションごとに同じ形で繰り返す
• 料金カードは左に縦書きプラン番号の色帯を付ける
• ステップは番号丸＋見出し＋写真を細線区切りで並べる

Elevation & Depth

• 影はほぼ使わずベタ面と細線で区切る
• お客様の声カードは白地に紺の細枠
• CTAボタンに軽い落ち影のみ

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。人物アイコンのみ円形
• セクション境界: 直線で色面を切り替え。筆ストロークが境界をまたぐ
• カード・帯は角をほぼ立てる
• ボタンだけ完全なピル型
• 番号は塗りの円

Components

• 体験予約ボタン（button-primary）: 朱赤ピルに白文字、左アイコン右矢印
• LINE登録ボタン（button-line）: 緑ピルで上に小さな吹き出しラベル
• キャンペーン価格ボックス（campaign-box）: 黄色の期間帯＋白枠内に取消線旧価格と巨大な赤0円
• お客様の声カード（voice-card）: 円形顔写真と名前・年代、右に短文。紺細枠
• ポイント交互ブロック（point-block）: 紺地に写真と見出しを交互、筆ストロークとPOINT英字
• ステップ番号（step-number）: 深緑の塗り円に白数字
• 料金プランカード（price-card）: 左に縦書き番号の色帯、月◯回と大きな金額
• チェックリスト（check-list）: 深緑地に白チェック、該当語を黄色に
• 紺帯ラベル（label-band）: 見出し上の小さな紺ベタ帯に白文字

Do's and Don'ts

Do - 見出しの一語を朱赤にする - 大きなアウトライン英字を背景に敷く - 筆ストロークを見出し脇に斜めに置く - CTAは赤と緑のピルを2つ並べて繰り返す - 写真は実際に運動中の人物を明るく使う

Don't - パステルや淡色だけでまとめない - 明朝体や細い書体を使わない - 大きな角丸カードで柔らかくしすぎない - 黄色を広い背景面に使わない - 影やグラデーションを多用しない

Page Structure

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

1. ファーストビュー（楽しさと新規開業を伝える）: 上部に写真コラージュ、紺地に極太白キャッチと無料体験ボックス、アウトライン英字
2. キャンペーン（期間限定の入会金無料を訴求）: 紺地に黄色帯と白枠の価格ボックス
3. サービス紹介（プログラムの概要説明）: 白地、赤×紺見出しと紺帯ラベル、薄グレーの説明箱
4. お客様の声（体験者の実感で安心させる）: グレージュ地に2列の枠付きカード
5. 特長ポイント（4つの魅力を伝える）: 紺地に写真と文の交互配置、筆ストローク装飾
6. こんな方におすすめ（対象者の自己投影）: 深緑の写真重ね地に白ラベル見出し、2列チェックリスト
7. CTA（体験予約とLINE登録）: 朱赤帯に告知文と特典リスト、下に赤・緑ピルボタン
8. レッスンの流れ（当日の流れを具体化）: 番号円付きステップと写真、間にスケジュール・メニュー枠
9. 設備紹介（更衣室など設備の安心）: 薄紫グレー枠に写真と短文
10. コーチ紹介（指導者の顔を見せる）: 横スライダーのカード、縦書き英字と左右矢印
11. 料金（プランを比較させる）: グレージュ地に色帯付き料金カード2×2と割引帯
12. 店舗情報（所在地・営業時間）: 地図と表を左右に、下にリンクと濃紺フッター

Imagery

• 室内ジムで実際にトレーニングする男女の写真
• 笑顔と真剣な表情を混ぜ躍動感を出す
• 写真は複数枚を横に並べたコラージュ帯にする
• 黄・緑・紺の筆かすれストロークを装飾に使う
• 顔写真は円形切り抜き
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅約900pxで中央寄せ、SPは1カラム
• ポイントの交互配置はSPで写真→文の縦積み
• 声カード・チェックリスト・料金は2列→1列
• CTAの2ボタンはSPで縦に並べ全幅に
• 背景英字は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 行書くと起動時に読み込まれる。