--- version: alpha name: Zombie Slime Green Escape Game Event LP description: 濃淡の緑を地色にして、セクション境界を垂れるスライム形で区切る体験型イベント LP。段ボール風のベージュの面、白いカード、黄緑の縁取りを組み合わせ、ホラー要素をポップにした遊び心ある見た目に仕上げる。 colors: primary: '#33B716' secondary: '#167113' dark-section: '#0C5714' background-alt: '#06741E' accent-1: '#C1FE02' tint-1: '#CEB39B' surface: '#FFFFFF' tint-2: '#CDE4D2' accent-2: '#35AD53' cta: '#FFFFFF' on-cta: '#030102' text: '#1A1A1A' on-dark: '#FFFFFF' accent-3: '#C3AD8A' accent-2-accessible: '#298640' accent-3-accessible: '#8D7248' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Bungee fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: M PLUS 1p fontSize: 20px fontWeight: 800 lineHeight: 1.4 headline-sm: fontFamily: M PLUS 1p fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: M PLUS 1p fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: M PLUS 1p fontSize: 11px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: M PLUS 1p fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: M PLUS 1p fontSize: 22px fontWeight: 700 lineHeight: 1.2 rounded: sm: 4px md: 8px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px heading-glow: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 60px slime-divider: backgroundColor: '{colors.accent-1}' height: 70px point-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 60px icon-blob: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 130px label-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px venue-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 180px goods-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 300px accordion: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 66px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 300px --- # DESIGN.md — スライム緑×段ボール色の体験イベント LP（Zombie Slime Green Escape Game Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: スライム緑・段ボール質感・ゾンビ風イラスト・ネオン縁取り見出し・白カード・黄緑アクセント - **地の質感**: 緑の面にうっすらムラを入れる。ストーリー部分は段ボール紙風の茶ベージュのテクスチャにする - **形**: 四角いカードと白枠を基本にする。ボタンはピル型。セクション境界は液体が垂れる波形、アイコンの背景は不定形の円にする - **温度感**: 明るい緑と黄緑による高めの彩度。濃い緑で締め、ホラーを軽く楽しい温度にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#33B716` | メインの明るい緑の地 | 12% | 画素の実測 | | `secondary` | `#167113` | 中間の緑セクションの地 | 18% | 画素の実測 | | `dark-section` | `#0C5714` | チケット情報などの濃い緑の地 | 14% | 画素の実測 | | `background-alt` | `#06741E` | グッズ・FAQ の緑の地 | 12% | 画素の実測 | | `accent-1` | `#C1FE02` | スライム境界と枠の黄緑 | 4% | 画素の実測 | | `tint-1` | `#CEB39B` | 段ボール風ストーリーの地 | 7% | 画素の実測 | | `surface` | `#FFFFFF` | カードと情報ボックスの白 | 20% | 画素の実測 | | `tint-2` | `#CDE4D2` | グッズカードのキャプション部の淡緑 | 2% | 画素の実測 | | `accent-2` | `#35AD53` | 小見出しラベルや地域バッジの緑 | 1% | 画素の実測 | | `cta` | `#FFFFFF` | 購入ボタンの白い地 | 1% | 画素の実測 | | `on-cta` | `#030102` | ボタンの黒い文字 | 0% | 画素の実測 | | `text` | `#1A1A1A` | 白地の上の本文の黒 | 2% | 推定 | | `on-dark` | `#FFFFFF` | 緑地の上の白い本文 | 1% | 画素の主要色に補正 | | `accent-3` | `#C3AD8A` | アイコン背景の茶色の円 | 2% | 画素の実測 | | `accent-2-accessible` | `#298640` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#8D7248` | AA を満たす補正値（計算） | | 計算 | - 地色はすべて緑系にする。明るい緑、中間の緑、濃い緑をセクションごとに切り替える - セクション境界は黄緑から緑へのグラデーションのスライム形で区切る - ストーリーなど世界観のパートだけ段ボール色の地にする - 情報系はすべて白カードの上に黒文字で置き、読みやすさを確保する - 黄緑はチケット枠や見出しの光彩など強調だけに使う - ボタンは白地に黒文字と黒線で、緑の地から浮かせる - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し（白い字に緑の光彩縁取り） | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.3 | 0.02em | | `headline-lg` | 英字見出し（黒い字に黄緑の縁取り） | 欧文サンセリフ | Bungee | 400 | 34px | 1.2 | 0.02em | | `headline-md` | 日付・会場名などの太字情報 | ゴシック | M PLUS 1p | 800 | 20px | 1.4 | 0.0em | | `headline-sm` | カードタイトル・小見出しラベル | ゴシック | M PLUS 1p | 700 | 17px | 1.5 | 0.02em | | `body-md` | 本文（中央揃え） | ゴシック | M PLUS 1p | 500 | 14px | 1.7 | 0.02em | | `note` | 注釈・税込表記 | ゴシック | M PLUS 1p | 400 | 11px | 1.5 | 0.0em | | `label-button` | ボタン・アコーディオンの文字 | ゴシック | M PLUS 1p | 700 | 15px | 1.4 | 0.02em | | `accent` | 価格の数字（大きくする） | ゴシック | M PLUS 1p | 700 | 22px | 1.2 | 0.0em | - 大見出しは丸みのある極太のディスプレイ書体にし、外側に緑または黄緑の光彩縁取りを付ける - 本文は中央揃えを基本にし、緑地では白、白地では黒にする - 日付や価格は数字だけを大きくし、単位は小さくする - ボタン文字には ▼ や ▶ の矢印記号を添える - 英字見出しは全大文字のブロック書体にする - 書体は画像からの推定で、フォント名は近い印象の 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 ```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-5307724c`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/s/zombie-homecenter/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。