---
version: alpha
name: Sunny Yellow Playful Toy LP
description: 濃い黄色の地に、うすい総柄アイコンを敷いた子ども向け玩具LP。クリーム色の角丸パネルに動画や遊び方を入れる。見出しは紫フチの極太ロゴ文字。写真や動画は赤枠で囲む。全体ににぎやかで元気な雰囲気。
colors:
  primary: '#F5C61D'
  background: '#FDF1C9'
  secondary: '#472868'
  accent-1: '#C12A54'
  cta: '#C12A54'
  on-cta: '#FFFFFF'
  surface: '#FFFFFF'
  dark-section: '#4A2A8A'
  accent-2: '#F7B207'
  accent-3: '#E4014B'
  text: '#2A2238'
  line: '#463662'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.2
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.3
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 10px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 50px
  panel-cream:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
  frame-red:
    rounded: '{rounded.md}'
  heading-logo:
    textColor: '{colors.secondary}'
    typography: '{typography.display}'
    height: 50px
  badge-new:
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 28px
  step-circle:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 160px
  table-mode:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.secondary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 200px
  label-status:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    height: 32px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#F5C61D` | ページ地の黄色 | 30% | 画素の実測 |
| `background` | `#FDF1C9` | パネル地のクリーム | 25% | 画素の実測 |
| `secondary` | `#472868` | 見出しフチ・本文の紫 | 6% | 画素の実測 |
| `accent-1` | `#C12A54` | 写真・動画の赤枠 | 4% | 画素の主要色に補正 |
| `cta` | `#C12A54` | 購入ボタンのピンク赤 | 0% | 画素の主要色に補正 |
| `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 |
| `surface` | `#FFFFFF` | セット内容ボックスの白 | 8% | 画素の実測 |
| `dark-section` | `#4A2A8A` | 発売中ラベルの紫 | 0% | 推定 |
| `accent-2` | `#F7B207` | パネルの影の濃い黄色 | 2% | 画素の主要色に補正 |
| `accent-3` | `#E4014B` | FV下の赤い帯 | 0% | 画素の実測 |
| `text` | `#2A2238` | 価格・小見出しの濃い文字 | 1% | 推定 |
| `line` | `#463662` | 見出し下線の紫 | 0% | 画素の主要色に補正 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション見出しのロゴ風文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.2 | 0.0em |
| `headline-md` | サブ見出し（紫フチの白文字） | 丸ゴシック | M PLUS Rounded 1c | 900 | 22px | 1.3 | 0.0em |
| `headline-sm` | パネル内の小見出し・商品名 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em |
| `body-md` | 動画タイトル・説明文（紫・太字） | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.04em |
| `note` | ※注釈・電池の情報 | ゴシック | Noto Sans JP | 400 | 13px | 1.5 | 0.0em |
| `accent` | 価格の数字 | 欧文サンセリフ | Montserrat | 700 | 28px | 1.2 | 0.02em |
| `label-button` | 購入ボタン | 丸ゴシック | M PLUS Rounded 1c | 700 | 20px | 1.0 | 0.05em |

- 見出しは画像文字にする。白か黄色の文字に紫のフチを付け、さらに白い外フチで縁取る。
- 子ども向けなので、漢字にはふりがなを振る。
- 本文は紫の太字で、行間を広めにとる。
- 感嘆符や音符で語尾をはずませる。
- 書体は画像からの推定で、フォント名は近い印象の 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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-4f30dd7a`（元 LP の URL から採番）
- **元 LP**: https://www.takaratomy.co.jp/products/mamasurprise/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。