DESIGN.md — 紫×金ボタンの鉄道玩具商品LP（Bold Purple Toy Train Product LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 濃紫の帯見出し・黄文字の強調・方眼紙パネル・縁取り極太文字・金色ボタン・商品写真主体
• 地の質感: 白地をベースにしている。解説パネルには青い方眼紙柄を敷き、商品写真は切り抜きと実写ジオラマで見せる
• 形: 角丸の太枠パネルを使う。見出し帯は乗り物の先頭形状をシルエットにした流線形にする
• 温度感: 高彩度でにぎやか。紫・青・赤・黄の原色寄りの配色

Colors

• 地は白にする。見出しは濃紫の帯に白文字を置き、要所の語だけ黄色で強調する
• 解説パネルは青・赤・紫・オレンジの太枠で囲む。囲みの色はセクションごとに替える
• CTAは金色のグラデーションに白文字。ページ中で一番目立つ要素にする
• 最後の購入ブロックは青の大きな面で囲み、ページの締めにする
• 注釈は小さい黒文字か灰文字で書き、写真の右下に置く
• button-primary は文字 #FFFFFF × 背景 #D5A466 のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9F6C2C、4.51:1）を使う。
• badge-medal は文字 #D9172A × 背景 #D5A466 のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9F6C2C、4.53:1）を使う。

Typography

• 見出しには白か黄色の極太ゴシックを使い、濃紺の縁取りか影を付ける
• 大きいコピーは少し傾けて、写真の左上に重ねる
• 難しい漢字には小さなルビを振る（子ども向けのため）
• 本文は短い説明だけにして、内容は写真と図で伝える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。説明パネルは写真が上・文が下の縦積みにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 36px、基本単位 8px、カード内 12px（375px 幅換算）
• 紫の帯見出しは画面いっぱいに置き、その下に枠付きパネルを続ける
• パネルは左右に約5%の余白をとって中央に置く
• 番号付き手順は1パネルを横線で区切り、手順を縦に並べる
• CTAはFV直下とページ末尾に置く

Elevation & Depth

• 影はほとんど使わず、太枠で面を区切る
• CTAだけ、下側に少し濃い色の縁を付けて立体感を出す
• 文字の縁取りとドロップシャドウで文字を浮かせる

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の矩形にする。商品は切り抜いて斜めの俯瞰で見せる
• セクション境界: 乗り物の先頭形状をかたどった紫シルエット帯で区切る
• パネルは4〜6pxの太枠に角丸10pxを付ける
• CTAは角丸10px程度の横長矩形にし、左端に区切ったアイコン領域を設ける
• リンクバナーは左側に円形アイコンを置いた横長の角丸カプセルにする

Components

• 金色CTAボタン（button-primary）: 左に区切ったアイコン、右に大きな白文字のラベルを置く。金色グラデーションで塗る
• シルエット帯見出し（heading-silhouette）: 乗り物の先頭形状をした濃紫の帯。白文字の見出しに強調部分だけ黄色を使う
• 特典リンクバナー（link-banner）: 赤地のカプセル型バナー。左にメダル型か円形のアイコンを重ね、白文字で案内する
• 太枠写真パネル（panel-framed）: 色付きの太枠で写真を囲み、左上に傾けた縁取りコピーを重ねる
• 方眼紙の番号手順（grid-step）: 方眼紙柄の地に、円形の番号と手順見出しを置き、図解を添える
• 特典メダルバッジ（badge-medal）: 金色の円にリボンを付けたメダル型のバッジ。限定特典を示す
• セット内容ボックス（spec-box）: オレンジ枠の箱。左上にタブ見出しを付け、レイアウト図と●区切りの内容一覧を入れる
• 解説カード（info-card）: 青枠に青いタイトルバーを付けたカード。写真を左、説明文を右に並べる

Do's and Don'ts

Do - 見出しはすべて同じ形のシルエット帯にそろえる - 強調したい語は黄色にし、縁取りした極太文字で書く - 遊び方の説明は写真・矢印・番号で図解する - パネルの枠色はセクションごとに替え、リズムを出す - CTAは上と下の2か所に置く

Don't - 細い明朝体や淡いパステル配色を使わない - 長い文章を段落で並べない - 影を強くかけたフラットでないカードにしない - CTAに金色以外の地味な色を使わない

Page Structure

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

1. ファーストビュー（商品の全体像と発売情報を伝える）: 黄色の放射状の背景に、ロゴ帯、セット全体の写真、車両写真を置く。左下に白文字で発売日と価格を入れる
2. 特典案内とCTA（特典への誘導と入荷案内の申し込み）: メダル付きの赤いカプセルバナーの下に、金色の大型ボタンを置く
3. 動画（動きを見せる）: 紫の帯見出しの下に、16:9の動画を全幅で置く
4. 商品紹介（モチーフの魅力と背景を伝える）: 大きな車両写真の下に、青枠の解説カードを置く
5. セット構成（同梱物の全体を見せる）: オレンジ枠の中にレイアウト写真を入れ、サイズは赤い目印付きで表記する
6. 遊び方の特長（遊びのポイントを一つずつ訴求する）: 帯見出しの下に太枠の写真パネルを縦に並べ、それぞれ傾けた縁取りコピーを重ねる
7. 操作手順（使い方を図解する）: 紫枠のパネルを横線で3段に区切る。各段に■見出し・写真・矢印・引き出し線を入れる
8. 新パーツ紹介（新しく追加した要素を強調する）: 青い面に爆発形の装飾を置く。その後に方眼紙の番号手順を続ける
9. 限定版の案内（特典版との違いを見せる）: メダルと縁取りコピーの下にレイアウト写真を置き、その下にセット内容ボックスを続ける
10. パッケージ紹介とCTA（店頭で見分けられるようにし、申し込みにつなげる）: 星形の装飾付き見出しの下にパッケージ写真を置き、金色ボタンを続ける
11. 通常版と購入（購入への最終導線）: 青い大きな面の中にパッケージ写真とセット内容を入れ、最後に購入ボタンを置く

Imagery

• 商品は明るいスタジオで撮った切り抜き写真か、芝生のジオラマで撮った写真にする
• 斜め上の俯瞰で、レイアウト全体がわかる構図にする
• 動きは赤い太矢印・衝撃線・爆発形の装飾で表す
• 解説の背景には淡い青の方眼紙柄を敷く
• 手で操作する場面は指を入れたアップ写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はないため推奨を示す。PCでは本文幅を約750pxに固定し、中央に置く
• シルエット帯見出しはPCでもコンテンツ幅いっぱいに伸ばす
• 番号手順はPCで2カラムに並べてもよい
• CTAの幅はPCで最大420px程度に抑える

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