DESIGN.md — 赤×黒の名車ミニカー定期購読 LP（Red Black Collector Scale Model Partwork LP）

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

Overview

• 業種: その他 ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、クール・先進的
• キーワード: 真紅の帯・黒の特典ボックス・切り抜き車写真・極太ゴシック・斜めカット・雑誌的レイアウト
• 地の質感: フラットな単色面に、光沢のある切り抜き写真を落とし影付きで置く。グラデーションは黒ボックス内の軽い陰影程度。
• 形: 角丸はほぼ使わず直角。赤帯の右端や見出し帯を斜めにカットし、丸いバッジと黄色の角丸ボタンだけが柔らかい。
• 温度感: 熱い赤と冷たい黒・グレーのコントラスト。男性的でスポーティ。

Colors

• 赤帯→白地→黒ブロックの3色を交互に並べ、セクションのリズムを作る。
• 特典・価格など売り込みは黒地にまとめ、白カードを載せる。
• 申込ボタンだけ黄色にして、ページ中で最も目立たせる。
• 価格や数字は赤地に白抜きの太字で見せる。
• 車ごとの紹介は白地。見出しは赤帯、本文は黒で。
• サムネイル枠は細い赤線と右下の斜めカットで統一。

Typography

• 見出しは極太で詰め気味。ふわっとした細い書体は使わない。
• スケール表記は斜体の極太数字で、エンブレムのように扱う。
• キーワードにはルビや引用符をつけて強調する。
• 価格の数字は本文の3倍以上の大きさにする。
• 欧文の車名は大文字のステンシル風・コンデンス書体を使う。
• 本文は13px前後・行間1.7で短く2〜3行に収める。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典カードやサムネは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションは色帯ごとに区切り、帯の中に見出しを置く。
• 車紹介は『赤い見出し帯＋正面写真→側面の大きな写真→ディテールサムネ4枚』の順で繰り返す。
• 特典ブロックは黒地に白カード2枚と黄色CTAで1セット。
• ラインナップは切り抜き写真を斜めに重ね、引き出し線で車名を付ける。
• 雑誌の紙面写真は少し傾けて重ね、見開き感を出す。

Elevation & Depth

• 切り抜いた車写真の足元に柔らかい落ち影をつける。
• 雑誌紙面の画像には薄いドロップシャドウ。
• カードやボタンは基本フラット。黄色ボタンだけ下側に薄い影。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 車は白背景から切り抜き。ディテールは横長の長方形で、右下を斜めにカット。
• セクション境界: 直線の色帯切り替え。赤見出し帯の右端を斜めにカット。
• 角丸は黄色CTAと丸バッジだけ。
• 丸い赤バッジ（直径60px前後）でメリットを4つ並べる。
• 特典番号は赤い四角ラベルに数字。
• サムネイル右下に丸い虫眼鏡アイコン。

Components

• 定期購読申込ボタン（button-primary）: 黄色地に赤の極太文字、左に矢印。上に『送料無料』の赤い小タブ。
• メリット丸バッジ（benefit-badge）: 赤い円に白文字で短いメリットを2〜3行。ボタンの左に4つ並べる。
• 特典カード（gift-card）: 白カード。赤い『特典＋番号』ラベルと黒い見出し帯、車写真、ディテール2枚。
• 価格ボックス（price-box）: 赤地に白抜きで大きな価格と税込の注記。創刊日も添える。
• 号数見出し帯（vol-header）: 赤帯に『vol.＋数字』と欧文車名、短い紹介文。右端は斜めにカット。
• ディテールサムネ（detail-thumb）: 赤枠の写真に、黒地白文字の短い説明と虫眼鏡アイコン。
• スケール表記エンブレム（scale-emblem）: 赤い円に斜めの白い極太数字のスケール表記。
• 黒ラベル見出し（label-bar）: 黒の細長い帯に、白い欧文のコラム名。

Do's and Don'ts

Do - 赤・黒・白の3色を交互に繰り返し、黄色はCTAだけに使う。 - 車は白背景で切り抜き、大きく・斜めに重ねて迫力を出す。 - 数字（価格・スケール・号数）は極太で大きく見せる。 - ディテール写真は4枚1組にして細部の作り込みを伝える。 - 特典とCTAのセットをページ内で2回以上繰り返す。

Don't - パステル色や淡いグラデーションを使わない。 - 大きな角丸カードやピル型ボタンにしない。 - 細い明朝やか細いフォントで見出しを組まない。 - 車写真に背景の風景を入れない。 - 黄色を装飾に多用して、CTAを目立たなくしない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ブランドを示す）: 赤帯の左にロゴ、右にハンバーガーメニュー。
2. ファーストビュー（コレクションの迫力と価格を伝える）: 薄グレー地に極太キャッチ、切り抜いた車を重ねて配置。スケールエンブレムと価格ボックス、黄色CTAを置く。
3. 購読特典（申込の動機をつくる）: 黒地に期限ラベルと白見出し。白い特典カードを2枚並べる。
4. プレミアム特典と価格（追加プランを売り込む）: 黒地に金色の筆風見出し、赤い価格ボックス、車写真2台。
5. CTA（申込へ誘導する）: 黄色の枠に丸バッジ4つと申込ボタン。
6. シリーズ紹介（シリーズ全体の魅力を伝える）: 赤帯の見出し→車を横一列→3つの特長を引き出し線付きで配置。
7. ディテール訴求（作りのクオリティを見せる）: 黒い車の大きな写真に赤い注釈線。下にサムネを3枚。
8. ラインナップ（収録車種の幅広さを示す）: 赤地に白の大見出し。切り抜いた車を斜めに重ね、欧文車名ラベルを付ける。
9. 号ごとの紹介（各号の車を紹介する）: vol見出し帯＋正面写真→側面写真→サムネ4枚を4回繰り返す。
10. 関連グッズ告知（別売ケースを予告する）: 赤枠の黒ボックスに、白と赤の見出しと商品写真。
11. マガジン紹介（付属冊子の読み応えを伝える）: 赤帯の見出し→紙面画像を傾けて重ね、黒ラベル見出しのコラム説明。
12. 収納ボックス（付帯商品を案内する）: 茶グレーの面に白文字と商品写真。

Imagery

• 車のミニカーは白背景のスタジオ撮影で切り抜き、光沢と落ち影を残す。
• 正面、側面、斜め前の3アングルをそろえる。
• ディテールはエンブレム、内装、エンジンルームをアップで撮る。
• 雑誌の紙面は赤いアクセントのある誌面を少し傾けて重ねる。
• 装飾は赤い引き出し線と丸アイコンだけに絞る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約720pxのコンテンツを置き、左右は薄グレー・赤・黒の帯を全幅に伸ばす。
• SPでは特典カードを縦に並べ、サムネは2列にする。
• 丸バッジ4つはSPでは2×2、ボタンはその下に全幅で置く。
• ラインナップの重ね配置はSPでは重なりを減らし、縦に並べる。
• 号数見出し帯の写真は、SPでは文の下に回す。

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 行書くと起動時に読み込まれる。