DESIGN.md — 赤地×白カード×黒線の吹き出しゲーム周辺機器 LP（Red Pop Gaming Accessory Speech-Bubble LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 朱赤・吹き出し・黒太線・ラインイラスト・白カード・用途別カタログ
• 地の質感: 赤地に濃淡の赤で丸・菱形・ドットの幾何学パターンを敷く。カードの中は白一色でフラット
• 形: 大きな角丸の白カード、黒い2px線の吹き出し見出し、ピル型ボタン
• 温度感: 暖かく元気。赤と生成りに黒線を合わせて引き締める

Colors

• 地は朱赤で統一し、悩み一覧だけを生成りにして区切る
• 情報は必ず白カードの上に置き、赤地に本文を直接置かない
• 線・アイコン・見出しは黒1色。グラデーションは使わない
• 黄色は最終CTAとFVの一言コピーだけに使う
• 注意書きは赤い小さな文字にする
• サブボタンはグレー地と白地＋黒枠の2種類を並べる

Typography

• 見出しは太字ゴシックで黒にする
• 装飾フォントはFVだけに使う
• 吹き出し見出しは2段組みで、上に太字の悩み、下に小さなカテゴリー名を置く
• 本文は左揃えで、1段落を3〜5行に収める
• 型番は太字、その下に商品名を通常の太さで置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品リストは2列、ボタンは縦積み
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 用途ごとに『吹き出し見出し＋白カード』を1ブロックとして繰り返す
• 吹き出しはカードの上端に半分重ねる
• カード内は『見出し・本文』と『図解イラスト』を並べ、SPでは縦に積む
• カテゴリー小見出しの右から黒い横線をカード端まで伸ばす
• 商品は小さな画像と型番・商品名を横に並べてグリッド化する
• カードの末尾に2つのボタンを並べる

Elevation & Depth

• 影は使わず、すべてフラットにする
• 立体感は黒線と白い面のコントラストだけで出す
• 吹き出しはカードの上に重ねて前後関係を示す

Shapes

• 角丸: 小 4px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は白背景の切り抜きを正方形の枠に入れる。人物は線画イラストにする
• セクション境界: 直線で色を切り替える。カード間は赤地の余白で区切る
• 吹き出しは黒2px枠・角丸14px・下向きの三角しっぽ付き
• 白カードは角丸24px前後で枠線なし
• ボタンは黒1.5px枠のピル型
• 悩みカードは黒枠の吹き出しにアイコンを添える

Components

• 吹き出し見出し（speech-heading）: 白地に黒枠の吹き出し。左にラインアイコン、中央に太字の悩み、下にカテゴリー名。下向きのしっぽ付き
• 用途別白カード（content-card）: 赤地に浮かぶ大きな白い角丸カード。説明・図解・商品リスト・ボタンを収める
• 悩み吹き出しカード（worry-bubble）: 生成り地に並ぶ黒枠の小さな吹き出し。悩み・アイコン・カテゴリー名を入れ、ページ内リンクにする
• 横線つき小見出し（line-heading）: カテゴリー名と太字のリード。右に黒1.5pxの横線を伸ばす
• 商品アイテム（product-item）: 正方形の商品画像の右に太字の型番と商品名
• 製品を見るボタン（button-secondary）: グレー地に黒枠のピル型
• 検索するボタン（button-outline）: 白地に黒枠のピル型
• 最終CTA（button-primary）: 赤地に置く黄色地・黒枠のピル型ボタン。2つを縦に並べる
• 機種切替タブ（platform-tabs）: 右上に並ぶ小さな白いピル。選択中は黒地に白文字

Do's and Don'ts

Do - 用途ごとに吹き出しと白カードのセットを同じ形で繰り返す - アイコンと図解は黒線＋赤のフラットな線画にする - 赤地に薄い幾何学パターンを敷いてにぎやかに見せる - 図解に小さな吹き出しでメリットを添える - ボタンはすべて黒枠のピル型にそろえる

Don't - 写真を背景いっぱいに敷かない - 影やグラデーションでリッチに見せない - 黄色を途中のボタンに使わない - 赤地の上に長い本文を直接置かない - 明朝体や細い書体を使わない

Page Structure

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

1. ファーストビュー（テーマと楽しさを一目で伝える）: 赤地にパターンを敷き、白い雲形に大見出しを置く。中央にゲームをする人物の線画、周りに機器のイラスト、左右に黄色の手書き風コピー
2. 悩みの提起（用途別の悩みを並べて目次にする）: 生成り地に中央の見出し。黒枠の吹き出しカードを4＋3個並べ、各カードにアイコンとカテゴリー名
3. 用途別紹介（通信）（悩みと解決策・商品を示す）: 吹き出し見出し→白カード。見出しと本文、接続図、横線つき小見出し、商品、2つのボタン
4. 用途別紹介（映像）（同じ型で別の悩みに答える）: 同じカード構成。図解に丸い吹き出しバッジを添え、注意書きは赤文字
5. 用途別紹介（音声・持ち運び・保護）（商品カテゴリーを広く紹介する）: 同じカードを繰り返す。商品が3〜5点なら3列グリッドにする
6. 用途別紹介（操作パッド）（新しい使い方のメリットを比べて見せる）: 白カードの中に、人物イラスト＋吹き出し＋手元イラストのメリット比較パネルを2つ並べる
7. 用途別紹介（スティック）（カスタマイズのメリットを伝える）: 中心の製品イラストを3つの吹き出しで囲む図解
8. CTA（対応製品の一覧と検索へ誘導する）: 赤地に白い太字の見出し、黄色いピル型ボタンを2つ縦に並べ、最下部に小さな注記

Imagery

• 人物とイラストは均一な黒の太線に、赤・グレー・黄の少ない色で塗るフラットな線画
• アイコンは黒線のシンプルなピクトグラム（ケーブル・モニター・ヘッドセット・ポーチなど）
• 商品写真は白背景の切り抜きで小さく並べる
• 図解は機器同士を線でつなぎ、ラベルを添えた簡単な接続図にする
• 背景は赤の濃淡で円・菱形・ドット・斜線を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せのカード幅約840px。SPは画面幅の92%にする
• カード内の本文と図解はPCで左右に並べ、SPでは縦に積む
• 悩みカードはPCで4列＋3列、SPでは2列にする
• 商品グリッドはPCで3列、SPで2列にする
• 2つのボタンはPCで横並び、SPでは縦に積んで全幅にする
• FVのイラストは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 行書くと起動時に読み込まれる。