---
version: alpha
name: Pop Comic Character Brand Site
description: 鮮やかな緑の放射線背景に、黒い太線フチのコミック調イラストを全面に出したキャラクター公式サイト。キャラごとに地色とテープ帯の色を変え、紙片風のタイトル札、ハッシュタグ型のピル、黒フチ・影付きの白カードで構成する。後半は赤い舞台幕で動画を見せ、緑の地にニュース、黄色の地にギザギザの吹き出し型ボタンで問い合わせへつなぐ。
colors:
  primary: '#36B34B'
  secondary: '#009247'
  accent-1: '#B30115'
  dark-section: '#6E7969'
  background: '#FEFEFD'
  background-alt: '#FFFDF4'
  surface: '#F1EBDD'
  accent-2: '#FFF582'
  accent-3: '#7AB4E3'
  tint-1: '#F3838D'
  text: '#272521'
  on-primary: '#F9FEFA'
  marker: '#FEDC2B'
  cta: '#FDFDFD'
  on-cta: '#030303'
  primary-accessible: '#288638'
typography:
  display:
    fontFamily: Rubik
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: M PLUS Rounded 1c
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.05em
  body-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 16px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Rubik
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 10px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-title:
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 64px
  character-plate:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 150px
  hashtag-pill:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 24px
  tape-band:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.text}'
    height: 20px
  media-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 160px
  news-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 200px
  button-more:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 36px
  burst-button:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    height: 110px
  side-icon-nav:
    backgroundColor: '{colors.marker}'
    rounded: '{rounded.sm}'
    height: 40px
---

# DESIGN.md — 緑の集中線と太線フチのキャラクター公式LP（Pop Comic Character Brand Site）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト、親しみ・手作り感
- **キーワード**: 集中線・太線フチ・コミック・キャラ別配色・舞台幕・ステッカー
- **地の質感**: ベタ塗り中心。緑の放射線背景、淡色のキャラシルエットを散らした柄、紙片風の札など、印刷物っぽい平面的な質感。
- **形**: 黒い太線フチの角丸カード、少しゆがんだ紙片の札、ピル型タグ、ギザギザ吹き出し、波形の幕。
- **温度感**: 暖かくにぎやか。高彩度の緑・赤・黄が主役。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#36B34B` | ブランドの緑・放射線背景 | 25% | 画素の実測 |
| `secondary` | `#009247` | 濃い緑・ABOUT帯 | 9% | 画素の実測 |
| `accent-1` | `#B30115` | 舞台幕の赤 | 9% | 画素の実測 |
| `dark-section` | `#6E7969` | 舞台の床・壁のグレー | 6% | 画素の主要色に補正 |
| `background` | `#FEFEFD` | 白地セクション | 18% | 画素の実測 |
| `background-alt` | `#FFFDF4` | 生成りのキャラ紹介地 | 12% | 画素の実測 |
| `surface` | `#F1EBDD` | 紙片札のベージュ | 4% | 画素の主要色に補正 |
| `accent-2` | `#FFF582` | 問い合わせ地の黄色 | 6% | 画素の実測 |
| `accent-3` | `#7AB4E3` | テープ帯の水色 | 2% | 画素の実測 |
| `tint-1` | `#F3838D` | ピンクのテープ帯・タグ文字 | 2% | 画素の実測 |
| `text` | `#272521` | 線画・見出し文字の黒 | 3% | 画素の実測 |
| `on-primary` | `#F9FEFA` | 緑地上の白文字 | 1% | 画素の実測 |
| `marker` | `#FEDC2B` | 矢印・アイコンの黄 | 1% | 画素の実測 |
| `cta` | `#FDFDFD` | もっと見るボタン | 1% | 画素の実測 |
| `on-cta` | `#030303` | ボタン文字 | 0% | 画素の実測 |
| `primary-accessible` | `#288638` | AA を満たす補正値（計算） |  | 計算 |

- 基本の地はブランド緑。中心から広がる2色の緑の放射線で動きを出す。
- キャラ紹介はキャラごとに地色（緑／生成り／白）とテープ帯の色（水色・ピンク）を切り替える。
- 動画セクションは赤い幕とグレーの舞台でまとめ、緑と切り替える。
- 線と文字はほぼ黒で統一し、太いフチ線で色面を区切る。
- タグ文字はそのキャラのテーマ色（緑・ピンク・水色）にする。
- 問い合わせは黄色地で締め、白いギザギザ吹き出しをボタンにする。
- `hashtag-pill` は文字 `#36B34B` × 背景 `#FEFEFD` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#288638`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの英字大見出し | 欧文サンセリフ | Rubik | 900 | 40px | 1.1 | 0.02em |
| `headline-lg` | キャラ名のロゴ風見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.02em |
| `headline-sm` | 英字見出しの下に添えるカナ | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.3 | 0.05em |
| `body-lg` | キャラのキャッチ文 | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.5 | 0.03em |
| `body-md` | 紹介文・カード本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.02em |
| `note` | 日付・コピーライト | 欧文サンセリフ | Rubik | 700 | 11px | 1.4 | 0.02em |
| `label-button` | ボタン・タグ | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.2 | 0.03em |

- 見出しは極太の英字と小さなカナの2段組みで中央揃え。
- 本文もすべて太字。細いウェイトは使わない。
- キャラ名は手描きロゴのような太い装飾書体にし、黒フチを付ける。
- 緑地の上は白文字、明るい地の上は黒文字。
- 文章は短く、中央揃えで数行にまとめる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カードは 2 列、タグは 2〜3 列で折り返す
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 10px（375px 幅換算）
- 各セクションは中央揃えの英字見出しから始める。
- キャラ紹介は紙片の札とメインポーズのイラストを組み、下にポーズ違いのイラストとタグを並べる。
- セクションの間に、キャラアイコンを並べたテープ帯を挟む。
- イラストはセクションの境界やカードからはみ出させて配置する。
- 動画は幕に囲まれた舞台の中にカードを並べる。

## Elevation & Depth

- カードは黒フチ2〜3pxに、ぼかさない黒のずらし影（4px）を付ける。
- ニュースカードは裏にもう1枚重ねて、紙の束のように見せる。
- ドロップシャドウ（ぼかし影）は使わない。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: 動画・ニュースのサムネイルは角丸の長方形。キャラは切り抜きイラストで使う。
- **セクション境界**: テープ帯、幕の波形、黄色地の大きな弧で区切る
- タグはピル型で白地に色文字。
- タイトル札は少し傾けた不定形の紙片にする。
- 問い合わせボタンはギザギザの吹き出し型にする。
- もっと見るボタンは黒フチの小さな角丸長方形。

## Components

- **英字＋カナ見出し**（`section-title`）: 極太の英字の下に小さなカナを添えて中央に置く。
- **紙片風タイトル札**（`character-plate`）: ベージュの不定形の札に、キャラ名のロゴと色付きのキャッチ文を載せる。
- **ハッシュタグ型タグ**（`hashtag-pill`）: 白いピルに、#付きの短い特徴とテーマ色の細フチを付ける。
- **キャラアイコンのテープ帯**（`tape-band`）: 水色・ピンクの細い帯に、キャラの顔とロゴを繰り返し並べる。
- **黒フチ動画カード**（`media-card`）: 白地に黒フチとずらし影。サムネイルの下に太字のタイトルを入れる。
- **重ねニュースカード**（`news-card`）: 2枚重ねの白カード。サムネイル・日付・タイトルの順に入れる。
- **もっと見るボタン**（`button-more`）: 白地に黒フチ・黒文字の小さなボタン。
- **吹き出し型問い合わせボタン**（`burst-button`）: 白いギザギザ吹き出しに黒の太フチ。中央に2行の太字ラベルを入れる。
- **アイテムアイコン縦ナビ**（`side-icon-nav`）: 黄色の正方形タイルに黒フチのアイテムイラストを入れ、縦に並べる。

## Do's and Don'ts

**Do**
- 線はすべて黒の太線にそろえ、ベタ塗りで描く。
- キャラごとにテーマ色と背景柄を変える。
- イラストを枠から大胆にはみ出させ、動きを出す。
- 見出しは英字＋カナの2段で統一する。
- セクションの境目にテープ帯や幕などの装飾を入れる。

**Don't**
- グラデーションやぼかし影で立体感を出さない。
- 細い明朝体や細ウェイトの文字を使わない。
- くすんだ色・低彩度の色だけで構成しない。
- 写真を背景いっぱいに使わない（イラストを主役にする）。
- 長い文章のブロックを置かない。

## Page Structure

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

1. **ファーストビュー**（世界観とキャラの印象付け）: 緑の放射線背景の中央にロゴ、両側にジャンプするキャラ、紙吹雪と吹き出しを置き、下端にニュースのティッカーを入れる。
2. **作品紹介**（作品の概要を伝える）: 濃い緑の帯に英字見出しと中央揃えの短い文章。周りにキャラを散らす。
3. **キャラクター見出し**（キャラ紹介への導入）: 放射線背景にUFOのイラストと大きな英字見出しを置く。
4. **キャラ紹介（繰り返し）**（各キャラの性格を伝える）: テープ帯で区切り、紙片の札、メインポーズ、ポーズ違いのイラスト、タグを並べる。キャラごとに地色を変える。
5. **動画（長尺）**（動画への送客）: 赤い幕の舞台に3列×2段の黒フチカードを並べ、中央にマイクを持つキャラ、矢印ともっと見るボタンを置く。
6. **動画（短尺）**（縦型動画への送客）: 同じ舞台の上に縦長カードを3枚並べる。
7. **ニュース**（最新情報を伝える）: 緑地に重ねカードを3列×2段で並べ、キャラを飛び出させる。下にもっと見るボタン。
8. **問い合わせ**（窓口への誘導）: 黄色の弧形の地に吹き出し型ボタンを2つ並べ、周りにキャラを置く。
9. **フッター**（規約と著作権の表示）: 黄色地に小さな黒文字を1行入れる。

## Imagery

- 韓国風コミックの線画キャラ。黒の太い主線で、ベタ塗り・陰影なし。
- 大げさな表情とジャンプなど動きのあるポーズで描く。
- 背景には淡色のキャラシルエットや小物を小さく散らす。
- 紙吹雪・花・惑星・UFOなどポップな小物で余白を埋める。
- サムネイルは文字入りのにぎやかな動画画面を想定する。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SP は 1 カラム。英字見出しは 36〜40px に縮める。
- 動画・ニュースカードは 2 列か横スクロールにする。
- 縦のアイコンナビは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-0d410720`（元 LP の URL から採番）
- **元 LP**: https://www.b2ang.jp/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。