DESIGN.md — スライム緑×段ボール色の体験イベント LP（Zombie Slime Green Escape Game Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: スライム緑・段ボール質感・ゾンビ風イラスト・ネオン縁取り見出し・白カード・黄緑アクセント
• 地の質感: 緑の面にうっすらムラを入れる。ストーリー部分は段ボール紙風の茶ベージュのテクスチャにする
• 形: 四角いカードと白枠を基本にする。ボタンはピル型。セクション境界は液体が垂れる波形、アイコンの背景は不定形の円にする
• 温度感: 明るい緑と黄緑による高めの彩度。濃い緑で締め、ホラーを軽く楽しい温度にする

Colors

• 地色はすべて緑系にする。明るい緑、中間の緑、濃い緑をセクションごとに切り替える
• セクション境界は黄緑から緑へのグラデーションのスライム形で区切る
• ストーリーなど世界観のパートだけ段ボール色の地にする
• 情報系はすべて白カードの上に黒文字で置き、読みやすさを確保する
• 黄緑はチケット枠や見出しの光彩など強調だけに使う
• ボタンは白地に黒文字と黒線で、緑の地から浮かせる
• point-badge は文字 #FFFFFF × 背景 #35AD53 のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#298640、4.59:1）を使う。
• icon-blob は文字 #FFFFFF × 背景 #C3AD8A のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#8D7248、4.53:1）を使う。
• label-tag は文字 #FFFFFF × 背景 #35AD53 のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#298640、4.59:1）を使う。

Typography

• 大見出しは丸みのある極太のディスプレイ書体にし、外側に緑または黄緑の光彩縁取りを付ける
• 本文は中央揃えを基本にし、緑地では白、白地では黒にする
• 日付や価格は数字だけを大きくし、単位は小さくする
• ボタン文字には ▼ や ▶ の矢印記号を添える
• 英字見出しは全大文字のブロック書体にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。プレイ形式とグッズは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは左右 5% の余白を取り中央に置く
• セクションは見出し、本文、カードの順に縦に積む
• チケット情報は黄緑の太枠で囲んだ白い大ボックスにまとめる
• 会場カードは白い上段と黄緑の下段リンク帯の 2 段構成にする
• ページ末尾は白いアコーディオンボタンを縦に 3 本並べる

Elevation & Depth

• 参加方法カードは右下に茶色のオフセット影を付ける
• 白ボタンには薄いドロップシャドウを付ける
• 見出しの光彩はぼかした緑のテキストシャドウで表現する
• グッズカードは影を付けず、角丸の平面にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形にし、白い太枠で囲む。アイコンの背景はちぎれたような不定形の円にする
• セクション境界: 黄緑から緑へのグラデーションの、液体が垂れるスライム波形
• 主 CTA は黒線の白いピル型にする
• アコーディオンと情報ボックスは角丸なしの四角に 1〜2px の線を付ける
• 地域バッジは緑の正円にし、カードの左上にはみ出させる
• 番号バッジは不定形のスライム形の上に point と数字を載せる

Components

• チケット購入ピルボタン（button-primary）: 白地に黒線の大きなピル型ボタン。▼ 付きでページ内のチケット情報へ飛ばす
• 光彩縁取り見出し（heading-glow）: 極太の丸いディスプレイ書体の大見出し。白い字に緑の光彩、または黄緑の縁取りを付ける
• スライム境界（slime-divider）: 上端が黄緑の、垂れる液体形の区切り。セクションの切り替わりに入れる
• ポイント番号バッジ（point-badge）: 緑のスライム形に小さな英字と大きな数字を載せ、写真枠の上に重ねる
• 不定形アイコン円（icon-blob）: 茶ベージュのちぎれた円に黒い線アイコンを置き、下に白文字のラベルを付ける
• 小見出しラベル（label-tag）: 緑の帯に白い太字を載せ、下辺に黄緑の線を引く
• 会場カード（venue-card）: 白い上段に会場名と期間、黄緑の下段に詳細リンクを置く。左上に地域名の円バッジを付ける
• グッズカード（goods-card）: 上に白地の商品画像、下に淡緑の地で品名と価格を載せる。右下に三角矢印を付ける
• アコーディオンボタン（accordion）: 黄緑の縁取りの白い四角いボタン。文字の両側に ▼ を置く
• 料金タブ付き表（price-table）: 黒と灰色のタブで切り替える料金表。罫線は黒い細線にし、価格の数字を大きくする

Do's and Don'ts

Do - 緑の濃淡をセクションごとに変え、スライム境界でつなぐ - 大見出しには必ず光彩か縁取りを付ける - 情報は白カードにまとめ、黒文字で読みやすくする - 要所にゾンビや工具のイラストを散らし、ポップなホラー感を出す - 日付と価格は数字を大きく強調する

Don't - 本物のホラーのような暗く血なまぐさい表現にしない - 緑以外の地色を多用しない（段ボール色は 1 セクションだけにする） - ボタンに緑の塗りを使い、地色と同化させない - 細い明朝体など上品な書体を使わない - セクション境界を直線だけにしない

Page Structure

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

1. ファーストビュー（世界観とタイトルを一目で伝える）: 全面のキービジュアルにタイトルロゴを重ねる。両端に縦書きのコピー、右上にオレンジの安心バッジを置く
2. リード（遊びの内容を短く説明し、購入へ誘導する）: 明るい緑の地に、斜めに傾けた紙片風の帯キャッチを 2 段重ねる。説明文と白いピル型 CTA、Q&A バナーを続ける
3. 写真帯（体験している雰囲気を見せる）: プレイ風景の写真を横長のコラージュで並べる
4. 動画（動画で魅力を伝える）: 英字見出しの下に動画の埋め込みと 2 つのタブボタンを置く
5. 特長ポイント（遊びの魅力を番号付きで紹介する）: スライム境界の下に光彩見出しを置く。番号バッジ付きの白枠写真と中央揃えの説明を並べる
6. 関連バナー（コラボやキャンペーンを告知する）: 白枠で囲んだ横長バナーを縦に 3 本並べる
7. プレイ形式（人数・時間などの基本情報を示す）: 不定形の円アイコンを 2×2 で並べ、下に白いラベルを付ける
8. ストーリー（世界観に没入させる）: 段ボール地に黄緑縁取りの見出しを置く。冒頭の文と read more のピルボタンを続ける
9. 参加方法（購入から参加までの流れを示す）: オフセット影の付いた白いステップカードをスライダーで見せ、初心者向けの安心バナーを添える
10. チケット情報（販売日程と料金を伝える）: 濃い緑の地に黄緑枠の白い大ボックスを置き、ラベル見出し、日程、タブ付き料金表を入れる
11. チケット購入（会場ごとの購入導線を示す）: 地域名の円バッジ付きの会場カードを縦に並べる
12. グッズ（物販を紹介する）: 2 列のグッズカードで、画像・品名・価格を見せる
13. 注意事項・よくある質問（補足情報をたたんで格納する）: 黄緑縁の白いアコーディオンボタンを 3 本並べる

Imagery

• メインはアメコミ調に塗った緑肌のゾンビのイラストにし、コミカルに描く
• ホームセンターの棚・工具・ヘルメット・ペンキローラーなどの小物イラストを散らす
• 実写は暗めの倉庫風セットで、若い参加者が驚いたり構えたりする姿を撮る
• 写真は白い太枠で囲む
• アイコンは黒い線画のシンプルなピクトグラムにする
• 段ボール紙やマスキングテープ風の紙片を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 75% に絞り、中央に置く
• 特長ポイントと参加方法は PC では 2〜3 列の横並びにする
• プレイ形式のアイコンは PC では 4 つを横一列に並べる
• グッズは PC では 3 列グリッドにする
• ファーストビューは PC では横長の画像にし、縦書きのコピーを横書きにまとめる
• CTA やアコーディオンは 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 行書くと起動時に読み込まれる。