漆黒×黄緑金の魔法ファンタジー体験イベントLP

Dark Fantasy Mystery Event LP

全面漆黒の地に、蔦飾りつきの黄緑ゴールド英字見出しと明朝体の白文字を置く。体験型謎解きイベントのLP。六角形の枠を繰り返し使い、魔法の館の世界観を出している。料金表とチケットの部品だけ、紫と灰色のタブで操作しやすくしている。

エンタメ・ゲーム・アプリラグジュアリー・ダーク力強い・インパクト情報量多め・訴求型PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は全セクションで純黒にする。セクションごとに地の色を変えない
セクション英字見出しにだけ黄緑ゴールドを使い、蔦の装飾を左右に添える
本文と線は白にする。強調語・リンク・注意喚起は黄緑にする
紫はチケット関連の選択状態と見出し帯に限って使う
灰色の面はアコーディオンと非選択タブだけに使う

TYPOGRAPHY

書体

displayセクションの英字大見出し欧文セリフ／ Cinzel Decorative 700 ／ 30px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgサブ見出し（料金・購入など）明朝／ Shippori Mincho 700 ／ 20px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-smステップ名・強調小見出しゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md物語・説明本文（中央揃え）明朝／ Noto Serif JP 600 ／ 14px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

note英字見出し下の和文ルビと注釈ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

accentSTEP番号（六角形内の大数字）欧文サンセリフ／ Montserrat 700 ／ 32px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonタブ・ボタンのラベルゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

英字見出しの下には、小さな和文の訳を必ず添える
物語・導入の文章は明朝体で中央揃えにし、段落の間に1行ぶん空ける
表・ステップ説明・注釈はゴシック体で左揃えにする
大見出しに太いゴシックは使わず、装飾性のあるセリフ体にする

PAGE STRUCTURE

セクション構成

ファーストビュー世界観に一気に引き込む幻想的な館のイラストを全面に敷き、金の装飾ロゴを中央に、縦書きの明朝コピーを右上に置く
導入体験の概要と魅力を伝える白い明朝の一文に続けて、部屋が連なる立体模型の画像を置き、その下に中央揃えの短い段落を並べる
イベント概要時間・人数などの基本情報を示す白い線の六角形を3つ並べ、下に細線で挟んだ補足情報を置く
シーン写真と動画体験の雰囲気を見せる全幅に3枚の写真を並べ、その下に動画の埋め込みを中央に置く
ストーリー物語で没入感を高める装飾見出しの下に、明朝の中央揃えで段落を並べる
遊び方当日の流れを不安なく伝える六角形の番号、線画のイラスト、説明文からなるステップを6行、区切り線付きで並べる
料金料金体系を比較させるピル型タブで切り替える料金表に、灰色のアコーディオンと白枠の割引告知を添える
チケット購入予約へ誘導する紫の帯見出しの下に、日付カレンダー、公演カード、地図、アクセス、問い合わせボタンを順に置く
グッズ関連商品を紹介する六角形に切り抜いた商品写真のカードを3列＋1で並べ、各カードに白枠の説明を付ける

COMPONENTS

部品

蔦飾り英字見出し heading-ornament黄緑ゴールドのセリフ英字の左右に蔦の装飾を置き、下に小さな和訳を添える
六角形の概要枠 hex-info白い線の六角形の中に、項目名と数値を2行で入れる
ステップ行 step-row六角形のSTEP番号、白い線画のイラスト、説明文を横に並べ、下に区切り線を引く
料金切替タブ tab-pill選択中は紫、非選択は灰色にしたピル型タブ
料金表 price-table茶灰色のヘッダーと黒いセルを白い細枠で区切った表
灰色アコーディオン accordion▼記号付きの灰色の横長バー。開くと詳細が出る
白枠告知ボックス notice-box白線で囲んだ告知ボックス。上辺にティール色のリボンバッジを重ねる
蛍光イエローのボタン button-primary黒文字を乗せた小さめのピル型ボタン
グッズカード goods-card六角形の写真、黄緑の商品名、価格、白枠の説明ボックスを縦に積む

守ること

地は純黒で統一し、装飾英字見出しでセクションを区切る
六角形のモチーフを複数のセクションで繰り返し使う
イラストは白い線画にして黒地になじませる
強調とリンクは黄緑に統一する

DON'T

避けること

白や明るい地のセクションを挟まない
ポップな丸ゴシックや原色の大きなボタンを多用しない
影の濃いカードやグラデーションボタンで世界観を崩さない
黄緑ゴールドを本文の地や広い面に使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（世界観に一気に引き込む）: 幻想的な館のイラストを全面に敷き、金の装飾ロゴを中央に、縦書きの明朝コピーを右上に置く
導入（体験の概要と魅力を伝える）: 白い明朝の一文に続けて、部屋が連なる立体模型の画像を置き、その下に中央揃えの短い段落を並べる
イベント概要（時間・人数などの基本情報を示す）: 白い線の六角形を3つ並べ、下に細線で挟んだ補足情報を置く
シーン写真と動画（体験の雰囲気を見せる）: 全幅に3枚の写真を並べ、その下に動画の埋め込みを中央に置く
ストーリー（物語で没入感を高める）: 装飾見出しの下に、明朝の中央揃えで段落を並べる
遊び方（当日の流れを不安なく伝える）: 六角形の番号、線画のイラスト、説明文からなるステップを6行、区切り線付きで並べる
料金（料金体系を比較させる）: ピル型タブで切り替える料金表に、灰色のアコーディオンと白枠の割引告知を添える
チケット購入（予約へ誘導する）: 紫の帯見出しの下に、日付カレンダー、公演カード、地図、アクセス、問い合わせボタンを順に置く
グッズ（関連商品を紹介する）: 六角形に切り抜いた商品写真のカードを3列＋1で並べ、各カードに白枠の説明を付ける

Imagery

メインビジュアルは、紫紺の夜空に浮かぶゴシック調の館を描いた緻密な絵画風イラストにする
体験写真は、ろうそく光が中心の暗くて暖色の低照度写真にする
ステップのイラストは、白い単線で描いた簡素な線画アイコンにする
見出しには、金色や黄緑の蔦・唐草の装飾を添える
グッズは黒背景で撮り、六角形に収める
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央に約65%幅のコンテンツ列を置き、左右は黒の余白にする
SP では六角形の概要を3つ横並びのまま縮小するか、縦に積む
SP のステップ行は、番号＋イラストを上、説明文を下に並べ替える
SP の料金表は横スクロールにするか、列を縦積みのカードにする
SP のグッズは1列にし、六角形写真を幅70%程度で中央に置く

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 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://mysterycircus.jp/s/9magic/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP