DESIGN.md — 黒×蛍光イエローのサイバー展覧会 LP（Cyberpunk Black and Neon Yellow Exhibition LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: サイバーパンク・グリッチ・漆黒・蛍光イエロー・端末UI・展覧会
• 地の質感: 黒地に、モノクロ漫画の線画とピクセル状のモザイクを 10〜20% の明るさで重ねたノイズ質感
• 形: 直角が基本。細い線枠と、角を切り欠いたフレーム。黄色いカードは段ずらしの重ね影
• 温度感: 冷たく無機質。黄色の差し色だけが熱を持つ

Colors

• 地色は常に黒。白い面や明るい面のセクションは作らない
• 蛍光イエローは、カード面・番号横の短い縦線・告知バナー・再生アイコンに限って使う
• 黄色の面には黒文字をのせる。黄色の文字を黒地に長く並べない
• 背景の線画やモザイクは低い明度に抑え、本文の可読性を保つ
• 写真はモノクロか寒色の青に寄せ、暖色を入れない
• ボタンは塗らず、白の細線枠だけで作る

Typography

• セクション見出しは、英字のドット調セリフを大きく置き、下か横に小さな和文を添える
• 英字見出しは 2〜4 行に改行し、詰めた行間で塊として見せる
• 本文は白のゴシック体で、行間を 1.9 前後と広めにとる
• セクション番号は 2 桁の数字を縦書きにし、黄色い短線と組み合わせて画面の右端に置く
• 長い本文は左揃え、会期などの情報ブロックは中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は見出しと本文を左右に分けた 2 カラムを併用
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの右端に縦書き番号と黄色の短線を置く
• 左端には、作品ロゴの縦書きをくすんだ黄色で薄く敷く
• 告知バナーは画面幅いっぱいに横スクロールで流す
• カードは写真の下端に重ね、上へ食い込ませる
• 情報ブロックは項目ラベルと値を交互に縦へ積む

Elevation & Depth

• ぼかした影は使わない
• 黄色カードは、黒線と黄色を 2〜3 枚ずらして重ねた段組み影で立体感を出す
• 背景は線画とモザイクのレイヤーを重ねて奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いフル幅トリミング。人物写真はモノクロにする
• セクション境界: 直線で切り替える。グリッチ状のモザイクで背景をつなぐ
• メニューボタンだけは細線のピル型にする
• 通常のボタンは、四隅を少し欠いた細線の矩形にする
• カードは角丸なしの矩形とし、重ね影をつける
• 再生アイコンは、黄色の線の円に三角形を入れる

Components

• 線枠リンクボタン（button-outline）: 白の細線で、角を欠いた矩形の枠。中央にアイコンと英字ラベルを置く。SNS や公式サイトへの導線に使う
• メニューボタン（menu-pill）: 白い細線のピル型ボタン。中央に英字を置く
• 英字ドット見出し（section-title）: ドット調の大きな英字見出しに、小さな和文ラベルを添える
• 縦書き番号（section-number）: 右端に置く縦書きの 2 桁番号と、黄色の短い縦線
• 黄色メッセージカード（card-yellow）: 蛍光イエローの面に黒文字をのせる。肩書き・名前・英字名・本文の順に並べ、段ずらしの重ね影をつける
• 黄色の続きボタン（button-yellow）: カードの右下からはみ出す黄色の矩形ボタン。黒線の重ね影をつける
• 動画再生アイコン（play-icon）: 黄色の線で描いた円に三角形を入れる。モノクロ写真の中央に重ねる
• 開催情報リスト（info-list）: 中央揃えで、項目名と値を交互に縦へ並べる。注釈は太字の小さい文字にする

Do's and Don'ts

Do - 黒地を基本にし、黄色は小さな面か線で鋭く効かせる - 背景には、線画やピクセルのグリッチを低い明度で重ねる - 英字見出しはドット・タイプライター調で大きく置く - ボタンは細線枠にして、端末 UI 風の切り欠きをつける - 写真はモノクロか青系に寄せて、冷たく統一する

Don't - 角丸のカードや柔らかいドロップシャドウを使わない - 明るい白地のセクションを挟まない - 暖色やパステルカラーを入れない - 黄色の面を広く使いすぎない - 丸ゴシックや手書き系の書体を使わない

Page Structure

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

1. ファーストビュー（世界観を一瞬で伝え、会期と会場を示す）: 黒い帯にロゴを置く。その下に寒色青のフル幅キービジュアルを置き、黄色の小さな文字で会期を添える
2. メニュー・開催概要（展覧会の趣旨を説明する）: ピル型のメニューボタンの下に、英字ドット見出しを置く。その下は白文字の長い本文
3. SNS導線（最新情報への誘導）: 中央に案内文を置き、線枠ボタンを 2 つ縦に並べる
4. 告知バナー帯（ビジュアルで印象を強める）: 黄色のポスターとグリッチ画像を交互に並べ、フル幅で横に流す
5. 作品紹介（題材の背景を説明する）: 英字の大見出しを 4 行で組み、明朝の小見出し、本文、線枠ボタンを続ける。下にシリーズロゴを横に並べる
6. メッセージ（作り手の声で権威づける）: モノクロ人物写真に再生アイコンを重ねる。黄色カードを写真に重ねて本文を入れ、続きボタンを添える
7. アクセス（会場の場所を示す）: 英字見出しを置き、会場名と住所を左揃えのラベル・値の組で並べる
8. 開催情報まとめ（会期・時間・主催を整理して示す）: ロゴを中央に置き、項目名と値を中央揃えで縦に積む
9. フッター（問い合わせ先と権利表記）: 施設ロゴを中央に置き、連絡先と小さな著作権表記を並べる

Imagery

• キービジュアルは、暗闇に発光する青い要素を大きくクローズアップする
• 人物写真はモノクロで撮り、グレーの背景に正面から写す
• 背景には、漫画の線画を暗く反転させて敷き詰める
• ピクセル状の四角いモザイクをグリッチとして散らす
• 黄色の告知面に、QR コードやバーコード風の装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横並びのグローバルナビを固定する
• PC のキービジュアルは、ロゴを重ねた横長の写真にする
• PC では見出しと本文を左右 2 カラムに分ける
• PC のメッセージは、左にカード、右に写真を置き、カード内の本文は 2 段組みにする
• PC では黄色の矩形やバーコードの装飾を、画面の端にはみ出す形で増やす
• 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 行書くと起動時に読み込まれる。