---
version: alpha
name: Black Stage Cream Capsule Idol Event LP
description: 真っ黒な地に、生成り色の大きな角丸パネルとピル型の見出しを重ねたイベント告知LP。見出しは太い欧文コンデンスで、色はほぼモノクロ。華やかな色は出演者の写真とキービジュアルにだけ任せている。
colors:
  background: '#000000'
  primary: '#FFFBF2'
  text: '#020000'
  on-dark: '#FFFEFA'
  secondary: '#7E7D79'
  dark-section: '#010101'
  background-alt: '#FFFFFF'
  cta: '#FEFCF3'
  on-cta: '#0C0907'
  accent-1: '#C64F82'
  accent-2: '#668CD7'
  line: '#D0D5D7'
  secondary-accessible: '#767572'
  accent-1-accessible: '#C4497E'
typography:
  display:
    fontFamily: Saira Condensed
    fontSize: 34px
    fontWeight: 800
    lineHeight: 1.0
  headline-lg:
    fontFamily: Saira Condensed
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.1
  headline-md:
    fontFamily: Saira Condensed
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: Zen Old Mincho
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.08em
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 8px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.1em
  accent:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.2
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 8px
  md: 16px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-pill-heading:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 54px
  cream-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 600px
  outline-dark-panel:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 200px
  black-band-heading:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 34px
  performer-card:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 125px
  status-bar:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 48px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  floating-circle:
    backgroundColor: '{colors.on-dark}'
    textColor: '{colors.accent-1}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 90px
---

# DESIGN.md — 黒地×生成りカプセルのアイドルイベントLP（Black Stage Cream Capsule Idol Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、シンプル・ミニマル、情報量多め・訴求型
- **キーワード**: 黒地・生成りパネル・ピル見出し・コンデンス欧文・写真グリッド・モノトーン
- **地の質感**: フラットな単色の面だけで、グラデーションや影は使わない。色味は写真が担う。
- **形**: 大きな角丸パネル、ピル型の見出しバー、黒い角丸の帯。
- **温度感**: クールな黒に、温かみのある生成りを合わせる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#000000` | ページ全体の地 | 47% | 画素の実測 |
| `primary` | `#FFFBF2` | パネル・ピル見出しの生成り | 20% | 画素の実測 |
| `text` | `#020000` | 生成り面上の文字 | 3% | 画素の実測 |
| `on-dark` | `#FFFEFA` | 黒地上の文字・枠線 | 2% | 画素の実測 |
| `secondary` | `#7E7D79` | 受付終了などのグレー見出しバー | 1% | 画素の実測 |
| `dark-section` | `#010101` | パネル内の黒帯・名前帯 | 5% | 画素の実測 |
| `background-alt` | `#FFFFFF` | パートナー欄の白地 | 5% | 画素の実測 |
| `cta` | `#FEFCF3` | 物販ボタン（生成りピル） | 0% | 画素の実測 |
| `on-cta` | `#0C0907` | ボタン文字 | 0% | 画素の実測 |
| `accent-1` | `#C64F82` | 購入用の浮動丸ボタンの枠 | 0% | 画素の実測 |
| `accent-2` | `#668CD7` | アプリ誘導の浮動丸ボタンの枠 | 0% | 画素の実測 |
| `line` | `#D0D5D7` | 黒地パネルの細い枠線 | 0% | 画素の主要色に補正 |
| `secondary-accessible` | `#767572` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#C4497E` | AA を満たす補正値（計算） |  | 計算 |

- 地は黒で統一する。情報のまとまりは生成りの角丸パネルに乗せる。
- セクション見出しは生成りのピルに黒文字で入れる。
- パネルの中の小見出しや名前帯は黒帯に白文字で反転させる。
- 受付終了など無効な状態はグレーのバーで示す。
- ピンクと青は浮動ボタンの枠線だけに使う。
- 色は写真に任せ、UIはモノトーンに抑える。
- `status-bar` は文字 `#FFFEFA` × 背景 `#7E7D79` のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#767572`、4.57:1）を使う。
- `floating-circle` は文字 `#C64F82` × 背景 `#FFFEFA` のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C4497E`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 日付の大きな数字 | 欧文サンセリフ | Saira Condensed | 800 | 34px | 1.0 | 0.0em |
| `headline-lg` | ピル内のセクション見出し（英字） | 欧文サンセリフ | Saira Condensed | 800 | 22px | 1.1 | 0.0em |
| `headline-md` | 黒帯のサブカテゴリ見出し | 欧文サンセリフ | Saira Condensed | 700 | 20px | 1.2 | 0.0em |
| `headline-sm` | グループ名・料金見出し | 欧文セリフ | Zen Old Mincho | 700 | 16px | 1.3 | 0.02em |
| `body-md` | 注意事項・本文 | ゴシック | Zen Kaku Gothic New | 700 | 10px | 1.9 | 0.08em |
| `note` | 見出し下の和文ラベル・注釈 | ゴシック | Zen Kaku Gothic New | 700 | 8px | 1.5 | 0.1em |
| `accent` | 価格の数字 | 欧文サンセリフ | Noto Sans JP | 800 | 24px | 1.2 | 0.0em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.4 | 0.1em |

- 見出しは太いコンデンス欧文で大きく書き、下に小さな和文ラベルを添える。
- 本文は小さめに組み、字間を広めにとって読みやすくする。
- 価格は数字を大きく、単位と税込表記は小さく分ける。
- 見出しはすべて中央揃えにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。出演者一覧は 3 列グリッド。
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- 黒地の中央に、幅84%前後のパネルを縦に積む。
- ピル見出しはパネル幅と同じか、やや広く取る。
- 出演者カードは写真の下に黒帯の名前欄を付け、3列で隙間なく並べる。
- 未発表の項目は「近日公開」の大きな文字だけを置く。
- セクションの間は広めに空ける。

## Elevation & Depth

- 影は一切使わない。
- 奥行きは黒地と生成りの明暗差だけで出す。
- 浮動ボタンも影なし。白地に色付きの枠線で表現する。

## Shapes

- **角丸**: 小 8px ／ 中 16px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸なしの長方形。グリッドではほぼ正方形にトリミングする。
- **セクション境界**: 直線。パネルの角丸だけで区切る。
- パネルは角丸大きめにする。
- 見出しとボタンは完全なピル型にする。
- 黒地上のパネルは白の細い枠線と角丸で囲む。
- 浮動ボタンは正円にする。

## Components

- **ピル型セクション見出し**（`section-pill-heading`）: 生成りのピルに、太い英字見出しと小さな和文ラベルを中央揃えで入れる。
- **生成り情報パネル**（`cream-panel`）: チケットやアクセスなどの情報をまとめる大きな角丸パネル。
- **黒地の枠線パネル**（`outline-dark-panel`）: 新着情報や物販告知に使う。白の細枠に角丸で、中身は白文字。
- **黒帯サブ見出し**（`black-band-heading`）: パネル内のカテゴリ名を黒の角丸帯に白文字で入れる。
- **出演者カード**（`performer-card`）: 正方形の写真の下に、黒帯で名前と所属を2段で表示する。3列で並べる。
- **販売区分バー**（`status-bar`）: 片側だけ丸いバー。受付中は黒、終了はグレーにする。
- **ピルボタン**（`button-primary`）: 生成りのピルに黒文字。右端に矢印を付ける。
- **浮動丸ボタン**（`floating-circle`）: 右下に固定する白い正円。ピンクや青の太枠と色文字で誘導する。

## Do's and Don'ts

**Do**
- 地は黒、情報は生成りパネルという2層構成を守る。
- 見出しはピル型＋コンデンス欧文で統一する。
- 色は写真に任せ、UIはモノトーンにする。
- 価格・日付の数字は大きく太くする。
- 出演者は3列グリッドで写真の量を見せる。

**Don't**
- UIにピンクなどの華やかな色を塗らない。
- 影やグラデーションを付けない。
- 見出しを明朝体や細字にしない。
- 写真に角丸や装飾フレームを付けない。
- パネルを画面の端まで広げない。

## Page Structure

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

1. **ヘッダー**（ナビゲーション）: 黒地に小さなロゴと、英字のナビを横に並べる。
2. **ファーストビュー**（世界観の提示）: 角丸の大きなイラストのキービジュアルを置き、ロゴを重ねる。
3. **開催概要**（日時と会場）: 日付は斜線区切りの特大数字、時間と会場は白文字で書く。
4. **新着情報**（最新ニュース）: 白枠の黒パネルに、日付と見出しのリストをスクロール表示する。
5. **出演者**（ラインナップ訴求）: 生成りパネルの中に黒帯見出し、グループ写真を1列、個人は3列グリッドで並べる。
6. **コンテンツ・タイムテーブル**（予告）: ピル見出しの下に「近日公開」の白い大きな文字だけを置く。
7. **チケット**（販売情報）: 座席図の下に販売区分バー、席種、大きな価格、受付期間を繰り返す。最後に注意事項。
8. **アクセス**（会場案内）: 生成りパネルに地図を埋め込み、会場と最寄り駅を2列で書く。
9. **物販告知**（グッズ誘導）: 黒の枠線パネルに説明文とピルボタンを置く。
10. **注意事項**（来場ルール）: 生成りパネルに、括弧付きの小見出しと箇条書きを並べる。
11. **お問い合わせ・SNS**（連絡先）: ピル見出し、メールアドレス、アーカイブボタン、SNSアイコンの順に並べる。
12. **協賛・フッター**（スポンサー表示）: 白地に協賛ロゴを中央に並べ、最後に生成り地のクレジットを置く。

## Imagery

- キービジュアルは淡いパステル調で線画風のイラストにする。
- 出演者写真はパステル背景のスタジオ撮影で、衣装の華やかさを見せる。
- 個人写真は胸上の正面寄りで、正方形にトリミングする。
- 座席図はシンプルな図形で描き、青とピンクで区分する。
- アイコンは単色の線画SNSアイコンにする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでもパネルは中央の約60%幅に保ち、両脇は黒地のままにする。
- PCではヘッダーのナビを1行に並べる。
- PCのチケット欄は、席種と価格を左右に振り分ける。
- 出演者グリッドはPCでも3列のままにする。
- 浮動丸ボタンはどちらの表示でも右下に固定する。

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