DESIGN.md — メカ図面グレー×漆黒の斜め帯キャラグッズLP（Mecha Blueprint Gray Character Goods LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、シンプル・ミニマル
• キーワード: メカ図面・斜め帯・モノトーン・角括弧・斜体ゴシック・キャラクター
• 地の質感: グレー地に細い回路図風の線画パターン。黒帯には星屑のような粒子ノイズを入れる
• 形: 角丸なしの直線と斜めのカット。角括弧と細い罫線でパネルを組む
• 温度感: クールで無彩色。色味は商品写真の赤と青だけが担う

Colors

• 地はグレーと黒の2色だけ。斜めの帯で交互に切り替える
• グレー地には黒文字、黒地には白文字だけを使う
• 有彩色はUIに使わない。写真とイラストの中の赤と青に任せる
• 見出しは白い帯の上に黒文字を載せ、グレー地から浮かせる
• 罫線と角括弧は黒地なら白、グレー地なら黒にする

Typography

• 見出しは極太ゴシックを斜体にしてスピード感を出す
• 本文は小さめの中央揃え。2行前後で短くまとめる
• セクション見出しの下に、小さな英字のサブ見出しを字間を広めに添える
• 番号は四角枠に入れた欧文の太字にして『>』を添える
• 台詞風のコピーは白い斜体で、2行目を右にずらして置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。写真2枚を斜めにずらして重ねる箇所あり
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 18px（375px 幅換算）
• セクションは斜めの帯（約10°）で区切る
• 写真は左右に寄せて互い違いに置き、少しだけ重ねる
• 特長パネルは左に黒地とテキスト、右に写真を並べ、写真の左端を黒にグラデーションで溶かす
• 特長パネルの間はグレー地を約40px見せ、帯を区切る
• キャラ絵は写真の横にはみ出させて重ねる

Elevation & Depth

• 影はほぼ使わず、色面の重なりで奥行きを出す
• 写真パネルには、ごく薄い影を付ける程度にとどめる
• キャラ絵は写真の上の前面に重ねる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の角切り。斜め帯の中で写真を交差させる
• セクション境界: 斜めの直線カット（右上がり・左上がりを交互に）
• 角丸は一切使わない
• リード文と見出しは大きな角括弧で挟む
• 番号は細い線の四角枠に入れる
• 見出しの白帯は細長い長方形にする

Components

• 白帯の商品名見出し（title-band）: 白い長方形に黒の斜体極太文字を載せる。小さめの作品名を上に重ねる
• 角括弧リード（bracket-lead）: 左右の端に大きな角括弧を置き、中央揃えの太字リードを挟む
• 括弧付きセクション見出し（section-heading）: 左右に角括弧、中央に見出しを置き、下に横罫線と英字サブ見出しを付ける
• バリエーションラベル（variant-label）: 白いボックスに黒枠と斜体名を入れ、下に小さな『∨』を付ける
• 番号付き特長パネル（feature-panel）: 左が黒地で、番号枠・斜体タイトル・区切り線・本文を縦に並べる。右は写真
• 番号枠（number-box）: 白い線の四角に2桁の数字を入れ、右に『>』を付ける
• 台詞コピー（quote-copy）: 黒い斜め帯の上に、白い斜体で2行を段違いに置く

Do's and Don'ts

Do - グレーと黒の斜め帯を交互に重ね、メカっぽい緊張感を保つ - 見出しは極太の斜体ゴシックで統一する - グレー地には回路図・基板風の線画パターンを敷く - 番号・括弧・罫線は細い線で精密に描く - 商品写真とキャラ絵を並べ、元ネタとの対応を見せる

Don't - 角丸やピル型のボタンを使わない - パステル色やUI用の有彩色を足さない - 手書き風・丸ゴシックの書体を使わない - グラデーションは写真の端を溶かす用途に限り、多用しない - 長文の本文を置かない

Page Structure

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

1. ファーストビュー（作品とキャラを示し、商品名を伝える）: 上にキャラ絵の黒い斜め帯、白帯の商品名を置き、グレー地の上に商品2種を並べる
2. コンセプトリード（商品の成り立ちを一文で伝える）: 星空の黒帯に、角括弧で挟んだ中央揃えの白文字を置く
3. 使用シーン（持ち歩く様子や置いた様子を見せる）: 写真2枚を互い違いに重ね、間に短い中央揃えの説明文を入れる
4. バリエーション紹介1（1種目のデザインのこだわりを伝える）: ラベルと説明文の下に、黒い斜め帯・商品写真・全身キャラ絵・台詞コピーを置く
5. バリエーション紹介2（2種目のデザインのこだわりを伝える）: 1種目と同じ構成を繰り返す
6. 機能面の特長（機能を4つの番号で示す）: 括弧付き見出しの下に、黒い特長パネルを4枚縦に積む
7. エンドビジュアル（余韻を残して締める）: 商品2種の引きの写真を黒へ溶かし、ロゴとコピーライトを置く

Imagery

• 商品は無機質な屋外（金属の壁・鉄の床）で、ローアングルから撮る
• 使用シーンは、手で持つ・バッグに付けるなど生活の中で撮る
• 物撮りは、自然光に近い柔らかい光で質感を見せる
• キャラはアニメのセル画風の全身絵を切り抜いて重ねる
• 背景装飾は回路図・基板風の細い線画と、星屑のノイズ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも約480pxの中央固定カラムで、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 行書くと起動時に読み込まれる。