DESIGN.md — 紫紺×ネオンピンクのゲーミングPCコラボLP（Neon Pink Cyber Gaming Collab LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、力強い・インパクト、ポップ・元気
• キーワード: サイバー・ネオンピンク・回路柄・斜めカット・キャラクターコラボ・ゲーミング
• 地の質感: 暗い紫紺の地にうっすらコード文字柄、グレー地には白い回路線とハッチング柄を重ねる。カードは半透明ガラス風。
• 形: 角を斜めに落とした平行四辺形の見出しプレート、四隅だけのブラケット枠、角丸のカード、ピル型ボタン。
• 温度感: 暗くクールな寒色を地にして、ピンクで熱を足す

Colors

• 地の色はセクションごとに紫紺→グレー→紫紺→白→生成りと切り替える。
• 強調色はネオンピンク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

• セクション見出しは、幾何学的でワイドな英字書体をイタリック風にして、白抜きで置く。
• 日本語はゴシック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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。