--- version: alpha name: Dark Tech Blue Collector Toy LP description: 漆黒の地に電光ブルーの帯見出しとメタリックな製品写真を重ねる、特撮系コレクター玩具の機能紹介 LP。番号付き機能セクション、吹き出しの台詞、黄色ラベルの注記、グラデーション見出しの情報パネルで、ギミックを一つずつ見せていく。 colors: background: '#010101' background-alt: '#0B0D12' primary: '#0134EC' secondary: '#032178' on-dark: '#F6F6F6' surface: '#E6E6E6' text: '#090A12' accent-1: '#F2D21E' accent-2: '#B0102A' tint-1: '#2A3550' line: '#2440B0' accent-3: '#2E6BFF' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 20px fontWeight: 900 lineHeight: 1.0 label-button: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 32px speech-callout: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 40px label-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 18px info-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px notice-chevron: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 56px related-banner: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 90px cast-card: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px chapter-title: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 48px --- # DESIGN.md — 黒×電光ブルーのメカ系ホビー玩具 LP（Dark Tech Blue Collector Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 漆黒・電光ブルー・メタリック・HUD風帯見出し・番号付き機能解説・台詞吹き出し - **地の質感**: 黒地に青い光のボケや粒子をうっすら散らす。製品は金属光沢の切り抜き写真。 - **形**: 斜めカットの台形帯、シェブロン、矢印型の三角。角丸はほぼ使わない直線的な形。 - **温度感**: 冷たい青寄り。黄色と赤は注記とアクセントだけに使う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#010101` | ページ全体の地 | 55% | 画素の実測 | | `background-alt` | `#0B0D12` | 青緑がかった濃紺の地 | 20% | 画素の実測 | | `primary` | `#0134EC` | 見出し帯の電光ブルー | 4% | 画素の実測 | | `secondary` | `#032178` | 帯の中心の濃紺面 | 3% | 画素の主要色に補正 | | `on-dark` | `#F6F6F6` | 黒地の上の本文・見出し白 | 3% | 画素の実測 | | `surface` | `#E6E6E6` | 情報パネルの明るいグレー面 | 3% | 画素の実測 | | `text` | `#090A12` | パネルの中の濃い文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#F2D21E` | 注記ラベルと告知帯の黄色 | 2% | 推定 | | `accent-2` | `#B0102A` | 台詞吹き出しと強調ラベルの赤 | 1% | 推定 | | `tint-1` | `#2A3550` | パネル見出しのくすんだ紺から黄緑へのグラデーション起点 | 1% | 推定 | | `line` | `#2440B0` | 写真枠の青い細線 | 0% | 推定 | | `accent-3` | `#2E6BFF` | 番号付きリストの番号の青 | 0% | 推定 | - 地は黒か濃紺だけにして、白い面はほとんど使わない。 - セクション見出しは電光ブルーの帯にし、発光するようなグラデーションをかける。 - 補足情報だけは明るいグレーのパネルに濃い文字で入れる。 - 黄色は注記ラベルと告知帯に、赤は台詞吹き出しと重要部位の指示だけに使う。 - 本文は黒地の上に白で中央揃えにする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のコピー（青く光る斜体明朝） | 明朝 | Shippori Mincho | 800 | 26px | 1.3 | 0.02em | | `headline-lg` | 大きな章タイトル（白文字＋青い光彩） | 明朝 | Noto Serif JP | 900 | 24px | 1.3 | 0.03em | | `headline-md` | 番号付きの帯見出し | 明朝 | Noto Serif JP | 700 | 16px | 1.3 | 0.05em | | `headline-sm` | 情報パネルの見出し | 明朝 | Noto Serif JP | 700 | 13px | 1.4 | 0.15em | | `body-md` | 機能説明の本文 | 明朝 | Noto Serif JP | 500 | 12px | 1.9 | 0.02em | | `note` | ※から始まる注釈とラベル | ゴシック | Noto Sans JP | 700 | 10px | 1.5 | 0.0em | | `accent` | 番号の数字と欧文ロゴ風の文字 | 欧文サンセリフ | Montserrat | 900 | 20px | 1.0 | 0.0em | | `label-button` | 台詞の吹き出し文字 | 明朝 | Noto Serif JP | 700 | 12px | 1.4 | 0.1em | - 本文と見出しは明朝系にして、特撮作品らしい重い雰囲気を出す。 - 番号は太い斜体の欧文サンセリフを青で入れる。 - 本文は中央揃えにし、1行15〜25字で改行する。 - 大見出しには青い外側の光彩をつける。 - ラベルと注記は小さいゴシックにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。人物紹介だけ 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 機能ごとに「帯見出し → 本文 → 製品写真 → 吹き出しや注記」の順で繰り返す。 - 製品写真は横幅いっぱいか、青線で囲んだ枠に入れる。 - 情報パネルは幅 85% で中央に置く。 - 人物写真は縦長で 2 列にし、下に名前を 2 行で入れる。 - 章の切り替えは下向きの三角を重ねて縦に流れを示す。 ## Elevation & Depth - 影ではなく、青い光彩とグローで奥行きを出す。 - 製品の切り抜き写真には床への映り込みや暗い反射を入れる。 - パネルはフラットにし、影はつけない。 ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 製品は背景を切り抜き、人物は縦長の長方形、使用シーンは青線の枠で囲む - **セクション境界**: 両端を斜めにカットした青い台形の帯と、シェブロン模様 - 角丸は使わず直線と斜めカットで作る。 - 吹き出しは平行四辺形で、尾を鋭くとがらせる。 - 告知帯は左右を矢羽根型のシェブロンにする。 - 指示線は細い白線と矢印にする。 ## Components - **番号付き帯見出し**（`section-band`）: 横幅いっぱいの電光ブルー帯。中央に台形の濃紺面を置き、斜体の番号と明朝の見出しを入れる。 - **台詞吹き出し**（`speech-callout`）: 白、赤、紺のいずれかの斜め吹き出し。音声の台詞を斜めに配置する。 - **部位ラベル**（`label-tag`）: 製品の各部を指す黄色の小さいラベル。細い白線でつなぐ。 - **収録リストパネル**（`info-panel`）: 紺から黄緑へのグラデーション見出しの下に、グレーの面で番号付きの 2 列リストを置く。 - **告知シェブロン帯**（`notice-chevron`）: 黄色の帯の左右に矢羽根を重ね、今後の情報公開を告知する。 - **関連商品バナー**（`related-banner`）: 赤い細枠の横長バナー。製品写真とロゴを並べ、右下に赤い矢印付きのリンクを置く。 - **人物カード**（`cast-card`）: 縦長の写真の下に、役名と演者名を白い明朝で中央揃えにする。 - **章タイトル**（`chapter-title`）: 青い台形帯の上に、光彩付きの大きな白い明朝を重ねる。下に三角の矢印を続ける。 ## Do's and Don'ts **Do** - 黒地に青い光の演出を必ず入れる。 - 機能を番号付きの帯見出しで一つずつ区切る。 - 台詞や音声は吹き出しにして、製品写真に重ねる。 - 製品の各部は黄色ラベルと指示線で示す。 - リスト情報は明るいグレーのパネルにまとめる。 **Don't** - 白やパステルの広い背景を使わない。 - 丸いピル型のボタンややわらかい角丸を使わない。 - 丸ゴシックや手書き系の書体を使わない。 - 黄色や赤を見出し帯に使わない。 - 本文を左揃えで長く詰め込まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観とキャラクターで一気に引き込む）: 黒地にキャラクターの集合写真と青い光線を入れ、下に商品ロゴと作品ロゴを並べる。 2. **キャッチコピー**（商品の意義を一言で示す）: 青く光る斜体の明朝 2 行を中央に置く。 3. **セット内容**（同梱物と製品の全体像を見せる）: 欧文の商品名、右に同梱リスト、製品の切り抜き写真、半透明の帯に入れた説明。 4. **関連商品バナー**（単品販売への導線）: 赤枠の横長バナーに製品写真とリンク。 5. **機能紹介（1つ目の製品）**（ギミックを番号順に解説する）: 章タイトル、製品の大写真、番号帯見出し、本文、操作写真、吹き出し、の順で繰り返す。 6. **収録キャラクターと BGM**（収録内容の豊富さを示す）: グラデーション見出しの下に人物カードを 2 列、続けてグレーのリストパネル。 7. **今後の告知**（続報への期待をつくる）: 黄色のシェブロン帯に 2 行のテキスト。 8. **換装の説明**（パーツを差し替えて遊べることを示す）: 2 つの製品を赤い両矢印で結び、章タイトルと下向きの三角を重ねる。 9. **機能紹介（2つ目の製品）**（もう一方のギミックを解説する）: 部位ラベル付きの製品写真、側面のアップ、番号帯見出し、人物グリッド、リスト、を同じ型で並べる。 10. **使用シーン**（劇中の名場面を再現できることを伝える）: 青線で囲んだ再現写真と白い本文。 11. **作品告知**（公開予定の作品を宣伝する）: 縦長のポスター画像と、公開日を大きな白い明朝で中央に入れる。 ## Imagery - 製品は黒背景のスタジオ撮影で切り抜き、金属光沢と LED の発光を強調する。 - 背景には青い光の粒子やボケをうっすら散らす。 - 手で操作する写真は寄りで撮り、黄色の矢印で動作を示す。 - 人物写真は劇中衣装で、暗めのトーンのバストアップにする。 - メインビジュアルは青いライトと逆光で、ヒーローたちの集合構図にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 750px 前後の固定幅の列を置き、左右は黒い地で埋める。 - 帯見出しは画面幅いっぱいに伸ばし、中央の台形は固定幅にする。 - 人物グリッドは PC では 3〜4 列に増やす。 - 本文は PC でも中央揃えのままで、最大幅 640px 程度に抑える。 ## 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-570a0809`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000249671/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。