DESIGN.md — 紺×黄×緑の踏切玩具 新商品LP（Bold Toy Railway Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 玩具・踏切・極太縁取り文字・吹き出し・黄黒ストライプ・紺パネル
• 地の質感: フラットな単色面に、縁取りとドロップシャドウ付きの立体的な文字を重ねる。写真は切り抜きや明るいジオラマ写真。
• 形: 角丸 16〜20px の太枠パネル、丸みの強い吹き出し、爆発型のバッジ。
• 温度感: 明るく暖かい。紺と緑で締め、黄と赤で元気さを出す。

Colors

• 地は白。機能説明は紺の大枠パネルにまとめる
• セット内容や作例は深緑の太枠で囲み、紺パネルと区別する
• 見出し文字は黄・緑・赤を使い、必ず濃色の縁取りを付ける
• CTA は黄〜オレンジのグラデーションで1色だけ目立たせる
• お知らせ・訂正は赤枠と赤文字で区別する
• 見出し下は黄黒の踏切ストライプ線で区切る
• button-primary は文字 #FFFFFF × 背景 #F0B83A のコントラスト比が 1.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9A6E0C、4.56:1）を使う。
• banner-ribbon は文字 #FFFFFF × 背景 #FE3334 のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#EE0102、4.53:1）を使う。
• notice-box は文字 #FE3334 × 背景 #FEFEFE のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#EE0102、4.59:1）を使う。

Typography

• 見出しは極太で、白か濃色の縁取りと影を必ず付ける
• 強調語だけ色を変えたり大きくしたりする
• 見出しは2行までで改行位置を揃える
• 本文は小さく控えめにし、主役は画像と見出しにする
• 難しい漢字にはルビを付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。リストは 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 14px（375px 幅換算）
• パネルは左右に約 5% の余白を取る
• 見出しはパネルの外に置き、下に黄黒ストライプ線
• 作例は吹き出し＋写真枠のセットを縦に繰り返す
• 写真は枠いっぱいに入れる

Elevation & Depth

• 影はほぼ使わず、太枠で面を区切る
• CTA だけ下に濃色の影を付けて立体感を出す
• 文字にはドロップシャドウで浮き上がりを付ける

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の太枠に入れた四角い写真。商品は切り抜きも使う
• セクション境界: 直線。見出し下に黄黒の踏切ストライプ線
• パネルの枠線は 4〜6px と太くする
• 吹き出しは尻尾付きの角丸
• 強調バッジはギザギザの爆発型

Components

• 購入ボタン（button-primary）: 黄〜オレンジの角丸ボタン。左にカートアイコンを区切って置く
• 緑ライン付き大見出し（heading-section）: 中央の縁取り文字の左右に太い緑の横線を伸ばす
• 踏切アイコン見出し（heading-crossing）: 左に踏切アイコン、黄の縁取り文字、下に黄黒ストライプ線
• 赤リボン帯（banner-ribbon）: 両端が切れ込んだ赤い帯に白縁の2行見出し
• 紺の特長パネル（panel-feature）: 紺の太枠の中に水色や白の面を置いて機能を図解する
• 吹き出し（speech-bubble）: 黒や緑の太枠の角丸吹き出し。セリフや作例のタイトルを入れる
• セット内容カード（card-set）: 緑の太枠に左上のラベル付き。図と●の箇条書き3列
• お知らせボックス（notice-box）: 赤い太枠と赤い見出しの訂正告知

Do's and Don'ts

Do - 見出しは必ず縁取りと影を付けた極太文字にする - 機能説明は紺パネル、内容物や作例は緑枠と使い分ける - 吹き出しやキャラクターで遊ぶ場面を伝える - 黄黒ストライプで踏切らしさを出す - CTA はファーストビュー直下に大きく置く

Don't - 細い明朝や淡いパステルだけの配色にしない - 長い本文の段落を続けない - 枠線を細くしない - CTA 以外にオレンジのボタンを増やさない - 写真を暗く加工しない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品と遊び方、価格を一目で伝える）: 空と芝生の背景に商品写真。上に立体ロゴ、手書き風の吹き出しと爆発バッジ、下に発売日と価格
2. CTA（購入へ誘導）: 白地中央に黄色の大ボタン
3. 動画（動きを見せる）: 緑ライン見出しと横幅いっぱいの埋め込み動画
4. コンセプト帯（新商品であることを訴える）: 赤リボン帯に白縁の2行見出し
5. 特長（サウンド）（主な機能を説明）: 紺パネル内でモード図解、車掌キャラと吹き出しのセリフ例を車種ごとに並べる
6. 特長（モード切替）（補助機能を説明）: 紺枠にスイッチの写真と状態ラベルを3段で並べる
7. 特長（ディテール再現）（リアルさを訴求）: 紺パネルに写真を2分割で置き、白縁の大きな文字を重ねる
8. セット内容（内容物とサイズを示す）: 緑枠カードに全体図、サイズ表記、3列の箇条書き
9. パッケージ（店頭で見つけやすくする）: 緑ライン見出しとパッケージ写真を大きく置く
10. 遊び方の例（手持ちの車両との組み合わせを提案）: 薄黄の吹き出し見出しと緑枠写真を4回繰り返す
11. 関連商品（セット販売の訴求）: キャラと爆発バッジ付きの赤い見出し
12. お知らせ（仕様と日程の変更を告知）: 赤枠ボックスに本文、赤字の日付、関連商品の画像

Imagery

• 商品は明るいジオラマ写真で、正面か斜め上から撮る
• 背景は青空と芝生、街並みのシルエット
• キャラクターは制服姿の頭が大きいデフォルメイラスト
• 効果音はギザギザ吹き出しと手書き風の文字で入れる
• 黄黒ストライプ・踏切・音符アイコンを飾りに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 750px 幅のカラムで SP と同じ構成にする
• 左右の余白は白か薄グレー地にする
• セット内容のリストは PC で 3 列のまま余白を広げる
• 見出し画像は最大幅を決めて拡大しすぎない

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 行書くと起動時に読み込まれる。