--- version: alpha name: Bold Red Gold Direct Response Supplement LP description: 深い赤と黒の地に、金のグラデーション文字と立体的な極太見出しを重ねた、テレビ通販風の訴求型 LP。権威付け、体験談、ランキング、価格オファーを縦に長く積み上げる。 colors: primary: '#C50A09' secondary: '#830304' dark-section: '#170611' background: '#FEFEFE' background-alt: '#FFFFFF' accent-1: '#DBB687' tint-1: '#FFFBE3' accent-2: '#2F3955' cta: '#52A416' on-cta: '#FEFEFE' marker: '#FAF835' text: '#222222' on-dark: '#FEFEFE' accent-3: '#D88456' cta-accessible: '#428512' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.15 letterSpacing: -0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 38px fontWeight: 800 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 2px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 0px 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.md}' height: 60px price-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 320px discount-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px coupon: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 110px heading-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 48px tag-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 32px guarantee-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px number-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px testimonial-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 140px --- # DESIGN.md — 赤×金×黒の煽り型サプリ通販 LP（Bold Red Gold Direct Response Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 力強い・インパクト、情報量多め・訴求型、ラグジュアリー・ダーク - **キーワード**: 赤×金・黒地・極太立体文字・放射光・権威訴求・価格オファー - **地の質感**: 放射状の光線、紙吹雪、ハニカム、稲妻、赤いカーテンなどの派手な合成背景。文字には金のグラデーション・縁取り・ドロップシャドウを付ける - **形**: 斜めの帯、下向き矢印の吹き出し、六角形バッジ、メダル、クーポン券型の枠。角はほぼ四角 - **温度感**: 高温。赤・金・橙で熱量を上げ、紺と黒で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C50A09` | メインの深紅（オファー帯・見出し帯） | 14% | 画素の実測 | | `secondary` | `#830304` | 暗いえんじ（価格セクションの地） | 8% | 画素の主要色に補正 | | `dark-section` | `#170611` | 黒紫の訴求セクション地 | 22% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 白地（価格カード・説明面） | 12% | 画素の主要色に補正 | | `background-alt` | `#FFFFFF` | 明るいグレーの地 | 8% | 画素の実測 | | `accent-1` | `#DBB687` | 金（見出し文字・枠・バッジ） | 6% | 画素の主要色に補正 | | `tint-1` | `#FFFBE3` | クリーム（保証・注釈ボックスの地） | 4% | 画素の主要色に補正 | | `accent-2` | `#2F3955` | 濃紺（権威・医療訴求の地） | 6% | 画素の主要色に補正 | | `cta` | `#52A416` | 緑の申込ボタン | 1% | 画素の実測 | | `on-cta` | `#FEFEFE` | ボタン文字 | 0% | 画素の主要色に補正 | | `marker` | `#FAF835` | 黄色の強調語 | 0% | 画素の実測 | | `text` | `#222222` | 本文の黒文字 | 2% | 推定 | | `on-dark` | `#FEFEFE` | 暗い地の白文字 | 2% | 画素の主要色に補正 | | `accent-3` | `#D88456` | オレンジ（光・割引バッジ） | 5% | 画素の主要色に補正 | | `cta-accessible` | `#428512` | AA を満たす補正値（計算） | | 計算 | - 赤・黒・紺の暗い地を交互に置き、価格や保証だけ白とクリームの面で読ませる - 見出しの主役は金のグラデーション文字か、白文字に赤の縁取り - 重要語は黄色や赤で一部だけ色を変える - 割引率・送料無料などの数字は赤の帯や赤い円バッジに乗せる - 申込ボタンだけ緑にして、赤の多い画面から浮かせる - 医療・権威の訴求には紺〜青の地を使う - `button-primary` は文字 `#FEFEFE` × 背景 `#52A416` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#428512`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 煽りの大見出し（極太・立体） | 装飾・ディスプレイ | Dela Gothic One | 900 | 52px | 1.15 | -0.02em | | `headline-lg` | 金文字の明朝見出し・価格 | 明朝 | Shippori Mincho | 800 | 38px | 1.2 | 0.0em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.0em | | `headline-sm` | 帯見出し・小見出し | ゴシック | Noto Sans JP | 800 | 20px | 1.4 | 0.02em | | `body-md` | 本文の説明文 | ゴシック | Noto Sans JP | 500 | 16px | 1.75 | 0.02em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 斜体の筆文字風アクセント | 手書き・筆 | Dela Gothic One | 400 | 24px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 900 | 20px | 1.2 | 0.04em | - 大見出しは縁取りとドロップシャドウ、金グラデーションで立体的に見せる - 1 行の中で重要語だけ 1.5〜2 倍に大きくする - 価格の数字は最大級の明朝で赤グラデーションにし、円・税込は小さく添える - 縦書きの見出しも混ぜてリズムを付ける - 斜体や傾きを付けた文字で勢いを出す - 注釈は小さいグレー文字で各ブロックの下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。画像中心の全幅ブロックを縦に並べる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは隙間なく全幅で連結する - 価格カードは赤地の上に白いカードを左右 4% の余白で置く - 写真と見出しを重ね、人物の上に煽り文字を載せる - 下向き三角や矢印で次のセクションへつなげる - オファーブロックはページ中盤と終盤に 2 回繰り返す ## Elevation & Depth - 見出し文字に濃い影と太い縁取りを付ける - 白い価格カードに弱い影を付ける - 申込ボタンは立体ボタン（下に濃い影とハイライト） - メダルやバッジは金属的なグラデーションで光沢を出す ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は切り抜いて背景と合成する。誌面や TV 画面は四角のまま斜めに重ねる - **セクション境界**: 斜めの帯、下向きの三角、矢印型の切り欠き - バッジは六角形・円・メダル型 - クーポンは金の縁取りの券型 - 吹き出しは下向きの三角が付いた帯 - ボタンは角丸 8px 程度の横長で、右に丸い矢印アイコン ## Components - **緑の申込ボタン**（`button-primary`）: 光沢のある緑グラデーションに白い太字、右に丸い再生矢印を置く - **価格オファーカード**（`price-card`）: 白いカードに商品写真と、取り消し線付きの通常価格、赤い巨大価格を並べる - **割引率の円バッジ**（`discount-badge`）: 赤〜橙の円に白文字で割引率を入れ、価格の右上に重ねる - **クーポン券**（`coupon`）: 白地に金の縁取り、赤の明朝で割引額、右に筆記体の英字、下に黒帯ラベル - **下向き吹き出し帯**（`heading-ribbon`）: 金または赤の帯に短い前置き文を入れ、下に三角を付ける - **赤ラベル**（`tag-label`）: 送料無料・解約自由などの条件を赤帯または赤枠で横に並べる - **保証ボックス**（`guarantee-box`）: クリーム地に金の二重枠、明朝見出しと小さめの本文 - **特典番号バッジ**（`number-badge`）: 金の六角形に小さなラベルと大きな番号を縦に入れる - **体験談の名札**（`testimonial-tag`）: 赤い縦帯に名前と年齢を縦書きで入れ、人物写真の横に置く ## Do's and Don'ts **Do** - 見出しは常に縁取り・影・グラデーションで立体的にする - 権威→体験→ランキング→価格の順で根拠を積み上げる - オファーには割引率・送料無料・保証を必ずセットで出す - 暗い地と赤の地を交互に置き、白は価格と説明だけに使う - 放射光や紙吹雪などの背景で熱量を保つ **Don't** - 淡いパステルや余白の多いミニマルな構成にしない - 見出しを細字や影なしのフラットな文字にしない - 申込ボタンを赤にして背景に埋もれさせない - 注釈を省いて価格条件をあいまいにしない - 角丸の大きいカードを多用して柔らかくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（効能の訴求と商品の格付けを一目で伝える）: 暗い地に人体の透視イラストと光、赤金の極太見出し、商品パッケージを扇状に並べる 2. **初回価格の予告**（すぐ申込める安さを提示する）: クリームの注意書きボックスと、緑の枠の価格カード 3. **メディア掲載**（専門誌・TV で権威付けする）: 紺〜黒の地に誌面と TV 画面を斜めに重ね、金の帯で掲載数を示す 4. **専門家の推薦**（専門家の顔で信頼を補強する）: 白衣の人物の切り抜きに斜めの金文字の肩書きと、プロフィールを白文字で添える 5. **お客様の声**（利用者の実感を伝える）: 笑顔のシニア写真に赤い縦帯の名札と、太い白縁取りの吹き出し文字 6. **ランキング実績**（人気の証明）: 赤いカーテンと紙吹雪の背景に金の月桂冠と白いメダル 7. **新習慣の提案**（従来の方法との差を示す）: 禁止マーク付きの写真と、赤枠の大きな造語見出し 8. **価格オファー**（申込へ誘導する）: 放射光の上に商品、赤地に白カードで価格、クーポン、保証、緑のボタンを並べる 9. **悩みの原因解説**（不調の原因を不安とともに伝える）: 黒紫の地に血管・ウイルスの CG、黄色の強調語、稲妻と部位の丸バッジ 10. **解決策と成分**（商品と成分の根拠を示す）: ハニカムと光線の背景に商品と蜂の写真。説明は金枠の解説ボックスに入れる 11. **メーカーの信頼性**（企業の歴史と実績を伝える）: 木目や古紙風の暗い地に古い新聞・社屋・社員の写真、縦書きの金明朝 12. **購入特典**（申込の後押し）: 赤の放射地に紙吹雪、六角形の番号バッジ、特典の画像と白文字の説明 13. **国内製造・品質**（安心感で締める）: 青のグラデーション地に工場写真と縦書きの見出し ## Imagery - シニアの笑顔のポートレートは明るく、逆光気味に撮る - 人体の透視 CG で痛む部位をオレンジに発光させる - 商品パッケージは光の放射や金の粒子と合成し、ヒーロー的に見せる - 白衣の専門家は切り抜いて背景と合成する - ハニカム、蜂、とろける液体などの素材感をクローズアップで見せる - 紙吹雪・稲妻・カーテンなどの演出素材を重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 480〜640px 幅の SP レイアウトを置き、左右は暗い単色かぼかし背景で埋める - 画像中心の構成なので、PC でも 1 カラムを保つ - 価格カードとボタンは PC でも中央の幅に合わせる - 固定の申込ボタンを画面下に追加してもよい ## 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-8a23162d`（元 LP の URL から採番） - **元 LP**: https://www.wakan.shop/lp/youhoujyou/cpc_neck_01.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（4/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。