--- version: alpha name: Dark Ninja Hero Toy Collector LP description: 黒地に煙と満月を重ね、金色の極太見出しと赤い帯で迫力を出す、大人向けのヒーロー玩具 LP。商品の写真を大きく切り抜いて、筆文字・効果音・墨のしぶきで遊びの体験を見せる。 colors: background: '#000000' background-alt: '#1B1B1B' primary: '#B89465' accent-1: '#FC0103' accent-2: '#FB3E0D' marker: '#F9ECAD' on-dark: '#FFFFFF' surface: '#211F21' line: '#7B7B75' text-muted: '#C2B6B5' accent-3: '#2E7FC0' tint-1: '#FDD402' accent-3-accessible: '#2D7BBA' typography: display: fontFamily: Yuji Syuku fontSize: 110px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: Shippori Mincho B1 fontSize: 17px fontWeight: 800 lineHeight: 1.45 letterSpacing: 0.02em headline-sm: fontFamily: Yuji Boku fontSize: 26px fontWeight: 700 lineHeight: 1.0 accent: fontFamily: Montserrat fontSize: 30px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.4 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 14px section: 40px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' heading-gold-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 70px brush-label: textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 60px sfx-burst: backgroundColor: '{colors.on-dark}' textColor: '{colors.accent-3}' typography: '{typography.headline-md}' height: 70px ink-splash: backgroundColor: '{colors.tint-1}' typography: '{typography.headline-sm}' height: 90px spec-frame: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 120px lightning-list: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 24px dimension-arrow: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 400px note-text: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 14px --- # DESIGN.md — 黒×金×赤の和風ヒーロー玩具 LP（Dark Ninja Hero Toy Collector LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、和風、情報量多め・訴求型 - **キーワード**: 漆黒・金箔の立体文字・筆文字・煙と満月・効果音の吹き出し・赤い帯 - **地の質感**: 黒地に白煙と墨のにじみを重ねる。見出しには金のグラデーションと黒い縁取りを付ける - **形**: 角のない矩形の枠と斜めの光の線。吹き出しはギザギザの爆発型と墨のしぶき型 - **温度感**: 暗くて冷たい地に、金と赤で熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページの地の黒 | 45% | 画素の実測 | | `background-alt` | `#1B1B1B` | 煙がかかったチャコールの地 | 18% | 画素の実測 | | `primary` | `#B89465` | 金の見出しと商品のアクセント | 8% | 画素の主要色に補正 | | `accent-1` | `#FC0103` | 見出し下の赤い帯 | 3% | 画素の実測 | | `accent-2` | `#FB3E0D` | 筆文字の朱色 | 2% | 画素の実測 | | `marker` | `#F9ECAD` | 見出しのハイライトに使う淡い金色 | 2% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 黒地の上の白い本文 | 4% | 推定 | | `surface` | `#211F21` | 仕様説明を入れる枠の内側 | 4% | 画素の主要色に補正 | | `line` | `#7B7B75` | 枠のグレーの細い線 | 1% | 画素の主要色に補正 | | `text-muted` | `#C2B6B5` | 注釈の灰色の文字 | 1% | 画素の実測 | | `accent-3` | `#2E7FC0` | 効果音の吹き出しに使う青 | 1% | 推定 | | `tint-1` | `#FDD402` | 黄色の吹き出し | 1% | 画素の実測 | | `accent-3-accessible` | `#2D7BBA` | AA を満たす補正値（計算） | | 計算 | - 地はすべて黒からチャコール。白い背景のセクションは作らない - 大見出しには金のグラデーションを使い、その下に赤い帯を全幅で敷く - 強い一語の訴求は朱色の筆文字で書く - 数値と強調語は淡い金色にして、ほかより一段大きくする - 赤・白・黄・青・黒の五色は、キャラクターの吹き出しや記号にだけ使う - 注釈は灰色の小さい文字で、写真や画像の下に置く - `sfx-burst` は文字 `#2E7FC0` × 背景 `#FFFFFF` のコントラスト比が 4.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#2D7BBA`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 冒頭の筆文字による一語の訴求 | 手書き・筆 | Yuji Syuku | 700 | 110px | 1.0 | 0.0em | | `headline-lg` | セクション見出し。金地に黒い縁取りの極太文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.0em | | `headline-md` | 機能の訴求文（明朝の太字） | 明朝 | Shippori Mincho B1 | 800 | 17px | 1.45 | 0.02em | | `headline-sm` | 機能名を縦書きの筆文字 2 文字で示すラベル | 手書き・筆 | Yuji Boku | 700 | 26px | 1.0 | 0.0em | | `accent` | 英字のエディション名（細身でワイドな欧文） | 欧文サンセリフ | Montserrat | 500 | 30px | 1.1 | 0.08em | | `body-md` | 価格や受付期間などの情報 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.0em | - 見出しは画像化した装飾文字にする。少し傾けて、立体的な縁取りを付ける - 訴求文は白い明朝の太字で 2〜3 行にまとめる - 数値はほかの文字の 1.5〜2 倍の大きさにし、淡い金色で強調する - 効果音はマンガ風の太字にして、爆発型の吹き出しに入れる - 技名などの一覧は縦書きの毛筆にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真を全幅で使い、テキストを重ねる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 40px、基本単位 8px、カード内 14px（375px 幅換算） - 見出しの帯は左寄せで、赤い線を全幅に引く - 商品は斜めに配置して、画面からはみ出させる - 説明文は写真の余白に重ね、左寄せで置く - 仕様の詳細は細い線の枠に入れ、写真の上に部分的に重ねる ## Elevation & Depth - 影は使わず、煙と光の筋で奥行きを出す - 見出しの文字には黒い縁取りと下方向のドロップシャドウを付ける - 枠は半透明の黒い面にして、背後の写真がうっすら見えるようにする ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き写真にする。人物は黒地に溶け込ませる - **セクション境界**: 全幅の赤い帯と、斜めに走る赤白の光線 - 枠はすべて直角にする - 吹き出しはギザギザ型か、墨のしぶき型にする - 満月の円を冒頭と結びに置いて、ページの始めと終わりで呼応させる ## Components - **金文字の見出しと赤い帯**（`heading-gold-band`）: 金のグラデーションに黒い縁取りの極太見出し。その下に赤い帯を全幅で敷く - **縦書きの筆文字ラベル**（`brush-label`）: 機能名を朱色の筆文字 2 文字で書き、縦に並べて説明文の左に置く - **効果音の吹き出し**（`sfx-burst`）: 白いギザギザの爆発型の中に、青か赤のマンガ文字を入れる - **墨のしぶき型吹き出し**（`ink-splash`）: キャラクターの色の墨しぶきの中に、技名を筆文字で入れる - **線で囲んだ仕様の枠**（`spec-frame`）: 灰色の細い線で囲んだ半透明の黒い枠。中に一覧や拡大写真を入れる - **稲妻アイコンの付いた箇条書き**（`lightning-list`）: 金の稲妻アイコンの横に、内容物を手書き風の白い文字で並べる - **サイズを示す矢印**（`dimension-arrow`）: 白い縦の矢印に、全長を縦書きの数字で添える - **注釈**（`note-text`）: 写真の下に置く灰色の小さな注意書き ## Do's and Don'ts **Do** - 黒地に煙を薄く重ねて、場面ごとに濃淡を変える - 機能ごとに「見出し→筆文字ラベル→訴求文→写真」の順で並べる - 効果音や擬音の文字で、遊んでいる場面を伝える - 金・赤・黒の三色を主役にし、五色はキャラクターの区別にだけ使う - 最後は冒頭と同じ満月を置き、筆文字の締めの一文で終える **Don't** - 白や明るい色の背景セクションを作らない - 角丸のカードやピル型のボタンを使わない - 細くて軽いゴシックだけで見出しを作らない - パステル色を使わない - 写真を小さなサムネイルで並べるだけにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観を伝えて引き込む）: 満月の前にキャラクター集合の写真を置き、朱色の筆文字で大きな一語を縦に書く 2. **商品ヒーロー**（商品を印象づける）: 手に持った商品を斜めに大きく見せ、金の文字で名称と英字のエディション名を入れる 3. **紹介動画**（価格と販売情報を伝える）: 金の見出しと赤い帯の下に動画の枠を置き、価格や期間を白い文字で添える 4. **セット内容**（内容物を示す）: 切り抜いた商品写真の横に、稲妻アイコンの箇条書きを置く 5. **造形仕様**（サイズと造形を訴求する）: 数値を大きく見せ、サイズの矢印と拡大写真の枠を組み合わせる 6. **アクション機能**（音と振動の遊び方を見せる）: 筆文字のラベルと訴求文に、効果音の吹き出しと光線を重ねる 7. **必殺機能**（技の一覧を示す）: 縦書きの技名一覧を枠に入れ、刀身の写真と組み合わせる 8. **台詞収録**（収録している台詞を訴求する）: キャラクターの色の墨しぶきを放射状に並べ、色の記号と一緒に出演者の一覧を置く 9. **ギミック詳細**（仕組みを説明する）: 拡大写真を 2 枚並べ、金色の矢印と擬音で動きを示す 10. **BGM**（音楽の機能を伝える）: 金の英字見出しの下に、煙と人物の写真、曲の一覧の枠を置く 11. **クロージング**（体験への期待で締める）: 満月の前に商品を縦に置き、筆文字の締めの一文と付属品を散らして配置する ## Imagery - 商品は黒背景で撮る。金属の反射を強めに出し、切り抜いて斜めに配置する - 人物は暗い色の服で、手元だけを照らす - 白煙やスモークを多用して、画面の端に漂わせる - 満月は大きな円として、画面の端まで使って配置する - 赤や白の光線、残像のブレで動きを表す - 墨のしぶきやマンガの爆発型の吹き出しを装飾に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため、PC は中央に 750px 前後の 1 カラムを置く運用を推奨する - 左右の余白は黒か煙のテクスチャで埋める - 見出しの帯は画面幅いっぱいに伸ばす - 機能の説明は PC で写真と文章の 2 カラムにしてもよい ## 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-67d79954`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000247745/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。