DESIGN.md — 黒×赤の特撮DVDマガジン LP（Dark Tokusatsu Collector Magazine LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 黒地・赤い斜め帯・映画ポスター・コレクション・特典訴求・ゴシック太字
• 地の質感: 黒とチャコールのフラットな面。モノクロ写真を薄く敷いた灰色セクションで重さを出す
• 形: 平行四辺形の見出し帯と角張った枠を基本にする。補足ボタンだけ角丸にする
• 温度感: 冷たい黒地に熱い赤を差した、重厚で迫力のある温度感

Colors

• 黒と#333のチャコールを地の基本にし、薄灰色のセクションと交互に置いて区切る
• 赤は見出し帯の下に敷く斜めの帯、号数バッジ、新規追加タグ、価格に限定して使う
• 特典はセクションごとに黄色・水色・ベージュの専用バナー色で区別する
• 暗い地の上で強調したい語は黄色の文字にする
• 目次リストの上辺は赤・橙・緑・青の色線で項目を色分けする

Typography

• 全体を太字のゴシックで統一し、明朝は使わない
• 見出しとリード文は中央揃え。長い注釈は左揃え
• 価格の数字は大きく赤くし、単位と税表記は小さく添える
• 注釈は※から始めて、本文より2px以上小さくする
• 特典バナーの見出しはDela Gothic系の極太書体にし、赤と黒の2色で語を分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カルーセルや3号並びは横並びで見せる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算）
• セクションは見出し帯、リード、内容、注釈の順で組む
• 作品画像は横スクロールのカルーセルにし、左右に矢印を付ける
• 号数一覧は内部スクロールの表にする
• 特典バナーは左右に余白を取った額縁型の面にする
• 目次は全幅で、上辺に色線を引いたリスト行を並べる

Elevation & Depth

• 影はほぼ使わず、面の色と枠線で階層を作る
• 商品写真の書影やボックスにだけ自然な落ち影を付ける
• カードは灰色の1px枠のみでフラットに見せる

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 書影やポスターは長方形のまま切り抜く。商品は切り抜き写真にする
• セクション境界: 直線で地色を切り替える。見出し帯は平行四辺形
• 見出し帯は黒の平行四辺形に、赤の平行四辺形をずらして重ねる
• 新規追加タグと補足ボタンはピル型にする
• 詳細ボタンは角丸大きめの赤い面にし、右に矢印を付ける
• カード・表・バナーは角を立てる

Components

• 斜め帯見出し（heading-slant-band）: 黒い平行四辺形に白の極太文字を入れ、上下に赤い斜め帯をずらして重ねる
• 詳細ボタン（button-primary）: 深い赤の面に白の太字と右矢印を入れる
• 新規追加タグ（badge-new）: 表の中に入れる赤いピル型の小さなタグ
• 号数ラベル（issue-label）: 書影の上に置く赤い四角に白文字のラベル
• 号数一覧表（lineup-table）: 白と灰色の交互行で、号・年・作品名の3列を並べる。内部スクロールにする
• 付録カード（bonus-card）: 灰色枠の白カード。黒×赤の帯タイトル、提供号の白い札、商品写真を左右に並べる
• 色線目次リスト（index-list）: 上辺に色付きの太線を引いた白い行に、色文字の項目名と右の山形矢印を置く
• 特別価格ボックス（price-box）: 青枠の白い箱。青帯に条件を書き、赤の大きな数字で価格を示す
• 補足リンクボタン（button-sub）: 黒地に置く白いピル型ボタン。左に矢印を付ける

Do's and Don'ts

Do - 見出しは必ず黒×赤の斜め帯で統一する - 価格・号数・締切日は大きな数字で強調する - 特典ごとにバナーの地色を変え、区切りを明確にする - 注釈は※付きの小さな文字で、各ブロックの直下にまとめる - 暗い地の上の強調語は黄色の文字にする

Don't - パステル調や丸みの強いかわいい装飾は使わない - 赤を面積の大きな地色に使わない - 細い明朝体や軽い書体は使わない - ぼかした影やグラデーションのボタンにしない - 余白を取りすぎて情報の密度を下げない

Page Structure

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

1. ファーストビュー（シリーズの規模と創刊号の特価を伝える）: 黒地にロゴを置き、赤ライン付きの白いキャッチを載せる。迫力のあるキービジュアルの下に赤の大きな価格帯を置く
2. ラインナップ（収録作品の豊富さを見せる）: チャコール地に中央揃えのリード文を置く。ポスターのカルーセルと号数一覧表を並べる
3. 近刊予告（序盤の号の内容を予告する）: モノクロ写真を薄く敷いた灰色地に、赤い号数ラベル付きの書影を横に並べる
4. 特別付録（継続購入を促す付録を紹介する）: 枠付きの白カード2枚にし、写真とテキストを左右反転させて配置する
5. 読者プレゼント（全員プレゼントで購入動機を高める）: ベージュの紙風バナーに極太の赤黒見出し、商品写真、赤いボタン、黒い締切帯を置く
6. マガジンの見どころ（誌面の企画を案内する）: 薄灰色の地に、色線付きの目次リストを並べる
7. 定期購読特典（直送の定期購読へ誘導する）: 黄色のバナーに吹き出し見出し、クリアファイルの表裏の写真、黒い締切ボックスを置く
8. 有料特典の案内（専用シェルフの追加申込を促す）: 水色地に寸法線入りの商品写真を置き、黒地の条件説明と細かな注釈を続ける
9. 関連商品とフッター（別売りケースと創刊日を案内する）: 青枠の価格ボックスと創刊日のテキストを置き、白いピル型のFAQボタン、著作権表記で締める

Imagery

• 暗い背景に赤い光が映える、怪獣映画風の迫力あるキービジュアルにする
• レトロな映画ポスター調の縦長画像をタイル状に並べる
• 商品は正面からやや斜めに撮った切り抜き写真にし、書影やボックスの立体感を出す
• 背景にはモノクロの映画スチルを薄く敷く
• 寸法線や引き出し線の注記を写真に重ねて説明する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約900pxのコンテンツ幅を取り、両端は黒地を伸ばす
• PC のFVは横長のビジュアルにし、右下に定期購読の緑ボタンを配置する
• 近刊予告はPCでは5号を横一列に並べる
• 付録カードはPCでは2枚を横並びにする
• 特典バナーはPCで横長に組み直し、写真とテキストを左右に分ける

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