DESIGN.md — 星空ネイビー×シアンの音楽イベントLP（Starry Night Virtual Live Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、ポップ・元気、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 星空・夜空ネイビー・シアン・細線フレーム・星屑の波線・アニメイラスト
• 地の質感: 星が散る宇宙背景と粒子状のきらめき。面はフラットで、光のにじみを装飾に使う。
• 形: 角丸なしの細線枠が基本。四隅に十字星を置き、セクション境界は星屑の波線。
• 温度感: 寒色寄りで夜の涼しさ。ピンクとシアンの差し色で華やかさを足す。

Colors

• 地は濃紺夜空→明るい青→濃紺→青のグラデ夜空と交互に切り替える。
• 明るい青地の上には白カードを置き、文字は紺にする。
• 暗い地の文字は白、補足リンクはシアンにする。
• ピンクはラベルとハッシュタグ強調だけに使う。
• 会場ごとに枠線色をラベンダー・ピンク・ミントで分ける。
• フッターだけライトグレー地＋グレー文字で落ち着かせる。
• label-badge は文字 #EEF5FA × 背景 #E0408A のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D22274、4.52:1）を使う。
• sns-bubble は文字 #E0408A × 背景 #FDFDFD のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D22274、4.55:1）を使う。

Typography

• セクション見出しは欧文大文字を細めの書体で中央に置く。
• 見出しの左右に「点＋横線」の飾りを付ける。
• 日付は太い欧文数字を大きく、曜日は括弧付きで小さく。
• 本文は小さめ太めのゴシックで行間広め。
• 都市名は二色塗りの装飾書体で枠の上辺に重ねる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャラ紹介は 3 列グリッド。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し上下に約32pxの余白。
• 会場カードは縦に並べ、カード間に都市名を重ねる。
• ニュースは左に日付ブロック、右に白い本文の2分割。
• テーマ曲・ビジュアルは細線の大枠で囲み、四隅に星。
• プロフィールは左に写真、右に文章の2カラム。

Elevation & Depth

• 影はほぼ使わずフラット。
• ニュースカードは下辺に濃紺の太線を付けて浮かせる。
• 光のにじみ（グロー）を見出しや星に添える。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラ画像は透過切り抜きか正方形の細線フレーム。
• セクション境界: 星屑がきらめく波線で夜空と青地を切り替える。
• ボタン・カードは角丸なしの四角。
• 枠は1px程度の細線。
• 四隅に十字星やアイコンを置く。
• SNS案内だけ角丸の吹き出しにする。

Components

• 欧文セクション見出し（section-title）: 中央の欧文大文字の左右に点付き横線を置く。
• 細線導線ボタン（button-primary）: 濃紺地に白細線の枠、中央に白文字、右端に矢印。
• 日付付きニュースカード（news-card）: 左に紺の日付ブロック（年は小、月日は大）と花アイコン、右に白い本文。
• 会場カード（venue-card）: 会場色の細線枠に、大きな日付と会場名、導線ボタン。上辺に都市名を重ねる。
• 星付き大枠（star-frame）: 白細線の大枠の四隅に十字星を置き、セクション全体を囲む。
• ピンクラベル（label-badge）: お知らせの左上に置く小さなピンクの四角いラベル。
• SNS吹き出し（sns-bubble）: 白い角丸の吹き出しにSNSボタンとピンクの強調文、下にマスコット。
• 人物名プレート（name-plate）: 写真の下に紫グラデの斜め帯で名前を白抜き。

Do's and Don'ts

Do - 夜空の地と明るい青の地を交互に置く。 - セクション境界に星屑の波線を入れる。 - 枠は細線、四隅に星を飾る。 - 日付・数字は大きく太く見せる。 - キャラ画像は透過切り抜きで大きく使う。

Don't - 暖色の大面積塗りを使わない。 - 大きな角丸カードや濃い影を使わない。 - ピンクを本文色に多用しない。 - 欧文見出しを太い書体にしない。 - 白地セクションをフッター以外に増やさない。

Page Structure

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

1. ファーストビュー（世界観と開催地・日程を一目で伝える）: 星空背景に全身イラスト、ロゴ、3都市名と日付、細線ボタン。
2. ピックアップ（注目トピックへ誘導）: 青地にバナー画像を縦に3枚、下に白いお知らせ枠。
3. ニュース（最新情報を一覧化）: 日付ブロック付き白カードを3件、右下に「もっと見る」。
4. SNS導線（公式SNSへの誘導）: 白い吹き出しに黒ボタンとピンクの強調文、マスコット。
5. イベント紹介（趣旨・テーマの説明）: 夜空地に欧文セリフ見出し、白い本文、過去回へのボタン、写真。
6. 会場一覧（会場別の日程とチケット導線）: 色違いの細線枠カードを3つ、都市名を上辺に重ねる。
7. 出演キャラクター（出演者の紹介）: 青グラデ地に3列×2段の星付きフレームとキャラ名。
8. テーマ曲（楽曲と制作者の紹介）: 星付き大枠に動画サムネ、プロフィールとコメント。
9. メインビジュアル（ビジュアルと作者紹介）: 大枠内に全身イラスト、作者プロフィール。
10. キャラクター解説（主役の背景説明）: 濃紺地に欧文見出しと長文、右下にキャラ切り抜き。
11. フッター（協賛・主催・問い合わせ）: ライトグレー地にロゴ群と社名リスト、シアンのリンク。

Imagery

• アニメ調のキャラを全身で透過切り抜きし、大きく配置。
• 背景は天の川のような星空と光の粒子。
• ライブ会場の写真は暗めで、光の演出が見えるもの。
• 笹の葉のシルエットを半透明で背景に重ねる。
• マスコットは丸みのある星形キャラクター。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは上部に横並びのグローバルナビを固定する。
• PCのFVはロゴ・日付を左、キャラを右に配置。
• PCの会場カードは3列横並び。
• PCのイベント紹介は左に文章、右に写真の2カラム。
• ピックアップのバナーはPCで2列＋1枚。
• 大枠はPCで中央寄せの約85%幅。

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 行書くと起動時に読み込まれる。