DESIGN.md — 青×黄×赤の元気な子ども向け鉄道玩具LP（Bold Kids Toy Railway Action LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 極太縁取り文字・斜めリボン見出し・青いデジタル背景・動きの擬音・写真フレーム・手順図
• 地の質感: グラデーションと光線のデジタル風背景。写真は高彩度でくっきり。
• 形: 斜めカットのリボン帯、角丸の写真フレーム、矢印と放射線の効果線。
• 温度感: 明るく高温。ワクワク感が強い。

Colors

• ページ地は淡グレー、FVと価格帯だけ青・濃紺で強く塗る。
• 見出し文字は黄・赤に濃紺の太い縁取りを付ける。
• 主CTAは黄オレンジ1色に白文字。
• 注意系の帯は赤ベタ白文字で区別する。
• 写真フレームはティール〜ミントの枠で統一する。
• button-primary は文字 #FFFFFF × 背景 #EEBD3C のコントラスト比が 1.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#96700D、4.55:1）を使う。
• button-alert は文字 #EDEFF7 × 背景 #E0061E のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DB061D、4.51:1）を使う。

Typography

• 見出しは極太で斜体気味、濃紺の太縁取り＋影。
• 1行内で強調語だけ色を変える（黄と赤など）。
• 本文は短く、子どもにも読める平易な文。
• 擬音は斜めに配置し効果線を添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。手順図のみ2カラムグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真ブロックは幅90%で縦に積む。
• リボン見出しは画面幅いっぱいに置く。
• 価格帯はFV直下とページ末尾に繰り返す。
• 手順は2×2のパネルに矢印で順序を示す。

Elevation & Depth

• 写真フレームは影なし、太枠で立体感を出す。
• 見出し文字にドロップシャドウ。
• CTAはごく薄い影のみ。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸長方形のフレームに写真を収め、文字を上に重ねる
• セクション境界: 直線。見出しは斜めカットのリボン帯
• リボン帯は両端を斜めにカット。
• CTAは角丸小さめの長方形。
• 大枠パネルは角を斜めに落とす。

Components

• 購入ボタン（button-primary）: 左にカートアイコン区画、右に白文字の黄オレンジ長方形
• リボン見出し（ribbon-heading）: 白帯の両端にティールの斜めカット、縁取り赤文字
• ライン付き見出し（heading-line）: 左右に濃紺の線を伸ばした縁取り文字
• 機能写真フレーム（photo-frame）: ミント枠の角丸写真に機能名を大きく重ねる
• 手順パネル（step-panel）: 淡黄地に赤枠の2×2手順、赤矢印でつなぐ
• 枠線リンクボタン（button-outline）: 白地に濃紺細枠と濃紺文字
• 注意リンクボタン（button-alert）: 赤ベタに白文字
• 発売日・価格帯（price-band）: 濃紺帯に白で発売日と大きな価格

Do's and Don'ts

Do - 見出しは必ず太縁取りで高コントラストにする。 - 写真上に擬音と効果線を入れて動きを出す。 - 価格と発売日を目立つ濃紺帯で繰り返す。 - 手順は番号・矢印でひと目でわかる図にする。

Don't - 細い明朝体や淡い色の見出しにしない。 - 余白を広く取りすぎて静かにしない。 - CTAを黄オレンジ以外の色にしない。 - 長文の段落を続けない。

Page Structure

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

1. ファーストビュー（商品の世界観と遊び方を一枚で伝える）: 青いデジタル背景にロゴ、黄の大見出し、遊び方写真を並べたコラージュ
2. 価格帯（発売日と価格を示す）: 濃紺帯に白文字、価格を大きく
3. CTA（購入へ誘導）: 黄オレンジの大ボタンを中央に
4. 動画（動きを見せる）: ライン付き見出し＋埋め込み動画
5. 特長（操作の特長を説明）: リボン見出し＋説明図バナー
6. 機能紹介（できる遊びを3つ見せる）: 機能名を重ねた写真フレームを縦に3枚
7. 遊び方手順（操作手順を図解）: 淡黄パネルに2×2の手順カード
8. サポートリンク（説明書・注意へ案内）: 枠線ボタンと赤ボタンを縦に2つ
9. セット内容（同梱物とレイアウトを示す）: 青枠パネルにリスト＋レイアウト写真
10. 拡張提案（別売品との組み合わせを訴求）: 斜め角の枠に写真3枚と緑の大ボタン
11. パッケージと価格（最終確認）: パッケージ写真＋濃紺価格帯

Imagery

• 商品は高彩度・明るいライティングで寄りの写真。
• 子どもが制服姿で遊ぶ笑顔の写真を入れる。
• 手元で操作するシーンを効果線つきで見せる。
• 背景は青の光線・ビル街のデジタル風。
• 矢印・放射線・擬音文字を多用する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に固定幅（約750px）でSPと同構成を表示する。
• 左右余白は淡グレー地で埋める。
• 手順パネルはPCで4カラム化してもよい。
• 画像主体のため文字は画像内で拡大縮小する。

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