--- version: alpha name: Tokusatsu Toy Product Hero Orange Black LP description: 明るいグレーの地に、オレンジの太枠と黒のグリッドパネルを重ねた玩具の商品紹介 LP。斜体の極太見出し、ルビ付きのコピー、番号付きの特長帯で、商品写真を大きく見せる。 colors: primary: '#E7701C' secondary: '#E15615' background: '#FEFFFF' dark-section: '#1B2125' surface: '#FFFFFF' text: '#100C0E' on-dark: '#FFFFFF' accent-1: '#19ACCD' accent-2: '#AA2B13' background-alt: '#E4E7E8' text-muted: '#363133' line: '#363133' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.25 headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 800 lineHeight: 1.35 accent: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.3em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.4 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 12px section: 32px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' panel-frame: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 400px numbered-band: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 28px speech-callout: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 90px label-tab: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 16px detail-grid: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 300px zoom-caption: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 26px logo-title: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px --- # DESIGN.md — 橙×黒の特撮変身玩具 商品紹介LP（Tokusatsu Toy Product Hero Orange Black LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、クール・先進的、ポップ・元気、情報量多め・訴求型 - **キーワード**: 特撮ヒーロー・変身ベルト・斜体極太・オレンジ枠・黒グリッド・ルビ付き - **地の質感**: 黒地に細いグリッド線と斜めの光の筋を入れたメカっぽい質感。明るい部分は淡いグレーに斜めのストライプを入れる - **形**: 角丸なしの四角いパネル、斜めにカットした帯、矢印（シェブロン）の装飾 - **温度感**: オレンジと黒による熱い印象に、シアンで冷たさを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E7701C` | パネルの太枠・ブランドオレンジ | 9% | 画素の主要色に補正 | | `secondary` | `#E15615` | 見出し帯の濃いオレンジ | 8% | 画素の主要色に補正 | | `background` | `#FEFFFF` | ページ地の淡いグレー | 15% | 画素の実測 | | `dark-section` | `#1B2125` | 黒グリッドのパネル地 | 12% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | パネル内の白い面 | 10% | 画素の主要色に補正 | | `text` | `#100C0E` | 見出しの黒い文字と縁取り | 4% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 黒地の上の白い文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#19ACCD` | キャラクターのシアン、吹き出しの面 | 6% | 画素の実測 | | `accent-2` | `#AA2B13` | 強調用の赤 | 3% | 画素の主要色に補正 | | `background-alt` | `#E4E7E8` | ファーストビューの淡いブルーグレー | 10% | 画素の主要色に補正 | | `text-muted` | `#363133` | 注釈・コピーライトの文字 | 1% | 画素の主要色に補正 | | `line` | `#363133` | 黒地のグリッド線 | 3% | 画素の主要色に補正 | - 地は淡いグレー。商品パネルは黒グリッドの面をオレンジの太枠で囲む - 見出しのキーワードはオレンジのグラデ文字に黒の縁取りをつける - 番号付きの特長見出しは黒い帯にし、斜めに切った端をオレンジにする - シアンはキャラクター色。吹き出しやアクセントの面だけに使う - 注釈は小さい黒か白の文字にし、色はつけない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の大きなロゴ風見出し（斜体・縁取り付き） | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.1 | -0.02em | | `headline-lg` | ファーストビューのキャッチ（斜体・白縁取り） | ゴシック | Noto Sans JP | 900 | 24px | 1.25 | 0.0em | | `headline-md` | 番号付き特長帯の見出し | ゴシック | Noto Sans JP | 900 | 15px | 1.3 | 0.0em | | `headline-sm` | 吹き出しのコピー・パネルのラベル | ゴシック | Noto Sans JP | 800 | 16px | 1.35 | 0.0em | | `accent` | 英字のサブタイトル（字間を広く） | 欧文サンセリフ | Montserrat | 700 | 10px | 1.2 | 0.3em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 500 | 9px | 1.4 | 0.0em | - 見出しはすべて極太にし、斜体ぎみにして勢いを出す - 漢字には小さなルビを振り、子ども向けにする - 大見出しには黒か白の太い縁取りとオレンジのグラデを重ねる - 本文の長い文章は置かない。短いコピーだけで構成する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品の詳細は 2 カラムの分割パネルにする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 32px、基本単位 8px、カード内 12px（375px 幅換算） - セクションごとにオレンジ枠の大きなパネルを置く - 番号帯の見出しはパネルの直前に横幅いっぱいで置く - 商品写真はパネルの中で中央に大きく配置する - 詳細パネルは正面・側面・背面・セット内容のグリッドに分ける ## Elevation & Depth - 影はほぼ使わない。太枠と縁取りで立体感を出す - キャラクターの写真はパネルの枠からはみ出させて奥行きを出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 背景を抜いた切り抜き写真。キャラクターは枠からはみ出させる - **セクション境界**: 直線で区切る。パネルの角は斜めにカットした形にする - 角丸は使わない - 帯の端は斜めにカットしてシェブロンにする - 矢印の装飾で動きを示す ## Components - **オレンジ枠パネル**（`panel-frame`）: 黒グリッドの地を太いオレンジ枠で囲んだ大きな展示パネル - **番号付き特長帯**（`numbered-band`）: 斜体の大きな数字に、黒地の白文字の見出し帯をつなげる。端はオレンジのシェブロン - **斜めカットの吹き出し**（`speech-callout`）: 白またはシアン地に、オレンジと黒の文字を載せた角張った吹き出し - **写真ラベルのタブ**（`label-tab`）: グリッドの各写真の左上に置く「正面」などの小さな黒いタブ - **詳細写真グリッド**（`detail-grid`）: 白枠で区切った 2 カラムのグリッド。角度別の写真と付属品を見せる - **拡大部分のキャプション**（`zoom-caption`）: 拡大写真の下に置く赤い帯の白文字ラベル - **ロゴ風の商品名**（`logo-title`）: 縁取りしたオレンジのグラデ文字に、英字のサブタイトルを添える ## Do's and Don'ts **Do** - 商品写真はできるだけ大きく、切り抜きで見せる - オレンジ×黒を軸にし、シアンは差し色にとどめる - 見出しは極太の斜体にし、縁取りをつける - 漢字にルビを振る - 注釈は商品写真のすぐ下に小さく書く **Don't** - 角丸やパステル調の柔らかい部品は使わない - 長い説明文を並べない - 細い明朝体を使わない - 白地だけで平坦に作らない（グリッドやストライプの質感を入れる） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の登場を告知し、装着後の姿を見せる）: 淡いストライプの地に、キャラクターと商品の切り抜きを置く。矢印で装着を示し、下にロゴ風の商品名と注釈を置く 2. **商品の概要**（何ができる商品かを伝える）: オレンジ枠の黒パネルに、吹き出しのコピーと商品写真、はみ出したキャラクターを組み合わせる 3. **特長1**（仕様のアップグレード点を示す）: 番号帯の見出しのあと、パネル内にラベル付きの写真グリッドを置く 4. **特長2**（サイズの調整機能を示す）: 番号帯の見出しのあと、全体写真と、赤いキャプション付きの拡大写真を置く 5. **フッター**（権利表記）: グレー地の中央に小さなコピーライトを置く ## Imagery - 商品は白背景で撮った切り抜きにし、光沢や透明パーツの発色を強調する - キャラクターはポーズをつけた全身か半身の切り抜きにし、枠からはみ出させる - 背景には黒地のグリッドや斜めの光の筋を入れ、メカっぽさを出す - 動きを示すために、曲がった大きな矢印やシェブロンを入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央 750px 前後の 1 カラムを保ち、左右はグレー地にする - 詳細グリッドは PC で 3〜4 カラムに広げてもよい - 見出し帯は 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-22906173`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000207688/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（2/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。