--- version: alpha name: Fiery Red and Navy Board Game Toy LP description: 赤い炎の帯と紺のグリッド地を斜めに重ねた、熱量の高い玩具 LP。白フチ付きのイタリック極太見出しと、金フチの盾型バッジで遊びの特長を次々に見せる。最後は黄色地に切り替えて商品情報と価格をまとめる。 colors: primary: '#E81F30' dark-section: '#111454' background: '#1DD2E6' background-alt: '#FCDC02' cta: '#1C218A' on-cta: '#FCFCFB' secondary: '#E05A36' accent-1: '#F7C132' surface: '#FCFCFB' text: '#010145' text-body: '#222222' accent-2: '#F08A1C' accent-2-accessible: '#AF600C' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.2 body-lg: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.3 label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 8px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px price-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 220px shield-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 110px speech-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.sm}' height: 80px circle-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 150px item-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 110px heading-italic: textColor: '{colors.text}' typography: '{typography.display}' height: 90px info-heading: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 40px --- # DESIGN.md — 赤×紺の炎系ボードゲーム玩具 LP（Fiery Red and Navy Board Game Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 炎・斜めの帯・グリッド地・盾型バッジ・白フチ文字・キラキラ - **地の質感**: 紺の方眼グリッドの上に、赤〜朱のグラデーション帯が斜めに流れる。きらめきの光点を散らす - **形**: 盾型エンブレム、円形の吹き出し、角丸カード、右上がりの斜め帯 - **温度感**: 非常に暖色寄り。赤と黄で熱量を出し、紺で締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E81F30` | 炎帯・メイン赤 | 18% | 画素の主要色に補正 | | `dark-section` | `#111454` | 紺グリッド地 | 20% | 画素の主要色に補正 | | `background` | `#1DD2E6` | 価格帯の水色地 | 5% | 画素の実測 | | `background-alt` | `#FCDC02` | 商品情報の黄色地 | 14% | 画素の実測 | | `cta` | `#1C218A` | 購入ボタン | 1% | 画素の実測 | | `on-cta` | `#FCFCFB` | ボタン文字 | 0% | 画素の主要色に補正 | | `secondary` | `#E05A36` | 朱色の炎グラデ | 7% | 画素の主要色に補正 | | `accent-1` | `#F7C132` | 盾・カードの金フチ | 4% | 画素の主要色に補正 | | `surface` | `#FCFCFB` | 吹き出し・説明枠 | 8% | 画素の主要色に補正 | | `text` | `#010145` | 紺の見出し文字 | 2% | 画素の実測 | | `text-body` | `#222222` | 商品情報本文 | 2% | 推定 | | `accent-2` | `#F08A1C` | 商品情報見出し帯 | 0% | 推定 | | `accent-2-accessible` | `#AF600C` | AA を満たす補正値（計算） | | 計算 | - 地は紺グリッドに赤の斜め帯を重ねる二層構成を基本にする - 価格と購入は水色の帯で区切り、紺のボタンで目立たせる - 締めの商品情報は黄色地に切り替え、放射線で明るくする - 見出しは白文字に紺か赤の太フチ、または紺文字に白フチ - 金色は盾・カードの縁だけに使う - `info-heading` は文字 `#FCFCFB` × 背景 `#F08A1C` のコントラスト比が 2.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#AF600C`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し（斜体・白フチ） | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.2 | 0.0em | | `headline-lg` | 価格・発売日 | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.0em | | `headline-md` | 盾バッジ内の特長名 | ゴシック | Noto Sans JP | 900 | 22px | 1.2 | 0.0em | | `body-lg` | 吹き出しの説明文（ルビ付き） | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.0em | | `body-md` | 商品情報の箇条書き | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.02em | | `note` | 注釈・ルビ | ゴシック | Noto Sans JP | 500 | 9px | 1.3 | 0.0em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 20px | 1.0 | 0.05em | - 大見出しは右上がりの斜体にし、2 行で段差をつける - 見出しには 3〜4px の白フチと影をつける - 子ども向けなので、漢字にルビを振る - キーワードは文字を 1.3 倍に大きくしてリズムを出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードの一覧は 5 枚を横に並べる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 8px（375px 幅換算） - 見出し・盾バッジ・写真を斜めに重ねて配置する - 盾バッジは左、説明の吹き出しは右に横並び - カード一覧は少し重ねて傾け、手札のように見せる - 価格・CTA は中央揃え ## Elevation & Depth - 盾とカードに濃い紺のドロップシャドウ - 見出し文字に白フチと影の二重縁 - 写真の周りにきらめきの光点 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜きで配置する。部品のアップは円形に切り抜き、赤い太枠で囲む - **セクション境界**: 斜めに流れる赤い帯の曲線で区切る。最後は黄色地に直線で切り替える - 特長名は金フチの盾型エンブレムに入れる - 例の紹介は白い円形吹き出しに金フチをつける - ボタンは角丸 6px 程度の長方形 ## Components - **購入ボタン**（`button-primary`）: 水色帯の中央に置く紺の長方形ボタン - **価格帯**（`price-band`）: 水色地に価格・発売日を紺の極太文字で載せる - **盾型特長バッジ**（`shield-badge`）: 金フチの白い盾に紺の太字で特長名を入れる - **説明吹き出し**（`speech-panel`）: 盾の右に伸ばすクリーム色のパネル。赤いフチをつける - **円形エピソード**（`circle-bubble`）: 金フチの白い円。強・弱のアイコンと金額を並べる - **アイテムカード**（`item-card`）: 黄フチの紺カードにイラストと金額を入れ、横に並べる - **斜体フチ見出し**（`heading-italic`）: 白フチの紺斜体文字を、赤帯の上に置く - **商品情報見出し**（`info-heading`）: オレンジ地に白抜き文字の見出しラベル ## Do's and Don'ts **Do** - 紺グリッドと赤の斜め帯を、全セクションで背景として通す - 特長は盾バッジと吹き出しの組でくり返す - 見出しは必ず斜体にして白フチをつける - 部品のアップは円で切り抜いて大胆に見せる - 締めは黄色地に切り替えて情報をまとめる **Don't** - 白一色の平坦な背景にしない - 細い明朝体や淡いパステル色を使わない - 見出しをフチなしの細字にしない - 要素をすべて水平に揃えて整然としすぎない - 金色を本文に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と世界観を一目で伝える）: パッケージ風のビジュアルに、ロゴ・キャラクター・盾バッジ 3 つを詰め込む 2. **価格・CTA**（価格と発売日を示し、購入へ誘導する）: 水色帯に紺の極太の数字を置き、紺のボタンを添える 3. **盤面の特長**（大きさとゴールの種類を伝える）: 斜めに置いた盤面写真に、矢印付きの見出しと注釈パネル 2 つを添える 4. **遊ぶシーン**（家族で楽しむ情景を見せる）: 切り抜いた家族写真の上下に斜体のフチ見出しを置き、きらめきを散らす 5. **特長の詳細**（独自の要素を一つずつ説明する）: 盾バッジ＋吹き出し、円形アップ、イラストのブロックをくり返す 6. **マスの例**（遊びの具体例を見せる）: 円形の吹き出し 3 つを散らし、イラストを添える 7. **カード一覧**（アイテムと職業の多さを見せる）: 斜体見出しの下に、黄フチのカードを横一列に並べる 8. **商品情報**（内容物と仕様をまとめる）: 黄色の放射線地に商品の全体写真を置き、オレンジ見出しと箇条書きを続ける 9. **最終価格**（購入をもう一度促す）: 黄地の下部に、赤い価格と紺の発売日を置く ## Imagery - 商品と部品は白背景で撮り、切り抜いて斜めに配置する - 家族が遊ぶ様子は明るい自然光で撮り、人物を切り抜く - 建物や乗り物などのイラストは、太い線のポップな 3D 風にする - お札・カードを画面のあちこちに散らして、にぎやかさを出す - きらめきの光点と炎の帯で動きを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 980px で中央に置き、背景の帯は全幅に広げる - PC では価格・発売日・購入ボタンを横一列の細い帯にまとめる - PC の商品情報は、写真を左・説明を右にした 2 カラム - PC では盾バッジと吹き出しを横に長く使う - カード一覧は PC でも 5 枚を横に並べ、大きめに表示する ## 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-d2d1b0b1`（元 LP の URL から採番） - **元 LP**: https://www.takaratomy.co.jp/products/jinsei/product/fire/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（4/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。