---
version: alpha
name: Bold Purple Black Anime Collab Campaign LP
description: 三角格子柄の紫を地に、黒帯の見出し、黄の帯、赤いピル型ボタンを重ねた派手なキャンペーン LP。極太ゴシックに白フチを付けた文字と、キャラクターのイラストを大きく使う。後半は白地に細かい注釈を並べ、情報量の多い懸賞ページとしてまとめる。
colors:
  primary: '#A45FA2'
  dark-section: '#010101'
  secondary: '#EBC25B'
  cta: '#CB101B'
  on-cta: '#FFFFFF'
  background: '#FEFEFE'
  text: '#1F181A'
  accent-1: '#CB101B'
  accent-2: '#EBC25B'
  background-alt: '#CCCCCC'
  accent-3: '#F06020'
  tint-1: '#FCC54B'
  secondary-accessible: '#F6E2B1'
  accent-1-accessible: '#AF0E17'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.25
  headline-lg:
    fontFamily: M PLUS 1p
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.35
  headline-md:
    fontFamily: M PLUS 1p
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 900
    lineHeight: 1.4
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Dela Gothic One
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.1
  label-button:
    fontFamily: Dela Gothic One
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.2
rounded:
  sm: 4px
  md: 12px
  lg: 40px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 50px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 75px
  section-title-bar:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    height: 55px
  prize-header:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    height: 130px
  pt-badge:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.cta}'
    typography: '{typography.accent}'
    height: 50px
  count-badge:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    height: 40px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 400px
  notice-box:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.accent-1}'
    typography: '{typography.body-md}'
    height: 80px
  slant-band:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.secondary}'
    typography: '{typography.accent}'
    height: 60px
  rank-ladder:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    height: 280px
---

# DESIGN.md — 紫×黒×黄の極太見出しアニメコラボ懸賞 LP（Bold Purple Black Anime Collab Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
- **キーワード**: 紫の三角格子柄・黒帯の見出し・黄の帯・赤いピル型ボタン・極太白フチ文字・キャラクター集合絵
- **地の質感**: 紫の地に薄い三角格子線を敷く。ボタンには赤のグラデーションとピクセル風のノイズを入れる。
- **形**: 黒帯は斜めにカットする。ボタンは金フチのピル型、カードは角丸なしの太枠。
- **温度感**: 高彩度で熱量が高い。紫・赤・黄の補色に近い配色で対比を強くする。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#A45FA2` | 三角格子柄の地の紫 | 12% | 画素の実測 |
| `dark-section` | `#010101` | 見出しの黒帯 | 8% | 画素の実測 |
| `secondary` | `#EBC25B` | 黄の帯・強調文字 | 6% | 画素の主要色に補正 |
| `cta` | `#CB101B` | 応募ボタンの赤 | 4% | 画素の主要色に補正 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 1% | 画素の主要色に補正 |
| `background` | `#FEFEFE` | 本文の白地 | 39% | 画素の実測 |
| `text` | `#1F181A` | 本文の黒文字 | 5% | 画素の主要色に補正 |
| `accent-1` | `#CB101B` | 注釈の赤文字 | 1% | 画素の主要色に補正 |
| `accent-2` | `#EBC25B` | ボタンとアイコンの金フチ | 1% | 画素の主要色に補正 |
| `background-alt` | `#CCCCCC` | 手順例のグレーのボックス | 3% | 画素の実測 |
| `accent-3` | `#F06020` | フロー矢印のオレンジ | 1% | 推定 |
| `tint-1` | `#FCC54B` | 注意ボックスの薄い黄 | 2% | 画素の実測 |
| `secondary-accessible` | `#F6E2B1` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#AF0E17` | AA を満たす補正値（計算） |  | 計算 |

- 地は紫の三角格子柄にし、景品や本文のブロックは白地で区切る
- セクション見出しは黒帯に白の極太文字で入れる
- 強調したい語句や数字は黄にする。小見出しは黄の帯に黒文字
- 赤は応募ボタン・個数バッジ・STEP の帯だけに使う
- 注釈のうち重要なものは赤文字、そうでないものは黒文字にする
- 黄の囲みボックスには赤い枠線と赤文字を組み合わせる
- `pt-badge` は文字 `#CB101B` × 背景 `#EBC25B` のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#F6E2B1`、4.53:1）を使う。
- `notice-box` は文字 `#CB101B` × 背景 `#FCC54B` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#AF0E17`、4.56:1）を使う。
- `rank-ladder` は文字 `#FFFFFF` × 背景 `#EBC25B` のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#F6E2B1`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューやボタンの大見出し（白フチ・影付き） | 装飾・ディスプレイ | Dela Gothic One | 900 | 30px | 1.25 | 0.0em |
| `headline-lg` | 紫地に置く訴求文 | ゴシック | M PLUS 1p | 900 | 24px | 1.35 | 0.0em |
| `headline-md` | 黒帯の見出しと景品名 | ゴシック | M PLUS 1p | 900 | 22px | 1.3 | 0.02em |
| `headline-sm` | 黄帯の小見出しと STEP の説明 | ゴシック | Noto Sans JP | 900 | 15px | 1.4 | 0.0em |
| `body-md` | 注意事項などの本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.0em |
| `note` | 「※」付きの注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `accent` | pt バッジと斜め帯の斜体文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 22px | 1.1 | 0.0em |
| `label-button` | 応募ボタンのラベル | 装飾・ディスプレイ | Dela Gothic One | 900 | 24px | 1.2 | 0.0em |

- 見出しはすべて極太ゴシックにする。紫地では白文字に黒フチと影を付ける
- 1 つの見出しの中でも、キーワードを黄にし、助詞は小さくする
- 日付は数字を大きく、曜日は小さくする
- 本文と注釈は細めの Noto Sans JP で組み、行間を広めに取る
- 斜めの帯の文字は黄の斜体にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。グッズは 3 列、待ち受け画像は 4 列のグリッドにする
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 50px、基本単位 8px、カード内 16px（375px 幅換算）
- 見出しの黒帯は画面幅いっぱいに敷き、右端に赤い個数バッジを重ねる
- 見出しの左上に pt バッジやランクのメダルを食い込ませる
- 景品セクションは白地にし、上端に紫の格子帯を細く残す
- STEP カードは黒の太枠で囲み、上部に赤の帯を付ける
- 応募ボタンは紫地の中央に置き、注意事項に同意する旨の一文を添える

## Elevation & Depth

- ボタンには金フチと濃い影を付けて立体的に見せる
- 白フチの見出し文字にはドロップシャドウを付ける
- カードは影を付けず、太い枠線だけで区切る

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
- **写真の切り抜き**: キャラクターのアイコンは金フチの円形で切り抜く。グッズは切り抜きで並べる
- **セクション境界**: 紫の格子帯、または黒の斜め帯で区切る
- CTA は金フチのピル型にし、右下に外部リンクのアイコンを付ける
- pt バッジは黄の三角形に赤の斜体文字
- 個数バッジは赤の長方形
- 吹き出しは円形で、黄の線を使う

## Components

- **応募ボタン**（`button-primary`）: 赤のグラデーションに金フチを付けたピル型。中に白フチの極太文字を入れる。
- **黒帯見出し**（`section-title-bar`）: 幅いっぱいの黒帯に白の極太文字を入れ、上に紫の格子帯を置く。
- **景品見出し**（`prize-header`）: 黒地に黄帯の条件ラベル、左に pt バッジかメダル、右に赤の個数バッジを置く。
- **ポイントバッジ**（`pt-badge`）: 左上に置く黄の三角形。赤の斜体文字で pt 数を入れる。
- **個数バッジ**（`count-badge`）: 赤の長方形に白文字で種類数を入れる。
- **STEP カード**（`step-card`）: 黒の太枠で囲み、上部の赤帯に白文字で STEP 番号を入れる。
- **注意ボックス**（`notice-box`）: 黄地を赤い枠線で囲み、中に赤文字を中央揃えで入れる。
- **斜め帯**（`slant-band`）: 傾けた黒帯に黄の斜体文字を入れ、コースの区切りに使う。
- **ランク階段図**（`rank-ladder`）: 黄から赤へグラデーションする階段の上にメダルを置き、オレンジの矢印でつなぐ。

## Do's and Don'ts

**Do**
- 紫の格子地と白の情報ブロックを交互に置く
- 見出しは極太文字に白フチ・影を付け、強調語を黄にする
- 景品ごとに同じ見出しの型を繰り返す
- 注釈は「※」で始め、重要なものだけ赤文字にする
- CTA はページ内に複数回置く

**Don't**
- 細い明朝体や淡いパステル系の配色は使わない
- 角丸の大きいソフトなカードは使わない
- 赤を CTA とバッジ以外に乱用しない
- 白地のセクションに格子柄を敷かない

## Page Structure

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

1. **ファーストビュー**（コラボであることの告知）: キャラクターを縦に分割して並べ、中央にロゴを重ねる。黒の太フチで囲む。
2. **企画ナビ**（各企画への誘導）: 紫地に赤のピル型カードを 3 つ縦に並べ、右下に黄の矢印を付ける。
3. **メイン企画の紹介**（企画の内容と達成条件の説明）: 黄地に集合絵を置き、斜めの黒帯でキャッチを入れる。紫地に訴求文を続ける。
4. **達成率マップ**（進捗の可視化）: 暗い地にドット地図を描き、大きな % 表示とキャラの吹き出しを添える。
5. **ランク説明**（購入本数ごとの特典の提示）: 階段図とメダルで段階を示す。
6. **ランク特典**（景品の紹介）: 景品見出しの下に、円形アイコンや画像と注釈を置く。
7. **もれなくコース**（全員がもらえる景品の紹介）: 斜め帯を区切りにし、景品カードと番号付きリストを並べる。
8. **抽選コース**（抽選景品の紹介）: 当選数を黄のマーカーで強調し、グッズを切り抜きで並べる。
9. **対象商品**（購入対象の明示）: 商品写真と黄枠の吹き出しを置き、デザインの種類を一覧で見せる。
10. **対象店舗**（購入できる場所の案内）: 黒帯見出しの下に 2 列の箇条書き。
11. **応募方法**（手順の説明）: STEP カードを 4 枚並べ、フロー図とボタンを入れる。
12. **注意事項**（規約の掲載）: 白地に■付きの小見出しと本文を並べる。
13. **よくある質問**（疑問の解消）: Q 番号付きの太字の問いに本文の答えを続ける。
14. **最終 CTA**（応募への誘導）: 紫地に同意の一文と赤のピル型ボタンを置く。

## Imagery

- アニメ調のキャラクター集合絵を、立ちポーズの全身で大きく使う
- SD キャラのアイコンは単色背景の円形で、金フチを付ける
- グッズは白背景の切り抜きに SAMPLE の透かしを入れる
- ピクセル風のグリッチ質感をボタンや地図の背景に使う
- メダル・矢印・マイクのアイコンは単純な形のフラットな描き方にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に約 70% 幅の固定コンテナを置き、外側は紫の格子柄で埋める
- PC ではナビカードを 1+2 の配置にする
- PC の応募ボタンの横には QR コードを置き、スマホでの閲覧を促す
- PC ではリストを 1 行にまとめ、グリッドの列数を維持する

## 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-fb021982`（元 LP の URL から採番）
- **元 LP**: https://www.dodecamin-hololive.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。