--- version: alpha name: Navy & Aqua Fantasy Mystery Event LP description: 濃紺と水色・アクアを軸にした、アニメコラボ型の体験イベント LP。巨大な欧文セリフ見出しと反転した架空文字の装飾、斜めストライプの帯でファンタジー感を出す。白地に情報テーブルやカードを整然と並べ、チケット・日程の情報量を確保している。 colors: primary: '#052853' dark-section: '#041F3C' secondary: '#64B0C5' background: '#FFFFFF' background-alt: '#E6F3F9' surface: '#9CD6EA' cta: '#3371AC' on-cta: '#FFFFFF' accent-1: '#D6408F' accent-2: '#8D3DAD' tint-1: '#F4F8C5' accent-3: '#133C8B' text-body: '#333333' line: '#9BBDCC' accent-1-accessible: '#D33388' typography: display: fontFamily: Playfair Display fontSize: 40px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 18px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' section-title-display: textColor: '{colors.primary}' typography: '{typography.display}' height: 48px label-frame: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 32px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 160px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 180px point-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 200px schedule-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 110px accordion: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px --- # DESIGN.md — 紺×水色のファンタジー謎解きイベント LP（Navy & Aqua Fantasy Mystery Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、ポップ・元気、情報量多め・訴求型 - **キーワード**: ファンタジー・紺と水色・謎解き・巨大な欧文見出し・斜めストライプ・アニメコラボ - **地の質感**: 淡い水色の斜線ハッチング地、レンガ模様の濃紺地、水彩のにじみをセクション背景に使う - **形**: 角丸の小さい四角カード、斜めにカットした帯、装飾フレームで四隅を飾った枠 - **温度感**: 涼しげで寒色寄り。差し色にマゼンタと紫を少しだけ使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#052853` | ブランドの濃紺（見出し・テーブル見出し） | 6% | 画素の実測 | | `dark-section` | `#041F3C` | 導入部・フッターの深い紺地 | 8% | 画素の主要色に補正 | | `secondary` | `#64B0C5` | アクセント水色（ラベル・バー） | 5% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 36% | 画素の実測 | | `background-alt` | `#E6F3F9` | 淡い水色の斜線セクション地 | 8% | 画素の実測 | | `surface` | `#9CD6EA` | テーブル項目セルの水色 | 2% | 画素の実測 | | `cta` | `#3371AC` | ボタン・アコーディオンの青 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D6408F` | 見出しラベルのマゼンタ文字 | 0% | 推定 | | `accent-2` | `#8D3DAD` | 販売スケジュールの紫帯 | 0% | 画素の実測 | | `tint-1` | `#F4F8C5` | 手順カードのクリーム地 | 2% | 画素の実測 | | `accent-3` | `#133C8B` | FAQ帯のロイヤルブルー | 4% | 画素の実測 | | `text-body` | `#333333` | 本文の濃いグレー | 1% | 推定 | | `line` | `#9BBDCC` | テーブル・カード枠線 | 1% | 画素の主要色に補正 | | `accent-1-accessible` | `#D33388` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色斜線を交互にし、導入・手順・フッターだけ濃紺で締める - 見出しの大文字欧文は濃紺、その右に水色の反転装飾文字を薄く重ねる - テーブルは濃紺の見出し行、水色の項目セル、白の値セルの3色で組む - マゼンタは小見出しラベルの文字だけ、紫はスケジュール帯だけに限定する - ボタンは青の帯に白文字と▼アイコンで統一する - セクション境界に濃紺と水色の斜めストライプ帯を入れる - `label-frame` は文字 `#D6408F` × 背景 `#FFFFFF` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D33388`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション名の巨大欧文見出し | 欧文セリフ | Playfair Display | 700 | 40px | 1.0 | 0.0em | | `headline-lg` | 導入部のキャッチ | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.05em | | `headline-md` | 装飾枠付きの小見出しラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.1em | | `headline-sm` | カード見出し・会場名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | | `body-md` | 本文・ストーリー | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | STEP番号・料金数字 | 欧文サンセリフ | Montserrat | 700 | 18px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | - セクション名は大文字欧文セリフを左寄せで大きく置き、横に反転した架空文字風装飾を薄色で添える - 和文は全てゴシックで、本文は中央揃えの短い行で組む - 料金は数字を太く大きく、単位は小さく添える - 小見出しは装飾フレームの中にマゼンタ文字で中央配置 - ストーリー本文は行間を広く取り、段落間に空行を入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長と手順は SP で縦積み、キャラ一覧は横スクロールかグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは巨大欧文見出しを左上に食い込ませて開始する - 情報テーブルは画面幅の約90%で中央配置 - 特長は3枚、手順は4枚のカードを均等に並べる - 日程は会場ごとに横長カードを縦に積む - ボタンは中央配置で幅広の帯状にする ## Elevation & Depth - カードには右下へずらした濃紺のベタ影（オフセット影）を付ける - 手順カードは薄いドロップシャドウで浮かせる - ぼかしの強い影は使わず、フラットな重なりで奥行きを出す ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: キャラクターは丸アイコン、写真は角丸なしの矩形で横に並べる - **セクション境界**: 濃紺と水色の斜めストライプ帯、片側を斜めにカットした太線 - ボタンは角丸ほぼなしの長方形 - 特典紹介枠は四隅に唐草風の装飾フレーム - 見出しラベルは両端が矢羽形の枠 - 会場ラベルは濃紺のタブ型でカード左上に付ける ## Components - **巨大欧文セクション見出し**（`section-title-display`）: 濃紺の大文字セリフ体に反転装飾文字を薄く添える - **装飾枠付き小見出し**（`label-frame`）: 白地に水色の二重線、両端が矢羽形の枠とマゼンタ文字 - **注意事項ボタン**（`button-primary`）: 青の長方形帯に白文字と右端に▼ - **料金テーブル**（`price-table`）: 濃紺見出し行、水色の項目セル、白の値セル - **手順カード**（`step-card`）: クリーム地にSTEP番号タブと線画アイコン、水色の見出し - **特長カード**（`point-card`）: 濃紺の見出し帯と青の絵柄パネル、下に説明文 - **会場カード**（`schedule-card`）: 白地、濃紺枠とオフセット影、左上に会場タブ、右下に水色の購入バー - **FAQアコーディオン**（`accordion`）: 青地の上に白い長方形バーを縦に3本、右に▼ ## Do's and Don'ts **Do** - 寒色（紺・水色）を基調にし、差し色は小面積に抑える - 各セクションは巨大欧文見出しから始める - 価格や日程はテーブルやカードで構造的に見せる - 境界に斜めストライプ帯を入れてリズムを作る - キャラクターや写真を多用して世界観を出す **Don't** - 暖色を大きな面に使わない - ピル型の丸いボタンにしない - 本文を明朝体にしない - ぼかしの強い影や光沢グラデーションのボタンにしない - 見出しを小さく控えめにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とタイトルを一目で伝える）: キャラクター集合のフルイラストにロゴ風タイトル、上部に濃紺のナビ 2. **導入**（体験の概要を伝える）: 濃紺のレンガ地に白文字キャッチ、枠付き説明文、体験写真の横並び 3. **お知らせバナー**（最新情報への誘導）: 水色地にバナーを横スライドで並べ、NEXT矢印 4. **動画**（CMで期待感を高める）: 白地に動画を中央配置 5. **ストーリー**（物語に引き込む）: 水彩ブルー地に白い半透明パネル、中央揃えの本文 6. **特長**（体験の魅力を3点で示す）: 番号ラベル付きカードを3枚並べる 7. **キャラクター**（登場人物の紹介）: 斜線地に立ち絵と水色の説明枠、下に丸アイコン一覧 8. **イベント概要・参加方法**（遊び方を理解させる）: 丸アイコン3つの形式表示、濃紺地に4ステップのカード 9. **チケット**（料金と特典を伝える）: 料金テーブル、装飾枠の特典紹介、紫帯の販売日程 10. **スケジュール**（開催会場と日程）: 会場ごとの横長カードに購入バー 11. **グッズ・フード**（関連商品の紹介）: 2枚の枠カードと濃紺の詳細ボタン 12. **よくある質問・フッター**（不安解消と運営情報）: 青地にアコーディオン、レンガ模様の深緑紺フッターにSNSとバナー ## Imagery - アニメ調のキャラクターイラストを大きく使い、背景はサーカスや夜空などの幻想的な舞台 - 体験者の写真は明るく楽しそうな表情で横長に並べる - アイコンは青の単色ベタや白い線画で統一 - 背景に水彩のにじみ、斜線ハッチング、レンガ模様を使う - 架空文字風の反転装飾テキストを見出しの添え物にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央幅約60%のコンテンツ、SPは90%幅の1カラムにする - 特長3枚・手順4枚はSPで縦積みか2列にする - 巨大欧文見出しはSPで40px前後に縮める - ナビはSPでハンバーガーメニューに畳む - キャラ丸アイコンはSPで4列グリッドにする ## 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-b2f91f1d`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/s/tensura/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。