--- version: alpha name: Cyberpunk Black and Neon Yellow Exhibition LP description: 漆黒の地に、グリッチ風モザイクと漫画線画を暗く敷いたサイバーパンク調の展覧会 LP。蛍光イエローは差し色として、カードや番号ラインにだけ使う。見出しはドット風の欧文セリフ体、本文は白いゴシック体。細い線枠に角の欠けたボタンを組み合わせ、近未来の端末 UI のような印象にまとめている。 colors: background: '#010101' dark-section: '#0E0E0E' primary: '#F8FF02' on-primary: '#0E0F0F' text: '#FFFFFF' text-muted: '#BDBDBD' line: '#CECECD' accent-1: '#3A3A12' surface: '#131313' accent-2: '#13223C' background-alt: '#C4C4C4' typography: display: fontFamily: DotGothic16 fontSize: 34px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.7 label-button: fontFamily: Manrope fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em accent: fontFamily: Manrope fontSize: 9px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' height: 46px menu-pill: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px section-title: textColor: '{colors.text}' typography: '{typography.display}' height: 80px section-number: textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 40px card-yellow: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 520px button-yellow: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 60px play-icon: textColor: '{colors.primary}' rounded: '{rounded.full}' height: 80px info-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 400px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#010101` | ページ全体の地色 | 60% | 画素の実測 | | `dark-section` | `#0E0E0E` | ヘッダー帯・フッター付近の黒灰 | 8% | 画素の実測 | | `primary` | `#F8FF02` | 蛍光イエロー（カード・ライン・バナー） | 10% | 画素の実測 | | `on-primary` | `#0E0F0F` | 黄色面の上の文字 | 2% | 画素の主要色に補正 | | `text` | `#FFFFFF` | 見出し・本文の白文字 | 4% | 推定 | | `text-muted` | `#BDBDBD` | 英字の小見出し・補足 | 1% | 推定 | | `line` | `#CECECD` | ボタン枠などの細線 | 1% | 画素の実測 | | `accent-1` | `#3A3A12` | 背景モザイクの暗いくすみ黄 | 3% | 推定 | | `surface` | `#131313` | 背景線画の暗いグレー | 6% | 画素の実測 | | `accent-2` | `#13223C` | キービジュアルのサイバーブルー | 6% | 画素の実測 | | `background-alt` | `#C4C4C4` | モノクロ写真帯の明るいグレー | 3% | 画素の実測 | - 地色は常に黒。白い面や明るい面のセクションは作らない - 蛍光イエローは、カード面・番号横の短い縦線・告知バナー・再生アイコンに限って使う - 黄色の面には黒文字をのせる。黄色の文字を黒地に長く並べない - 背景の線画やモザイクは低い明度に抑え、本文の可読性を保つ - 写真はモノクロか寒色の青に寄せ、暖色を入れない - ボタンは塗らず、白の細線枠だけで作る ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し（ドット・タイプライター風） | 欧文セリフ | DotGothic16 | 400 | 34px | 1.25 | 0.02em | | `headline-md` | 日本語の小見出し・人物名 | 明朝 | Shippori Mincho | 600 | 18px | 1.5 | 0.05em | | `headline-sm` | 英字見出しの下に添える和文ラベル | ゴシック | Noto Sans JP | 500 | 10px | 1.4 | 0.1em | | `body-lg` | 概要などのリード本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.02em | | `body-md` | 説明文・カード内本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.02em | | `note` | 注釈・会期情報の補足 | ゴシック | Noto Sans JP | 700 | 10px | 1.7 | 0.0em | | `label-button` | 線枠ボタンの英字ラベル | 欧文サンセリフ | Manrope | 400 | 12px | 1.0 | 0.02em | | `accent` | 縦書きのセクション番号 | 欧文サンセリフ | Manrope | 400 | 9px | 1.0 | 0.1em | - セクション見出しは、英字のドット調セリフを大きく置き、下か横に小さな和文を添える - 英字見出しは 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 ```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-706d89f9`（元 LP の URL から採番） - **元 LP**: https://www.tokyonode.jp/sp/exhibition-ghostintheshell/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。