--- version: alpha name: Dark Occult Anime Event LP description: 黒地と深い紫地の上に蛍光イエローの見出しを置いた、アニメとのコラボ体験型イベントのLP。細い枠線のカード、縦長のコンデンス英字の見出し、柄入りの暗い背景で、オカルトっぽい雰囲気と多めの情報量を両立させている。 colors: background: '#000000' dark-section: '#1E034A' primary: '#D5F052' on-dark: '#FFFFFF' secondary: '#9D141D' accent-1: '#7B2FFF' accent-2: '#1E96C8' surface-alt: '#614F81' line: '#8A80A8' background-alt: '#222222' surface: '#333333' marker: '#E6F000' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Oswald fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: DotGothic16 fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 500 lineHeight: 1.3 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' section-title: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 70px point-card: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 260px flow-card: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 220px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 40px badge-yellow: backgroundColor: '{colors.marker}' textColor: '{colors.background}' typography: '{typography.label-button}' height: 22px price-table: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 120px venue-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 90px accordion-bar: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 36px goods-tile: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 150px --- # DESIGN.md — 黒×紫×蛍光黄のアニメ謎解きイベントLP（Dark Occult Anime Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: ダーク・蛍光イエロー・オカルト・アニメコラボ・細枠カード・コンデンス英字 - **地の質感**: 黒地に暗い色のアイコン柄や放射状の柄を薄く敷き、ベタ塗りの面と細い線を組み合わせる - **形**: 角丸のない四角が基本。細い1pxの枠線や二重の枠で区切る - **温度感**: 冷たく妖しいトーンの中に、蛍光の黄色と赤が熱を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページの基本の背景 | 40% | 画素の実測 | | `dark-section` | `#1E034A` | チケットと会場セクションの紫の地 | 22% | 画素の実測 | | `primary` | `#D5F052` | 蛍光イエローの小見出しとバッジ | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗い地の上の英字見出しと本文 | 3% | 推定 | | `secondary` | `#9D141D` | キャラクター紹介の斜めに切った赤い帯 | 5% | 画素の主要色に補正 | | `accent-1` | `#7B2FFF` | 影に使う紫と、カードの影 | 1% | 推定 | | `accent-2` | `#1E96C8` | 円の中に置くシアンのアイコン地 | 1% | 推定 | | `surface-alt` | `#614F81` | 会場カード下部の開閉バー | 2% | 画素の実測 | | `line` | `#8A80A8` | カードと表の細い枠線 | 1% | 推定 | | `background-alt` | `#222222` | キャラクター紹介のグレーの地 | 5% | 画素の実測 | | `surface` | `#333333` | ノベルティ説明の濃いグレーのパネル | 1% | 画素の実測 | | `marker` | `#E6F000` | 名前ラベルの黄色い帯 | 1% | 推定 | - 地は黒を基本にし、チケットと会場の情報だけ深い紫の地に切り替える - 日本語の小見出しとバッジは蛍光イエローに限る - 英字の大見出しは白のコンデンス体にする - 赤はキービジュアルとキャラクター帯のアクセントにだけ使う - カードは黒い面に白か黄の細い線で囲み、紫のずらし影を付ける - 本文は白で、注釈は小さく薄い白にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キービジュアル内のロゴのような装飾見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.1 | 0.0em | | `headline-lg` | セクションの英字大見出し | 欧文サンセリフ | Oswald | 400 | 32px | 1.2 | 0.02em | | `headline-md` | 蛍光イエローの日本語小見出し | 装飾・ディスプレイ | DotGothic16 | 700 | 17px | 1.4 | 0.05em | | `headline-sm` | カードのタイトル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.0em | | `body-md` | あらすじや説明の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `accent` | 日付と価格の大きな数字 | 欧文サンセリフ | Zen Kaku Gothic New | 500 | 20px | 1.3 | 0.0em | | `note` | 注釈や補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | 枠線ボタンと開閉バーの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.05em | - 英字の大見出しは白のコンデンス体で中央に置き、すぐ下に日本語の小見出しを黄色で添える - 日本語の小見出しには少しレトロなデジタル風の太字を使う - あらすじは中央揃えにして、行間を広く取る - 日付と価格の数字は大きくし、曜日や単位は小さくする - 注釈は11px前後で、※を付けて左揃えにする - 1つの見出しに使う色は1色まで - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦に積み、グッズは2列のグリッドにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの頭には英字の大見出しを中央に置く - 情報は細い枠線の箱に収める - チケットは二重の枠で大きく囲み、その中に小さな箱を入れる - 折りたたみ部分は横長のバーにし、▼記号を左右に付ける - バナー画像は横幅いっぱいか、2つ並べて置く - グッズは正方形の枠に入れ、商品名を下に添える ## Elevation & Depth - 影はぼかさない。カードには右下に紫か黄色のずらし影を付ける - ふわっとしたドロップシャドウは使わない - 階層は枠線と面の明るさの差で表す ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角く切り抜き、細い枠線を付ける。キャラクターのアイコンは正方形のサムネイルにする - **セクション境界**: 背景色を直線で切り替える。キャラクター紹介だけ、赤い帯を斜めに入れる - 角丸は使わない - アイコンだけは円の中に入れる - 最下部は鎖のような輪をつないだ線で締める ## Components - **英字の大見出しと黄色の小見出し**（`section-title`）: 白のコンデンス英字を大きく置き、その下に蛍光イエローで日本語の補足を付ける - **ポイントカード**（`point-card`）: 上がアニメの場面写真、下が太字タイトルと説明文。黄色の細い枠で囲む - **参加の流れカード**（`flow-card`）: シアンの円の中にアイコンを置き、見出しの下に黄色の線を引く。白枠に紫のずらし影を付ける - **枠線ボタン**（`button-outline`）: 黒い地に黄色の細い枠を付けた四角いボタン。続きを読むや購入リンクに使う - **黄色いラベルバッジ**（`badge-yellow`）: 販売区分やキャラクター名を、黄色のベタ塗りに黒い太字で入れる - **料金表**（`price-table`）: 見出し行を紫にした細い線のテーブル。前売と当日はタブで切り替える - **会場カード**（`venue-card`）: 黄色の会場名と白の日付を入れ、下部に開閉用の紫のバーを付ける - **折りたたみバー**（`accordion-bar`）: 白の細い枠に「▼ 見出し ▼」を中央揃えで入れる - **グッズタイル**（`goods-tile`）: グレーの細い枠で囲んだ正方形の写真の下に、商品名を白の太字で入れる ## Do's and Don'ts **Do** - 黒と紫の暗い地を守り、強調には蛍光イエローを使う - 見出しは英字と日本語の2段で組む - 情報は細い枠線の箱で区切る - 暗い背景には、テーマに合うモチーフを暗い色で薄く繰り返す - 日付・価格・人数は大きな数字で見せる - 長い補足は折りたたみに収める **Don't** - 白やパステルの明るい地にしない - 角丸やピル型のボタンを使わない - ぼかした柔らかい影を付けない - 蛍光イエローを本文に使わない - 背景の柄を明るくしすぎて、文字を読みにくくしない - 明朝体などの上品な書体を混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観とイベント名を一気に見せる）: 赤と緑の渦巻く背景にキャラクターを置き、ロゴを大きく重ねたキービジュアル 2. **リード**（イベントの内容を一言で伝える）: 黒い帯に黄色の太字コピーを2行入れ、その下に場面写真を横一列に並べる 3. **イベント概要**（どんなイベントかを説明する）: 英字の見出し、黄色の小見出し、本文の順に並べ、関連する2つのバナーを続ける 4. **特長**（3つの魅力を伝える）: 写真付きの枠線カードを3つ並べる 5. **あらすじ**（物語に引き込む）: 放射状の柄の上に中央揃えの本文を置き、最後に枠線ボタンを付ける 6. **キャラクター紹介**（登場人物を見せる）: グレーの地に赤い帯を斜めに入れる。左に全身の立ち絵、右にアイコンの一覧と説明を置く 7. **遊び方**（プレイの形式と参加の流れを伝える）: 四角いアイコンを3つ並べて数値を見せ、続けてステップのカードを3つ並べる 8. **安心ポイント・バナー**（初めての人の不安を減らす）: 派手な色のイラストバナーと、小さなバナーを並べる 9. **チケット情報**（販売日程と料金を伝える）: 紫の地に二重枠のパネルを置き、日程・料金表・特典付きチケットを入れる 10. **会場一覧**（開催場所と期間を示す）: 会場ごとのカードを縦に並べ、それぞれに開閉バーを付ける 11. **グッズ**（物販を紹介する）: 正方形のタイルを並べ、黄色い枠でノベルティを目立たせる 12. **よくある質問・注意事項**（補足情報をまとめる）: 折りたたみバーを縦に3本並べ、最後を鎖の柄の帯で締める ## Imagery - アニメ調のキャラクターイラストを主役にし、驚いた表情や戦う構図を使う - 実写の部屋の写真は、暗めでレトロな色調にして挟む - 背景には、テーマのモチーフを暗い色の総柄として敷く - アイコンは単色のシルエットにし、シアンの地に入れる - グッズは白い背景で真上か正面から撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCの3列カードは、SPでは1列に縦積みする - グッズはPCの4列からSPでは2列にする - キャラクター紹介は、SPでは立ち絵を上、アイコン一覧と説明を下にする - 英字の大見出しは、PCの40px前後からSPでは32px程度に縮める - 料金表はSPでは文字を小さくし、横スクロールさせないで済む列数に保つ ## 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-cd0fa698`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/s/dandadan/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。