--- version: alpha name: Red Pop Gaming Accessory Speech-Bubble LP description: 朱赤の地に幾何学パターンを薄く敷き、白い大きな角丸カードと黒い太線の吹き出し見出しで用途ごとに商品を紹介する。黒線のイラストとアイコンでポップに見せる、ゲーム周辺機器のカタログ型 LP。 colors: primary: '#DB4E4C' background: '#FEFEFE' background-alt: '#FFFBE8' tint-1: '#D84D4B' text: '#1D1E1D' text-body: '#333333' accent-1: '#D84D4B' surface: '#EBEBEB' cta: '#FCDC23' on-cta: '#1A1A1A' accent-2: '#F5C93C' on-dark: '#FFFFFF' typography: display: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Yusei Magic fontSize: 20px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.1em headline-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' speech-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 72px content-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 600px worry-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 100px line-heading: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px product-item: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 64px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px platform-tabs: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px --- # DESIGN.md — 赤地×白カード×黒線の吹き出しゲーム周辺機器 LP（Red Pop Gaming Accessory Speech-Bubble LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 朱赤・吹き出し・黒太線・ラインイラスト・白カード・用途別カタログ - **地の質感**: 赤地に濃淡の赤で丸・菱形・ドットの幾何学パターンを敷く。カードの中は白一色でフラット - **形**: 大きな角丸の白カード、黒い2px線の吹き出し見出し、ピル型ボタン - **温度感**: 暖かく元気。赤と生成りに黒線を合わせて引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DB4E4C` | 地の朱赤 | 20% | 画素の実測 | | `background` | `#FEFEFE` | カードの白 | 54% | 画素の実測 | | `background-alt` | `#FFFBE8` | 悩みセクションの生成り | 4% | 画素の実測 | | `tint-1` | `#D84D4B` | 赤地パターンの濃い赤 | 3% | 画素の主要色に補正 | | `text` | `#1D1E1D` | 見出し・線・アイコン | 3% | 画素の実測 | | `text-body` | `#333333` | 本文 | 2% | 推定 | | `accent-1` | `#D84D4B` | 注意書きの赤文字 | 0% | 画素の主要色に補正 | | `surface` | `#EBEBEB` | グレーのサブボタン | 2% | 画素の実測 | | `cta` | `#FCDC23` | 最終CTAの黄色 | 1% | 画素の実測 | | `on-cta` | `#1A1A1A` | CTA上の文字 | 0% | 推定 | | `accent-2` | `#F5C93C` | FVコピーの黄色 | 0% | 推定 | | `on-dark` | `#FFFFFF` | 赤地上の白文字 | 0% | 画素の主要色に補正 | - 地は朱赤で統一し、悩み一覧だけを生成りにして区切る - 情報は必ず白カードの上に置き、赤地に本文を直接置かない - 線・アイコン・見出しは黒1色。グラデーションは使わない - 黄色は最終CTAとFVの一言コピーだけに使う - 注意書きは赤い小さな文字にする - サブボタンはグレー地と白地＋黒枠の2種類を並べる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し（白い雲形の中に置く） | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.3 | 0.02em | | `accent` | FVの手書き風サブコピー | 手書き・筆 | Yusei Magic | 400 | 20px | 1.3 | 0.1em | | `headline-lg` | 吹き出し見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `headline-md` | カード内のベネフィット見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `headline-sm` | カテゴリー小見出し（下に横線）・商品名 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 注意書き・型番 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.02em | - 見出しは太字ゴシックで黒にする - 装飾フォントは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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-baca3d84`（元 LP の URL から採番） - **元 LP**: https://www.elecom.co.jp/pickup/contents/00032/switch2/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。