DESIGN.md — 黒×紫×蛍光黄のアニメ謎解きイベントLP（Dark Occult Anime Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: ダーク・蛍光イエロー・オカルト・アニメコラボ・細枠カード・コンデンス英字
• 地の質感: 黒地に暗い色のアイコン柄や放射状の柄を薄く敷き、ベタ塗りの面と細い線を組み合わせる
• 形: 角丸のない四角が基本。細い1pxの枠線や二重の枠で区切る
• 温度感: 冷たく妖しいトーンの中に、蛍光の黄色と赤が熱を差す

Colors

• 地は黒を基本にし、チケットと会場の情報だけ深い紫の地に切り替える
• 日本語の小見出しとバッジは蛍光イエローに限る
• 英字の大見出しは白のコンデンス体にする
• 赤はキービジュアルとキャラクター帯のアクセントにだけ使う
• カードは黒い面に白か黄の細い線で囲み、紫のずらし影を付ける
• 本文は白で、注釈は小さく薄い白にする

Typography

• 英字の大見出しは白のコンデンス体で中央に置き、すぐ下に日本語の小見出しを黄色で添える
• 日本語の小見出しには少しレトロなデジタル風の太字を使う
• あらすじは中央揃えにして、行間を広く取る
• 日付と価格の数字は大きくし、曜日や単位は小さくする
• 注釈は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

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

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