--- version: alpha name: Dark Neon Virtual Idol Live Event LP description: 漆黒の地に赤と紫のネオン光を対比させた、配信ライブ告知用の LP。装飾的な欧文ディスプレイ書体と星・月のモチーフでステージ感を出す。後半はグレーの方眼地に手描き風マスコットを置き、ポップな雰囲気に切り替える。 colors: background: '#241B1C' primary: '#3B3047' secondary: '#8E7BC8' accent-1: '#994E5E' cta: '#231827' on-cta: '#FBFAF4' text: '#FBFAF4' accent-2: '#CD1017' background-alt: '#DCDCDA' surface: '#FEFEFE' dark-section: '#020101' accent-3: '#F07A2A' tint-1: '#295DA8' text-body: '#3A3A3A' typography: display: fontFamily: Syne fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Montserrat fontSize: 28px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.02em accent: fontFamily: Cinzel fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.15em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Cinzel fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 64px date-block: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 80px marquee-band: textColor: '{colors.text}' typography: '{typography.display}' height: 80px cast-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 640px social-icon: textColor: '{colors.background}' rounded: '{rounded.full}' height: 44px label-pill: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px speech-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px carousel-arrow: backgroundColor: '{colors.background}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 48px --- # DESIGN.md — 黒×赤紫ネオンのバーチャルライブ告知 LP（Dark Neon Virtual Idol Live Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、ポップ・元気 - **キーワード**: ネオングロー・赤と紫の二極対比・ステージ照明・装飾欧文・星と月のモチーフ・マスコットでポップに転調 - **地の質感**: 黒地にうっすらノイズと紫のにじみ。後半は方眼紙風のグレー地にペンタッチを散らす。 - **形**: 基本は直線と小さい角丸。ボタンはグロー付きのピル型。セクション境界は星形の切り欠きと不定形のブロブ。 - **温度感**: クールな暗色が中心。赤と紫のネオンで熱量を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#241B1C` | メインの漆黒地 | 45% | 画素の実測 | | `primary` | `#3B3047` | 夜空の紫（FV・フッターの地） | 10% | 画素の主要色に補正 | | `secondary` | `#8E7BC8` | 紫チーム側のラベンダー | 4% | 推定 | | `accent-1` | `#994E5E` | 赤チーム側のローズレッド | 4% | 画素の主要色に補正 | | `cta` | `#231827` | CTA ボタンの深紺の面 | 1% | 画素の主要色に補正 | | `on-cta` | `#FBFAF4` | CTA ボタンの文字 | 0% | 画素の主要色に補正 | | `text` | `#FBFAF4` | 暗い地に置く見出しと本文 | 3% | 画素の主要色に補正 | | `accent-2` | `#CD1017` | 本文中リンクの赤 | 0% | 画素の実測 | | `background-alt` | `#DCDCDA` | マスコットパートの方眼グレー地 | 13% | 画素の実測 | | `surface` | `#FEFEFE` | マスコットパートの白い吹き出しカード | 3% | 画素の実測 | | `dark-section` | `#020101` | マスコットパートの黒ラベル帯 | 0% | 画素の実測 | | `accent-3` | `#F07A2A` | ポップなブロブのオレンジ | 2% | 推定 | | `tint-1` | `#295DA8` | ポップなブロブの青 | 1% | 画素の実測 | | `text-body` | `#3A3A3A` | 明るい地に置く濃い文字 | 1% | 推定 | - 前半は黒地を基本にし、見出しも本文も白文字で組む。 - 赤と紫は左右・上下に対比させて配置し、2 組の対立や共演を表す。 - ネオングローは赤、紫、白に限る。ロゴ・CTA・区切り線の発光に使う。 - 後半のマスコットパートだけはグレーの方眼地に切り替え、オレンジ・青・緑・紫のブロブを散らす。 - リンクだけを鮮やかな赤の下線付き文字にする。 - グラデーションの区切り線は赤から紫に流す。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出し（英字の大見出し） | 装飾・ディスプレイ | Syne | 700 | 44px | 1.1 | 0.02em | | `headline-lg` | 日時の大きな数字表示 | 欧文サンセリフ | Montserrat | 600 | 28px | 1.2 | 0.02em | | `headline-md` | チーム名など和文の見出し | 明朝 | Shippori Mincho | 800 | 34px | 1.2 | 0.05em | | `headline-sm` | キャッチ行・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.02em | | `body-md` | プロフィールなどの本文 | ゴシック | Noto Sans JP | 400 | 12px | 2.0 | 0.02em | | `accent` | 小さい英字ラベル・縦書きの名前 | 欧文セリフ | Cinzel | 500 | 11px | 1.4 | 0.15em | | `note` | 注釈・著作権表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | CTA・メニューボタンの文字 | 欧文セリフ | Cinzel | 700 | 18px | 1.0 | 0.05em | - 英字の大見出しは幅広の装飾セリフ体で組み、全部大文字にする。 - 日付は大きい欧文数字で組み、曜日は小さい上付きの括弧書きにする。 - 小さい英字ラベルは字間を広げ、両脇を細線か小さい星で挟む。 - 和文の見出しは太い明朝で重厚にし、下に英字の副題を小さく添える。 - マスコットパートでは極太の丸ゴシック（Zen Maru Gothic）に切り替える。 - 本文は 12px 前後で、行間を 2.0 と広めにとる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。マスコット紹介だけ 2 カラムのグリッドにする。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算） - 画像カードは左右に約 6% の余白をとって中央に置く。 - キャラクタービジュアルの左右に縦書きの英字名を置く。 - 英字ラベルを横に流すマーキー帯でセクションを区切る。 - 動画は画面幅いっぱいに置き、サムネイルのカルーセルを添える。 - グッズは横スクロールのカルーセルに矢印ボタンを付ける。 - ボタンは追従させず、ページ下に MENU ボタンを置く。 ## Elevation & Depth - 影はほとんど使わず、ネオンの外側グローで浮かせる。 - CTA ボタンは赤と紫の外光と細い光線で縁取る。 - ロゴには赤と紫の発光と、きらめく光の線を付ける。 - マスコットパートのカードは影なしの白い面。少し傾けて置く。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真カードは角丸 4px の長方形。キャラクタービジュアルは装飾額縁ごと見せる。 - **セクション境界**: 黒地は星形・アーチ形の切り欠きか、グラデーションの細線で区切る。マスコットパートの境目には不定形のブロブを重ねる。 - 丸アイコンボタンは白丸に黒いアイコンを入れる。 - 回転する円形テキストバッジ（矢印入り）を添える。 - 吹き出しは三角の突起付きで、少しだけ傾ける。 - マスコット名の背後には斜めの筆ストロークを敷く。 ## Components - **ネオン CTA ボタン**（`button-primary`）: 深紺のピル型ボタン。赤と紫のグロー縁を付け、アイコンと装飾英字を入れる。 - **日時表示ブロック**（`date-block`）: 上下を細線で挟み、小さい英字ラベルを添える。大きい日付の横に曜日を小さく置く。 - **装飾英字見出し**（`section-heading`）: 大文字の装飾セリフ体で組む。上に星と月のアイコンを並べる。 - **流れる英字帯**（`marquee-band`）: 大きい英字と小さい日付行が横に流れる帯。 - **チームビジュアルカード**（`cast-card`）: 額縁付きのイラストの両脇に縦書きの英字名を置く。下に明朝のチーム名と、回転する円形バッジを添える。 - **丸 SNS ボタン**（`social-icon`）: 直径 44px の白い円にブランドアイコンを入れる。中央に横並びで置く。 - **黒ラベル帯**（`label-pill`）: マスコットパートの小見出しに使う黒いピルの帯。文字は白。 - **傾いた吹き出しカード**（`speech-card`）: 白地に上向きの三角突起を付け、少し回転させたカード。中の文字は中央揃え。 - **グロー矢印ボタン**（`carousel-arrow`）: 赤と紫のグラデーションで縁取った円形の矢印ボタン。 ## Do's and Don'ts **Do** - 黒地にネオングローを効かせ、ライブ会場の照明のような雰囲気にする。 - 赤と紫の 2 色は対になる要素へ均等に割り当てる。 - 英字見出しは装飾セリフ体で大きく組み、和文本文は小さく控えめにする。 - 星・月・光線の細線アイコンで区切りを付ける。 - ポップなパートでは地色と書体をまとめて切り替え、メリハリを付ける。 **Don't** - 黒地のパートに淡いパステルや白い面を多用しない。 - ネオンの色を 3 色以上に増やさない。 - ボタンをフラットな単色だけで済ませない（グロー縁を付ける）。 - 本文を大きくしすぎてビジュアルの迫力を弱めない。 - 前半のダークパートに手描き風の書体を混ぜない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベントの世界観と日時を一目で伝える）: 全面のキャラクタービジュアルに発光ロゴを重ね、その下に日時ブロックを 2 段置く。 2. **配信案内**（視聴方法を示す）: 小さい英字ラベル、埋め込み動画、日時、注釈の順に並べる。 3. **イベント概要**（企画の要点を説明する）: ロゴの再掲、短い説明 2 行、大きい英字タイトル、赤いリンクを含む案内文を並べる。 4. **出演者プロフィール**（出演ユニットを紹介する）: 画像カード、英字のユニット名、読みがな、キャッチ、本文、丸 SNS ボタンの順で、ユニットごとに繰り返す。 5. **キャスト**（チーム編成を見せる）: マーキー帯と星形の切り欠きの下に、額縁ビジュアルのカードを 2 枚縦に並べる。 6. **動画**（関連動画へ誘導する）: 英字の大見出し、全幅の動画、曲名と日付、サムネイルのカルーセルを置く。 7. **グッズ**（物販を告知する）: 一覧画像を 3 枚縦に並べ、新商品のカルーセルを置く。最後にネオン CTA ボタンを置く。 8. **マスコット紹介**（親しみを加える）: ブロブで方眼グレー地に転調する。黒ラベル、手描きロゴ、2 カラムのキャラ、吹き出しカードを並べる。 9. **フッター**（シェア、協賛表示、権利表記）: FV ビジュアルを再掲し、SHARE アイコン、協賛ロゴ、運営ロゴ、注釈、MENU ボタンを並べる。 ## Imagery - キャラクターはステージ照明を浴びた動きのあるポーズで描く。赤側と紫側で背景色を分ける。 - チームビジュアルはアンティーク調の金・銀の装飾額縁で囲む。 - ロゴはとがった光線付きの発光タイトルにし、赤から白、紫へと色を変える。 - 背景には紫のもやとノイズを入れ、紙吹雪や光の粒を散らす。 - マスコットは太い黒線で描き、ちびキャラ風で塗りはフラットにする。 - ポップなパートには筆ストローク、ドット、ジグザグなど手描きの装飾を散らす。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを横長の全幅ビジュアルにし、ロゴと日時を中央に重ねる。 - PC は FV の直下に横並びのナビゲーション（ピル型の枠）を置く。 - PC のプロフィールとキャストは 2 カラムに並べる。 - PC のグッズのカルーセルは 5 枚程度を同時に見せる。 - PC のマスコット紹介は 4 列または 3 列で並べ、左右の余白に装飾ストロークを散らす。 - 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-f960e0f8`（元 LP の URL から採番） - **元 LP**: https://www.nijisanji.jp/events/VOLTACTIONx3SKM_IMPACT/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。