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