黒×深紅×金の劇場風体験イベントLP

Theatrical Crimson and Gold Event LP

ほぼ黒の焦げ茶を地に、深紅の幕と金のグラデーションを効かせた劇場・ショー風の参加型イベントLP。明朝体とクラシックな欧文セリフで高級感を出し、金の装飾枠・リボン・ピル型の金CTAで期待感をあおる。

エンタメ・ゲーム・アプリラグジュアリー・ダーク力強い・インパクト上品・高級レトロSPPC

ダウンロード

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

COLORS

配色

地はほぼ黒の焦げ茶で統一し、赤はストーリー面・FV・フッターなど面で使う
金はグラデーションで見出し・枠線・CTAに限定し、金属光沢を出す
黒地の本文は白、クリーム地の見出しは深紅にする
重要な注意だけ赤文字、リンクは黄色の下線付き
PCの左右余白は赤のダマスク柄で埋める

TYPOGRAPHY

書体

displayFVのタイトルロゴ風文字装飾・ディスプレイ／ Dela Gothic One 900 ／ 56px ／行間 1.1

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

headline-lgSTORY/TICKET/FAQなど英字セクション見出し欧文セリフ／ Cinzel 400 ／ 36px ／行間 1.2

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

headline-md告知ボックス見出し・ストーリー本文の大見出し明朝／ Shippori Mincho 800 ／ 28px ／行間 1.35

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

headline-sm手順見出し・枠見出し明朝／ Shippori Mincho 700 ／ 19px ／行間 1.4

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

body-md本文・注意事項明朝／ Noto Serif JP 600 ／ 13px ／行間 1.7

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

note米印注釈明朝／ Noto Serif JP 500 ／ 9px ／行間 1.5

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

accentChapter番号など欧文装飾欧文セリフ／ Playfair Display 400 ／ 22px ／行間 1.1

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

label-buttonCTAボタンの太い筆書き風文字装飾・ディスプレイ／ Yuji Syuku 700 ／ 20px ／行間 1.2

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

和文は全て明朝系で統一し、ゴシックは使わない
英字見出しは字間広めの大文字セリフを金色で
本文は中央揃えの短文改行が基本、注意事項のみ左揃え箇条書き
CTA文字は太く強い装飾書体で深紅
注釈は小さく白で、ボタン直下に置く

PAGE STRUCTURE

セクション構成

ヘッダーロゴとチケット導線深紅の細い固定バー、右に金ピルボタン
ファーストビューイベントの世界観と開催日の訴求赤い劇場幕の背景に金枠のタイトルロゴ、大きな日付、縦書きキャッチ、人物写真、立地の丸バッジ
当日券案内補足情報黒地に白の小文字2行
ストーリーコンセプト紹介と最初のCTA深紅パネルに金の英字見出し、白明朝の短文、縦書き装飾文、金CTA
体験の流れ（Chapter）体験内容を3章で説明章番号と円形写真を左右交互、弧状の金コピー、金リボン装飾
購入特典告知事前購入の促進吹き出し付き人物写真の下にクリームの告知ボックス
遊び方所要時間・人数・場所の提示金英字見出し、燕尾型アイコンカード3枚
参加手順購入から開始までの4ステップ丸数字と縦矢印、地図やアイコン、途中にCTA
注意事項ゲーム上の注意金線枠の箇条書き
料金価格提示金英字見出しと2セルの料金表、チケット注意枠と金の規約ボタン
CTA最終の予約誘導金ピルボタンと注釈
よくある質問不安解消金線の矩形アコーディオン6件
アクセス会場と期間左に白明朝の住所・期間、右に地図埋め込み
フッター運営情報深紅地にロゴ、紹介文、SNSアイコン、リンク

COMPONENTS

部品

金のピル型予約ボタン button-primary金グラデのピル型、右端に赤丸の▶、上に赤い小ラベルを重ね、下に注釈2行
ヘッダーのチケットボタン header-ticket赤い固定ヘッダー右上の小さな金ピルボタンとメールアイコン
深紅のストーリーパネル story-panel赤地に角の金オーナメント、薔薇写真を下角に配し、中央に白明朝の短文
Chapter番号 chapter-label小さな金オーナメント＋欧文セリフの章番号、下に白の短文3〜4行
クリーム告知ボックス notice-boxクリーム地に赤の二重枠、赤明朝の大見出しと小注釈
遊び方アイコンカード icon-ribbon-card白地で下端燕尾、黒いピクトと短いラベル、3つ横並び
手順ステップ step-item金赤の丸数字、白明朝見出し、下に金点線、左に縦の金矢印
金線枠の注意事項 bordered-notes金線の矩形枠、上辺中央に金明朝見出しを食い込ませ、中は箇条書き
FAQアコーディオン faq-item金線の矩形、左にQ、右に金の▼
料金表 price-table左グレー・右濃グレーの2セル横並びで券種と価格

守ること

黒地を広く取り、金と赤は効かせどころに絞る
和文は明朝で統一し高級感を保つ
予約CTAは同じデザインで3〜4回繰り返す
金リボン・紙吹雪をセクション境界にはみ出させる
注意事項は金線枠で整理して読ませる

DON'T

避けること

丸ゴシックやポップな書体を使わない
金をベタの黄色にしない（必ずグラデ）
白背景のセクションを増やさない
角丸の大きいカードを使わない
原色の青緑などを装飾に足さない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒×深紅×金の劇場風体験イベントLP（Theatrical Crimson and Gold Event LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、上品・高級、レトロ
キーワード: 劇場・赤い幕・金の装飾枠・クラシック・謎解き・挑戦・ショー
地の質感: 黒地に金属光沢の金グラデーションと、ベルベット調の赤。金の紙吹雪やリボンでキラキラ感を足す
形: 四角い枠に金のオーナメント角飾り、円形クロップ写真、ピル型の金ボタン
温度感: 暖色寄りでドラマチック。暗い地に赤と金が浮かぶ夜の劇場の温度

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#110604`	ページ全体の地色（焦げ茶がかった黒）	55%	画素の実測
`primary`	`#9E1D21`	ストーリー面・フッターの深紅	10%	画素の実測
`secondary`	`#CEB990`	金の見出し・枠線の金色	3%	画素の実測
`cta`	`#EBD493`	チケット予約ボタンの金グラデ地	2%	画素の実測
`on-cta`	`#841E0E`	CTA上の深紅文字	0%	画素の実測
`surface`	`#FEFEFD`	告知ボックスのクリーム地	3%	画素の実測
`text`	`#FBF7EC`	黒地上の本文（白）	2%	画素の主要色に補正
`accent-1`	`#861A22`	クリーム地上の見出しの赤	0%	画素の実測
`line`	`#B78C6D`	注意事項枠・FAQ枠の金線	0%	画素の主要色に補正
`dark-section`	`#2D2C2C`	料金表の価格セル濃グレー	0%	画素の実測
`background-alt`	`#666665`	料金表の券種セルのグレー	0%	画素の実測
`accent-2`	`#D8392C`	重要注意の赤文字	0%	推定
`marker`	`#F2E23A`	リンク文字の黄色	0%	推定

地はほぼ黒の焦げ茶で統一し、赤はストーリー面・FV・フッターなど面で使う
金はグラデーションで見出し・枠線・CTAに限定し、金属光沢を出す
黒地の本文は白、クリーム地の見出しは深紅にする
重要な注意だけ赤文字、リンクは黄色の下線付き
PCの左右余白は赤のダマスク柄で埋める

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVのタイトルロゴ風文字	装飾・ディスプレイ	Dela Gothic One	900	56px	1.1	0.0em
`headline-lg`	STORY/TICKET/FAQなど英字セクション見出し	欧文セリフ	Cinzel	400	36px	1.2	0.12em
`headline-md`	告知ボックス見出し・ストーリー本文の大見出し	明朝	Shippori Mincho	800	28px	1.35	0.02em
`headline-sm`	手順見出し・枠見出し	明朝	Shippori Mincho	700	19px	1.4	0.02em
`body-md`	本文・注意事項	明朝	Noto Serif JP	600	13px	1.7	0.02em
`note`	米印注釈	明朝	Noto Serif JP	500	9px	1.5	0.0em
`accent`	Chapter番号など欧文装飾	欧文セリフ	Playfair Display	400	22px	1.1	0.02em
`label-button`	CTAボタンの太い筆書き風文字	装飾・ディスプレイ	Yuji Syuku	700	20px	1.2	0.04em

和文は全て明朝系で統一し、ゴシックは使わない
英字見出しは字間広めの大文字セリフを金色で
本文は中央揃えの短文改行が基本、注意事項のみ左揃え箇条書き
CTA文字は太く強い装飾書体で深紅
注釈は小さく白で、ボタン直下に置く
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。Chapter部分のみ文字と円形写真の左右交互配置
本文ブロックの幅: 画面幅の約 82%
余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
セクションは英字金見出し＋中身の繰り返し
Chapterは文字と円形写真をジグザグ配置
手順は丸数字＋縦の金矢印線でつなぐ
注意事項は金線の枠で囲み、見出しを上辺に食い込ませる
CTAは複数箇所に同じデザインで繰り返す

Elevation & Depth

基本はフラット、影は金ボタンの軽いドロップシャドウ程度
金ボタンは上下のグラデーションで立体感を出す
告知ボックスはクリーム地に二重の赤枠で浮かせる

Shapes

角丸: 小 0px ／中 4px ／大 999px。ボタンはピル型。
写真の切り抜き: 体験写真は金縁の円形クロップ、FVは全幅の矩形
セクション境界: 直線の切り替え。境界に金リボン・紙吹雪をはみ出させる
枠・カードは角丸なしで角にオーナメント
アイコンカードは下辺を燕尾（リボン端）型に切る
吹き出しは白地に赤線の楕円
FAQは角丸なしの金線矩形

Components

金のピル型予約ボタン（button-primary）: 金グラデのピル型、右端に赤丸の▶、上に赤い小ラベルを重ね、下に注釈2行
ヘッダーのチケットボタン（header-ticket）: 赤い固定ヘッダー右上の小さな金ピルボタンとメールアイコン
深紅のストーリーパネル（story-panel）: 赤地に角の金オーナメント、薔薇写真を下角に配し、中央に白明朝の短文
Chapter番号（chapter-label）: 小さな金オーナメント＋欧文セリフの章番号、下に白の短文3〜4行
クリーム告知ボックス（notice-box）: クリーム地に赤の二重枠、赤明朝の大見出しと小注釈
遊び方アイコンカード（icon-ribbon-card）: 白地で下端燕尾、黒いピクトと短いラベル、3つ横並び
手順ステップ（step-item）: 金赤の丸数字、白明朝見出し、下に金点線、左に縦の金矢印
金線枠の注意事項（bordered-notes）: 金線の矩形枠、上辺中央に金明朝見出しを食い込ませ、中は箇条書き
FAQアコーディオン（faq-item）: 金線の矩形、左にQ、右に金の▼
料金表（price-table）: 左グレー・右濃グレーの2セル横並びで券種と価格

Do's and Don'ts

Do - 黒地を広く取り、金と赤は効かせどころに絞る - 和文は明朝で統一し高級感を保つ - 予約CTAは同じデザインで3〜4回繰り返す - 金リボン・紙吹雪をセクション境界にはみ出させる - 注意事項は金線枠で整理して読ませる

Don't - 丸ゴシックやポップな書体を使わない - 金をベタの黄色にしない（必ずグラデ） - 白背景のセクションを増やさない - 角丸の大きいカードを使わない - 原色の青緑などを装飾に足さない

Page Structure

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

ヘッダー（ロゴとチケット導線）: 深紅の細い固定バー、右に金ピルボタン
ファーストビュー（イベントの世界観と開催日の訴求）: 赤い劇場幕の背景に金枠のタイトルロゴ、大きな日付、縦書きキャッチ、人物写真、立地の丸バッジ
当日券案内（補足情報）: 黒地に白の小文字2行
ストーリー（コンセプト紹介と最初のCTA）: 深紅パネルに金の英字見出し、白明朝の短文、縦書き装飾文、金CTA
体験の流れ（Chapter）（体験内容を3章で説明）: 章番号と円形写真を左右交互、弧状の金コピー、金リボン装飾
購入特典告知（事前購入の促進）: 吹き出し付き人物写真の下にクリームの告知ボックス
遊び方（所要時間・人数・場所の提示）: 金英字見出し、燕尾型アイコンカード3枚
参加手順（購入から開始までの4ステップ）: 丸数字と縦矢印、地図やアイコン、途中にCTA
注意事項（ゲーム上の注意）: 金線枠の箇条書き
料金（価格提示）: 金英字見出しと2セルの料金表、チケット注意枠と金の規約ボタン
CTA（最終の予約誘導）: 金ピルボタンと注釈
よくある質問（不安解消）: 金線の矩形アコーディオン6件
アクセス（会場と期間）: 左に白明朝の住所・期間、右に地図埋め込み
フッター（運営情報）: 深紅地にロゴ、紹介文、SNSアイコン、リンク

Imagery

FVは赤いベルベット幕と劇場照明で舞台感を出す
人物は目隠しなど挑戦を示す演出写真を強いコントラストで
体験写真は暗い背景に金色の光や火花を合成し円形に切る
装飾は金の巻きリボン、ラメの円、アンティークな唐草オーナメント
アイコンは黒いシンプルなピクトグラム
深紅の薔薇を角に置き高級感を補強
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCはSPと同じ1カラムを中央に約55%幅で配置
PCの左右は赤のダマスク柄の背景で埋める
要素サイズや構成は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 行書くと起動時に読み込まれる。

---
version: alpha
name: Theatrical Crimson and Gold Event LP
description: ほぼ黒の焦げ茶を地に、深紅の幕と金のグラデーションを効かせた劇場・ショー風の参加型イベントLP。明朝体とクラシックな欧文セリフで高級感を出し、金の装飾枠・リボン・ピル型の金CTAで期待感をあおる。
colors:
  background: '#110604'
  primary: '#9E1D21'
  secondary: '#CEB990'
  cta: '#EBD493'
  on-cta: '#841E0E'
  surface: '#FEFEFD'
  text: '#FBF7EC'
  accent-1: '#861A22'
  line: '#B78C6D'
  dark-section: '#2D2C2C'
  background-alt: '#666665'
  accent-2: '#D8392C'
  marker: '#F2E23A'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 56px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg:
    fontFamily: Cinzel
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.12em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.35
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Serif JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.5
  accent:
    fontFamily: Playfair Display
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  label-button:
    fontFamily: Yuji Syuku
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 0px
  md: 4px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    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: 48px
  header-ticket:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 28px
  story-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 250px
  chapter-label:
    textColor: '{colors.secondary}'
    typography: '{typography.accent}'
    height: 50px
  notice-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    height: 150px
  icon-ribbon-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.background}'
    typography: '{typography.note}'
    height: 85px
  step-item:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 40px
  bordered-notes:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 600px
  faq-item:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 38px
  price-table:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 40px
---

# DESIGN.md — 黒×深紅×金の劇場風体験イベントLP（Theatrical Crimson and Gold Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、上品・高級、レトロ
- **キーワード**: 劇場・赤い幕・金の装飾枠・クラシック・謎解き・挑戦・ショー
- **地の質感**: 黒地に金属光沢の金グラデーションと、ベルベット調の赤。金の紙吹雪やリボンでキラキラ感を足す
- **形**: 四角い枠に金のオーナメント角飾り、円形クロップ写真、ピル型の金ボタン
- **温度感**: 暖色寄りでドラマチック。暗い地に赤と金が浮かぶ夜の劇場の温度

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#110604` | ページ全体の地色（焦げ茶がかった黒） | 55% | 画素の実測 |
| `primary` | `#9E1D21` | ストーリー面・フッターの深紅 | 10% | 画素の実測 |
| `secondary` | `#CEB990` | 金の見出し・枠線の金色 | 3% | 画素の実測 |
| `cta` | `#EBD493` | チケット予約ボタンの金グラデ地 | 2% | 画素の実測 |
| `on-cta` | `#841E0E` | CTA上の深紅文字 | 0% | 画素の実測 |
| `surface` | `#FEFEFD` | 告知ボックスのクリーム地 | 3% | 画素の実測 |
| `text` | `#FBF7EC` | 黒地上の本文（白） | 2% | 画素の主要色に補正 |
| `accent-1` | `#861A22` | クリーム地上の見出しの赤 | 0% | 画素の実測 |
| `line` | `#B78C6D` | 注意事項枠・FAQ枠の金線 | 0% | 画素の主要色に補正 |
| `dark-section` | `#2D2C2C` | 料金表の価格セル濃グレー | 0% | 画素の実測 |
| `background-alt` | `#666665` | 料金表の券種セルのグレー | 0% | 画素の実測 |
| `accent-2` | `#D8392C` | 重要注意の赤文字 | 0% | 推定 |
| `marker` | `#F2E23A` | リンク文字の黄色 | 0% | 推定 |

- 地はほぼ黒の焦げ茶で統一し、赤はストーリー面・FV・フッターなど面で使う
- 金はグラデーションで見出し・枠線・CTAに限定し、金属光沢を出す
- 黒地の本文は白、クリーム地の見出しは深紅にする
- 重要な注意だけ赤文字、リンクは黄色の下線付き
- PCの左右余白は赤のダマスク柄で埋める

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのタイトルロゴ風文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.1 | 0.0em |
| `headline-lg` | STORY/TICKET/FAQなど英字セクション見出し | 欧文セリフ | Cinzel | 400 | 36px | 1.2 | 0.12em |
| `headline-md` | 告知ボックス見出し・ストーリー本文の大見出し | 明朝 | Shippori Mincho | 800 | 28px | 1.35 | 0.02em |
| `headline-sm` | 手順見出し・枠見出し | 明朝 | Shippori Mincho | 700 | 19px | 1.4 | 0.02em |
| `body-md` | 本文・注意事項 | 明朝 | Noto Serif JP | 600 | 13px | 1.7 | 0.02em |
| `note` | 米印注釈 | 明朝 | Noto Serif JP | 500 | 9px | 1.5 | 0.0em |
| `accent` | Chapter番号など欧文装飾 | 欧文セリフ | Playfair Display | 400 | 22px | 1.1 | 0.02em |
| `label-button` | CTAボタンの太い筆書き風文字 | 装飾・ディスプレイ | Yuji Syuku | 700 | 20px | 1.2 | 0.04em |

- 和文は全て明朝系で統一し、ゴシックは使わない
- 英字見出しは字間広めの大文字セリフを金色で
- 本文は中央揃えの短文改行が基本、注意事項のみ左揃え箇条書き
- CTA文字は太く強い装飾書体で深紅
- 注釈は小さく白で、ボタン直下に置く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。Chapter部分のみ文字と円形写真の左右交互配置
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- セクションは英字金見出し＋中身の繰り返し
- Chapterは文字と円形写真をジグザグ配置
- 手順は丸数字＋縦の金矢印線でつなぐ
- 注意事項は金線の枠で囲み、見出しを上辺に食い込ませる
- CTAは複数箇所に同じデザインで繰り返す

## Elevation & Depth

- 基本はフラット、影は金ボタンの軽いドロップシャドウ程度
- 金ボタンは上下のグラデーションで立体感を出す
- 告知ボックスはクリーム地に二重の赤枠で浮かせる

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 体験写真は金縁の円形クロップ、FVは全幅の矩形
- **セクション境界**: 直線の切り替え。境界に金リボン・紙吹雪をはみ出させる
- 枠・カードは角丸なしで角にオーナメント
- アイコンカードは下辺を燕尾（リボン端）型に切る
- 吹き出しは白地に赤線の楕円
- FAQは角丸なしの金線矩形

## Components

- **金のピル型予約ボタン**（`button-primary`）: 金グラデのピル型、右端に赤丸の▶、上に赤い小ラベルを重ね、下に注釈2行
- **ヘッダーのチケットボタン**（`header-ticket`）: 赤い固定ヘッダー右上の小さな金ピルボタンとメールアイコン
- **深紅のストーリーパネル**（`story-panel`）: 赤地に角の金オーナメント、薔薇写真を下角に配し、中央に白明朝の短文
- **Chapter番号**（`chapter-label`）: 小さな金オーナメント＋欧文セリフの章番号、下に白の短文3〜4行
- **クリーム告知ボックス**（`notice-box`）: クリーム地に赤の二重枠、赤明朝の大見出しと小注釈
- **遊び方アイコンカード**（`icon-ribbon-card`）: 白地で下端燕尾、黒いピクトと短いラベル、3つ横並び
- **手順ステップ**（`step-item`）: 金赤の丸数字、白明朝見出し、下に金点線、左に縦の金矢印
- **金線枠の注意事項**（`bordered-notes`）: 金線の矩形枠、上辺中央に金明朝見出しを食い込ませ、中は箇条書き
- **FAQアコーディオン**（`faq-item`）: 金線の矩形、左にQ、右に金の▼
- **料金表**（`price-table`）: 左グレー・右濃グレーの2セル横並びで券種と価格

## Do's and Don'ts

**Do**
- 黒地を広く取り、金と赤は効かせどころに絞る
- 和文は明朝で統一し高級感を保つ
- 予約CTAは同じデザインで3〜4回繰り返す
- 金リボン・紙吹雪をセクション境界にはみ出させる
- 注意事項は金線枠で整理して読ませる

**Don't**
- 丸ゴシックやポップな書体を使わない
- 金をベタの黄色にしない（必ずグラデ）
- 白背景のセクションを増やさない
- 角丸の大きいカードを使わない
- 原色の青緑などを装飾に足さない

## Page Structure

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

1. **ヘッダー**（ロゴとチケット導線）: 深紅の細い固定バー、右に金ピルボタン
2. **ファーストビュー**（イベントの世界観と開催日の訴求）: 赤い劇場幕の背景に金枠のタイトルロゴ、大きな日付、縦書きキャッチ、人物写真、立地の丸バッジ
3. **当日券案内**（補足情報）: 黒地に白の小文字2行
4. **ストーリー**（コンセプト紹介と最初のCTA）: 深紅パネルに金の英字見出し、白明朝の短文、縦書き装飾文、金CTA
5. **体験の流れ（Chapter）**（体験内容を3章で説明）: 章番号と円形写真を左右交互、弧状の金コピー、金リボン装飾
6. **購入特典告知**（事前購入の促進）: 吹き出し付き人物写真の下にクリームの告知ボックス
7. **遊び方**（所要時間・人数・場所の提示）: 金英字見出し、燕尾型アイコンカード3枚
8. **参加手順**（購入から開始までの4ステップ）: 丸数字と縦矢印、地図やアイコン、途中にCTA
9. **注意事項**（ゲーム上の注意）: 金線枠の箇条書き
10. **料金**（価格提示）: 金英字見出しと2セルの料金表、チケット注意枠と金の規約ボタン
11. **CTA**（最終の予約誘導）: 金ピルボタンと注釈
12. **よくある質問**（不安解消）: 金線の矩形アコーディオン6件
13. **アクセス**（会場と期間）: 左に白明朝の住所・期間、右に地図埋め込み
14. **フッター**（運営情報）: 深紅地にロゴ、紹介文、SNSアイコン、リンク

## Imagery

- FVは赤いベルベット幕と劇場照明で舞台感を出す
- 人物は目隠しなど挑戦を示す演出写真を強いコントラストで
- 体験写真は暗い背景に金色の光や火花を合成し円形に切る
- 装飾は金の巻きリボン、ラメの円、アンティークな唐草オーナメント
- アイコンは黒いシンプルなピクトグラム
- 深紅の薔薇を角に置き高級感を補強
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCはSPと同じ1カラムを中央に約55%幅で配置
- PCの左右は赤のダマスク柄の背景で埋める
- 要素サイズや構成はSPのまま拡大せず固定幅
- 右端にページトップボタンを固定

## 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-0f071cb4`（元 LP の URL から採番）
- **元 LP**: https://cleosbeaute.com/lp?u=ST01C_IFFLFB4980_2410_001_nekooyazi4231&fbclid=PAZXh0bgNhZW0CMTEAAaaVKYQ6cr1jVPrK1N7N94dicCALHXwpAOXRzCQ1vXGQ92Hgc3gpVe3JH5Y_aem_grlvEewm3bBNO9jFCAlJEA&fpc=2582.55.60.570117d6f0e2668J.1748008950000
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この 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