--- version: alpha name: Pop Yellow Starburst Toy LP description: 黄色の市松と星形の地紋を背景に、赤・水色・ピンク・緑・紫の太い色枠で囲んだ白カードを縦に積む子ども向け玩具 LP。ふりがな付きの太い丸ゴシックと、吹き出しや爆発形の装飾で、にぎやかさと遊び方のわかりやすさを両立させる。 colors: background: '#FDCD01' primary: '#FFE000' surface: '#FFFFFF' cta: '#D71529' on-cta: '#FFFFFF' secondary: '#14A9E6' text: '#231F1D' text-body: '#591515' accent-1: '#1E9E3E' accent-2: '#8E4C9C' accent-3: '#F0A0C0' tint-1: '#FFFCD3' line: '#B5D35A' dark-section: '#CC0001' secondary-accessible: '#0F7EAB' accent-1-accessible: '#1A8635' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 500 lineHeight: 1.6 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 28px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 44px badge-status: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 32px card-product: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 760px card-feature: backgroundColor: '{colors.surface}' rounded: '{rounded.lg}' height: 330px heading-tab: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 40px step-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 260px bubble-sound: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 40px badge-circle: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 110px banner-related: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 70px --- # DESIGN.md — 黄色い星柄×色枠カードの玩具 LP（Pop Yellow Starburst Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 黄色の星柄・色枠カード・吹き出し・ふりがな・子ども向け・にぎやか - **地の質感**: 黄色の市松と、緑・黄・白の星形・稲妻形の地紋。カード内はフラットな白。 - **形**: 太い色枠の角丸カード。ギザギザの爆発形、雲形・吹き出し形のラベル、斜めにカットしたタブ見出し。 - **温度感**: 暖色寄りで明るく元気。黄色をベースに原色を差す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FDCD01` | ページ地の黄色（星柄の地紋） | 30% | 画素の実測 | | `primary` | `#FFE000` | ブランドの黄色（キャラクター・明るい星） | 12% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | カード内の白 | 38% | 画素の実測 | | `cta` | `#D71529` | 購入ボタン・商品カードの赤枠 | 6% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | | `secondary` | `#14A9E6` | 水色の枠・発売中バッジ | 3% | 推定 | | `text` | `#231F1D` | 本文・手順の文字 | 2% | 画素の実測 | | `text-body` | `#591515` | 商品説明の暗い赤茶の文字 | 1% | 画素の実測 | | `accent-1` | `#1E9E3E` | 遊び方セクションの緑枠・番号 | 3% | 推定 | | `accent-2` | `#8E4C9C` | 電池交換セクションの紫枠・番号 | 2% | 推定 | | `accent-3` | `#F0A0C0` | 装飾カードのピンク枠 | 2% | 推定 | | `tint-1` | `#FFFCD3` | 手順イラストのクリーム色 | 3% | 画素の実測 | | `line` | `#B5D35A` | 手順間の黄緑の区切り線 | 0% | 推定 | | `dark-section` | `#CC0001` | 関連商品バナーの濃い赤 | 1% | 画素の実測 | | `secondary-accessible` | `#0F7EAB` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#1A8635` | AA を満たす補正値（計算） | | 計算 | - 地はいつも黄色の星柄。白一色の地は使わない。 - 情報はすべて白カードに載せ、セクションごとに枠の色を変える（赤・水色・ピンク・緑・紫）。 - 購入につながる要素（価格・購入ボタン・商品カード枠）は赤でそろえる。 - 手順番号と見出しタブは、そのセクションの枠色と同じ色にする。 - 価格は赤の太字、説明文は暗い赤茶で温かみを出す。 - 装飾の音符・星には原色を散らしてよい。 - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風タイトル・キャッチ（画像化された立体文字） | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.0em | | `headline-lg` | 雲形バナー内の大見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 28px | 1.3 | 0.02em | | `headline-md` | タブ型のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.3 | 0.02em | | `body-lg` | 手順本文（ふりがな付き） | 丸ゴシック | M PLUS Rounded 1c | 500 | 20px | 1.6 | 0.0em | | `body-md` | 商品説明・価格の見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.8 | 0.02em | | `accent` | 価格の数字 | ゴシック | Noto Sans JP | 900 | 26px | 1.2 | 0.02em | | `note` | 注意書き・権利表記 | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.0em | | `label-button` | 購入ボタン・発売中バッジ | ゴシック | Noto Sans JP | 900 | 20px | 1.0 | 0.05em | - 子どもも読めるよう、漢字には小さくふりがなを付ける（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 ```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-d0d3fc70`（元 LP の URL から採番） - **元 LP**: https://www.takaratomy.co.jp/products/kurohige/pikachu-nigiyaka/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。