--- version: alpha name: Ninja Mansion Washi Texture Event LP description: 藍染め風の紺、朱漆の赤、金箔と緑の和紙など、質感のある和の地をセクションごとに切り替える体験型イベントLP。筆文字の見出し、掛け軸のフレーム、畳や障子の背景、手裏剣や灯籠の装飾で忍者屋敷の世界観を作る。料金・販売情報は白いパネルと罫線の表で読みやすくまとめている。 colors: primary: '#283C4F' background: '#FFFFFF' secondary: '#741312' cta: '#9C7C14' on-cta: '#FFFFFF' background-alt: '#F7F3DF' surface: '#EBECD9' text: '#090605' accent-1: '#96100E' accent-2: '#E6C34A' tint-1: '#95BA75' dark-section: '#1A0404' on-dark: '#EAF6FA' tint-2: '#E4E8EC' cta-accessible: '#917313' tint-1-accessible: '#58783C' typography: display: fontFamily: Yuji Boku fontSize: 56px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Yuji Syuku fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-md: fontFamily: Kaisei Decol fontSize: 19px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.1em headline-sm: fontFamily: Kaisei Decol fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 800 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 rounded: sm: 0px md: 6px lg: 30px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' scroll-frame: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 1700px kanji-number: textColor: '{colors.text}' typography: '{typography.accent}' height: 50px diamond-number: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 90px circle-icon: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 190px button-primary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 60px venue-card: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 160px price-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 340px pill-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px goods-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 340px accordion: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 70px --- # DESIGN.md — 藍・朱・金の和柄テクスチャ体験イベントLP（Ninja Mansion Washi Texture Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 和風、力強い・インパクト、レトロ、情報量多め・訴求型 - **キーワード**: 忍者屋敷・和紙テクスチャ・筆文字・掛け軸・金箔・謎解き体験 - **地の質感**: 藍染め・朱漆・畳・金箔和紙などの質感画像を地に敷き、境界には和柄の帯を入れる - **形**: 角はほぼ四角。円形のアイコン、菱形の番号、掛け軸型のフレームを使う - **温度感**: 暗めで重厚。紺と赤は冷たさと熱さを交互に出し、終盤の緑と金で華やかさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#283C4F` | 藍色のメイン地 | 18% | 画素の主要色に補正 | | `background` | `#FFFFFF` | パネル・グッズカードの白地 | 10% | 画素の実測 | | `secondary` | `#741312` | 朱漆の赤い地（遊び方・安心ポイント） | 12% | 画素の実測 | | `cta` | `#9C7C14` | 会場詳細ボタンの金茶帯 | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | 金茶帯の上の白文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#F7F3DF` | 巻物・和紙の生成り地 | 8% | 画素の主要色に補正 | | `surface` | `#EBECD9` | チケット情報パネルの淡い緑 | 8% | 画素の主要色に補正 | | `text` | `#090605` | 本文・見出しの黒 | 3% | 画素の主要色に補正 | | `accent-1` | `#96100E` | 強調見出しの朱赤文字 | 0% | 画素の実測 | | `accent-2` | `#E6C34A` | 金色の強調コピー | 0% | 推定 | | `tint-1` | `#95BA75` | 抹茶色のピルラベル | 1% | 画素の実測 | | `dark-section` | `#1A0404` | 円形アイコン・菱形番号の黒 | 4% | 画素の実測 | | `on-dark` | `#EAF6FA` | 暗い地の上の白文字 | 2% | 画素の実測 | | `tint-2` | `#E4E8EC` | グッズ下段の淡い青灰 | 2% | 画素の実測 | | `cta-accessible` | `#917313` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#58783C` | AA を満たす補正値（計算） | | 計算 | - セクションごとに藍・畳・朱・緑金・青灰の質感地を切り替え、単色ベタは使わない - 地の境界には紺地に金の和柄帯（高さ約14px）を必ず挟む - 暗い地の上の文字は白にし、要の一行だけ金色にする - 生成りの巻物の上では小見出しを朱赤、本文を黒にする - 情報パネルは白か淡い緑の地に黒の細い罫線でまとめる - 会場ボタンは金茶の帯に白文字、グッズの矢印は藍色にする - `venue-card` は文字 `#FFFFFF` × 背景 `#9C7C14` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#917313`、4.5:1）を使う。 - `pill-label` は文字 `#EAF6FA` × 背景 `#95BA75` のコントラスト比が 1.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#58783C`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのタイトル（画像化した筆文字） | 手書き・筆 | Yuji Boku | 700 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（筆ロゴ風、下に墨の擦れ） | 手書き・筆 | Yuji Syuku | 700 | 30px | 1.3 | 0.1em | | `headline-md` | リードコピー・あらすじ本文・安心ポイント | 明朝 | Kaisei Decol | 700 | 19px | 1.7 | 0.1em | | `headline-sm` | 巻物内の朱赤小見出し | 明朝 | Kaisei Decol | 700 | 17px | 1.5 | 0.05em | | `accent` | 「其の」+漢数字の番号 | 明朝 | Shippori Mincho | 800 | 26px | 1.1 | 0.0em | | `body-md` | 料金表・注意事項などの実用本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.6 | 0.02em | | `label-button` | ボタン・アコーディオンのラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.03em | | `note` | ※注記・税込表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | - 世界観の部分は筆文字か和風明朝、実用情報はゴシックと分ける - 見出しは中央揃えにし、下に墨の擦れを敷く - 価格の数字は大きくし、「円」は小さく添える - 日付の数字は太字で大きく、曜日は丸囲みにする - 難読語には小さくルビを振る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。プレイ形式は 2 列、グッズは 2 列＋最後の 1 点を中央に置く - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの上下に和柄帯を挟み、背景のテクスチャを切り替える - 巻物フレームの中に画像・見出し・本文を縦に積む - 情報パネルは左右 12px ほどの余白で画面幅いっぱいに広げ、金の枠を付ける - セクションの角に手裏剣や灯籠などの小物を重ねる - 下部の補足情報はアコーディオンを縦に並べる ## Elevation & Depth - カードや白ボタンには、ずれた濃い影（約3px）を付ける - 小物の装飾にはドロップシャドウを付けて浮かせる - グッズカードは影なしで、角を少し丸める ## Shapes - **角丸**: 小 0px ／ 中 6px ／ 大 30px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角の帯写真。アイコンは黒い正円の中に六芒星と白い線画を入れる - **セクション境界**: 紺地に金の菱形和柄の横帯 - 主なボタンは角丸なしの四角に黒枠を付ける - あらすじの「続きを読む」だけを白い線のピル型にする - 番号は黒い菱形の中に白文字で入れる - ラベルは抹茶色のピル型にする ## Components - **掛け軸フレーム**（`scroll-frame`）: 藍色の柄の縁に生成りの本紙を入れ、上下に軸棒を付けた枠。特長 3 つを縦に並べる - **其の番号**（`kanji-number`）: 小さい「其の」と大きな漢数字を縦に組む番号 - **菱形番号**（`diamond-number`）: 黒い菱形の中に白い漢数字を入れ、右に白い明朝の文を置く - **円形スペックアイコン**（`circle-icon`）: 黒い円の中に藍の六芒星と白い線画を入れ、下に項目名と太字の値を置く - **購入ボタン**（`button-primary`）: 白地に黒枠の四角いボタン。右向きの三角を付け、影をずらして落とす - **会場カード**（`venue-card`）: 白地に会場名と開始日を置き、下に金茶の帯で詳細を開くボタンを付けたカード - **料金表**（`price-table`）: 黒と灰色のタブで切り替える黒罫線の表。数字は大きく表示する - **抹茶ラベル**（`pill-label`）: パネルの冒頭に置く抹茶色のピル型の白文字ラベル - **グッズカード**（`goods-card`）: 上は白地の商品画像、下は青灰の地に商品名と価格。右下に藍色の三角を付ける - **アコーディオン**（`accordion`）: 青灰の地の上に、▼を両側に付けた白い横長の帯 ## Do's and Don'ts **Do** - セクションごとに畳・藍・朱・金箔などの和の質感を変える - 地の境界には必ず和柄の帯を入れる - 手裏剣・苦無・灯籠などの小物を、セクションの角にはみ出させて置く - 番号は「其の」+漢数字でそろえる - 料金や日程はゴシックの表にして読みやすくする **Don't** - フラットな単色の背景だけで済ませない - ポップな丸ゴシックや鮮やかなパステルを使わない - ボタンを大きな角丸のグラデーションにしない - 筆文字を本文や料金表に使わない - 装飾を本文の上に重ねて読みにくくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とタイトルを一瞬で伝える）: 暗い屋敷の写真に白い筆文字のタイトルを重ね、ミッションの一文を縦書きで添える 2. **リードコピー**（体験の魅力を短く伝える）: 藍の地に明朝で 4 行。後半の 2 行を金色にする 3. **写真帯**（会場の雰囲気を見せる）: 和柄の帯に挟んだ横長の写真コラージュ 4. **概要と特長**（どんなゲームかを説明する）: 見出しと説明文のあとに、掛け軸の中で其の壱〜参を写真付きで縦に並べる 5. **プレイ形式**（人数・時間・言語・会場の条件を示す）: 畳の地に黒い円形アイコンを 2×2 で置く 6. **あらすじ**（物語への没入感を高める）: 障子の地の中央に藍の縦長パネルを置き、白い明朝の文と「続きを読む」ボタンを入れる 7. **遊び方**（参加までの流れを示す）: 朱の地に浮世絵風イラスト付きのカードを並べ、最初のカードに購入ボタンを入れる 8. **安心ポイント**（初めての人の不安を取り除く）: 朱の地に菱形番号と白い文を 3 つ並べる 9. **チケット情報**（料金と割引を伝える）: 緑と金箔の地に金枠のパネルを置き、タブ付きの料金表と割引の枠を入れる 10. **販売スケジュール**（購入できる時期を示す）: 黒枠のラベルの下に大きな数字で日付を書き、バナーを添える 11. **チケット購入**（会場を選んで申し込む）: 白い会場カードと金茶の詳細帯を縦に並べる 12. **グッズ**（関連商品を見せる）: 青灰の地に白いカードを 2 列で並べる 13. **注意事項・よくある質問**（補足情報をまとめる）: 白いアコーディオンを 3 つ並べ、最後に灯籠と和柄帯で締める ## Imagery - 写真は暗く暖色の灯りが効いた、映画のポスターのような屋敷のシーン - 影絵や月夜のシルエットなど、コントラストの強い忍者写真 - 流れの説明は浮世絵風のイラストで、ユーモアを入れる - 背景には藍染め・朱漆・畳・障子・金箔と緑の和紙のテクスチャを使う - 装飾には手裏剣・苦無・灯籠・巻物・鈴などのリアルな切り抜き素材を使う - アイコンは白い線画で、黒い円と六芒星を組み合わせる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では本文ブロックを中央の約 900px 幅に収め、両側にテクスチャ背景を見せる - PC では掛け軸を横長にし、特長 3 つを 3 列で並べる - プレイ形式は PC では 4 列 1 行にする - 遊び方のカードは PC では 4 列に並べる - 料金表は PC では画面幅いっぱいに広げ、セルを横長にする - グッズは PC では 3 列にする ## 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-c83b8a53`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/s/ninjayashiki/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。