DESIGN.md — 深緑×土色の冒険系キッズ玩具LP（Jungle Adventure Kids Toy LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: ジャングル冒険・岩肌テクスチャ・クラフト紙パネル・極太フチ文字・ルビ付き・図解
• 地の質感: 橙茶の岩肌テクスチャの地に、ちぎれた縁のクラフト紙パネルを重ねる。深緑ブロックはベタ塗り
• 形: 縁がギザギザの紙パネル、角丸の情報ボックス、斜めの吹き出し・ラベル
• 温度感: 暖色寄り。土色・橙に深緑と空色を合わせた冒険感のある配色

Colors

• 商品情報・価格・CTAは深緑ベタブロックに白文字でまとめる
• 中盤は橙茶の岩肌地に、クラフト紙・黒・暗緑・空色のパネルを交互に重ねる
• CTAはオレンジのグラデーションで深緑上に一点だけ置く
• 禁止・注意は赤枠と黄色帯で目立たせる
• 擬音や遊びの見出しはマゼンタ・黄色を白フチ付きで使う
• 暗いパネル上の文字は白、明るいパネル上は黒
• button-primary は文字 #FFF7E8 × 背景 #EE6A12 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BB530D、4.53:1）を使う。

Typography

• 子ども向けなので漢字にはルビを振る
• 大きな見出しは白・黄・マゼンタの文字に黒や濃色のフチと影を付ける
• 見出しはやや斜めにしたり、ラベル風の帯に載せたりして動きを出す
• 商品情報ブロックはプレーンなゴシックで読みやすくする
• 注意書きは「※」で始めて小さく添える
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。