DESIGN.md — 青×黄×赤の元気な鉄道玩具カタログ LP（Vivid Toy Train Catalog LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、かわいい
• キーワード: 原色・斜体の極太見出し・番号付きカード・ふりがな・カタログ型・子ども向け
• 地の質感: グラデーションは最小限にしたフラットな色面に、商品の切り抜き写真と光沢のある見出しロゴを重ねる
• 形: 中くらいの角丸の枠カードと太い色の帯。斜めに傾けた帯見出しとピル型の小ボタンを組み合わせる
• 温度感: 明るく賑やか。暖色の CTA と寒色の青ブランド色を並べて対比させる

Colors

• 地は白にし、商品群ごとにセクション全体を赤・水色・緑の単色面で塗り分ける
• 大見出しは青の帯の上に白い斜体文字。強調語だけ黄色にする
• 購入ボタンだけオレンジのグラデーションにし、他の要素にオレンジを使わない
• 番号カードは原色の番号ブロック＋クリーム色の説明エリアにする
• キャラクターの吹き出しやラベルは紺の面に白文字にする
• セクションの小見出し帯は内容に合わせて赤・紺・黄・水色を使い分ける
• button-primary は文字 #FFFFFF × 背景 #F0B030 のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9D6C0B、4.58:1）を使う。

Typography

• 大見出しは斜体のように傾けた極太ゴシックにし、白い縁取りやドロップシャドウを付ける
• 子ども向けなので本文の漢字にはふりがなを付ける
• 語尾は「〜だよ！」「〜しよう！」のような呼びかけの短文にする
• 見出しは 1〜2 行に収め、強調語だけ色を変える
• 数字やスペックは大きく太くして目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。番号カードと商品の並びは 2〜3 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 左右 5% の余白を取った枠付きパネルを縦に積む
• 機能紹介は 01〜04 の番号カードを 2×2 で並べる
• セクションの区切りに購入ボタンを何度も挟む
• セット内容は部品の切り抜き写真に「×数量」を添えて格子状に並べる
• キャラクターと吹き出しを組み合わせて関連ページへ誘導する

Elevation & Depth

• 購入ボタンは下側に濃い影を付けた立体的なボタンにする
• 商品写真のカードは薄いグレーの影で少し浮かせる
• 見出し文字にはドロップシャドウと縁取りを付けて立体感を出す
• それ以外の色面はフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は白抜きの切り抜き写真。シーン写真は角丸の四角
• セクション境界: 直線で色面を切り替えるだけにする。見出し帯は水平な太いバー
• 購入ボタンは角丸 8px の横長長方形にし、左にカートアイコンの区画を置く
• サブリンクはピル型の赤・黄ボタンにして右向きの三角を付ける
• パネルは 3〜4px の太い色枠＋角丸 12〜20px
• 吹き出しは角丸の長方形に三角のしっぽを付ける

Components

• カート付き購入ボタン（button-primary）: オレンジのグラデーションボタン。左側に区切られたカートアイコン、右側に白い太字
• 青帯の見出し（heading-band）: 画面幅いっぱいの青い太帯に、白い斜体の極太文字を載せる。強調語は黄色
• 色枠のパネル（panel-framed）: 赤・青・黄の太い枠で囲んだ角丸パネル。上部の色帯にタイトルを入れる
• 番号付き機能カード（numbered-card）: 上半分が写真。下段は原色の番号ブロックとクリーム色の説明エリアを並べる
• ピル型の関連リンク（pill-link）: 赤または黄のピル型ボタンに白文字と ▶ を付ける
• 吹き出しバッジ（badge-circle）: 赤い縁取りの白い円に赤文字を入れ、写真に重ねて注意を引く
• キャラクター吹き出し（character-bubble）: 左に人物イラストと紺の名札、右に紺の吹き出しと白文字を置く
• キャッチの帯ラベル（label-tag）: 商品名の上に、角丸の小さな色帯で一言の訴求を載せる

Do's and Don'ts

Do - 原色のセクションごとに商品カテゴリを分け、色で内容がわかるようにする - 番号カードは 2×2 で揃え、番号と短い説明を必ず組み合わせる - 購入ボタンは主要なセクションのあとに毎回置く - 本文には子ども向けのふりがなと呼びかけの語尾を使う - 商品写真はきれいに切り抜き、白地または色面の上に置く

Don't - くすんだ色や中間色を地に使わない - 細い明朝体や繊細な書体を使わない - 長文を詰め込まない。2〜3 行の短い説明にする - 購入ボタン以外にオレンジのグラデーションを使わない - 余白の多いミニマルな構成にしない

Page Structure

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

1. ファーストビュー（商品の全体像と発売情報を伝える）: 黄色の地にセット全体を写した写真を置き、限定バッジ・ロゴ・価格を重ねる
2. 購入 CTA（すぐに購入できる導線を置く）: 中央にオレンジのカート付きボタンを置く
3. 動画（遊んでいる様子を見せる）: 青帯の見出しの下に 16:9 の動画を埋め込む
4. セットの価値訴求（オールインワンであることを伝える）: 2 段の青帯見出し、赤枠の遊びシーン写真、拡張パーツ 3 点を並べた色枠パネル
5. 車両紹介（主役の車両の魅力と設定を伝える）: オレンジ枠のパネルに写真・説明・引き出し線付きの解説図・スペック数値を載せる
6. ギミック紹介（動きの手順を見せる）: 赤い地に 01〜04 の手順カードを 2×2 で並べ、関連シリーズのパネルとピル型リンクを続ける
7. レール紹介（レールの種類と遊び方を伝える）: 水色の地に番号付きの 2×2 カードを並べる
8. 情景紹介（情景部品で遊びが広がることを伝える）: 緑の地に番号付きの 2×2 カードを並べる
9. セット内容（部品の種類と数を明示する）: 部品の切り抜き写真に「×数量」を添えて格子状に並べる
10. レイアウト例（組み合わせの多さを示す）: レールの俯瞰図に集中線の装飾を添え、黄色のピル型ボタンと吹き出しを置く
11. パッケージ・拡張提案（売り場で探しやすくし、追加購入を促す）: 箱の写真に続けて、緑・黄の色面カードで別売り品を紹介する
12. ブランド説明（世界観を伝える）: 青枠のパネルにロゴ・キャラクター・赤い吹き出しを置き、ふりがな付きの本文を載せる
13. 関連車両と購入（ほかの車両の購入を促す）: 色帯ラベル・品番・切り抜き写真・購入ボタンをくり返す
14. 関連ページへの誘導（回遊を促す）: キャラクターの吹き出しとバナー、3 カラムのリンクカードを並べる

Imagery

• 商品は明るいスタジオ照明で撮り、影の少ない切り抜き写真にする
• シーン写真はやや低い視点から撮り、背景をぼかした街並みでスピード感を出す
• 子どもが床で遊ぶ様子は明るい室内で自然な笑顔を撮る
• 制服姿の人物を等身の低いフラットなイラストで描く
• 黄色の集中線や星形などの装飾で賑やかさを足す
• レイアウト図は真上から見た俯瞰図にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 750px ほどの固定幅カラムを置き、両端は淡いグレーで埋める
• 番号カードは PC で 4 カラムに広げてもよい
• 見出し帯は PC でもカラム幅いっぱいに保つ
• 購入ボタンは最大幅 360px ほどで中央に置く

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