--- version: alpha name: Fantasy Purple Theme Park Mystery Event LP description: 深い紫とローズピンクを軸にした、テーマパークの謎解きイベント向けLP。絵本風のキャラクターイラストに、木目の札型見出し、波形のセクション境界、石畳の柄の背景を組み合わせている。物語の世界観をつくりつつ、開催情報やFAQは生成り色の地に簡素に並べ、読みやすさを保つ構成。 colors: primary: '#73308D' dark-section: '#481C40' background: '#FCFBF6' cta: '#E25879' on-cta: '#FFF4F8' secondary: '#0B338C' background-alt: '#D5D4D3' tint-1: '#DBD9E5' tint-2: '#C5C0D6' accent-1: '#CA8D55' accent-2: '#AF91AD' text: '#2B2230' marker: '#FDDA02' surface: '#FFFFFF' accent-1-accessible: '#9D6431' cta-accessible: '#D72550' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho B1 fontSize: 26px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em accent: fontFamily: Kiwi Maru fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 12px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-wood-plank: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 52px button-primary: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px button-link: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px label-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px info-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 90px slider-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 310px character-frame: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 480px faq-accordion: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 36px floating-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 80px --- # DESIGN.md — 紫×ピンクと木札見出しの謎解きイベントLP（Fantasy Purple Theme Park Mystery Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型、レトロ - **キーワード**: ファンタジー・絵本風キャラクター・木目の札見出し・紫のグラデーション・波形の境界・石畳の柄 - **地の質感**: 木目、石畳の柄、絵画風の背景イラストを使う。情報部分はフラットな面で見せる。 - **形**: 角丸カード、ピル型のラベル、丸いキャラクターアイコン、額縁風の装飾枠、波形の境界 - **温度感**: やや暖かい。夜祭りのような紫に、温かいピンクと木の茶色を合わせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#73308D` | 遊び方セクションの紫の地 | 9% | 画素の実測 | | `dark-section` | `#481C40` | プレイ形式など濃い紫の地 | 10% | 画素の実測 | | `background` | `#FCFBF6` | 情報セクションの生成り色の地 | 22% | 画素の実測 | | `cta` | `#E25879` | ラベル、強調文字、フッターに使うローズピンク | 8% | 画素の実測 | | `on-cta` | `#FFF4F8` | ピンクや紫の上に置く白文字 | 2% | 画素の実測 | | `secondary` | `#0B338C` | 外部リンクボタンの紺 | 1% | 画素の実測 | | `background-alt` | `#D5D4D3` | 石畳柄の地に使うグレー | 10% | 画素の実測 | | `tint-1` | `#DBD9E5` | FAQ行や注意事項に使う淡いラベンダー | 8% | 画素の実測 | | `tint-2` | `#C5C0D6` | 解説セクションの藤色の地 | 4% | 画素の実測 | | `accent-1` | `#CA8D55` | 木札見出しに使う木目の茶 | 2% | 画素の実測 | | `accent-2` | `#AF91AD` | 注意事項の見出し帯に使うくすみ紫 | 1% | 画素の実測 | | `text` | `#2B2230` | 本文と見出しの濃い文字 | 3% | 推定 | | `marker` | `#FDDA02` | 強調とページ送りに使う黄色 | 0% | 画素の実測 | | `surface` | `#FFFFFF` | スライドカードの白 | 6% | 画素の実測 | | `accent-1-accessible` | `#9D6431` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#D72550` | AA を満たす補正値（計算） | | 計算 | - 物語パートは濃い紫と紫の地にする。情報パートは生成り色の地にして、読ませる場所を分ける。 - 強調文字、ピル型ラベル、フッターはローズピンクに統一する。 - 外部リンクボタンだけ紺にして、主CTAの紫と区別する。 - FAQと注意事項は淡いラベンダーの面で控えめにまとめる。 - 見出しはどのセクションでも木目の茶の札に白文字で入れる。 - 黄色はページ送りの現在位置など、ごく小さな面だけに使う。 - `heading-wood-plank` は文字 `#FFF4F8` × 背景 `#CA8D55` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#9D6431`、4.55:1）を使う。 - `label-pill` は文字 `#FFF4F8` × 背景 `#E25879` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D72550`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの日付の大きな数字 | ゴシック | Noto Sans JP | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | 木札見出し | 明朝 | Shippori Mincho B1 | 800 | 26px | 1.2 | 0.08em | | `headline-md` | キャッチの帯見出し、スライドの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `headline-sm` | 開催情報の項目値 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em | | `body-md` | あらすじなど中央揃えの本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.02em | | `note` | 注釈、注意事項 | ゴシック | Noto Sans JP | 400 | 10px | 1.4 | 0.0em | | `label-button` | ピル型のラベルとボタン | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.04em | | `accent` | 吹き出し、シェア見出しの手書き風の文字 | 手書き・筆 | Kiwi Maru | 500 | 13px | 1.4 | 0.1em | - 本文は中央揃えを基本にし、短い行で改行する。 - 物語の重要な語は、ピンクの太字にして文中で強調する。 - 見出しは明朝系の太字に白抜きと縁取りを付け、木札の上に置く。 - 難しい漢字にはルビを付けて、子どもでも読めるようにする。 - 注意事項は小さな文字の箇条書きで、行間を詰める。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。プレイ形式は 4 列、安心ポイントは 3 列、キャラクターアイコンは 4＋3 列で並べる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算） - 各セクションは木札見出しから始め、続けて中身を置く。 - スライダーは左右にピンクの三角矢印、下にドット送りを付ける。 - 開催情報は、ピンクのラベルとその下の値の組を縦に積む。 - FAQは全幅の折りたたみ行を8px間隔で並べる。 - 紫と生成り色の境界は波形にする。 ## Elevation & Depth - スライドカードに薄い影を付ける。 - FAQ行は影なしで、下に細い白線を入れる。 - 主CTAは金色の縁取りで立体感を出す。 - 全体はフラットにまとめ、装飾の立体感はイラストで出す。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: キャラクターは金縁の円形アイコンで切り抜く。紹介は額縁型の枠に入れる。 - **セクション境界**: 波形（スカラップ）の境界、またはまっすぐな色の切り替え - ラベルとボタンはピル型にする。 - カードの角丸は8px程度にする。 - 見出しは両端が尖ったリボン状の木札にする。 - 持ち物の図解は不定形なブロブの上に置く。 ## Components - **木札見出し**（`heading-wood-plank`）: 両端が尖った木目の板に白い縁取り文字を載せた見出し - **おためしCTA**（`button-primary`）: 濃い紫のピル型ボタン。金縁で囲み、左にキャラクターのシルエット、上に吹き出しを付ける - **外部リンクボタン**（`button-link`）: 紺のピル型ボタン。白文字に右向き矢印を付ける - **項目ラベル**（`label-pill`）: 情報の項目名を入れる小さなピンクのピル型ラベル - **プレイ形式タイル**（`info-tile`）: 白い角丸タイルに、アイコンと所要時間・人数などを入れて4つ並べる - **手順スライダー**（`slider-card`）: 白いカードにピクトグラム、番号付きの見出し、説明を入れる。左右に三角矢印を付ける - **キャラクター額縁**（`character-frame`）: 濃い紫の額縁に金の唐草装飾を付け、キャラクターの絵と名前、紹介文を入れる - **FAQ行**（`faq-accordion`）: 淡いラベンダーの角丸の行。左に「Q：」と質問、右に下向きの山形アイコンを置く - **追従丸バッジ**（`floating-badge`）: 濃紺の丸いバッジ。キャラクターのアイコンと2行の文字を入れ、右側に追従させる ## Do's and Don'ts **Do** - セクションの見出しは、すべて木札で統一する。 - 紫系の地と生成り色の地を交互に置き、境界は波形にする。 - 強調語はピンクの太字だけで表す。 - キャラクターのイラストは、各所で案内役として登場させる。 - 情報欄はピンクのラベルと中央揃えの値で簡潔に並べる。 **Don't** - 寒色のビジネス調にしない。 - 見出しをプレーンな文字だけにしない。 - 強調色を3色以上混ぜない。 - 写真を中心に構成しない。イラストを主役にする。 - 本文を長い左揃えの段落にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と開催期間を伝える）: 絵画風のキーアートに装飾ロゴと大きな日付を重ね、右に追従バッジを置く 2. **導入**（イベントの概要を伝える）: 紫の街並みの背景に、帯見出し、吹き出し、短い説明文を重ね、下端にシルエットを並べる 3. **プレイ形式**（遊ぶ条件を一目で伝える）: 濃い紫の地に4つのタイルを並べ、スマホが必要な旨をピンクの帯で示す 4. **初心者向けの安心ポイント**（参加の不安を取り除く）: 3列の丸アイコンカードに短い説明を付ける 5. **あらすじ**（物語への没入を促す）: 石畳柄の地に中央揃えの文を置き、要所をピンクで強調する 6. **キャラクター**（登場人物を紹介する）: 丸いアイコンを並べ、その下に額縁のスライダーで一人ずつ紹介する 7. **遊び方**（手順と持ち物を説明する）: 紫の地に手順スライダーと持ち物の図解を置き、最後に主CTAを置く 8. **開催情報**（日程・料金・場所・販売所を伝える）: 生成り色の地に、ピンクのラベルと値を縦に並べ、リンクボタンを添える 9. **ジャンル解説**（体験の種類を説明する）: 藤色の地に木の枠のボードを置き、小物のイラストを添える 10. **よくある質問**（疑問を解消する）: ラベンダーの折りたたみ行を並べる 11. **注意事項**（利用条件を伝える）: くすみ紫の見出し帯の下に、小さな文字の箇条書きを置く 12. **シェアとフッター**（拡散と運営者の表示）: ピンクの地にSNSの丸アイコンとキャラクターを置き、クレジットを並べる ## Imagery - キャラクターは、絵本やアニメ風に描いた擬人化動物の手描きイラストにする。 - 背景は夕暮れの欧風の街並みを、紫とピンクの絵画調で描く。 - 手順の説明は、紺色の単色ピクトグラムで描く。 - 小物は、宝箱・鍵・剣などの厚塗り風アイコンにする。 - 装飾は、金の唐草模様、星のきらめき、石畳の柄を使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では、中央に SP 幅の縦長カラムをそのまま置く。 - PC の左側にはキービジュアルと導入文を固定表示する。 - PC の右側には SNS アイコンとページ内ナビを縦に並べる。 - PC の外側の余白は、えんじ色と紫の帯で埋める。 ## 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-4766c337`（元 LP の URL から採番） - **元 LP**: https://nazoxnazo.com/fiesta_escape/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。