DESIGN.md — 黒×赤紫ネオンのバーチャルライブ告知 LP（Dark Neon Virtual Idol Live Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、ポップ・元気
• キーワード: ネオングロー・赤と紫の二極対比・ステージ照明・装飾欧文・星と月のモチーフ・マスコットでポップに転調
• 地の質感: 黒地にうっすらノイズと紫のにじみ。後半は方眼紙風のグレー地にペンタッチを散らす。
• 形: 基本は直線と小さい角丸。ボタンはグロー付きのピル型。セクション境界は星形の切り欠きと不定形のブロブ。
• 温度感: クールな暗色が中心。赤と紫のネオンで熱量を足す。

Colors

• 前半は黒地を基本にし、見出しも本文も白文字で組む。
• 赤と紫は左右・上下に対比させて配置し、2 組の対立や共演を表す。
• ネオングローは赤、紫、白に限る。ロゴ・CTA・区切り線の発光に使う。
• 後半のマスコットパートだけはグレーの方眼地に切り替え、オレンジ・青・緑・紫のブロブを散らす。
• リンクだけを鮮やかな赤の下線付き文字にする。
• グラデーションの区切り線は赤から紫に流す。

Typography

• 英字の大見出しは幅広の装飾セリフ体で組み、全部大文字にする。
• 日付は大きい欧文数字で組み、曜日は小さい上付きの括弧書きにする。
• 小さい英字ラベルは字間を広げ、両脇を細線か小さい星で挟む。
• 和文の見出しは太い明朝で重厚にし、下に英字の副題を小さく添える。
• マスコットパートでは極太の丸ゴシック（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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。