DESIGN.md — オレンジ×白の元気な駅前24時間ジムLP（Vivid Orange Neighborhood 24h Gym LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、スポーティ
• キーワード: ビビッドオレンジ・価格訴求・写真グリッド・対象別カラーブロック・ピル型CTA・地域密着
• 地の質感: 基本はフラットな塗り。背景の一部に斜線ストライプやドット柄を敷き、チラシのような賑やかさを出す
• 形: 角の立ったカードや帯が中心。CTAだけ大きく丸いピル型にする
• 温度感: 暖色寄りで明るく活発。オレンジと黄色が熱量を出す

Colors

• オレンジは見出し帯・料金表見出し・強調テキストに使い、ページ全体のトーンを決める色にする
• 地の色は白→クリーム（設備紹介）→ライトグレー（料金表）と切り替えてセクションを区切る
• CTAはオレンジ系の2色ボタン（山吹色と朱色）を縦に並べ、役割を分ける
• 対象別プランはシニア＝紫、学生＝ティール、家族＝黄緑＋マゼンタと、ブロックごとにテーマ色を変える
• FVの価格だけ黄色にして、濃灰の地の上でいちばん目立たせる
• オプションや女性専用の注記はマゼンタの小さいバッジや赤文字にする
• button-primary は文字 #FEF7E7 × 背景 #FE9B05 のコントラスト比が 1.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#A46301、4.51:1）を使う。
• button-cta は文字 #FEF7E7 × 背景 #E94C02 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CB4202、4.55:1）を使う。
• banner-family は文字 #FEF7E7 × 背景 #E4014E のコントラスト比が 4.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E1014D、4.56:1）を使う。
• amenity-row は文字 #FE9B05 × 背景 #FFFFFF のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#A46301、4.58:1）を使う。

Typography

• 価格の数字は極太のサンセリフで大きくし、「円」や「税込」は小さく添える
• 見出しは太いゴシックで中央に揃える。数字だけ一段大きくして強調する
• 英字ラベル（POINT 番号・ゾーン名）は細めのサンセリフで、枠線付きのピルに入れる
• 手書き書体は人物の吹き出しだけに使う
• 本文は14px前後で行間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真ギャラリーは大1枚＋2列グリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは左右12px前後の余白でほぼ全幅に広げる
• 設備紹介は「見出し→オレンジのアイコン帯→写真グリッド」の順を繰り返す
• 料金表は「グレーの見出しセル＋白の値セル」を縦に積む
• 選ばれる理由はオレンジ帯にアイコンを入れたカードを5枚縦に並べる
• CTAブロックはFV直下とページ中盤の2か所に置く

Elevation & Depth

• 基本はフラットで、影は使わない
• CTAボタンにだけ下方向の弱い影を付け、押せることを示す
• 人物写真は切り抜いて、背景写真の上に重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸4px程度の長方形。人物は背景を切り抜く
• セクション境界: 直線で切り替える。斜線ストライプやドット柄の地で区切ることもある
• CTAは大きなピル型にして、右端に「›」を置く
• カード・帯・料金表は角を立てるか、ごく小さい角丸にする
• POINTやゾーン名のラベルは細い枠線のピル型にする
• 番号バッジは角丸の正方形で、写真の下端に重ねる

Components

• 体験・見学申込ボタン（button-primary）: 山吹色のグラデのピル型。左上に赤い丸バッジ、右に矢印を付ける
• WEB入会ボタン（button-cta）: 朱色のピル型。上段に手書き風の強調語、下段にPCアイコン付きの大きい文言
• ヘッダー2分割ボタン（sticky-header-cta）: 青と緑のストライプ地のボタンを左右に並べ、FVの下に固定する
• 家族訴求バナー（banner-family）: マゼンタの全幅角丸ボタン。白文字2行
• 選ばれる理由カード（point-card）: 上部はオレンジ帯に薄い白のアイコン。下部は白地にPOINT番号のピルと2行の説明。全体を細いオレンジ枠で囲む
• ゾーン見出し帯（zone-header）: オレンジの角丸ブロックに白の線画アイコンと、英字ゾーン名の枠線ピルを入れる
• 設備リスト行（amenity-row）: 左はオレンジの正方形に白アイコン、右は白地に設備名。マゼンタのオプションバッジを添える
• 料金表（price-table）: グレーの見出しセルと白の値セルを交互に積む。強調する行は見出しをオレンジにする
• 番号バッジ（number-badge）: オレンジの角丸正方形に白の太い数字。写真の下端に重ねる

Do's and Don'ts

Do - 価格は極太の数字で大きく見せる - オレンジの帯とアイコンを繰り返し使い、ページ全体に統一感を出す - 対象別プランはテーマ色を変えて、別ブロックとして見分けられるようにする - CTAは2種類を縦に並べ、ページの上部と中盤に繰り返し置く - 設備は写真グリッドで量を見せる

Don't - オレンジを薄めたり、くすませたりしない - CTAを小さな角ボタンにしない - 本文に手書き書体を使わない - 写真を暗く加工しすぎない（明るい店内の印象を守る） - 料金表に装飾を足しすぎない

Page Structure

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

1. ヘッダー（ロゴと申込への導線を示す）: 白地の左にロゴ、右に青・緑の申込ボタン2つとメニューを置く
2. ファーストビュー（手軽さと価格で興味を引く）: 上はトレーニング中の女性写真。下は濃灰地に白い見出しと黄色の巨大価格、点線枠の特長3行を並べる
3. 店舗名帯とCTA（体験申込・入会へ誘導する）: 山吹色の帯に店舗名を入れ、その下にピル型CTAを2つと営業時間、家族訴求のバナーを置く
4. キャンペーン・対象別プラン（割引やプランで背中を押す）: 斜線ストライプの地に、チラシ風のキャンペーン画像を置く。続けてシニア＝紫、学生＝ティール、家族＝黄緑のブロックを並べる
5. 選ばれる理由（5つの強みを示す）: 中央揃えの見出しの下に、オレンジ帯付きのPOINTカードを縦に5枚並べる
6. 中間CTA（もう一度申込へ促す）: 暗めの店舗写真を背景にCTAを2つ置き、手書きの吹き出しとスタッフの切り抜き写真を重ねる
7. 設備紹介（施設の充実ぶりを見せる）: クリーム地にゾーン見出し帯と写真グリッドを3ゾーン分繰り返す
8. アメニティ（あると嬉しい設備を一覧で伝える）: 暗い写真の地に、アイコン付きの白い行リストを縦に並べる
9. 初心者への安心（初めての人の不安を和らげる）: 円形アイコン、太字の見出し、オレンジの区切り線、モノクロの接客写真の順に並べる
10. 料金案内（料金をわかりやすく見せる）: グレー地にグレーの見出しセルと白の値セルを交互に積み、オプションにはマゼンタのバッジを付ける
11. パーソナルプラン（上位プランを提案する）: オレンジ枠の見出しカードの下に、番号付きの写真を3つ並べる。続けてオレンジ枠の料金表を2つ置く
12. アクセス（場所と連絡先を伝える）: 左にオレンジ枠のラベル、右に値を置く表と地図を埋め込む
13. 店舗一覧・フッター（他店舗とサイト内リンクを案内する）: 山吹色の地に店舗写真のカードを2列で並べる。斜線の地にリンク集を置き、最下部は黒帯のコピーライト

Imagery

• 明るいオレンジ壁の店内で、マシンを広角で撮る
• 笑顔の女性トレーニーやスタッフ（オレンジのポロシャツ）を自然光で撮る
• シニア・学生・家族は太い線のポップなイラストで描く
• 白の単色線画アイコンを、オレンジの地に載せる
• スタッフは切り抜き写真にし、手書きの吹き出しと組み合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約600〜700pxに中央寄せし、両側に地の色を広げる
• PCのFVは横長の写真に価格コピーを重ねる
• PCではCTA2つと電話番号を横一列に並べる
• PCではPOINTカードを、左にアイコン・右に文言の横長行にする
• PCの設備紹介はゾーン見出しと写真を4列グリッドで交互に配置する
• PCの料金表や家族・学生プランは、左右2カラムの横並びにする

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