--- version: alpha name: Dark Fantasy Mystery Event LP description: 全面漆黒の地に、蔦飾りつきの黄緑ゴールド英字見出しと明朝体の白文字を置く。体験型謎解きイベントのLP。六角形の枠を繰り返し使い、魔法の館の世界観を出している。料金表とチケットの部品だけ、紫と灰色のタブで操作しやすくしている。 colors: background: '#000000' primary: '#E2F749' text: '#F5F6EC' line: '#F5F6EC' secondary: '#7816C2' cta: '#E6FD53' on-cta: '#000000' accent-1: '#E2F04A' surface: '#BFBFBE' background-alt: '#73695B' tint-1: '#000000' accent-2: '#2B7BDB' typography: display: fontFamily: Cinzel Decorative fontSize: 30px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em headline-lg: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 32px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 2px md: 6px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-ornament: textColor: '{colors.primary}' typography: '{typography.display}' height: 50px hex-info: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 110px step-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px tab-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px price-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px accordion: backgroundColor: '{colors.surface}' typography: '{typography.label-button}' height: 44px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px goods-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 360px --- # DESIGN.md — 漆黒×黄緑金の魔法ファンタジー体験イベントLP（Dark Fantasy Mystery Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 漆黒・魔法・六角形・装飾英字・明朝・物語 - **地の質感**: マットな黒一色の地。写真とイラストだけが質感を担う - **形**: 六角形の枠と細い白線。ボタンは角丸かピル型 - **温度感**: 冷たく神秘的。見出しの黄緑ゴールドで妖しい光を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ全体の地 | 68% | 画素の実測 | | `primary` | `#E2F749` | 装飾英字見出しの黄緑ゴールド | 1% | 画素の実測 | | `text` | `#F5F6EC` | 見出しと本文の白文字 | 3% | 画素の主要色に補正 | | `line` | `#F5F6EC` | 六角形枠と区切り線 | 1% | 画素の主要色に補正 | | `secondary` | `#7816C2` | 選択中タブと会場帯の紫 | 1% | 画素の実測 | | `cta` | `#E6FD53` | 問い合わせボタンの蛍光イエロー | 0% | 画素の実測 | | `on-cta` | `#000000` | CTAボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E2F04A` | リンクと強調テキストの黄緑 | 0% | 推定 | | `surface` | `#BFBFBE` | アコーディオンと非選択タブの灰色 | 1% | 画素の実測 | | `background-alt` | `#73695B` | 料金表ヘッダーのくすんだ茶灰色 | 0% | 画素の実測 | | `tint-1` | `#000000` | 料金表セルの濃いグレー | 1% | 画素の実測 | | `accent-2` | `#2B7BDB` | カレンダー日付の青 | 0% | 画素の実測 | - 地は全セクションで純黒にする。セクションごとに地の色を変えない - セクション英字見出しにだけ黄緑ゴールドを使い、蔦の装飾を左右に添える - 本文と線は白にする。強調語・リンク・注意喚起は黄緑にする - 紫はチケット関連の選択状態と見出し帯に限って使う - 灰色の面はアコーディオンと非選択タブだけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文セリフ | Cinzel Decorative | 700 | 30px | 1.2 | 0.04em | | `headline-lg` | サブ見出し（料金・購入など） | 明朝 | Shippori Mincho | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | ステップ名・強調小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 物語・説明本文（中央揃え） | 明朝 | Noto Serif JP | 600 | 14px | 1.9 | 0.05em | | `note` | 英字見出し下の和文ルビと注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.05em | | `accent` | STEP番号（六角形内の大数字） | 欧文サンセリフ | Montserrat | 700 | 32px | 1.0 | 0.0em | | `label-button` | タブ・ボタンのラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.03em | - 英字見出しの下には、小さな和文の訳を必ず添える - 物語・導入の文章は明朝体で中央揃えにし、段落の間に1行ぶん空ける - 表・ステップ説明・注釈はゴシック体で左揃えにする - 大見出しに太いゴシックは使わず、装飾性のあるセリフ体にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。概要の六角形 3 個は横並びか縦積み、グッズは 1〜2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 本文ブロックは中央に寄せ、両側に広い黒の余白を残す - ステップは左に六角形の番号、中央にイラスト、右に説明文の3要素で組む。各行は白い細線で区切る - シーン写真は画面幅いっぱいに3枚を横に並べ、間に隙間を入れない - 表は全幅に近い幅にし、セルに細い枠線を引く ## Elevation & Depth - 影はほぼ使わない。黒地と白線のコントラストで階層を表す - グッズ写真は六角形のシルエットに入れ、背面にほのかな暗いグラデーションを敷く ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: グッズは六角形に切り抜く。シーン写真は横長の長方形を隙間なく並べる - **セクション境界**: 直線で区切る。境界線は引かず、黒い余白と装飾見出しだけで切り替える - 枠には六角形をくり返し使う（概要・ステップ番号・グッズ） - 白線は1〜2pxの細線にする - タブはピル型にする ## Components - **蔦飾り英字見出し**（`heading-ornament`）: 黄緑ゴールドのセリフ英字の左右に蔦の装飾を置き、下に小さな和訳を添える - **六角形の概要枠**（`hex-info`）: 白い線の六角形の中に、項目名と数値を2行で入れる - **ステップ行**（`step-row`）: 六角形のSTEP番号、白い線画のイラスト、説明文を横に並べ、下に区切り線を引く - **料金切替タブ**（`tab-pill`）: 選択中は紫、非選択は灰色にしたピル型タブ - **料金表**（`price-table`）: 茶灰色のヘッダーと黒いセルを白い細枠で区切った表 - **灰色アコーディオン**（`accordion`）: ▼記号付きの灰色の横長バー。開くと詳細が出る - **白枠告知ボックス**（`notice-box`）: 白線で囲んだ告知ボックス。上辺にティール色のリボンバッジを重ねる - **蛍光イエローのボタン**（`button-primary`）: 黒文字を乗せた小さめのピル型ボタン - **グッズカード**（`goods-card`）: 六角形の写真、黄緑の商品名、価格、白枠の説明ボックスを縦に積む ## Do's and Don'ts **Do** - 地は純黒で統一し、装飾英字見出しでセクションを区切る - 六角形のモチーフを複数のセクションで繰り返し使う - イラストは白い線画にして黒地になじませる - 強調とリンクは黄緑に統一する **Don't** - 白や明るい地のセクションを挟まない - ポップな丸ゴシックや原色の大きなボタンを多用しない - 影の濃いカードやグラデーションボタンで世界観を崩さない - 黄緑ゴールドを本文の地や広い面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観に一気に引き込む）: 幻想的な館のイラストを全面に敷き、金の装飾ロゴを中央に、縦書きの明朝コピーを右上に置く 2. **導入**（体験の概要と魅力を伝える）: 白い明朝の一文に続けて、部屋が連なる立体模型の画像を置き、その下に中央揃えの短い段落を並べる 3. **イベント概要**（時間・人数などの基本情報を示す）: 白い線の六角形を3つ並べ、下に細線で挟んだ補足情報を置く 4. **シーン写真と動画**（体験の雰囲気を見せる）: 全幅に3枚の写真を並べ、その下に動画の埋め込みを中央に置く 5. **ストーリー**（物語で没入感を高める）: 装飾見出しの下に、明朝の中央揃えで段落を並べる 6. **遊び方**（当日の流れを不安なく伝える）: 六角形の番号、線画のイラスト、説明文からなるステップを6行、区切り線付きで並べる 7. **料金**（料金体系を比較させる）: ピル型タブで切り替える料金表に、灰色のアコーディオンと白枠の割引告知を添える 8. **チケット購入**（予約へ誘導する）: 紫の帯見出しの下に、日付カレンダー、公演カード、地図、アクセス、問い合わせボタンを順に置く 9. **グッズ**（関連商品を紹介する）: 六角形に切り抜いた商品写真のカードを3列＋1で並べ、各カードに白枠の説明を付ける ## Imagery - メインビジュアルは、紫紺の夜空に浮かぶゴシック調の館を描いた緻密な絵画風イラストにする - 体験写真は、ろうそく光が中心の暗くて暖色の低照度写真にする - ステップのイラストは、白い単線で描いた簡素な線画アイコンにする - 見出しには、金色や黄緑の蔦・唐草の装飾を添える - グッズは黒背景で撮り、六角形に収める - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約65%幅のコンテンツ列を置き、左右は黒の余白にする - SP では六角形の概要を3つ横並びのまま縮小するか、縦に積む - SP のステップ行は、番号＋イラストを上、説明文を下に並べ替える - SP の料金表は横スクロールにするか、列を縦積みのカードにする - SP のグッズは1列にし、六角形写真を幅70%程度で中央に置く ## 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-1cf4af4b`（元 LP の URL から採番） - **元 LP**: https://mysterycircus.jp/s/9magic/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。