--- version: alpha name: Jungle Adventure Kids Toy LP description: 深緑の商品情報ブロックと、岩肌テクスチャの橙茶背景に古地図風のクラフト紙パネルを重ねた子ども向け玩具 LP。極太ゴシックの白文字にフチと影を付け、ルビ付きで遊び方・組み立て方を図解する。 colors: primary: '#00712F' background: '#FFFFFF' background-alt: '#C15E26' surface: '#E0A557' cta: '#EE6A12' on-cta: '#FFF7E8' on-primary: '#F8FCFE' dark-section: '#231717' secondary: '#0A3829' tint-1: '#7DCEF3' accent-1: '#E40214' marker: '#FFE600' accent-2: '#E4007F' text: '#121110' cta-accessible: '#BB530D' typography: display: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: M PLUS 1p fontSize: 18px fontWeight: 900 lineHeight: 1.4 headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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.full}' height: 42px status-bar: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 34px product-info-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-lg}' rounded: '{rounded.sm}' height: 540px heading-banner: backgroundColor: '{colors.primary}' textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 80px craft-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 600px feature-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 24px warning-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 280px step-number: backgroundColor: '{colors.text}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 18px pill-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 26px --- # DESIGN.md — 深緑×土色の冒険系キッズ玩具LP（Jungle Adventure Kids Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: ジャングル冒険・岩肌テクスチャ・クラフト紙パネル・極太フチ文字・ルビ付き・図解 - **地の質感**: 橙茶の岩肌テクスチャの地に、ちぎれた縁のクラフト紙パネルを重ねる。深緑ブロックはベタ塗り - **形**: 縁がギザギザの紙パネル、角丸の情報ボックス、斜めの吹き出し・ラベル - **温度感**: 暖色寄り。土色・橙に深緑と空色を合わせた冒険感のある配色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00712F` | 商品情報ブロック・見出し帯の深緑 | 13% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 動画周りの白に近い地 | 8% | 画素の実測 | | `background-alt` | `#C15E26` | 岩肌テクスチャ地の橙茶 | 10% | 画素の主要色に補正 | | `surface` | `#E0A557` | クラフト紙パネル | 12% | 画素の主要色に補正 | | `cta` | `#EE6A12` | 入荷案内ボタンのオレンジ | 0% | 推定 | | `on-cta` | `#FFF7E8` | CTAボタン文字 | 0% | 画素の実測 | | `on-primary` | `#F8FCFE` | 深緑上の白文字 | 1% | 画素の主要色に補正 | | `dark-section` | `#231717` | 注意事項パネルの黒 | 8% | 画素の実測 | | `secondary` | `#0A3829` | 遊び方パネルの暗緑 | 7% | 画素の主要色に補正 | | `tint-1` | `#7DCEF3` | 組み立て方パネルの空色 | 8% | 画素の実測 | | `accent-1` | `#E40214` | 禁止事項ボックスの赤 | 2% | 画素の実測 | | `marker` | `#FFE600` | 注意見出しの黄色帯 | 0% | 推定 | | `accent-2` | `#E4007F` | 擬音・強調のマゼンタ | 1% | 推定 | | `text` | `#121110` | 白地パネルの黒文字 | 1% | 画素の実測 | | `cta-accessible` | `#BB530D` | AA を満たす補正値（計算） | | 計算 | - 商品情報・価格・CTAは深緑ベタブロックに白文字でまとめる - 中盤は橙茶の岩肌地に、クラフト紙・黒・暗緑・空色のパネルを交互に重ねる - CTAはオレンジのグラデーションで深緑上に一点だけ置く - 禁止・注意は赤枠と黄色帯で目立たせる - 擬音や遊びの見出しはマゼンタ・黄色を白フチ付きで使う - 暗いパネル上の文字は白、明るいパネル上は黒 - `button-primary` は文字 `#FFF7E8` × 背景 `#EE6A12` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BB530D`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 遊びの見出し（白フチ付き極太文字） | 装飾・ディスプレイ | Dela Gothic One | 900 | 26px | 1.3 | 0.02em | | `headline-lg` | 商品名 | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em | | `headline-md` | 遊び方などの小見出し（フチ文字） | ゴシック | M PLUS 1p | 900 | 18px | 1.4 | 0.0em | | `headline-sm` | 手順番号付きの見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.0em | | `body-lg` | 商品情報の注釈 | ゴシック | Noto Sans JP | 400 | 15px | 1.8 | 0.02em | | `body-md` | ルビ付きの説明文 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.0em | | `note` | ※の注意書き | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | CTAボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.05em | - 子ども向けなので漢字にはルビを振る - 大きな見出しは白・黄・マゼンタの文字に黒や濃色のフチと影を付ける - 見出しはやや斜めにしたり、ラベル風の帯に載せたりして動きを出す - 商品情報ブロックはプレーンなゴシックで読みやすくする - 注意書きは「※」で始めて小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。図解の中だけ 2〜3 分割のコマ割り - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは岩肌地の上に左右 5% の余白を空けてパネルとして置く - 商品情報ブロックはページ冒頭と末尾に同じ構成で置く - 図解は商品写真を中心にラベルと引き出し線を配置する - 手順は番号付きで、写真コマを横に並べる - パネルどうしの間隔は 20〜30px にする ## Elevation & Depth - 影はほぼ使わず、パネルは平面のまま重ねる - 見出し文字にだけドロップシャドウを付ける - ラベルは太い黒枠で前に出して見せる ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は切り抜きか四角のコマに入れる。コマは太い色枠で囲み、少し傾けることもある - **セクション境界**: ちぎれた紙の縁のようなギザギザ境界と、岩肌テクスチャの帯 - CTAはピル型にする - 情報ボックスは角丸 10〜16px - 特徴ラベルは傾けた黒地か緑地のタグにする - 組み立て手順は細い緑線で区切る ## Components - **入荷案内CTA**（`button-primary`）: オレンジのグラデーション、カートアイコン付きのピル型ボタン - **販売状況バー**（`status-bar`）: 深緑上に置く白い横長の帯。中央に緑の太字 - **商品情報ブロック**（`product-info-block`）: 深緑の角丸ブロック。商品名・価格・CTA・注釈を縦に並べる - **斜線付き見出し帯**（`heading-banner`）: 深緑の帯に黄色と白の2行見出しを置き、左右を斜線で挟む - **クラフト紙パネル**（`craft-panel`）: 縁がギザギザの土色の紙パネル。図解やコマ割りを載せる - **機能ラベル**（`feature-tag`）: 緑や黒の地に白文字を載せた傾いたタグ。引き出し線と組み合わせる - **禁止事項ボックス**（`warning-box`）: 赤い見出し帯付きの角丸白ボックス。赤い×を付けた NG 例を 2 列で並べる - **手順番号**（`step-number`）: 黒い四角や丸の中に白数字。写真コマの左上にも置く - **ピル型注意見出し**（`pill-heading`）: 黄色や白のピル型帯に黒い太字 ## Do's and Don'ts **Do** - 商品の全景写真を大きく扱い、擬音の装飾文字を重ねる - パネルごとに地色を変えて情報の種類を分ける - 漢字にルビを付け、子どもも読めるようにする - 遊び方・組み立て方は番号と矢印付きの写真で図解する - 冒頭と末尾に同じ商品情報ブロックとCTAを置く **Don't** - 淡いパステル調やミニマルな余白主体にしない - 細い明朝体や繊細な書体を使わない - CTAの色を深緑やパネル色に溶け込ませない - テクスチャのない単色背景だけで中盤を構成しない - 注意書きを省略したり目立たない色で隠したりしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の迫力と世界観を伝える）: ジャングル背景のキービジュアル。ロゴ、擬音、商品名の装飾文字を重ねる 2. **商品情報・CTA**（価格と購入導線を示す）: 深緑ブロックに商品名、白い販売状況バー、価格、オレンジのCTA、※注釈を並べる 3. **紹介動画**（動きで遊びを見せる）: 白地に動画を横幅いっぱいに埋め込む 4. **見出し帯**（本編への導入）: 深緑の帯に2行の黄白見出しと左右の斜線 5. **使用イメージ**（子どもが楽しむ様子を見せる）: 子どもと商品の写真に、白フチ付きのマゼンタ文字 6. **遊びの全体図解**（ギミックを一覧で見せる）: クラフト紙パネルの中央に商品を置き、周りに拡大コマ・ラベル・吹き出しを配置する 7. **ギミック紹介**（個別の遊びを強調する）: 傾いた色枠の写真コマに黒いラベルを付けてコラージュする 8. **別売品との連動**（拡張遊びを訴求する）: 紺枠や黒パネルに大きな写真と矢印、フチ文字の説明を置く 9. **注意事項**（安全と非対応品を伝える）: 黒パネル内に赤い禁止ボックス、黄色帯の注意、白いピル見出しを置く 10. **セット内容**（同梱物を示す）: 白い角丸パネルに切り抜き写真と個数を並べる 11. **遊び方**（操作手順を説明する）: 暗緑パネルに小見出しを置き、番号付きの手順と写真コマを並べる 12. **組み立て方**（組み立て手順を説明する）: 空色パネルに番号手順と線画風の写真図解を置き、緑線で区切る 13. **商品情報・CTA（再掲）**（最後に購入を促す）: パッケージ画像を加え、冒頭と同じ深緑ブロックを置く ## Imagery - 商品は高彩度で切り抜くか、ジャングルの背景と合成して使う - 擬音は傾けた極太文字にし、白フチとマゼンタで描く - 背景は橙茶の岩肌や土のテクスチャにする - パネル縁は古地図のようなちぎれ紙にする - 図解は赤い矢印・引き出し線・点線の丸で示す - 人物は笑顔の子どもが商品で遊ぶ明るい写真にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅約 85% で、両側は岩肌テクスチャ地を見せる - 商品情報ブロックは PC では左に情報、右に注釈の 2 カラム（末尾は左に画像） - 別売連動や注意事項は PC では左右 2 カラムに並べる - 組み立て手順は PC では 2 列のグリッドにする - PC でも見出し帯や装飾文字の雰囲気は SP と同じに保つ ## 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-37d55fc3`（元 LP の URL から採番） - **元 LP**: https://www.takaratomy.co.jp/products/ania/aniakingdom/kinggoldmountain/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。