--- version: alpha name: Black Grid Neon Pink Anime Collab Event LP description: 黒地のグリッド、白黒の市松帯、蛍光ピンクの強調色で組んだ、ゲーム・キャラクターコラボのグッズ販売イベントLP。ドット風の装飾、ホログラム調の銀モチーフ、ピンクのずらし影を付けた極太見出しでポップな雰囲気を出している。グッズ一覧と店舗情報は白地カードで情報を整理している。 colors: primary: '#FF1A8C' background: '#FFFFFF' dark-section: '#000000' line: '#282626' on-dark: '#F0F0EF' text: '#000000' text-muted: '#63696C' surface: '#FEFEFE' background-alt: '#EEDFE1' secondary: '#B4AAAB' accent-1: '#0F1014' primary-accessible: '#D4006A' typography: display: fontFamily: DotGothic16 fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 64px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' checker-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 300px badge-count: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px label-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 22px label-pink: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 24px heading-shadow: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px heading-checker-bar: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px tab-gray: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 56px pagetop: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 60px --- # DESIGN.md — 黒グリッド×蛍光ピンクのアニメコラボイベントLP（Black Grid Neon Pink Anime Collab Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、クール・先進的、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 市松模様・黒グリッド・蛍光ピンク・ドット装飾・ホログラム・ゲームUI風 - **地の質感**: 黒地に細いグレーの方眼線を引き、虹色ホログラムのFV背景と銀色の立体モチーフを重ねる - **形**: 四角いカードが基本。市松の帯で区切り、FV下端だけ斜めにカットする - **温度感**: クールな黒白にホットなピンクを差したハイコントラスト ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF1A8C` | 強調色（キーワード下線・ラベル・キャラ名） | 2% | 推定 | | `background` | `#FFFFFF` | 白地セクション | 48% | 画素の実測 | | `dark-section` | `#000000` | グリッドを敷いた黒地セクション | 25% | 画素の実測 | | `line` | `#282626` | 黒地の方眼線 | 2% | 画素の主要色に補正 | | `on-dark` | `#F0F0EF` | 黒地上の本文 | 2% | 画素の実測 | | `text` | `#000000` | 見出し・本文 | 3% | 画素の実測 | | `text-muted` | `#63696C` | 注釈・規約 | 2% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | グッズ画像の背景 | 4% | 画素の実測 | | `background-alt` | `#EEDFE1` | FVのホログラム背景 | 3% | 画素の主要色に補正 | | `secondary` | `#B4AAAB` | 銀色の立体モチーフ・グレータブ | 3% | 画素の主要色に補正 | | `accent-1` | `#0F1014` | 店舗ラベルの黒ボックス | 1% | 画素の主要色に補正 | | `primary-accessible` | `#D4006A` | AA を満たす補正値（計算） | | 計算 | - 地色は黒（グリッドあり）と白を交互にし、境目には必ず白黒の市松帯を入れる - ピンクは強調にだけ使う。キーワード下線、ラベル、金額、リンク、小さな装飾に限る - 黒地のセクションでも、情報量が多い部分は白カードに載せて読みやすくする - 見出しの文字は黒で、ピンクのずらし影を付けた白抜きにする - ラベル類は黒地に白文字の四角いボックスにする - FVだけ虹色ホログラムのグラデーション背景にする - `label-pink` は文字 `#F0F0EF` × 背景 `#FF1A8C` のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D4006A`、4.6:1）を使う。 - `pagetop` は文字 `#F0F0EF` × 背景 `#FF1A8C` のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D4006A`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのイベント名（ピクセル調） | 装飾・ディスプレイ | DotGothic16 | 400 | 44px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（ずらし影付き） | 装飾・ディスプレイ | Dela Gothic One | 400 | 32px | 1.2 | 0.02em | | `headline-md` | リード文・店舗名 | ゴシック | Noto Sans JP | 900 | 22px | 1.5 | 0.04em | | `headline-sm` | 市松付きのサブ見出し帯・商品名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.8 | 0.02em | | `note` | 注釈・規約 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | | `accent` | 背景に縦書きで置く巨大な欧文の透かし | 欧文サンセリフ | Montserrat | 900 | 64px | 1.0 | 0.05em | | `label-button` | ピル型ボタン・数量バッジ | ゴシック | Noto Sans JP | 700 | 13px | 1.0 | 0.02em | - 全体的に太字。本文も700ウェイトを基本にする - セクション見出しは極太の書体に、ピンクのずらし影と白い縁取りを付ける - 見出しには細い楕円の線とキラキラの装飾を添える - 金額は大きく太く、「税込」を小さく添える - 黒地の上に、文字に縁取りを付けた巨大欧文を縦置きして透かしにする - 強調語はピンク文字、またはピンクの下線マーカーで示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。グッズは2列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - グッズカードは2列で、間隔は12px程度 - カードの上下端に市松の帯を付ける - 店舗情報は罫線で区切ったリストにし、各ブロックの右下にボタンを置く - 黒地セクションでは、白カードを縦に並べて企画を紹介する - 装飾（+++、ドット、ハート、弾丸）は余白に散らす ## Elevation & Depth - 影は基本使わず、フラットにする - 立体感は銀色ホログラムのモチーフで出す - 見出しはずらし影で浮かせる ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 四角のまま角丸にしない。メイン画像はピンクの細枠で囲む - **セクション境界**: 白黒の市松帯（1マス約16px）。FVの下端だけ斜めにカットする - カードとラベルは角丸なしの直角 - ボタンとバッジだけピル型 - 額装商品は黒い太枠で見せる ## Components - **市松枠のグッズカード**（`checker-card`）: 上下に市松帯がある白カード。グレー地の商品画像、商品名、数量バッジ、金額で構成する - **数量ピルバッジ**（`badge-count`）: 種類数を示す黒いピル - **黒の四角ラベル**（`label-tag`）: 商品の種別や開催期間の項目名に使う - **ピンク帯ラベル**（`label-pink`）: 強調する項目名に使い、下にピンク文字の値を並べる - **ずらし影の見出し**（`heading-shadow`）: 極太文字にピンクのずらし影を付け、楕円の線とキラキラを添える - **市松付きのサブ見出し帯**（`heading-checker-bar`）: 黒帯の左右に市松の四角を付けた見出し - **枠線のピルボタン**（`button-outline`）: 白地に黒い細枠。外部サイトへのリンクに使う - **グレーの切替タブ**（`tab-gray`）: 銀色グラデーションの四角いタブ。選択中は下に三角を付ける - **弾丸型のトップへ戻るボタン**（`pagetop`）: ピンクの弾丸イラストに文字を添えて固定表示する ## Do's and Don'ts **Do** - セクションの境目には必ず市松帯を入れる - 黒地には方眼グリッドと縦置きの巨大欧文を敷く - ピンクは要点を絞って使う - キャラクター画像を大きく見せる - ドット、ハート、+++、弾丸の装飾を余白に散らす **Don't** - カードに角丸や柔らかい影を付けない - ピンク以外の強調色を増やさない - 本文に細いウェイトを使わない - パステル調の背景を広く使わない（FVだけに限る） - 明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの内容と開催日を伝える）: ホログラム背景にキャラクター集合イラストを置き、黒帯のタイトル、ピクセル調のピンクロゴ、斜めの日付帯を重ねる 2. **イベント概要**（コラボの主旨を説明する）: 黒グリッド地に白の太字を中央揃えで置き、キーワードにピンクの下線を引く 3. **作品・作家紹介**（背景にある作品と作家を説明する）: グレーのタブで切り替える。ピンク枠のキービジュアルの下に本文を置く 4. **イラスト紹介**（描き下ろしイラストを見せる）: 斜めにカットした黒帯の上で動画風に見せ、ピンクの再生ボタンを添える 5. **グッズラインナップ**（商品と価格を一覧にする）: 市松枠のカードを2列グリッドで並べる 6. **受注生産商品**（高額商品の予約へ誘導する）: 大きな白カードに額装画像のスライダー、価格、受付先リンクを置く 7. **イベント特別企画**（購入特典・パネル展示・駅広告を紹介する）: 黒地の上に白カードを縦に並べ、市松付きのサブ見出しを付ける 8. **SNSキャンペーン**（応募を促す）: 白カードに応募条件、黒ラベルの応募期間、告知画像、規約を載せる 9. **店舗情報**（開催店舗と開催期間を案内する）: 罫線で区切ったリストに、黒・ピンクのラベルとピルボタンを並べる 10. **フッター**（権利表記とロゴを載せる）: 市松帯の下に黒地を敷き、白の小さな文字とロゴを置く ## Imagery - イラストは白背景の切り抜きで、キャラクターの全身を集合させる - グッズは白〜薄グレー地に正面から並べた物撮り - 銀色ホログラムの星・ハート・キラキラのモチーフを使う - ピンクの弾丸、ピクセル調のハート、ドット群、+++記号を装飾に使う - 照準マークを薄く透かしで入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央の幅を約800pxにし、グッズを4列にする - PCでは複製原画を3点横並びにする - PCでは店舗情報を2列グリッドにする - PCでは左右の余白に縦書きの巨大欧文を置く - FVはPCで横長にし、キャラクターを右、ロゴを左に配置する ## 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-5d1fc632`（元 LP の URL から採番） - **元 LP**: https://algernonproduct.co.jp/danganronpa-sanrio-kei_mochizuki/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。