---
version: alpha
name: Neon Violet Night Virtual Live Event LP
description: 漆黒の地に紫の炎と星屑を散らした、ライブ・CD・グッズ告知用の一枚もの LP。細身でワイドな欧文セリフの大見出しに、小さな日本語ラベルを重ねる。日付はライム、ラベルは藍紫、線はティールで色分けする。暗い角丸カードを縦に並べ、情報を整理する。
colors:
  background: '#0C0A0D'
  dark-section: '#421D51'
  surface: '#0E0A11'
  primary: '#A46ACA'
  accent-1: '#CAE25A'
  secondary: '#322EAC'
  accent-2: '#13343C'
  line: '#2AA3B3'
  cta: '#0C0A0C'
  on-cta: '#F4F7F4'
  text: '#E9E7EB'
  text-muted: '#8E8796'
  tint-1: '#F1EEF7'
typography:
  display:
    fontFamily: Italiana
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Bodoni Moda
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Italiana
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.01em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.04em
  accent:
    fontFamily: Shippori Mincho
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: IBM Plex Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
rounded:
  sm: 4px
  md: 10px
  lg: 14px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
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.md}'
    height: 52px
  button-store:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 36px
  tab-pill:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 30px
  section-title:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 80px
  info-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 300px
  label-tag:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 24px
  accordion:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 52px
  teal-frame-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 180px
---

# DESIGN.md — 漆黒×紫炎とライムの配信者ライブ告知LP（Neon Violet Night Virtual Live Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、クール・先進的、情報量多め・訴求型
- **キーワード**: 漆黒・紫の炎・星屑・ネオン発光・ワイドセリフ・ライブ告知
- **地の質感**: 黒地に紫の煙・炎と小さな光の粒子を重ねる。粗いノイズ感がある。カードは半透明の黒で、面はほぼフラット。
- **形**: 角丸が小さめの矩形カード、ピル型タブ、細い枠線ボタン。セクション境界に横線と半円弧の装飾を入れる。
- **温度感**: 寒色寄りの暗い色調。ライムと紫の発光色で熱量を出す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#0C0A0D` | ページ全体の地色（漆黒） | 45% | 画素の実測 |
| `dark-section` | `#421D51` | グッズセクションの紫の地 | 12% | 画素の実測 |
| `surface` | `#0E0A11` | 情報カードの面 | 18% | 画素の実測 |
| `primary` | `#A46ACA` | ブランドの紫（アコーディオンの文字・アイコン、小見出しの星） | 2% | 画素の実測 |
| `accent-1` | `#CAE25A` | 日付・価格ラベルを目立たせるライム | 1% | 画素の実測 |
| `secondary` | `#322EAC` | 店舗名・区分を示す藍紫のラベル | 2% | 画素の実測 |
| `accent-2` | `#13343C` | 予約ボタン群のティール面 | 3% | 画素の実測 |
| `line` | `#2AA3B3` | カード枠・区切りのティール線 | 1% | 推定 |
| `cta` | `#0C0A0C` | 主ボタンの面（黒地に紫の枠線） | 2% | 画素の実測 |
| `on-cta` | `#F4F7F4` | 主ボタンの文字色 | 0% | 画素の実測 |
| `text` | `#E9E7EB` | 見出し・本文の白文字 | 3% | 画素の実測 |
| `text-muted` | `#8E8796` | 注釈のグレー文字 | 1% | 推定 |
| `tint-1` | `#F1EEF7` | グッズや特典画像を載せる淡いラベンダーの面 | 3% | 画素の実測 |

- 地色は漆黒。グッズのブロックだけ深い紫の地に切り替え、セクションの変化を見せる。
- 日付・価格・要点ラベルはライムに限定する。発光色として少量だけ使う。
- 店舗名や区分のラベルは藍紫のベタ塗りに白文字を載せる。
- CD・イベント系のカード枠と区切り線はティールで統一する。ライブ・チケット系は紫の線を使う。
- 主ボタンは黒地に紫〜青のグラデーションの細い枠線を付け、白文字にする。
- 大見出しは白〜グレーのメタリックなグラデーションにし、ほのかに紫の外光を付ける。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの大見出し（欧文、横幅いっぱい） | 欧文セリフ | Italiana | 400 | 52px | 1 | 0.02em |
| `headline-lg` | 日付・価格の大きな数字 | 欧文セリフ | Bodoni Moda | 700 | 44px | 1.1 | 0.02em |
| `headline-md` | サブセクションの欧文見出し（左寄せ） | 欧文セリフ | Italiana | 400 | 32px | 1.1 | 0.01em |
| `headline-sm` | カード内の小見出し（星アイコン付き） | ゴシック | Noto Sans JP | 500 | 17px | 1.4 | 0.04em |
| `accent` | 人物名・会場名の縦書き・大きな和文 | 明朝 | Shippori Mincho | 500 | 40px | 1.2 | 0.05em |
| `body-md` | 本文・仕様リスト | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em |
| `note` | ※ 付きの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em |
| `label-button` | ボタン・タブ・日時の数字 | ゴシック | IBM Plex Sans JP | 700 | 14px | 1.4 | 0.04em |

- 大見出しは細くてワイドな欧文セリフを使い、画面幅いっぱいまで広げる。
- 大見出しの下中央に、小さな日本語ラベルを帯状に重ねる。
- 大見出しの上に、イベント名と日付を小さな英字で 1 行添える。
- 日時の数字は太めのサンセリフで、ライムにする。
- 和文の固有名詞を大きく見せるときは明朝を使い、縦書きも可。
- 本文は 13px 前後の白ゴシックにする。注釈はグレーの 10px にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。予約ボタンのみ 2 列グリッド
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- カードは左右 4% の余白で全幅に近く置く。
- サブセクションの欧文見出しは左端に寄せ、画面からはみ出す寸前まで大きくする。
- セクション冒頭にピル型のタブを並べ、ページ内の目次にする。
- 日時は『項目名＋値』の 2 列表にし、細い区切り線を入れる。
- カード同士は 16px 前後の間隔で縦に積む。

## Elevation & Depth

- 影はほぼ使わない。暗い面の明度差と細い枠線で階層を作る。
- 見出しロゴと数字にだけ、紫のぼかした外光（グロー）を付ける。
- カードの面は地色よりわずかに明るい半透明の黒にする。

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 14px。ボタンは角丸の長方形。
- **写真の切り抜き**: ジャケットや人物画は正方形・縦長の矩形。細い紫の枠線と装飾罫で額装する。
- **セクション境界**: 全幅の細い横線の両端に半円弧を付けた、ゲート状の境界線
- 主ボタンは角丸 10px 程度の横長矩形にし、グラデーションの細い枠線を付ける。
- 目次タブと区分タブはピル型の枠線ボタンにする。
- アコーディオンは角丸 4px の矩形。右端に紫の丸いシェブロンを置く。
- 特典画像は四隅を切り欠いた額縁風のフレームに入れる。

## Components

- **主ボタン（申込・予約）**（`button-primary`）: 黒地に紫〜青のグラデーション枠線を付けた横長ボタン。左にアイコン、白い太字の文字。
- **店舗別予約ボタン**（`button-store`）: ティールの面にティールの細枠を付けたボタン。2 列グリッドで並べる。
- **目次ピルタブ**（`tab-pill`）: 黒地に白またはティールの細枠を付けたピル型タブ。選択中は藍紫で塗る。
- **大見出し＋和文ラベル**（`section-title`）: メタリックな欧文の大見出しの下中央に、小さな濃紫の帯ラベルを重ねる。
- **日程カード**（`info-card`）: 星アイコン付きの小見出しの下に紫の線を引き、ライムの日時を表形式で並べる。下に主ボタンを置く。
- **区分ラベル**（`label-tag`）: 藍紫またはライムのベタ塗りの小さな四角いタグ。店舗名やディスク区分を示す。
- **注意事項アコーディオン**（`accordion`）: 黒の矩形に紫の細枠を付け、紫の文字で項目名を書く。右端に紫の円形シェブロンを置く。
- **ティール枠カード**（`teal-frame-card`）: ティールの 1px 枠で囲んだカード。曲目やイベントの情報に使う。

## Do's and Don'ts

**Do**
- 地は漆黒のまま、紫の炎・煙と星屑を余白に散らして奥行きを作る。
- 日付と価格はライムに限定し、ひと目で拾えるようにする。
- 欧文の大見出しと小さな和文ラベルを必ずセットにする。
- 情報はカード単位に区切り、セクションごとに線の色（紫／ティール）を統一する。
- ロゴ・数字には紫のグローを付け、ライブらしい発光感を出す。

**Don't**
- 白や明るい地のセクションを入れない。
- ライムを広い面のベタ塗りに使わない。
- 太く丸いポップな書体を見出しに使わない。
- 大きな角丸や強いドロップシャドウで柔らかくしない。
- 紫・ティール・藍紫以外の色相を増やさない。

## Page Structure

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

1. **ファーストビュー**（人物ビジュアルと公演ロゴで世界観を示す）: 縦長のキャラクター画像の下端に、発光する公演ロゴを重ねる。
2. **公演概要**（日時と会場を即座に伝える）: 小さな英字ラベルの下に大きな日付数字と和文の会場名を置く。下にアクセス用の枠線ボタンを 2 つ並べる。
3. **出演者紹介**（人物のキャラクター性を伝える）: 装飾罫で額装した縦長の画像を置き、横に縦書きの明朝で名前を入れる。SNS アイコンと短い紹介文を添える。
4. **チケット情報**（価格と入場特典を示す）: ライムの小見出しの下に大きな価格を置き、下線付きの特典表記を続ける。特典名は暗いカードに入れる。
5. **販売スケジュール**（先行抽選ごとの受付期間と申込導線）: ピルタブの目次の後に、日程カードを 4 枚縦に積む。各カードに主ボタンを置く。
6. **CD情報**（新譜と封入特典を紹介する）: 正方形のジャケット、太字のタイトル、セリフ体の発売日、藍紫の特典ラベルを順に並べる。仕様は形態タブとカルーセルで見せる。
7. **収録曲・配信**（曲情報と配信への導線）: ティール枠のカードにする。配信曲名は藍紫の帯に明朝の白文字で載せる。
8. **動画**（MV を見せる）: 黒帯の上に 16:9 のサムネイルと再生アイコンを置く。
9. **リリースイベント**（イベントへの応募導線）: ライムの店舗タグを付けたティール枠カードに、開催情報と主ボタンを入れる。
10. **店舗特典**（店舗ごとの予約特典と予約先）: 藍紫の店舗ラベル、特典名、ティールのボタン 2 列グリッドの組を点線で区切って繰り返す。
11. **グッズ**（物販と購入特典を紹介する）: 紫地に切り替える。グッズ一覧画像、日程カード、額縁フレームに入れた特典画像を並べる。
12. **注意事項**（規約・FAQ をまとめる）: メタリックな大見出しの下に、紫の文字のアコーディオンを縦に並べる。
13. **お問い合わせ・フッター**（問い合わせ先と共有導線）: ライムの小見出し、電話番号、紫の面のボタンを置く。最下部は黒地にロゴ、SNS 共有アイコン、権利表記。

## Imagery

- 人物はアニメ調の美麗イラスト。紫と銀を基調にし、暗い背景に星屑を散らす。
- 背景の余白に、紫〜ピンクの炎・煙のテクスチャを左右からはみ出すように置く。
- 細かな光の粒子と火の粉を、ぼかして全体に散らす。
- ロゴと数字は、白からラベンダーへのグラデーションに強い紫の外光を付ける。
- 特典画像は、黒い大理石調の額縁に淡いラベンダーの台紙を敷いて見せる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央約 60% 幅のコンテンツに置き、左右の余白には紫の炎の装飾を大きく見せる。
- PC の日程・グッズ部は、左に目次タブの縦リスト、右にカードの 2 カラムにする。
- PC の CD 形態は、カルーセルをやめて 3 列のカードで並べる。
- PC では出演者画像を中央に置き、紹介文と縦書きの名前を左右に振り分ける。
- 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-807b8eab`（元 LP の URL から採番）
- **元 LP**: https://www.nijisanji.jp/events/fuwa_VORTEX/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-12、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。