DESIGN.md — 赤×黒×金の勝負系スポーツサプリ LP（Red Black Gold Athletic Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 力強い・インパクト、スポーティ、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 深紅スモーク・黒×金・斜体極太見出し・選手切り抜き・クーポン訴求・かすれ質感
• 地の質感: 赤や黒の背景に煙・グランジのかすれ、銀色ヘアライン調の金属パネル、金のグラデーション光沢
• 形: 斜めカットの帯、細い金の二重枠、ピル型ボタン、角丸の小さい矩形
• 温度感: 熱く強い。赤の高揚感と黒金の高級感が同居

Colors

• 地は赤スモークと黒を交互に切り替え、セクション毎に温度を変える
• 購入ボタンは必ず金グラデーション＋白文字、他に金のボタンを作らない
• 詳しく見るボタンは黒地に金文字で金ボタンと差別化
• 商品紹介は銀の金属調パネル、クーポン部は黒地＋金の細枠
• 赤は帯・ロゴ地・見出しの強調語に限定し、本文は白か黒
• アコーディオン一覧は白の行を赤の帯で区切る
• button-primary は文字 #FCFCFB × 背景 #C9A23A のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8D7127、4.52:1）を使う。

Typography

• 大見出しは斜体（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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。