DESIGN.md — 銀灰地×黄赤CTAの模型定期購読LP（Silver Gray Collector Model Partwork LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: ライトグレー地・極太明朝見出し・黄×赤CTA・黒帯・白カード・精密模型写真
• 地の質感: フラットなグレー地に影付きの切り抜き写真。カードには軽いドロップシャドウ。
• 形: CTAボックスは小さい角丸。バッジは正円。カードは角丸なし。
• 温度感: クールなグレーと黒に、黄色と赤で熱を足す

Colors

• 地はほぼ全体をライトグレーにする。写真の白い背景がそのまま地になじむ。
• 黒はヘッダー・CTA帯・フッターだけに使う。
• 黄色は申込ボックス専用にする。中の申込文字と丸バッジは赤。
• 赤は、申込の文字・バッジ・拡大アイコンのように操作を促す要素だけに絞る。
• 見出しは黒、本文はダークグレーにする。装飾色は使わない。

Typography

• 大見出しは極太の明朝で、2〜4行に組む。
• 見出しの中の数字や英字も同じ明朝で組み、重厚感を出す。
• 本文は細めのゴシックで、行間を広めにとる。
• CTAの文字は極太ゴシックの赤。先頭に小さな三角を付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はディテールカードを 3 カラムに並べる。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 10px（375px 幅換算）
• 写真は画面幅いっぱい、または少しはみ出すくらい大きく置く。
• 見出し → 写真 → 本文の順に、縦一列で流す。
• CTA帯は黒の全幅帯にする。中に黄色のボックスを入れる。
• ディテールカードは縦に並べ、カード間は約40px空ける。

Elevation & Depth

• カードには下方向に柔らかいドロップシャドウを付ける（0 2px 6px rgba(0,0,0,.3)）。
• CTAボタンにも軽い影を付ける。
• 写真は切り抜きにし、床に落ちる影を残す。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: FVの商品写真は白背景の切り抜き。カード内は矩形のクロップ。
• セクション境界: 背景色をまっすぐ切り替える（グレー⇔黒）
• バッジは赤い正円に白い縁を付ける。
• 縮尺バッジは角丸四角の線枠にする。
• ボタンは矩形に近い、ごく小さな角丸にする。

Components

• 申込ボタン（button-primary）: 黄地に赤の極太文字。右側に赤地白文字のタグを付ける。
• 特典付きCTAボックス（cta-box）: 黒帯の中に黄色の箱を置く。上に赤丸バッジを3つ、下に申込ボタンを配置する。
• 特典丸バッジ（badge-circle）: 赤い正円に白縁を付け、白文字3行で特典を書く。
• 送料タグ（tag-free）: 赤い小さな矩形に白文字を入れる。
• ディテールカード（card-detail）: 白いカードに、見出し・拡大写真・右下の赤い虫眼鏡アイコンを入れる。説明文はカードの外、下に置く。
• 縮尺バッジ（scale-badge）: 黒い線枠の角丸四角に、縮尺の数字と寸法を入れる。
• FAQリンク（faq-link）: 黒帯の右下に置く。赤丸の?アイコンと白い小さな文字。
• 黒ヘッダー（header）: 黒地で、左にロゴ、右に白いハンバーガーメニューを置く。

Do's and Don'ts

Do - 商品写真は大きく、切り抜きで置く。 - 見出しは極太の明朝で重く見せる。 - CTAは黒帯と黄色のボックスで、毎回同じ形にする。 - ディテールは白カードに、見出し・写真・説明の順でそろえる。

Don't - 地の色にパステルや色の付いた背景を使わない。 - 黄色を申込エリア以外で使わない。 - 見出しに丸ゴシックや細い書体を使わない。 - カードを大きな角丸にしない。

Page Structure

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

1. ヘッダー（ブランドの提示とナビ）: 黒帯にロゴとメニューを置く。
2. ファーストビュー（偉業と完全再現を打ち出す）: グレー地に極太明朝の4行見出し。下に切り抜きの商品写真と縮尺バッジを置く。
3. CTA（即申込）: 黄色の申込ボタンを置く。続く黒帯にSNSボタンと、特典バッジ付きの黄色ボックスを置く。
4. 商品紹介（背景ストーリーの説明）: 明朝の見出しと迫力ある写真。下に寸法と長めの本文、注釈を置く。
5. 特長（作り込みとギミックの訴求）: 大見出しと、ドアを開けた状態の写真、本文。
6. ディテール紹介（細部の品質を見せる）: 白カードを5枚縦に並べる。各カードは見出し・拡大写真・虫眼鏡アイコンで、説明は外に置く。
7. 最終CTA（申込への誘導）: 黒帯に、黄色ボックス・赤丸バッジ3つ・申込ボタン・FAQリンクを置く。

Imagery

• 精密な模型を白〜グレーの背景で撮り、切り抜きにする。
• 斜め前方からローアングルで撮り、迫力を出す。
• ディテールはマクロで寄って撮る（内装・エンジン・計器類）。
• 背景に土煙のような演出を薄く入れてもよい。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはヘッダーに、SNSボタン・キャッチ・小さな申込ボタンを横に並べる。
• PCのFVは、見出しを左、写真を右に置く。
• PCのCTAボックスは、バッジとボタンを横一列に並べる。
• PCのディテールカードは3カラムのグリッドにする。
• 本文の幅はPCで約900pxに抑え、中央に寄せる。

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