--- version: alpha name: Vivid Orange Fitness Spa Club LP description: 白地にオレンジを主色として使う、地域密着型スポーツクラブの LP。キャンペーン部分は虹色のポリゴン背景に黄色の巨大数字を載せる。施設紹介は写真を水色・ピンク・黄緑・ベージュの単色トーンに染め分け、お客様の声は方眼紙風のカードに Q&A 形式で並べる。 colors: primary: '#EC6C1D' background: '#EDEDEC' background-alt: '#EFEFEF' accent-1: '#FFE600' secondary: '#9FD3EC' accent-2: '#E58AA8' accent-3: '#B1C57D' tint-1: '#EDC4A6' marker: '#FFF03C' text: '#333333' dark-section: '#707070' line: '#E9E4DF' accent-1-line: '#3B9D38' primary-accessible: '#A9490E' accent-2-accessible: '#A0244D' typography: display: fontFamily: Montserrat fontSize: 64px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Oswald fontSize: 40px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.08em accent: fontFamily: Oswald fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' campaign-banner: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 260px nav-buttons: backgroundColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px feature-number: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 48px facility-band: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 260px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 480px faq-card: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 200px slogan-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 56px plan-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 420px --- # DESIGN.md — オレンジ×多色ポリゴンのフィットネス温泉 LP（Vivid Orange Fitness Spa Club LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: その他 ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、清潔・爽やか、スポーティ - **キーワード**: オレンジ主色・多色ポリゴン・巨大価格数字・色かぶせ写真・方眼紙カード・番号付き特長 - **地の質感**: 白地に薄い写真の透かしを敷く。キャンペーンは三角ポリゴンのグラデーション、声のカードは細い方眼線。 - **形**: 四角い写真ブロックを中心に、Q&A カードだけ小さく角丸にする。見出しは帯状の矩形ラベル。 - **温度感**: 暖色寄りで元気。施設紹介だけは寒色・パステルを混ぜて明るい印象にする。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EC6C1D` | ブランドのオレンジ（見出し帯・ラベル・強調文字） | 8% | 画素の実測 | | `background` | `#EDEDEC` | 基本の白背景 | 30% | 画素の実測 | | `background-alt` | `#EFEFEF` | お客様の声・Q&A の淡いグレー地 | 12% | 画素の実測 | | `accent-1` | `#FFE600` | キャンペーンの巨大数字に使う黄色 | 2% | 推定 | | `secondary` | `#9FD3EC` | 施設紹介 GYM の水色トーン | 4% | 推定 | | `accent-2` | `#E58AA8` | 施設紹介 STUDIO のピンクトーン・強調色 | 4% | 推定 | | `accent-3` | `#B1C57D` | 施設紹介 POOL の黄緑トーン | 4% | 画素の実測 | | `tint-1` | `#EDC4A6` | 施設紹介 SPA のベージュトーン | 4% | 画素の主要色に補正 | | `marker` | `#FFF03C` | 特長見出し下の黄色マーカー | 0% | 推定 | | `text` | `#333333` | 見出し・本文の濃いグレー | 3% | 推定 | | `dark-section` | `#707070` | 料金プラン背景のモノクロ写真の暗部 | 5% | 推定 | | `line` | `#E9E4DF` | 方眼・点線の区切り線 | 1% | 画素の主要色に補正 | | `accent-1-line` | `#3B9D38` | LINE 誘導枠の緑 | 0% | 画素の実測 | | `primary-accessible` | `#A9490E` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#A0244D` | AA を満たす補正値（計算） | | 計算 | - 地の色は白と淡いグレーを交互に使い、セクションの切り替わりを示す。 - オレンジは見出し帯、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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーンの価格数字 | 欧文サンセリフ | Montserrat | 900 | 64px | 1.0 | -0.02em | | `headline-lg` | 施設名の大きな英字（コンデンス体） | 装飾・ディスプレイ | Oswald | 700 | 40px | 1.0 | 0.04em | | `headline-md` | セクション見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.1em | | `headline-sm` | 特長の小見出し・声のタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em | | `body-md` | 本文の説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.08em | | `accent` | 英字の小見出し（見出しの上に置く） | 欧文サンセリフ | Oswald | 500 | 12px | 1.2 | 0.15em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | ボタン・Q ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.1em | - セクション見出しは、オレンジの英字小見出しの下に小さな和文を 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-59a50c28`（元 LP の URL から採番） - **元 LP**: https://b-fit.jp/tsurumi/lp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。