--- version: alpha name: Dark Purple Pirate Fantasy Event LP description: 深い紫と紺の暗い地に、古びた羊皮紙の巻物見出しと金縁の装飾を重ねた、海賊・幽霊船の世界観をもつ体験型イベント告知LP。キャラクターイラストを主役にして、紫の帯ボタンと会場ごとのカードで情報を整理している。 colors: background: '#250533' background-alt: '#1B042B' dark-section: '#1A1945' primary: '#7B03B2' secondary: '#C99A6B' cta: '#4C146C' on-cta: '#FFFFFF' accent-1: '#3FC6E8' accent-2: '#146C6A' line: '#B89A6A' surface: '#FEFEFE' tint-1: '#E2D9E9' text: '#F2EEF5' text-body: '#4A2614' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em accent: fontFamily: Cinzel fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em rounded: sm: 2px md: 4px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' scroll-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.text-body}' typography: '{typography.headline-lg}' height: 56px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px medal-icon: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 72px square-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 150px character-tabs: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 40px parchment-card: backgroundColor: '{colors.secondary}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 500px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 180px venue-card: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 130px status-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 20px --- # DESIGN.md — 深紫×古地図の海賊ファンタジー謎解きイベントLP（Dark Purple Pirate Fantasy Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、情報量多め・訴求型、レトロ - **キーワード**: 深紫・羊皮紙・海賊・古地図・金縁・ファンタジー - **地の質感**: 暗い紫の地に、海図・羅針盤・舵輪の線画がうっすら透けて重なる。見出しは焼けた羊皮紙の質感にしている。 - **形**: 巻物型の見出し帯、細い金線で縁取った角ばったカード、円形メダルのアイコン、斜めに切ったセクション境界 - **温度感**: 冷たい紫を主に、羊皮紙の茶色で温かみを少し加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#250533` | ページの主な地色（深紫） | 35% | 画素の実測 | | `background-alt` | `#1B042B` | 交互に切り替わる暗い紫紺の帯 | 20% | 画素の実測 | | `dark-section` | `#1A1945` | 開催都市エリアの紺地 | 10% | 画素の実測 | | `primary` | `#7B03B2` | ブランドを代表する紫（ボタン・表の見出し） | 6% | 画素の実測 | | `secondary` | `#C99A6B` | 羊皮紙の巻物見出しの地 | 4% | 推定 | | `cta` | `#4C146C` | 主な誘導ボタンの濃い紫 | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 推定 | | `accent-1` | `#3FC6E8` | 小見出しに使う水色の文字 | 0% | 推定 | | `accent-2` | `#146C6A` | 販売中ラベル・ボタンの青緑 | 1% | 画素の実測 | | `line` | `#B89A6A` | カードの金縁 | 0% | 推定 | | `surface` | `#FEFEFE` | 料金表のセルの白 | 2% | 画素の実測 | | `tint-1` | `#E2D9E9` | 料金表の行見出しの薄い藤色 | 1% | 画素の実測 | | `text` | `#F2EEF5` | 暗い地の上の本文（白） | 1% | 推定 | | `text-body` | `#4A2614` | 羊皮紙の上の焦げ茶の文字 | 0% | 画素の実測 | - 地は深紫#200030と、さらに暗い紫紺を帯状に交互に置く - 見出しは必ず羊皮紙色の巻物にのせ、文字は焦げ茶にする - 誘導ボタンは紫の地に白文字で、細い明るい線で縁取る - 販売中などの状態ラベルは青緑にする - 小見出しは水色の文字で暗い地から浮かせる - 料金表やスケジュールの表だけは白地にし、見出しを紫の帯にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのタイトルロゴ風文字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.1 | 0.0em | | `headline-lg` | 巻物見出し（和文） | 明朝 | Shippori Mincho | 700 | 24px | 1.3 | 0.1em | | `accent` | 巻物見出し（欧文） | 欧文セリフ | Cinzel | 700 | 24px | 1.2 | 0.08em | | `headline-md` | 水色の小見出し・会場名 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.05em | | `body-md` | 中央揃えの本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `note` | 注釈・日付 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `label-button` | 帯ボタンの文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.05em | | `headline-sm` | キャラクター紹介の名前 | 明朝 | Noto Serif JP | 700 | 20px | 1.3 | 0.1em | - 見出しは明朝か装飾欧文セリフにして、古文書のような雰囲気を出す - 本文は小さめのゴシックで、中央揃えにする - 注意書きは ※ で始めて左揃えにする - 金額の数字だけを太く大きくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコンの並びは 2〜4 列、ボタンは 2 列にする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは巻物見出しを中央に置いて始める - 特長アイコンは円形メダルを横に並べ、下にラベルを付ける - 会場情報は縦に積んだカードで、左上に都市名のメダルを重ねる - ボタンは中央に置き、幅は本文幅の約70%にする - セクション境界は斜めに切り、地の色を切り替える ## Elevation & Depth - 影はほとんど使わず、金縁や明るい線で浮かせる - メダル型アイコンにはうっすら外側に光る効果を付ける - 羊皮紙の巻物には、焼けた縁の濃淡で立体感を出す ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角に白い縁を付けて少し傾け、ポラロイド風にする。グッズは楕円の金縁フレームに入れる - **セクション境界**: 斜めのカット（紫の濃淡で切り替える） - ボタンとカードは角ばった四角に細い線を付ける - タブとトグルだけはピル型にしてよい - アイコンは円形メダルにする ## Components - **巻物見出し**（`scroll-heading`）: 羊皮紙の巻物の上に、焦げ茶の明朝または装飾欧文の見出しを置く - **紫の帯ボタン**（`button-primary`）: 紫の地に明るい線で縁取り、右端に矢印を付けた横長のボタン - **円形メダルアイコン**（`medal-icon`）: 紫の円の中に線画アイコンを入れ、下に見出しとリンクを置く - **正方形の誘導バナー**（`square-banner`）: 紫か青緑の正方形に金縁を付け、手書き風の強調文字を添える - **キャラクター切り替えタブ**（`character-tabs`）: 黒地に紫の枠を付けた四角いタブ。選択中のタブは紫で塗る - **羊皮紙プロフィールカード**（`parchment-card`）: 端がめくれた古紙に、名前・説明・イラストを縦に並べる - **料金表**（`price-table`）: 紫の見出し行の下に白いセルを並べる。行見出しは薄い藤色にする - **会場アコーディオンカード**（`venue-card`）: 紫のグラデーションのカードに金縁を付け、左上に都市名メダル、右上に販売中ラベル、下部に開閉の帯を置く - **販売状態ラベル**（`status-badge`）: カードの右上に付ける、青緑の小さな四角いラベル ## Do's and Don'ts **Do** - 暗い紫の地に羊皮紙と金の装飾を組み合わせる - 背景に海図・羅針盤・舵輪の線画を低い不透明度で敷く - 見出しは必ず巻物の装飾で統一する - 情報量が多い箇所は表とカードで整理する - ボタンの右端には矢印を付ける **Don't** - 白や明るい色をページの地に使わない（表は例外） - ボタンを丸いピル型にしない - ポップな原色を足さない - 見出しをただのテキストだけにしない - 強い影やぼかしで現代的な見た目にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とタイトルを一目で伝える）: 夜の幽霊船を背景に、キャラクターを全面に配置する。下部に大きな装飾タイトル、縦書きでキャッチを置く 2. **導入**（イベントの概要を短く伝える）: 羊皮紙の古地図の帯に明朝の一文と説明を置き、その下に風景写真を横一列に並べる 3. **ポイント**（見どころを示す）: 巻物見出しの下に、傾けた写真と紫のボタンを置く。その下に3つのメダルアイコンを並べる 4. **登場人物**（キャラクターを紹介する）: 斜めの紫の帯の上にタブを置き、羊皮紙カードで切り替えて見せる 5. **ストーリー**（物語への没入感を高める）: 中央揃えの白文字の本文と、2つの正方形の解説バナー 6. **参加形式**（所要時間・人数などを示す）: 4つの色違いの円形メダルと、正方形の誘導バナーを並べる 7. **料金表**（価格を明示する）: 前売りと当日のトグルを付けた白い表。続けて特典グッズの画像と注釈を置く 8. **販売スケジュール**（チケット販売の時期を伝える）: 紫の見出し帯付きの白い枠に、日程とバナーを入れる 9. **開催都市**（会場ごとの予約へ誘導する）: 紺地に会場カードを縦に積み、都市名メダルと販売中ラベルを付ける 10. **グッズ**（物販を紹介する）: 楕円の金縁フレームに商品を入れて2列に並べ、名前と価格を添える。最後に紫のボタンを置く 11. **注意事項・FAQへの誘導**（補足情報へ誘導する）: 羊皮紙の質感をもつ横長の大きなバナーに、矢印を付ける ## Imagery - アニメ調のキャラクターイラストを主役にし、紫と緑の夜の光で描く - 古地図・羅針盤・舵輪・海賊旗などのモチーフを、紫の線画で背景に薄く敷く - 焼けて縁が焦げた羊皮紙のテクスチャを見出しやカードに使う - コウモリや金貨などの小さな装飾を散らす - 実写の写真はセピアや暗い色調に寄せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はPC版でも中央約70%幅の縦長構成なので、SPはそのまま1カラムで幅90%にする - SPのメダルアイコンは2列×2段にしてもよい - SPでも正方形バナーは2列を保つ - 料金表はSPで横スクロールさせず、セルの文字を小さくして収める - 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-88f80ac1`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/s/undead/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。