DESIGN.md — 黒×深紅の金属質ホビーフィギュアLP（Dark Crimson Metal Hobby Figure LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 漆黒・深紅・金属質・斜め構図・筆文字・重厚
• 地の質感: 黒地に煙や影のシルエットを薄く重ね、赤い細枠で囲みます。地の赤には暗いグラデーションをかけます。
• 形: 角丸は使わず直角でまとめます。斜めの帯とストライプ、細い二重線の枠を使います。
• 温度感: 暗く熱い（黒と血のような赤）

Colors

• 地は黒と暗い深紅（#300000）の2色を交互に使い、セクションを区切ります。
• 鮮やかな赤はラベル帯と大見出しの文字にだけ使います。
• 明るい灰色はファーストビューとパーツ一覧のパネルに限ります。
• 本文はすべて白か淡い灰色で、黒地に重ねます。
• 商品の青や金は写真に任せ、UIの色には使いません。

Typography

• キャッチは筆文字を縦書きにし、赤と白で2つに分けて置きます。
• 英字のセクション名は細めのセリフ体で大きく組みます。
• 日本語の見出しは太い明朝体にして、重厚に見せます。
• 本文は11px前後の短文にとどめ、写真の余白に置きます。
• 大見出しには白い縁取りや影をつけ、写真から浮かせます。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。写真を全幅に置き、説明文を左右に交互に配置します。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 10px（375px 幅換算）
• 写真は左右の余白なしで大きく重ねます。
• 説明文は写真の空いた部分に、幅40〜50%で置きます。
• セクションは赤い細枠の二重線で囲みます。
• 細部写真は灰色パネルに入れ、ラベル帯をつけて差し込みます。

Elevation & Depth

• 影ではなく、背景に暗いシルエットを重ねて奥行きを出します。
• 大見出しにはドロップシャドウと白い縁取りを使います。
• パネルは赤い1px枠で区切り、浮かせません。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜いて背景に重ねます。細部写真は四角いパネルに入れます。
• セクション境界: 黒い帯と赤い細枠の二重線で区切ります。
• 角丸は禁止です。
• ラベル帯は片端を斜めにカットした赤い矩形にします。
• 斜めのストライプ帯で動きを出します。

Components

• 赤ラベル帯（label-ribbon）: 武器名を白の明朝体で入れる、片端を斜めにカットした赤帯です。
• 英字セクション見出し（section-title-en）: 大きなセリフ体の英字に下線を添え、横に赤帯の日本語見出しを並べます。
• 赤枠セクション（framed-section）: 深紅の地を赤い細線の二重枠で囲む、コンテンツ用の器です。
• 細部パネル（detail-panel）: 灰色のパネルに部品の写真を入れ、赤枠と上部のラベルをつけます。
• スタッフ表記（staff-table）: 暗緑の地に、役職と氏名を2列の小さな枠で並べます。
• 斜め数値表示（diagonal-stat）: 大きな明朝体の数値と状態名を、斜めの帯の上に配置します。
• 写真の説明文（caption-block）: 白い小さな文字で2〜3行の説明を写真の横に添えます。

Do's and Don'ts

Do - 商品写真を最大のサイズで斜めに配置し、迫力を出します。 - 黒と深紅の地を交互に使い、セクションの流れを作ります。 - 武器名は赤ラベル帯で統一します。 - 背景には暗い機体シルエットを重ね、奥行きを出します。 - 注意書きは最後にまとめ、小さい灰色の文字で入れます。

Don't - 角丸や柔らかいパステル色は使わないでください。 - 白地の明るいセクションを多用しないでください。 - 長い本文の段落は置かないでください。 - ポップな丸ゴシックは使わないでください。 - 赤を広い面に塗らないでください。帯と文字に限ります。

Page Structure

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

1. ファーストビュー（作品の世界観と商品名を一度に伝える。）: 明るい灰色の地に商品写真を斜めに置き、筆文字の縦書きキャッチと英字の商品名を重ねます。
2. 制作スタッフ（関わったクリエイターを示し、信頼性を高める。）: 暗緑のパネルに役職と氏名を2列で並べます。
3. 武器紹介1（主力武器のサイズとギミックを伝える。）: 英字の見出しと大きな数値見出しを置き、写真・設定画・斜めの状態比較を並べます。
4. ギミック詳細（可動や装着の方法を見せる。）: アクションポーズの写真を縦に連ね、左右交互に短い説明を添えます。
5. 武器紹介2（追加の武器と装備を紹介する。）: 赤ラベル帯と細部パネルで部品を一つずつ説明します。
6. イメージビジュアル（世界観に浸ってもらう。）: 黒地に炎のような光と全身写真を全幅で配置します。
7. セット内容（同梱物をすべて見せる。）: 灰色の地に部品を整列させた俯瞰写真を、赤枠で囲みます。
8. 注意書き・ロゴ（注意事項と権利表記で締める。）: 小さい灰色の注釈を並べ、黒地に煙をまとったロゴを中央に置きます。

Imagery

• 金属質のフィギュアを、硬い光でコントラスト強めに撮ります。
• 商品は切り抜き、斜めのダイナミックな構図で重ねます。
• 背景には暗い機体シルエットや煙を、低い不透明度で入れます。
• 設定画や線画を白いパネルで差し込み、資料らしさを出します。
• セット内容は灰色の地に整列させ、真上から撮ります。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像がないため、以下は推奨です。PCではコンテンツを幅1000px程度の中央カラムに収め、左右は黒い地で埋めます。
• 写真と説明文を2カラムの交互配置にします。
• 英字見出しは64px前後まで拡大します。
• 赤枠セクションは中央カラムの幅に合わせて囲みます。

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