DESIGN.md — オレンジ×多色ポリゴンのフィットネス温泉 LP（Vivid Orange Fitness Spa Club LP）

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

Overview

• 業種: その他 ／ 雰囲気: ポップ・元気、情報量多め・訴求型、清潔・爽やか、スポーティ
• キーワード: オレンジ主色・多色ポリゴン・巨大価格数字・色かぶせ写真・方眼紙カード・番号付き特長
• 地の質感: 白地に薄い写真の透かしを敷く。キャンペーンは三角ポリゴンのグラデーション、声のカードは細い方眼線。
• 形: 四角い写真ブロックを中心に、Q&A カードだけ小さく角丸にする。見出しは帯状の矩形ラベル。
• 温度感: 暖色寄りで元気。施設紹介だけは寒色・パステルを混ぜて明るい印象にする。

Colors

• 地の色は白と淡いグレーを交互に使い、セクションの切り替わりを示す。
• オレンジは見出し帯、Q ラベル、強調する回答文、価格に限って使う。
• キャンペーンは多色ポリゴンを背景にし、数字は黄色、ラベルは白地にオレンジ文字にする。
• 施設紹介は 1 施設 1 色で写真を単色に染め、白い帯の上に同じ色の文字を置く。
• 黄色は巨大数字、マーカー、丸バッジだけに使う。
• campaign-banner は文字 #FFE600 × 背景 #EC6C1D のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A9490E、4.54:1）を使う。
• facility-band は文字 #E58AA8 × 背景 #9FD3EC のコントラスト比が 1.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A0244D、4.56:1）を使う。
• voice-card は文字 #EC6C1D × 背景 #EDEDEC のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A9490E、4.61:1）を使う。

Typography

• セクション見出しは、オレンジの英字小見出しの下に小さな和文を 2 段で添える。
• 価格は数字を極太で大きく、円・税込は数字の 1/3 程度の大きさにする。
• 見出しは字間を 0.1em 前後に広げる。
• 声カードの回答文はオレンジの太字にする。
• 帯見出しには斜体風のイタリックを使ってよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真と文を 1 段ずつ縦に積む。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特長は番号付きで、PC では写真と文を左右交互にジグザグ配置する。
• 施設紹介は全幅の写真帯を 4 段縦に積む。
• Q&A は白カードを 16〜24px 間隔で縦に並べる。
• 料金表は白いパネルに入れ、背景にモノクロ写真を敷く。
• キャンペーン帯はページの冒頭と後半で同じものを 2 回置く。

Elevation & Depth

• 声カード・Q&A カードには薄い影（0 2px 8px rgba(0,0,0,.08)）を付ける。
• キャンペーンの白ラベルはフラットにする。
• 料金パネルは暗い写真の上に影なしの白パネルで置く。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角く切り抜く。Q&A の小写真は角丸 6px、人物は切り抜き写真にする。
• セクション境界: 直線で区切る。施設写真の帯の間には白い細線を入れる。
• Q&A カードは上部をオレンジ帯にし、角丸を 10px にする。
• Q1〜Q4 のラベルは角丸の小さな枠で囲む。
• 訴求は黄色の円形バッジにする。
• FV の下のボタンは小さな矩形を色違いで 3 つ並べる。

Components

• キャンペーン帯（campaign-banner）: 多色ポリゴンの背景に、黄色の巨大価格と白ラベルを載せた特典パネル。
• FV 下の 3 色ボタン（nav-buttons）: 入会・体験・見学などをシアン・黄・ピンクの矩形ボタンで並べる。
• 番号付き特長見出し（feature-number）: 細い斜線を添えた 2 桁の番号と、黄色マーカーを引いた太字の見出し。
• 色かぶせ施設帯（facility-band）: 単色に染めた写真に大きな英字の施設名を重ね、白い帯にコピーを入れる。
• 方眼のお客様の声カード（voice-card）: 上辺がオレンジ線の方眼地カード。人物の切り抜き、タイトル、Q1〜Q4 の問答を並べる。
• Q&A カード（faq-card）: オレンジの帯に Q を書き、白い本文に A・本文・小写真を入れる。
• オレンジのスローガン帯（slogan-band）: 全幅のオレンジ帯に、白のイタリック体でスローガンを入れる。
• 料金表（plan-table）: 罫線の表で、価格をオレンジの太字にし、丸いバッジを添える。

Do's and Don'ts

Do - 価格や特典は数字を極端に大きくし、黄色やオレンジで目立たせる。 - セクション見出しは英字と和文の 2 段組にする。 - 施設紹介は施設ごとに色を変えて写真に色をかぶせる。 - お客様の声は Q&A 形式にそろえ、回答をオレンジにする。 - 人物写真は明るく笑顔のものにする。

Don't - オレンジ以外の色をボタンや見出しの主色にしない。 - 多色ポリゴンを料金表など情報部分の背景に使わない。 - 暗く重い色を広い面で使わない（料金背景のモノクロ写真は例外）。 - 明朝体や手書き体を混ぜない。 - 大きな角丸のピルボタンにしない。

Page Structure

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

1. ファーストビュー（記念感と施設の多様さを伝える）: 人物写真のコラージュの中央に、グラデーションの巨大数字とロゴを置き、下に 3 色ボタンを並べる。
2. キャンペーン（入会特典で申込を促す）: 多色ポリゴンの背景に、黄色の巨大価格と白ラベルを置く。
3. 選ばれる理由（特長を 7 つ伝える）: オレンジ帯の見出しのあと、番号付きの写真と文をジグザグに並べる。背景には薄く写真を透かす。
4. 施設紹介（設備の雰囲気を見せる）: 4 色に染めた写真の帯に、英字の施設名と白帯のコピーを載せる。
5. お客様の声（利用者の実感で信頼を得る）: 方眼カードに Q&A を入れて 3 件並べ、その後に複数人の集合写真を置く。
6. スローガン帯（価値を一言でまとめる）: 全幅のオレンジ帯に白のイタリック体を入れる。
7. よくある質問（入会前の不安を解消する）: オレンジの Q 帯を付けたカードを縦に並べ、STEP 写真も添える。
8. 料金プラン（料金と入会に必要なものを示す）: モノクロ写真の上に白パネルを置き、罫線の表で示す。
9. キャンペーン再掲（申込をもう一度後押しする）: 冒頭と同じキャンペーン帯を置く。
10. 店舗情報・SNS・地図（来店と問い合わせにつなげる）: ロゴ、オレンジの大きな電話番号、営業時間、SNS ボタン、緑枠の LINE バナー、全幅の地図を並べる。

Imagery

• 人物は運動中の明るい笑顔の写真にし、切り抜いて自然光の中に配置する。
• 施設写真は広角で撮り、単色を乗算した重ね方でトーンを統一する。
• お客様は手書きボードを持った切り抜き写真にする。
• キャンペーン背景は赤・橙・黄・緑・紫の三角ポリゴンのグラデーションにする。
• Q&A や STEP の写真は小さな四角で、日常的な場面を写す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 600px 程度のコンテンツ幅に、全幅の帯を組み合わせる。
• SP では特長のジグザグをやめ、写真→文の縦積みにする。
• 施設帯は SP で高さを 220px 前後に抑え、英字を 36〜40px にする。
• 料金表は SP で横スクロールにするか、カード化する。
• キャンペーンの価格数字は SP で 56〜64px を目安にする。

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