--- version: alpha name: Pastel Dreamy Character Toy LP description: ピンク・クリーム・ミントのパステル地に、雲やハート、星を散らした「ゆめかわ」なキャラクター玩具 LP。太い縁取りの丸文字見出し、チェック柄のリボン帯、波形の縁がついたクリーム色カードで、遊びの特長をポイント番号ごとに並べる。 colors: primary: '#F7B1C3' background: '#FDD8E7' surface: '#FEFBDA' background-alt: '#C4F1F4' tint-1: '#FEF6B7' tint-2: '#A8DDF0' secondary: '#BF728C' accent-1: '#F0508F' text: '#6B3A3A' on-primary: '#F7F5F1' dark-section: '#34211B' on-dark: '#F7F5F1' accent-2: '#FFD45A' primary-accessible: '#DC1749' accent-1-accessible: '#D91361' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 600 lineHeight: 1.8 note: fontFamily: M PLUS Rounded 1c fontSize: 8px fontWeight: 500 lineHeight: 1.4 accent: fontFamily: Fredoka fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 10px fontWeight: 700 lineHeight: 1.2 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 14px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-label: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 22px ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 40px sub-ribbon: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 26px scallop-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 200px caption-pill: backgroundColor: '{colors.on-primary}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px character-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 560px dark-intro: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 180px speech-cloud: textColor: '{colors.tint-2}' typography: '{typography.headline-sm}' height: 60px --- # DESIGN.md — パステル虹色のゆめかわ玩具キャラ LP（Pastel Dreamy Character Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: ゆめかわ・パステル虹色・リボン帯・ドット絵・ふわふわ雲 - **地の質感**: 水彩のようなパステルのにじみに、白い雲・ドット・ハート・星を散らした柔らかな地 - **形**: 波形のフチがついた角丸カード、チェック柄のリボン帯、ハート型フレーム - **温度感**: 暖色寄りのパステル。甘く明るい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F7B1C3` | リボン帯・カードのフチに使うブランドピンク | 8% | 画素の主要色に補正 | | `background` | `#FDD8E7` | ページの地のパステルピンク | 10% | 画素の主要色に補正 | | `surface` | `#FEFBDA` | コンテンツカードの中のクリーム色 | 12% | 画素の実測 | | `background-alt` | `#C4F1F4` | セクションの地に使うミント水色 | 6% | 画素の実測 | | `tint-1` | `#FEF6B7` | カードの淡い黄色グラデーション | 7% | 画素の主要色に補正 | | `tint-2` | `#A8DDF0` | サブ見出しのリボンに使う水色 | 2% | 推定 | | `secondary` | `#BF728C` | キャラ名ラベルの縁・点線に使うくすみピンク | 5% | 画素の実測 | | `accent-1` | `#F0508F` | 見出しの強調語に使うビビッドピンク | 1% | 推定 | | `text` | `#6B3A3A` | 見出し・ラベルの文字色（濃いブラウン） | 2% | 推定 | | `on-primary` | `#F7F5F1` | リボン帯の上の白文字 | 2% | 画素の主要色に補正 | | `dark-section` | `#34211B` | 製品説明の黒い帯 | 5% | 画素の主要色に補正 | | `on-dark` | `#F7F5F1` | 黒帯上の本文 | 1% | 画素の主要色に補正 | | `accent-2` | `#FFD45A` | タイトル文字に使う黄色 | 1% | 推定 | | `primary-accessible` | `#DC1749` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D91361` | AA を満たす補正値（計算） | | 計算 | - 地はピンク・黄・ミントのパステルを水彩のようにぼかし、白い雲を重ねる - コンテンツはクリーム〜淡い黄色のカードにのせ、ピンクのフチで囲む - セクション見出しはピンクのチェック柄リボン帯に白文字 - サブ見出しは水色リボン帯に濃いブラウン文字 - 強調語だけビビッドピンクにし、見出しは白い太フチで浮かせる - 製品の説明は1か所だけ黒帯にし、虹色ロゴと白文字で引き締める - `ribbon-heading` は文字 `#F7F5F1` × 背景 `#F7B1C3` のコントラスト比が 1.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DC1749`、4.53:1）を使う。 - `caption-pill` は文字 `#F0508F` × 背景 `#F7F5F1` のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D91361`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風タイトル（黄色の文字にブラウンと白の二重フチ） | 丸ゴシック | M PLUS Rounded 1c | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | キャッチや遊びの訴求文（パステル文字に白フチ） | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.35 | 0.02em | | `headline-md` | ポイント見出しのリボン帯の文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.02em | | `headline-sm` | サブ見出しのリボン・リード文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.4 | 0.03em | | `body-md` | 黒帯の説明本文 | 明朝 | Noto Serif JP | 600 | 11px | 1.8 | 0.0em | | `note` | キャラ名ラベル・コピーライト | 丸ゴシック | M PLUS Rounded 1c | 500 | 8px | 1.4 | 0.0em | | `accent` | 番号つき「point」の欧文ラベル | 欧文サンセリフ | Fredoka | 600 | 14px | 1.0 | 0.02em | | `label-button` | 画像の下のピル型キャプション | 丸ゴシック | M PLUS Rounded 1c | 700 | 10px | 1.2 | 0.0em | - 見出しはすべて太い丸ゴシックにし、白か濃色の太いフチ文字にする - 見出しの強調語はピンク、それ以外はブラウンにして2色で見せる - 語尾に♪や〜をつけた、話しかける調子のコピーにする - 本文は最小限にする。説明文だけ明朝で落ち着かせる - キャッチは2〜3行で中央揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内はキャラ一覧を 4 列、画面例を 3〜5 列のグリッドにする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算） - 各ポイントは「番号ラベル→リボン帯の見出し→リード→カード」の順に並べる - カードは左右 4% の余白で画面幅いっぱい近くまで広げる - キャラ一覧は点線で列を区切ったグリッドにし、各キャラの下に名前ラベルを置く - ポイント内の小見出しは水色リボンにし、カードの上辺にかぶせる - 装飾（星・ハート・音符）はカードの外側と余白に散らす ## Elevation & Depth - 影はほとんど使わず、白いフチと縁取りで立体感を出す - 製品写真には淡いピンクの光彩（グロー）をつける - リボン帯は両端を折り返し、やや濃い色で奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: ゲーム画面は角丸の正方形に白いフチ。キャラは切り抜きにする - **セクション境界**: 直線では区切らず、雲とパステルのグラデーションでつなぐ。黒帯だけは直線で区切る - カードのフチはスカラップ（波形）のピンク線にする - 見出しはチェック柄で両端が切れ込んだリボン型にする - キャプションはピンク縁の白いピル型にする - ハート型のフレームで代表キャラを囲む ## Components - **ポイント番号ラベル**（`point-label`）: 白い角丸タブに欧文の「point」とピンクの丸数字を入れ、リボン帯の上に置く - **チェック柄リボン見出し**（`ribbon-heading`）: ピンクのギンガムチェック帯。両端を折り返し、白い太文字で強調語を色替えする - **水色サブリボン**（`sub-ribbon`）: 水色チェックの小さなリボンをカードの上辺にかぶせ、小見出しを入れる - **スカラップ縁カード**（`scallop-card`）: クリームから淡い黄色へのグラデーション面を、波形のピンクのフチで囲む - **ピル型キャプション**（`caption-pill`）: 画像の下に置く、ピンク縁の白いピル。中の文字はピンク - **キャラ図鑑グリッド**（`character-grid`）: ドット絵のキャラを4列に並べ、各キャラの下に小さな名前ラベルを置く。列は点線で区切る - **黒帯の製品紹介**（`dark-intro`）: 黒い地に虹色グラデーションのロゴと明朝の白文字。キラキラの光を散らす - **ふわ文字吹き出し**（`speech-cloud`）: 水色の手書き風の文字を雲や汗の記号と組み合わせて置き、状態の変化を説明する ## Do's and Don'ts **Do** - パステル3色（ピンク・黄・ミント）をぼかして地をつくる - 見出しは必ずフチ文字かリボン帯で目立たせる - 星・ハート・音符・雲を余白に散らしてにぎやかにする - キャラクターはカードの外にはみ出させて動きを出す - ポイントには番号をふって順番に読ませる **Don't** - 原色や濃いグレーを広い面に使わない - 角ばった直線の枠やシャープなゴシック体を使わない - 長い説明文を並べない - 暗い背景は製品紹介の1か所にとどめる - 写真のようなリアルな影をつけない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品のかわいさと世界観を一目で伝える）: パステルの地に、ハート型の雲とロゴ風タイトル。卵型の本体2色を並べ、周りにキャラを配し、下にリボン帯のキャッチを置く 2. **記念・コラボ告知**（周年やコラボの話題性を伝える）: ミント地にケーキや風船のイラスト。大きな数字を中心にキャラを囲むように並べる 3. **製品紹介**（シリーズと仕様の要点を説明する）: 黒帯に虹色ロゴと明朝の本文を中央揃えで置く 4. **遊びのリード**（できることを短い言葉で並べる）: 水色チェックの地に、パステルのフチ文字を3行並べ、最後に大きめのキャッチを置く 5. **ポイント1 キャラ図鑑**（集められるキャラの多さを見せる）: ハート型フレームに代表キャラを入れ、スカラップ縁カードに4列のキャラ一覧を並べる 6. **ポイント2 お世話の遊び**（遊びの種類を見せる）: 水色サブリボンで3つのカードに分け、画面例とピル型キャプションを並べる 7. **ポイント3 ゲストキャラ**（コラボキャラとの遊びを伝える）: キャラ4体をカードの上辺にはみ出させ、その下に画面例2枚を並べる 8. **ポイント4 カラバリ**（選べる2つのデザインを見せる）: 本体2色を左右に並べ、下にリボン型の名札を置く 9. **フッター**（権利表記）: パステル地の中央に小さな文字で置く ## Imagery - キャラはふんわりした塗りに、大きな瞳とほほの赤みを入れる - ゲーム画面はドット絵にし、白いフチの角丸正方形に収める - 本体は真正面の切り抜きにし、淡いピンクの光彩をつける - 背景は白い雲、ドット、ハート、星、音符をパステルで描く - 文字の周りには手描き風のキラキラを添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 750px の SP レイアウトを置き、左右にパステルのぼかし背景と雲を広げる - キャラ一覧は PC でも 4〜6 列程度にとどめる - 製品紹介の黒帯は PC では画面幅いっぱいに伸ばす - 見出しの文字サイズは PC で約 1.4 倍にする ## 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-beb655d4`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000248648/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（3/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。