--- version: alpha name: Neon Pink Cyber Gaming Collab LP description: ゲーミングPCとキャラクターのコラボを紹介するLP。暗い紫紺の背景にコード柄、グレーの回路柄の地、ネオンピンクの帯やボタンを組み合わせたサイバーな作り。斜めに角を落とした見出しプレートと、ピンクのグラデ帯が付いた製品カードが特徴。 colors: primary: '#EA5E96' cta: '#FE3B8A' on-cta: '#FBFBFB' background: '#B4B4B4' surface: '#B4B4B4' dark-section: '#25133B' background-alt: '#F9F9F9' accent-1: '#C93577' tint-1: '#FFD0E4' text: '#505151' on-dark: '#ECE9F4' secondary: '#011E60' accent-2: '#0CA3D4' background-accessible: '#C3C3C3' primary-accessible: '#CA1A61' surface-accessible: '#C3C3C3' cta-accessible: '#E4015D' accent-1-accessible: '#BD3270' accent-2-accessible: '#087193' typography: display: fontFamily: Orbitron fontSize: 30px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.05em headline-md: fontFamily: Orbitron fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' heading-slant-plate: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 56px category-bracket-label: backgroundColor: '{colors.on-dark}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 46px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 600px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px benefit-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 60px glass-card: textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.md}' height: 450px compare-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 22px sns-button: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px --- # DESIGN.md — 紫紺×ネオンピンクのゲーミングPCコラボLP（Neon Pink Cyber Gaming Collab LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: クール・先進的、力強い・インパクト、ポップ・元気 - **キーワード**: サイバー・ネオンピンク・回路柄・斜めカット・キャラクターコラボ・ゲーミング - **地の質感**: 暗い紫紺の地にうっすらコード文字柄、グレー地には白い回路線とハッチング柄を重ねる。カードは半透明ガラス風。 - **形**: 角を斜めに落とした平行四辺形の見出しプレート、四隅だけのブラケット枠、角丸のカード、ピル型ボタン。 - **温度感**: 暗くクールな寒色を地にして、ピンクで熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EA5E96` | 見出しプレートとカード上部の帯に使うネオンピンク | 7% | 画素の実測 | | `cta` | `#FE3B8A` | 詳細ボタン | 2% | 画素の実測 | | `on-cta` | `#FBFBFB` | ボタンの文字 | 0% | 画素の主要色に補正 | | `background` | `#B4B4B4` | 製品一覧セクションの回路柄グレー地 | 20% | 画素の実測 | | `surface` | `#B4B4B4` | 製品カードの面 | 14% | 画素の実測 | | `dark-section` | `#25133B` | FVと特典セクションの紫紺地 | 28% | 画素の実測 | | `background-alt` | `#F9F9F9` | プロフィールセクションの白地 | 13% | 画素の実測 | | `accent-1` | `#C93577` | 特典ラベルに使う濃いピンク | 3% | 画素の主要色に補正 | | `tint-1` | `#FFD0E4` | プロフィール画像の丸背景にする淡いピンク | 2% | 画素の実測 | | `text` | `#505151` | 製品名・本文 | 2% | 画素の実測 | | `on-dark` | `#ECE9F4` | 暗い地の上の文字と枠線 | 1% | 画素の実測 | | `secondary` | `#011E60` | フッター帯とロゴ文字のネイビー | 1% | 画素の実測 | | `accent-2` | `#0CA3D4` | 比較ラベル（通常の状態）に使うシアン | 0% | 画素の実測 | | `background-accessible` | `#C3C3C3` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CA1A61` | AA を満たす補正値（計算） | | 計算 | | `surface-accessible` | `#C3C3C3` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E4015D` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#BD3270` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#087193` | AA を満たす補正値（計算） | | 計算 | - 地の色はセクションごとに紫紺→グレー→紫紺→白→生成りと切り替える。 - 強調色はネオンピンク1色にしぼり、見出し・帯・ボタン・アイコン・矢印に使う。 - 暗い地の上のカードは白枠の半透明にし、背景のコード柄を少し透かす。 - 製品カードは、上部のピンク帯が下へ向かって透明になるグラデにする。 - ネイビーはロゴとフッター帯だけに使う。 - シアンは比較ラベルの『通常』側だけに使う。 - `page` は文字 `#505151` × 背景 `#B4B4B4` のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#C3C3C3`、4.52:1）を使う。 - `heading-slant-plate` は文字 `#ECE9F4` × 背景 `#EA5E96` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CA1A61`、4.57:1）を使う。 - `category-bracket-label` は文字 `#EA5E96` × 背景 `#ECE9F4` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CA1A61`、4.57:1）を使う。 - `product-card` は文字 `#505151` × 背景 `#B4B4B4` のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `surface-accessible`（`#C3C3C3`、4.52:1）を使う。 - `button-primary` は文字 `#FBFBFB` × 背景 `#FE3B8A` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E4015D`、4.55:1）を使う。 - `benefit-label` は文字 `#ECE9F4` × 背景 `#C93577` のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BD3270`、4.55:1）を使う。 - `compare-tag` は文字 `#ECE9F4` × 背景 `#0CA3D4` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#087193`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字のセクション見出し・FVロゴ | 装飾・ディスプレイ | Orbitron | 500 | 30px | 1.1 | 0.05em | | `headline-md` | カテゴリラベル（四隅ブラケット枠内） | 装飾・ディスプレイ | Orbitron | 400 | 20px | 1.2 | 0.1em | | `headline-sm` | 製品名・特典名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `body-lg` | 製品カードのピンク帯に置くキャッチ | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.02em | | `body-md` | スペック一覧・プロフィール本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.0em | | `accent` | 価格の数字 | ゴシック | Noto Sans JP | 500 | 18px | 1.3 | 0.02em | | `note` | 注釈・税込表記 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 14px | 1.0 | 0.05em | - セクション見出しは、幾何学的でワイドな英字書体をイタリック風にして、白抜きで置く。 - 日本語はゴシック1書体にそろえ、太さで階層をつける。 - 製品名とスペックは中央揃えにする。スペックの各行頭にはピンクの小さな矢印を付ける。 - 価格は数字を大きく、『円(税込)』を小さくする。 - プロフィールの名前は、太いイタリックの英字（ピンク）＋小さな日本語読みにし、下線を引く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの頭には、小アイコン3つ→斜めカット見出し→ブラケット枠のカテゴリラベルの順で積む。 - 製品カードは縦積みにし、カード同士の間隔は約70pxとる。 - カード上部のピンク帯は、カード枠より少し上にはみ出させる。 - 特典ラベルはカードの左外にはみ出して重ねる。 - ちびキャラをカードの右上角に重ねて置く。 - セクションの境界には、台形のタブ状の切り欠きを中央に付ける。 ## Elevation & Depth - ボタンは右下にずらしたグレーのソリッドな影（ぼかしなし）を付ける。 - カードは影を付けず、白い2px枠で浮かせる。 - 暗い地のカードは半透明白（10〜15%）にする。 - SNSボタンは、ピンクのオフセット枠で立体感を出す。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 製品は切り抜き。イラストは角丸4pxの長方形にし、プロフィールは円形で切り抜く。 - **セクション境界**: 直線で色を切り替え、中央に台形のタブ状の突起を付ける（ピンク帯の場合もある）。 - 見出しプレートは左上と右下を斜めに落とした平行四辺形にし、白い枠線で縁取る。 - カテゴリラベルは白い長方形にし、四隅にL字のブラケットを付ける。 - ボタンはすべてピル型にする。 - カードの角丸は8px程度にとどめる。 ## Components - **斜めカット見出し**（`heading-slant-plate`）: 白い枠付きのピンクの平行四辺形に、英字見出しを白抜きで置く。上にキャラ耳型のアイコンを3つ並べる。 - **ブラケット枠ラベル**（`category-bracket-label`）: 白い箱の四隅にL字の線を付け、ピンクの英字を入れる。 - **製品カード**（`product-card`）: グレー面に白枠。上部はピンクのグラデ帯にキャッチを2行入れ、製品の切り抜き→製品名→スペック3行→価格→ボタンの順に並べる。 - **詳細ボタン**（`button-primary`）: ピンクのピル型ボタン。右下にグレーのオフセット影を付ける。 - **特典番号ラベル**（`benefit-label`）: 白い枠付きの濃いピンクの長方形。番号と特典名の2行を入れ、カードの左外にはみ出させる。 - **半透明特典カード**（`glass-card`）: 暗い地の上に置く、白い枠の半透明カード。中にイラストと注釈を入れる。 - **比較タグ**（`compare-tag`）: シアンとピンクの小さなラベルを矢印でつなぎ、ビフォーアフターを示す。 - **SNSボタン**（`sns-button`）: 白いピル型。アイコンと名前を入れ、ピンクのオフセット枠を付ける。 ## Do's and Don'ts **Do** - 強調色はピンク1色に統一する。 - 英字見出しはワイドな幾何学書体で斜めのプレートに入れる。 - 背景にはコード柄や回路線を薄く敷き、サイバー感を出す。 - ちびキャラをカードの角に重ねて親しみを足す。 - ボタンにはオフセット影を付ける。 **Don't** - 暖色の別色や緑を強調に足さない。 - ぼかしの大きいソフトシャドウは使わない。 - 明朝体や手書き書体を使わない。 - カードの角丸を大きくしすぎない。 - 背景の柄を濃くして文字を読みにくくしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観と対象製品を一目で伝える）: 紫紺のコード柄背景に、ピンク枠のキービジュアルを置く。キャラのイラストと製品の斜め分割画像を並べ、下に英字の大ロゴを白とピンクの光彩で入れる。 2. **製品ラインナップ（デスクトップ）**（価格帯の違うモデルを比較させる）: グレーの回路柄の地に、斜め見出しとブラケットラベルを置く。下に製品カードを縦に3枚並べる。 3. **製品ラインナップ（ノート）**（持ち運べるモデルを紹介する）: 同じ形の製品カードを1枚置き、カードの角にちびキャラを重ねる。 4. **購入特典**（コラボモデルを買う理由を補強する）: 紫紺の地に半透明カードを4枚並べる。番号ラベルとイラストに加え、比較タグや表裏の画像を入れる。 5. **プロフィール**（コラボ相手の実績を伝える）: 白地に円形のアバターを置き、SNSボタン2つ、ピンクの英字名、本文と実績の箇条書きを続ける。 6. **クロージングビジュアル**（コラボの印象を残して締める）: 生成りの地にキャラの全身イラストと『×』でつないだ2つのロゴを置き、最下部をネイビーの帯にする。 ## Imagery - 製品は黒い筐体にピンクのLEDが光る切り抜き写真にし、白背景はグラデで溶かす。 - キャラクターはアニメ調の塗りにし、マゼンタの電光エフェクトを足す。 - ちびキャラのイラストを装飾として散らす。 - 背景は、コードエディタ風の文字列を紫のぼかしで敷く。 - グレー地には、回路線・十字・ハッチング・HUD風の円の線画を白で薄く描く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは製品カードを横長にし、画像を左、情報を右に置く。2枚目以降は2カラムのグリッドにする。 - PCのFVは横長の1枚ビジュアルにし、製品画像を右端へ寄せる。 - PCの特典ラベルは1行にし、番号と特典名を横に並べる。 - PCのプロフィールは、左にアバターとSNSボタン、右に本文を置く2カラムにする。 - PCのコンテンツ幅は約800〜900pxにして中央に置く。 ## 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-4c0dc183`（元 LP の URL から採番） - **元 LP**: https://www.dospara.co.jp/gamepc/cts_collab_yufuna.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。