--- version: alpha name: Red Black Gold Athletic Supplement LP description: 深紅のスモーク背景と黒地を交互に重ね、金色のクーポン・購入ボタンで締める、アスリート起用型スポーツ栄養食品の LP。太い斜体の和文見出しと選手写真の切り抜きで勝負の熱量を前面に出す。 colors: primary: '#E70012' secondary: '#840B06' background: '#000000' surface: '#CCCCCC' cta: '#C9A23A' on-cta: '#FCFCFB' accent-1: '#D9B24A' accent-2: '#DE0211' line: '#B8963E' background-alt: '#B6B3A9' text: '#000000' on-dark: '#FCFCFB' surface-2-ignore: '#FEFEFE' dark-section: '#333333' cta-accessible: '#8D7127' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.15 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.25 headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Barlow Condensed fontSize: 20px fontWeight: 700 lineHeight: 1.3 accent: fontFamily: Anton fontSize: 52px fontWeight: 400 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 24px 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: 64px button-detail: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px coupon-box: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 420px code-field: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px button-copy: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px product-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 300px voice-strip: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 140px accordion-row: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 76px mall-button: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' rounded: '{rounded.sm}' height: 48px --- # DESIGN.md — 赤×黒×金の勝負系スポーツサプリ LP（Red Black Gold Athletic Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 力強い・インパクト、スポーティ、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: 深紅スモーク・黒×金・斜体極太見出し・選手切り抜き・クーポン訴求・かすれ質感 - **地の質感**: 赤や黒の背景に煙・グランジのかすれ、銀色ヘアライン調の金属パネル、金のグラデーション光沢 - **形**: 斜めカットの帯、細い金の二重枠、ピル型ボタン、角丸の小さい矩形 - **温度感**: 熱く強い。赤の高揚感と黒金の高級感が同居 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E70012` | ブランド赤（帯・ロゴ地・アコーディオン区切り） | | 画素の実測 | | `secondary` | `#840B06` | 深紅のスモーク背景 | | 画素の実測 | | `background` | `#000000` | 黒の基本地 | | 画素の実測 | | `surface` | `#CCCCCC` | 銀色の商品パネル | | 画素の実測 | | `cta` | `#C9A23A` | 金色の購入ボタン | | 推定 | | `on-cta` | `#FCFCFB` | 購入ボタン上の白文字 | | 画素の主要色に補正 | | `accent-1` | `#D9B24A` | 金の数字・見出し文字 | | 推定 | | `accent-2` | `#DE0211` | コピー用赤ボタン | | 画素の主要色に補正 | | `line` | `#B8963E` | 金の細枠線 | | 推定 | | `background-alt` | `#B6B3A9` | コード表示の灰色地 | | 画素の主要色に補正 | | `text` | `#000000` | 銀パネル上の黒文字 | | 画素の実測 | | `on-dark` | `#FCFCFB` | 黒・赤地上の白文字 | | 画素の主要色に補正 | | `surface-2-ignore` | `#FEFEFE` | | | 画素の実測 | | `dark-section` | `#333333` | グランジ質感の濃灰地 | | 画素の実測 | | `cta-accessible` | `#8D7127` | AA を満たす補正値（計算） | | 計算 | - 地は赤スモークと黒を交互に切り替え、セクション毎に温度を変える - 購入ボタンは必ず金グラデーション＋白文字、他に金のボタンを作らない - 詳しく見るボタンは黒地に金文字で金ボタンと差別化 - 商品紹介は銀の金属調パネル、クーポン部は黒地＋金の細枠 - 赤は帯・ロゴ地・見出しの強調語に限定し、本文は白か黒 - アコーディオン一覧は白の行を赤の帯で区切る - `button-primary` は文字 `#FCFCFB` × 背景 `#C9A23A` のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8D7127`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と締めの斜体極太コピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 48px | 1.15 | -0.02em | | `headline-lg` | セクション大見出し（斜体・白や赤） | ゴシック | Noto Sans JP | 900 | 34px | 1.25 | 0.0em | | `headline-md` | 選手コメント・リード見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.02em | | `headline-sm` | 商品名・アコーディオン項目 | 欧文サンセリフ | Barlow Condensed | 700 | 20px | 1.3 | 0.0em | | `accent` | 金の割引額数字 | 欧文サンセリフ | Anton | 400 | 52px | 1.0 | 0.0em | | `body-md` | 本文・選手の声 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `note` | クーポン注意事項 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | | `label-button` | 購入・詳細ボタン | ゴシック | Noto Sans JP | 900 | 24px | 1.2 | 0.05em | - 大見出しは斜体（skew）をかけた極太ゴシックで疾走感を出す - キャッチの強調語だけ大きく、行ごとにサイズを段階的に上げる - 本文も太字寄りで、細いウェイトは注記のみ - 英字ロゴ風の見出しはコンデンス体の斜体 - 割引額は金グラデーション＋光彩で最大サイズに - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、商品パネル内は画像左・テキスト右の 2 分割 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算） - 選手写真は左右交互に配置し中央にコメントを置く - 商品ごとに「銀パネル→選手の声帯→黒クーポン→EC モールボタン」を 1 ブロックで反復 - ブロック間は黒地 24px 程度の隙間 - クーポンは中央揃えでボタン幅は画面の約 85% - 注記は左揃え 11px で詰めて配置 ## Elevation & Depth - 購入ボタンは金グラデーション＋内側ハイライトで立体感 - 詳しく見るボタンは黒の光沢グラデ＋金の外枠 - 影は控えめ、立体感はグラデーションで表現 - 割引数字に金の光彩（グロー） ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 選手は背景を抜いた切り抜き、声の写真は横長矩形、ムービーは円形サムネ - **セクション境界**: 斜めカットの赤帯・V 字状の背景切り替え - パネルは角丸ほぼなしで金の細枠 - ボタンはピル型 - EC モールボタンは白地の角丸小矩形 - 「愛用中」はギザギザの星形バッジ ## Components - **金の購入ボタン**（`button-primary`）: 小さな補足ラベル＋大きな白文字と右の二重矢印 - **詳しく見るボタン**（`button-detail`）: 黒光沢地に金文字と矢印、金縁 - **クーポン枠**（`coupon-box`）: 黒地に金の二重細枠、金の割引額とコード表示 - **コード表示＋コピー**（`code-field`）: 灰色地に黒太字のコード、コピーアイコン付き - **コピーボタン**（`button-copy`）: 赤のピル型、左にアイコン円 - **商品パネル**（`product-panel`）: 銀色金属調、左に商品画像、右にキャッチと商品名 - **選手の声帯**（`voice-strip`）: 左に白文字コメント、右に使用写真と星形バッジ - **こだわり番号アコーディオン**（`accordion-row`）: 白行に番号＋太字項目、右に丸プラス、赤帯で区切る - **EC モールボタン**（`mall-button`）: 白地2列のロゴボタン ## Do's and Don'ts **Do** - 見出しは斜体極太で、強調語ほど大きくする - 購入動線は全商品ブロックで同じ金ボタンを反復する - 赤スモークと黒地を交互に切り替える - 選手写真は躍動ポーズの切り抜きで画面端からはみ出させる - クーポン部は金の細枠で囲み特別感を出す **Don't** - パステルや淡色の背景を使わない - 細い明朝体や丸ゴシックを使わない - 金以外の色で主 CTA を作らない - 大きな角丸カードでやわらかくしない - 写真を小さく整列させて静的にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（起用選手と勝負の世界観を一瞬で伝える）: 深紅スモーク地に選手3名の切り抜き、白のかすれ極太コピー、赤の斜体英字ロゴ、商品集合と円形ムービー 2. **クーポン CTA**（冒頭で割引を提示し購入へ誘導）: 黒地金枠、赤斜体見出し、金の割引額、コードとコピーボタン、金の購入ボタン、注記 3. **共感の呼びかけ**（挑戦者への問いかけと選手の一言）: 赤地に黒帯下線の見出し、選手写真を左右交互に置き中央にコメント、V 字背景 4. **ブランドの想い**（誕生の背景と使命を語る）: 赤地に選手の叫ぶ写真、白太字の本文、段階的に大きくなる斜体キャッチ 5. **ラインナップ導入**（商品紹介への切り替え）: モノクロ選手写真に縦書きコピー、赤斜体の大見出し 6. **商品紹介（反復）**（商品ごとの特長と購入動線）: 銀パネル＋詳しく見る→選手の声→黒クーポン→EC モール2ボタンを商品数ぶん反復 7. **こだわり**（品質・安全性の根拠を5項目で示す）: 赤地に巨大数字と選手、番号付き白アコーディオン行 8. **締めのコピー**（ブランドメッセージで後押し）: グランジ灰地に赤のかすれ極太コピーと英字ロゴ 9. **ブランドムービー**（動画で世界観を補強）: 黒地の縦長動画カルーセル 10. **最終 CTA**（再度クーポンで購入を促す）: グランジ地に選手3名、冒頭と同じクーポン枠、PAGE TOP ## Imagery - 競技ユニフォーム姿の選手を躍動ポーズで撮影し背景を切り抜く - 背景は赤や黒の煙・グランジ質感、白いインク飛沫を散らす - 選手の声用写真は練習場・ジムで商品を持つ自然なシーン - 商品はパッケージ正面の切り抜き、黒丸の上に置くことも - ロゴ見出しは白のかすれ（スクラッチ）加工 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP 構成を中央に 375〜750px 幅で固定し左右を黒や赤スモーク地で埋める想定 - PC では FV の選手写真を横に広げ、コピーを左寄せに - 商品パネルは PC で 2〜3 列グリッドにしてもよい - ボタン幅は PC で最大 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-40a93734`（元 LP の URL から採番） - **元 LP**: https://www.daiichisankyo-hc.co.jp/site_dns/special/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。