--- version: alpha name: Greige and Gold Personal Gym Conversion LP description: グレージュ地に金茶の帯見出しと朱赤の特典カードを重ねた、訴求量の多いパーソナルジム LP。黒い写真のファーストビュー、ビフォーアフター、黄色マーカー強調、線画イラスト、緑とオレンジの CTA を繰り返して無料カウンセリングへ誘導する。 colors: primary: '#A4833C' background: '#DBD5CB' background-alt: '#ECEDE8' surface: '#FEFEFE' secondary: '#D33B02' cta: '#2DB04A' on-cta: '#FFFFFF' accent-1: '#FEA500' text: '#1D1C17' dark-section: '#84897B' marker: '#F5E63C' accent-2: '#E8336A' tint-1: '#FCF6E4' on-dark: '#FFFFFF' cta-accessible: '#238739' primary-accessible: '#8E7134' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 34px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px cta-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px benefit-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 340px label-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px point-number: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 400px voice-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 140px laurel-stat: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' height: 90px check-list: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 50px --- # DESIGN.md — グレージュ×金と朱赤のパーソナルジム LP（Greige and Gold Personal Gym Conversion LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 情報量多め・訴求型、信頼・誠実、力強い・インパクト - **キーワード**: グレージュ地・金茶の帯・朱赤の特典・黄色マーカー・線画イラスト・実績ローレル - **地の質感**: 紙っぽい細かなノイズ入りのグレージュ地に、白カードと金のグラデーション装飾を重ねる - **形**: 角丸の白カード、ピル型の金茶ラベル、円形の写真とアイコン枠、下向き三角でつなぐ - **温度感**: やや暖かいニュートラル。金と朱赤で熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A4833C` | 金茶の帯見出し・ラベル | 5% | 画素の実測 | | `background` | `#DBD5CB` | グレージュの地 | 25% | 画素の実測 | | `background-alt` | `#ECEDE8` | 明るいグレーの地 | 12% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード | 23% | 画素の実測 | | `secondary` | `#D33B02` | 朱赤の特典見出し帯 | 5% | 画素の実測 | | `cta` | `#2DB04A` | 緑の申込ボタン | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FEA500` | オレンジの CTA 帯・ボタン | 2% | 画素の実測 | | `text` | `#1D1C17` | 見出し・本文の墨色 | 4% | 画素の実測 | | `dark-section` | `#84897B` | オリーブの悩みブロック | 4% | 画素の主要色に補正 | | `marker` | `#F5E63C` | 黄色マーカー下線 | 0% | 推定 | | `accent-2` | `#E8336A` | ピンク赤の強調文字 | 0% | 推定 | | `tint-1` | `#FCF6E4` | クリームの吹き出し | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃色上の白文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#238739` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#8E7134` | AA を満たす補正値（計算） | | 計算 | - 地はグレージュと明るいグレーを交互にしてセクションを区切る - 内容は白カードに載せる - 金茶は帯見出し・ラベル・番号・強調文字に使う - 朱赤は特典カードの見出しだけに使う - 主 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 特典数などの大見出し（金グラデーション） | ゴシック | Noto Sans JP | 900 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.4 | 0.03em | | `headline-md` | カード見出し・特典名 | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | 帯ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字ラベル・番号 | 欧文サンセリフ | Montserrat | 500 | 34px | 1.1 | 0.05em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.03em | - 見出しは極太ゴシックで、要点に黄色マーカーをひく - 大きな数字は単位より 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 ```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-28f51259`（元 LP の URL から採番） - **元 LP**: https://247-workout.jp/lp/wo/md/md_ad_lpo_mn_sbkt_vr_2312/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。