DESIGN.md — 黄色い星柄×色枠カードの玩具 LP（Pop Yellow Starburst Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型
• キーワード: 黄色の星柄・色枠カード・吹き出し・ふりがな・子ども向け・にぎやか
• 地の質感: 黄色の市松と、緑・黄・白の星形・稲妻形の地紋。カード内はフラットな白。
• 形: 太い色枠の角丸カード。ギザギザの爆発形、雲形・吹き出し形のラベル、斜めにカットしたタブ見出し。
• 温度感: 暖色寄りで明るく元気。黄色をベースに原色を差す。

Colors

• 地はいつも黄色の星柄。白一色の地は使わない。
• 情報はすべて白カードに載せ、セクションごとに枠の色を変える（赤・水色・ピンク・緑・紫）。
• 購入につながる要素（価格・購入ボタン・商品カード枠）は赤でそろえる。
• 手順番号と見出しタブは、そのセクションの枠色と同じ色にする。
• 価格は赤の太字、説明文は暗い赤茶で温かみを出す。
• 装飾の音符・星には原色を散らしてよい。
• badge-status は文字 #FFFFFF × 背景 #14A9E6 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0F7EAB、4.57:1）を使う。
• heading-tab は文字 #FFFFFF × 背景 #1E9E3E のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1A8635、4.66:1）を使う。
• bubble-sound は文字 #FFFFFF × 背景 #1E9E3E のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1A8635、4.66:1）を使う。

Typography

• 子どもも読めるよう、漢字には小さくふりがなを付ける（ruby）。
• 手順本文は 20px 前後と大きめ。
• 装飾の見出しは白文字に色の縁取りと影を付けて立体的にする。
• 手順番号はその枠色で、太くて大きい数字にする。
• 価格は数字だけ大きくし、税込表記は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では手順を 2〜3 列のグリッドに並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 28px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面幅の約 92% で中央に置く。左右に地紋が少し見えるようにする。
• カード同士は 24〜32px あけ、その間に星柄を見せる。
• 手順は左に文章、右に商品写真の 2 分割にする。
• 手順の間は黄緑の細い線で区切る。
• 商品カードはタイトル・写真・説明・バッジ・価格・ボタンの順で中央揃えにする。

Elevation & Depth

• カードに影は付けない。太い色枠だけで区切る。
• 装飾文字には濃い色の縁取りとドロップシャドウを付ける。
• 購入ボタンにはごく薄いグラデーションと光沢感を付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜いてカード上に置く。キャラクターや部品をカードの外にはみ出させてもよい。
• セクション境界: 直線では区切らない。色枠カードの外に黄色の星柄がのぞいて区切りになる。
• カードの枠は 8〜10px の太い色線で、角は 16〜20px の角丸。
• 見出しは稲妻アイコン付きのタブで、カードの左上に重ねる。
• 吹き出しは爆発形・雲形・とがった吹き出しを使う。
• 購入ボタンは角丸 12px 前後の横長ボタン。

Components

• 購入ボタン（button-primary）: 赤地に白い太字。左にカートのアイコンを置き、幅は約 60% で中央に配置。
• 発売状況バッジ（badge-status）: 水色の小さな四角に白い太字。価格の上に置く。
• 商品カード（card-product）: 赤い太枠の白カード。タイトル・写真・説明・価格・購入ボタンを中央揃えで並べる。
• 特長ビジュアルカード（card-feature）: 水色やピンクの太枠カード。中は商品写真と吹き出しを組み合わせた一枚絵。
• タブ型の見出し（heading-tab）: 稲妻アイコン付きの斜めカットのタブ。白文字にふりがなを付け、カード左上に重ねる。
• 手順アイテム（step-item）: 色付きの大きな番号と本文を左、写真や線画を右に置き、黄緑の線で区切る。
• 効果音の吹き出し（bubble-sound）: 黄色・オレンジ・緑などの吹き出しや爆発形に、白い縁取りの擬音を入れる。
• 数をアピールする円形バッジ（badge-circle）: 紫の縁取りの円にキャラクターと大きな数字を入れ、カードの角にはみ出させる。
• 関連商品バナー（banner-related）: 濃い赤地に黒い縁取り。白と黄色の縁取り文字を 2 行で入れる。

Do's and Don'ts

Do - 地にはいつも黄色の星柄・市松を敷く。 - セクションごとに枠の色を変えて、にぎやかさを出す。 - 漢字にはふりがなを付けて、子どもにも読めるようにする。 - 擬音は吹き出しや爆発形に入れて、写真の周りに散らす。 - 価格と購入ボタンは赤でそろえ、ページの上と下の 2 か所に置く。

Don't - 暗い色の地や落ち着いた色の地にしない。 - カードを枠なしの白だけにしない。 - 細い明朝体や小さな文字で本文を書かない。 - 影の強いカードやガラス風の加工など、大人っぽい表現を入れない。 - CTA に赤以外の色を使わない。

Page Structure

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

1. ファーストビュー（商品の楽しさを一目で伝える）: 黄色の放射状背景に、立体文字のタイトルと動きのある商品写真を置く。擬音の吹き出しと音符を散らし、右上に対象年齢のバッジ、下に注意書きを置く。
2. 商品カード（上）（価格を示して購入へ誘導する）: 赤枠の白カードに、ロゴ・パッケージ写真・2 行の説明・発売中バッジ・赤い価格・購入ボタンを並べる。
3. 特長ビジュアル（一番の売りを一枚絵で見せる）: 水色枠のカードに、写真・複数の吹き出し・雲形の大見出し・円形の数バッジを組み合わせる。
4. 付属品・バリエーション（部品やデザインの種類を見せる）: ピンク枠のカードに、部品の切り抜き写真を並べ、爆発形の見出しを添える。
5. 遊び方（手順を 4 段階で説明する）: 緑枠のカードに緑のタブ見出し。番号付きの手順を写真と吹き出し付きで並べ、カードの外に注意書きを置く。
6. 電池交換の仕方（使うときの手順を補足する）: 紫枠のカードに紫のタブ見出し。クリーム色の線画イラストと番号付きの説明を 3 つ並べる。
7. 商品カード（下）（最後にもう一度購入を促す）: 上の商品カードと同じ構成で繰り返す。
8. 関連商品バナー・フッター（ほかの商品へ案内し、権利を表記する）: 濃い赤のバナーを置き、星柄の上に小さな権利表記とロゴを置く。

Imagery

• 商品は白背景で撮った切り抜き写真にし、動きを感じる角度で置く。
• 飛び出す動きには、放射線やにじむ光のエフェクトを重ねる。
• 音符（ピンク・緑・水色・赤）を写真の周りに散らす。
• 手順の補足は、クリーム色の塗りと黒線のシンプルな線画にする。
• 背景には、黄色の市松に緑・黄・白の星や稲妻を不規則に並べる。
• 動きを示す矢印はオレンジの太い矢印にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はカード幅を約 900px で中央に置き、両側に星柄を大きく見せる。
• PC の商品カードは、左に写真、右に情報とボタンの 2 カラムにする。
• PC の遊び方は 2×2、電池交換は 3 列の横並びにする。
• PC のファーストビューは横長の 1 枚絵で、写真を中央に置き、キャッチを左右に分ける。
• 特長ビジュアルは SP・PC とも 1 枚絵のまま、幅に合わせて拡大する。

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