DESIGN.md — 黒×白に水色光の配信者コラボゲーミングPC LP（Monochrome Neon Gaming PC Collab LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、力強い・インパクト、ラグジュアリー・ダーク
• キーワード: 黒白コントラスト・LED発光・巨大欧文・番号付き特長・星空ドット・角括弧見出し
• 地の質感: 黒地に細かな白い点を散らした星空・ドット模様。グレー地は無地で、写真の発光だけがグラデーションになる。
• 形: 角の立った長方形が基本。背景の巨大な英字は帯を斜めに横切るシルエットとして使う。
• 温度感: 寒色寄り。白と黒に水色の光を足した冷たい温度感。

Colors

• 黒の帯と明るいグレーの帯を交互に重ね、セクションごとに明暗を入れ替える
• 黒地には白文字、グレー地には黒文字。色は基本この2つだけにする
• 水色は英字の小見出しとボタンだけに使い、LEDの光と同じ色にそろえる
• 背景の巨大な英字は黒地なら白、グレー地なら黒にして、帯の明暗を反転させる
• オレンジと濃い青は商品一覧の価格やスペックタグだけに使う
• 黒地の一部には白い点の星空模様を敷いて、奥行きを出す

Typography

• 見出しは極太のサンセリフにして、角の立った力強さを出す
• セクション名は英大文字にし、細い角括弧〔 〕で左右を挟む
• 左端の縦帯に置くセクション名は、90度回転させた縦組みにする
• 本文も太字寄り（700）にして、暗い背景でもつぶれないようにする
• 水色の英字見出しの下に、白か黒の日本語見出しを2行で置く
• 番号は見出しより大きく、ブロックの隅に配置する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は写真と文章を左右交互に並べる 2 カラム）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• 特長は写真と文章を左右交互に並べ、ブロックごとに番号を振る
• 背景の巨大な英字は画面からはみ出してよく、本文の下のレイヤーに敷く
• セクション名の見出しは中央揃えか、左の縦帯に置く
• フォトギャラリーは隙間なく敷き詰める（SP は 3 列）
• 商品一覧は SP 2 列・PC 4 列のカードで並べる
• フロントパネルの切り替えタブは横一列に並べる

Elevation & Depth

• 影はほぼ使わない。明暗の差と発光写真で奥行きを出す
• 製品写真だけは、光のにじみ（グロー）で浮いて見せる
• マウスパッドや壁紙のモックは、白い角丸フレームの上に載せる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品の切り抜き写真を背景に溶け込ませる。ギャラリーは正方形・横長の矩形でトリミングする。
• セクション境界: 直線の水平区切りで黒とグレーの帯を切り替え、巨大英字の形が境界をまたぐ
• ボタンは角丸なしの長方形にし、右端に「>」を付ける
• 見出しの装飾は角括弧の線だけにする
• 円形はキャラクターのアイコンとラジオボタン以外では使わない

Components

• 角括弧セクション見出し（bracket-heading）: 英大文字の極太見出しを細い〔 〕で挟む。下に日本語のサブタイトルを置く。
• 縦組みセクション名（vertical-label）: 左端に90度回転した英字見出しを置き、角括弧を付ける
• 特長番号（feature-number）: 01〜06の極太の大きな数字。ブロックの下の隅に置く。
• 水色英字見出し（accent-eyebrow）: 日本語見出しの上に置く、水色の英字ラベル
• 水色リンクボタン（button-primary）: ダウンロードや公式SNSへ誘導する長方形のボタン。右端に矢印を付ける。
• 角度切り替えタブ（view-tabs）: LEFT 90°〜RIGHT 90°のように製品の向きを選ぶ横並びのタブ。左右に矢印を付ける。
• 商品カード（product-card）: 白い面に製品写真・型番・価格・スペックタグを詰め、最下部に詳細ボタンを置く
• 点線の引き出し注記（callout-line）: 製品写真の部位から点線を引き、水色の英字と白い説明文を添える

Do's and Don'ts

Do - 黒とグレーの帯を交互に重ね、リズムを作る - LEDの青白い光を写真の主役にする - 英大文字の巨大シルエットを背景に敷き、勢いを出す - 差し色の水色は小見出しとボタンに限定する - 特長には必ず大きな番号を振る

Don't - 暖色やパステルを広い面に使わない - ボタンを丸いピル型にしない - 細い明朝体を使わない - 背景の英字を本文より手前に出して、読みにくくしない - 製品を明るい白背景の物撮りで見せない

Page Structure

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

1. ファーストビュー（コラボモデルであることを一目で伝える）: 光る製品写真と巨大英字のシルエットを置き、右側に白抜きの英字タイトルとロゴを並べる
2. コンセプト（デザインの意図を伝える）: 黒地にキャラクターのシルエットを薄く敷く。左に縦組み見出しと本文、右に製品写真を置く。
3. 特長01 フロント（LEDファンの見た目を訴求する）: グレー地に巨大英字を敷き、中央に製品写真を置く。点線注記と角度切り替えタブを付ける。
4. 特長02〜06（冷却・拡張性・フィルター・パネル・照明を順に説明する）: 明暗の帯を交互に替え、写真と文章を左右交互に並べる。番号は大きくする。
5. フォトギャラリー（実機の雰囲気を見せる）: 黒地に発光写真を隙間なくグリッドで敷き詰める
6. カラー（LEDの色を変えられることを伝える）: グレー地に製品写真を置き、ラジオボタンで色を選ばせる。ソフト画面の写真と水色ボタンを添える。
7. 購入特典（特典グッズを訴求する）: 星空ドットの黒地に、白枠のモック画像と説明文を交互に置き、水色ボタンを付ける
8. 商品ラインナップ（購入へ誘導する）: グレー地に角括弧見出しを置き、4列の商品カードで価格とスペックを並べる
9. その他ラインナップ（関連モデルを提示する）: 濃紺の帯見出しの下に、同じ形式の商品カードを並べる
10. プロフィール（コラボ相手を紹介し、SNSへ誘導する）: 星空の黒地に縦組み見出しと紹介文、キャラクターのアイコンを置き、水色のSNSボタンを3つ縦に並べる

Imagery

• 暗室で撮った黒いPCケースに、青白いLEDファンが光るクローズアップ
• 水冷パーツは緑や水色に発光させ、冷たい印象にする
• キャラクターは白い線画のシルエットにし、黒地へ低コントラストで敷く
• 背景に白い小さな点を不規則に散らし、星空模様を作る
• 特典グッズは黒い製品を白い角丸フレームに載せたモックで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は左右交互の 2 カラムを縦積みにし、写真→文章の順に並べる
• 巨大英字の背景は SP でも残し、はみ出しを許す
• 縦組みのセクション名は、SP では横組みの角括弧見出しに替える
• ギャラリーは PC 5〜6 列を SP 3 列に減らす
• 商品カードは PC 4 列を SP 2 列に減らす
• 角度切り替えタブは、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 行書くと起動時に読み込まれる。