--- version: alpha name: Starry Night Museum Mystery Event LP description: 星空のアニメ調キービジュアルを核に、濃紺の夜色セクションと霧がかった薄青セクションを交互に並べる体験型イベント LP。英字の小見出しは金色、和文見出しは中央揃え。角に線をあしらった半透明カードで、神秘的な世界観と案内情報をきれいに両立させている。 colors: primary: '#0C143B' dark-section: '#191D28' background: '#B5C4DA' surface: '#9CB1C6' accent-1: '#D9A23A' cta: '#1C1F25' on-cta: '#F8FAFD' secondary: '#3A424D' text: '#181E28' on-dark: '#FFFFFF' accent-2: '#F0E2B0' line: '#D4D6D9' surface-alt: '#FEFEFE' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em accent: fontFamily: Josefin Sans fontSize: 14px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.25em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Zen Maru Gothic fontSize: 21px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 70px corner-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' height: 32px accordion: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 58px icon-circle: textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 230px price-table: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 290px goods-card: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 600px --- # DESIGN.md — 夜空紺×薄青×金の謎解きイベント LP（Starry Night Museum Mystery Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、クール・先進的、上品・高級 - **キーワード**: 星空・夜の博物館・神秘・謎解き・金の光・霧の青 - **地の質感**: 背景に星空と建物のイラストを薄く敷く。半透明の面を重ねて奥行きを出す - **形**: 角丸なしの四角形が基本。カードの対角の角に細い L 字線を添え、アイコンは円形の台座に置く - **温度感**: 寒色が中心。金色の差し色で温かみを少し足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0C143B` | キービジュアル下の濃紺帯 | 8% | 画素の実測 | | `dark-section` | `#191D28` | 夜色セクションの地 | 40% | 画素の実測 | | `background` | `#B5C4DA` | 薄青セクションの地 | 30% | 画素の実測 | | `surface` | `#9CB1C6` | 薄青地の半透明カード | 8% | 画素の実測 | | `accent-1` | `#D9A23A` | 英字小見出し・商品名・項目名の金 | 1% | 推定 | | `cta` | `#1C1F25` | チケット購入ボタン | 2% | 画素の実測 | | `on-cta` | `#F8FAFD` | ボタン上の文字 | 0% | 画素の実測 | | `secondary` | `#3A424D` | 夜色地のアコーディオン・帯見出し | 2% | 画素の実測 | | `text` | `#181E28` | 薄青地の見出し・本文 | 2% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 夜色地の見出し・本文 | 3% | 推定 | | `accent-2` | `#F0E2B0` | 濃紺帯のリード文の淡い金 | 0% | 推定 | | `line` | `#D4D6D9` | 料金表・枠の線 | 0% | 画素の実測 | | `surface-alt` | `#FEFEFE` | グッズ画像の白台・選択中のタブ | 4% | 画素の実測 | - 夜色の濃紺地と霧の薄青地をセクションごとに交互に使う - 英字の小見出しは必ず金色で、字間を広く取る - 夜色地では文字を白にし、項目名・商品名を金にする - 薄青地のカードは白を薄くかけた半透明の青にし、文字は濃いグレーにする - 購入ボタンは薄青地の上で濃紺の帯にする。強い色は使わない - 鮮やかな色はバナー画像の中だけに抑える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風のメインタイトル | 明朝 | Shippori Mincho | 600 | 44px | 1.2 | 0.02em | | `headline-lg` | セクションの和文見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.4 | 0.12em | | `accent` | 見出しの上に置く英字ラベル | 欧文サンセリフ | Josefin Sans | 400 | 14px | 1.2 | 0.25em | | `headline-md` | 商品名・カード見出し | ゴシック | Noto Sans JP | 500 | 19px | 1.5 | 0.05em | | `body-lg` | 濃紺帯のリード文 | 丸ゴシック | Zen Maru Gothic | 500 | 21px | 1.7 | 0.08em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.03em | | `note` | 注釈・補足 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `label-button` | ボタン・アコーディオンの文字 | ゴシック | Noto Sans JP | 500 | 15px | 1.4 | 0.08em | - 見出しは英字の金ラベルと和文見出しを 2 段にし、中央揃えにする - 和文見出しは字間を 0.1em 以上取る - ストーリーの本文は中央揃えにし、短い行で改行する - 説明文は左揃えにする - 価格は数字を太く大きくし、「円」は小さくする - 小見出しは「── 見出し ──」の形で、両側に金の線を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。グッズは 2 列、プレイ形式のアイコンは 2×2 - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの上下余白は 60〜80px - セクションごとに地の色を濃紺と薄青で切り替える - カードは画面幅の約 90% で中央に置く - 一覧のカードどうしは 30px ほど空ける - 背景イラストは全幅に薄く敷く ## Elevation & Depth - 影は使わない - 奥行きは半透明の面の重ねで表現する - カードの対角に細い L 字線を少しずらして置き、浮いて見せる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角で、帯状に横へ並べる。アイコンは円形の半透明台座に乗せる - **セクション境界**: 直線で地の色を切り替える - ボタンもカードも角は直角にする - ボタンの右端に丸囲みの矢印アイコンを置く - 四角い枠の角に L 字線を添える - 円は、アイコン台座と矢印アイコンだけに使う ## Components - **英字ラベル付き見出し**（`section-heading`）: 金の英字ラベルを小さく置き、その下に和文見出し。脇に小さな星のきらめきを添える - **角線つき半透明カード**（`corner-card`）: 半透明の面の左上と右下に、細い L 字線をずらして重ねる - **購入ボタン帯**（`button-primary`）: カード下に置く全幅の濃紺の帯。中央に白文字、右端に丸囲みの下向き矢印 - **続きを読むボタン**（`button-outline`）: 細い枠線だけの横長ボタン。右端に矢印を置く - **アコーディオン**（`accordion`）: 半透明の帯の中央に見出し、右に丸囲みの矢印。角に L 字線を添える - **円形アイコン情報**（`icon-circle`）: 半透明の円に白い線画のアイコン。下に金の項目名と白い値を置く - **タブ付き料金表**（`price-table`）: 白いタブと暗いタブで切り替える。白線の格子に白の太字で価格を載せる - **グッズカード**（`goods-card`）: 白台の正方形画像の下に、金の商品名、白の価格、説明を縦に積む ## Do's and Don'ts **Do** - 濃紺と薄青のセクションを交互に置く - 英字の見出しラベルは金色にし、字間を広く取る - 星のきらめきを見出しの脇に小さく添える - カードの角に L 字線を添えて世界観を出す - 背景に星空や建物のシルエットを薄く敷く **Don't** - 角丸やピル型のボタンを使わない - 赤やオレンジなど鮮やかな CTA 色を使わない - 濃いドロップシャドウを付けない - 純白の地のセクションを作らない - ポップな丸文字を見出しに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観を一目で伝える）: 星空と建物のイラストを全面に敷く。縦書きの短い詩的コピーと、明朝の装飾ロゴを置く 2. **リード**（体験の概要を伝える）: 濃紺の帯に、淡い金で 3 行の中央揃え文を置く 3. **体験写真の帯**（実際の雰囲気を見せる）: 写真を横一列にすき間なく並べる 4. **概要・ポイント**（魅力を 3 点で伝える）: 番号付きの角線カードをスライダーで見せ、線画イラストを添える 5. **動画**（臨場感を伝える）: 縦長の動画を中央に埋め込む 6. **ストーリー**（物語への没入を促す）: 薄青地に中央揃えの短い行を並べ、枠線の続きを読むボタンを置く 7. **プレイ形式**（基本情報を示す）: 円形アイコンを 2×2 に並べ、金の項目名と白い値を添える 8. **遊び方**（参加までの手順を示す）: イラスト付きの角線カードをスライダーで見せ、白いボタンを置く。下に安心ポイントのバナーを続ける 9. **チケット情報**（料金と販売日程を示す）: タブ付き料金表と注意事項のアコーディオンを置く。割引の枠と日程の帯見出しを続ける 10. **チケット購入**（会場別の購入へ誘導する）: 会場ごとに角線カードを縦に積み、会場名・会期・濃紺の購入ボタンを入れる 11. **キャンペーンバナー**（SNS 投稿を促す）: 全幅の画像バナーを置く 12. **グッズ**（物販を紹介する）: 2 列のグッズカードに、金の商品名と価格・説明を載せる 13. **よくある質問・注意事項**（疑問を解消する）: 薄青地に半透明のアコーディオンを縦に並べる ## Imagery - 夜空・流れ星・夕焼けのグラデーションを描いたアニメ調の背景イラストを使う - 背景には建物のシルエットや星空を、薄い青のフィルターで敷く - アイコンは白か黒の細い線画で、星・望遠鏡・ドームなどのモチーフにする - 写真は暗めの室内で、驚いた表情や展示物を写したもの - バナーは濃紺の星空に金の文字と星座線をあしらう - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC ではコンテンツ幅を約 50% に絞り、中央に置く - PC のポイントと遊び方は、スライダーをやめて 3 列で並べる - PC のプレイ形式アイコンは 4 列の横一列にする - PC のグッズは 3 列にする - 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-f4ab6061`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/s/space-museum/ - **解析に使った画像**: 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/）からご連絡ください。