DESIGN.md — 黄色地×紫×赤枠のポップな玩具LP（Sunny Yellow Playful Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: 黄色地・総柄アイコン・紫フチ極太文字・赤枠フレーム・クリームパネル・ふりがな付き
• 地の質感: 黄色地に、少し濃い黄色で音符・ハート・Zzzなどの線画アイコンを敷きつめる。パネルの地にも、ごく淡いアイコン柄を入れる。
• 形: 大きめの角丸パネルの下と右に濃い黄色の影を付ける。円形の写真フレーム、吹き出し、ピル型ボタンを使う。
• 温度感: 暖色が中心。紫と赤で引き締める。

Colors

• 地は黄色に統一する。そこにクリームのパネルを重ねる。
• 本文と見出しのフチは紫で統一する。
• 写真と動画は必ず赤の太枠で囲む。
• 購入ボタンだけをピンク赤のグラデーションにする。
• パネルの右下には、濃い黄色の影を付ける。

Typography

• 見出しは画像文字にする。白か黄色の文字に紫のフチを付け、さらに白い外フチで縁取る。
• 子ども向けなので、漢字にはふりがなを振る。
• 本文は紫の太字で、行間を広めにとる。
• 感嘆符や音符で語尾をはずませる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。サムネイルは4列グリッドにする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• パネルは画面端から12px内側に置く。
• パネル内の画像は左右20px内側に置く。
• セクション見出しはパネルの上端に重ねて中央に置く。
• パネルの角には、小物のイラストをはみ出させて配置する。

Elevation & Depth

• パネルには、右下へずらした濃い黄色の影を付ける（ぼかしなし）。
• ロゴ文字には立体的なドロップシャドウを付ける。
• ボタンには薄い影を付ける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 動画は角丸の赤枠付き矩形にする。遊び方の写真は黄色の太縁を付けた円形にする。
• セクション境界: FVの下に赤い帯を入れる。キャラクターが芝生に並ぶ帯で区切る。
• フレームには太い枠線を付ける。
• 吹き出しは白地に赤枠の楕円にする。
• 手順同士は曲線の矢印でつなぐ。

Components

• 購入ボタン（button-primary）: ピンク赤のグラデーションのピル型ボタン。白縁を付け、カートアイコンを入れる。
• クリームパネル（panel-cream）: 淡い柄入りのクリーム地。大きな角丸にし、黄色の影を付ける。
• 赤枠フレーム（frame-red）: 動画や写真を囲む4px程度の赤枠。
• ロゴ風見出し（heading-logo）: 極太の文字に紫フチと白フチを重ね、ふりがなを付ける。
• NEWバッジ（badge-new）: 黄色の文字に紫フチ。左右に斜線の飾りを付ける。
• 手順の円フレーム（step-circle）: 黄色縁の円形写真に赤いラベル吹き出しを付け、矢印でつなぐ。
• 比較表（table-mode）: 白地の表に紫の枠線を引き、角丸にする。見出しにはシルエットアイコンを置く。
• 発売中ラベル（label-status）: 紫地に白文字の小さな矩形ラベル。

Do's and Don'ts

Do - 黄色地にはアイコン柄を敷く。 - 見出しは紫フチの極太文字にする。 - 写真には赤枠を付ける。 - パネルの角に小物のイラストを置く。 - 漢字にふりがなを振る。

Don't - 細い明朝体や落ち着いた寒色の地にしない。 - 写真を枠なしで置かない。 - 影をぼかした繊細な表現にしない。 - CTA以外にピンク赤の面を使わない。

Page Structure

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

1. ファーストビュー（商品の世界観と驚きを伝える。）: 空と芝生の背景。ロゴ、キャラクター、驚く子どもの写真、円形バッジを置く。下に赤い帯を入れる。
2. 新着動画（動画で動きを見せる。）: クリームパネルに、NEWバッジ付きの赤枠動画と紫のタイトルを入れる。
3. 関連バナー（シリーズサイトへ誘導する。）: 白地の角丸バナー。人物とロゴを入れ、矢印を付ける。
4. 遊び方（使い方の手順を示す。）: 円形の写真をジグザグに並べて矢印でつなぎ、吹き出しで説明する。
5. 仕組みの説明（時間経過と変化を説明する。）: 紫枠の写真3枚に時間バッジを付ける。比較表を添える。
6. おしゃれ要素（付属品の楽しさを訴求する。）: 赤枠の大きな写真。吹き出しと円形バッジを重ねる。
7. キャラクター帯（区切りとかわいさの演出。）: 芝生の上にキャラクター3体を並べる。
8. 動画一覧（複数の動画をまとめて見せる。）: パネル内に紫下線の小見出しを付け、赤枠動画を縦に並べる。
9. 商品詳細・購入（セット内容・価格を示し、購入へ導く。）: メイン写真、4列のサムネイル、白いセット内容ボックス、価格、購入ボタンの順に置く。
10. フッター（シェアと権利表記。）: ロゴバナー、SNSボタン3つ、コピーライトを置く。

Imagery

• ぬいぐるみは白背景か明るい部屋で撮り、ふわふわの質感を見せる。
• 子どもは驚いた表情や笑顔で、正面に近い角度から撮る。
• 装飾はハート・リボン・眼鏡など小物の切り抜きにする。
• 背景は青空と芝生の明るい合成にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約70%幅のパネルを置き、左右は黄色の柄地にする。
• PCでは動画を2列に並べる。
• PCの商品詳細は写真とテキストの左右2カラムにする。
• PCの遊び方は手順を横に並べる。

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