--- version: alpha name: Pastel Magical Girl Collectible Toy LP description: 生成り地に金の額縁装飾と花のイラストを添え、マゼンタの筆記体見出しで特長を「Point」順に見せる、大人向け復刻玩具の LP。パステルの光彩背景と吹き出しで、作品の世界観とかわいさを前に出す。 colors: primary: '#C3379E' background: '#FFFFF5' background-alt: '#FEFEFE' accent-1: '#C1A66F' secondary: '#E5AFB4' tint-1: '#FDE4EB' tint-2: '#C7EFF7' accent-2: '#3D7FD6' text: '#3A3030' text-muted: '#6E6464' surface: '#FFFEF2' line: '#D5D3CC' secondary-accessible: '#FCF6F7' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 26px fontWeight: 700 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em headline-sm: fontFamily: Zen Maru Gothic fontSize: 11px fontWeight: 700 lineHeight: 1.4 note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ornate-frame: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 160px ribbon-label: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 28px point-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 50px speech-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 50px callout-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 60px set-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 60px scene-thumb: height: 80px --- # DESIGN.md — 生成り×マゼンタの魔法少女玩具 LP（Pastel Magical Girl Collectible Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい - **キーワード**: パステル・金の額縁・花・きらめき・筆記体・復刻玩具 - **地の質感**: 生成りの紙のような地に金の唐草罫線。キラキラした光のぼかしを背景に重ねる - **形**: 角の装飾つき額縁、リボン帯、丸い吹き出し - **温度感**: 暖かく甘い。ピンクと水色の対比 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C3379E` | 見出し筆記体・ブランド色マゼンタ | 5% | 画素の主要色に補正 | | `background` | `#FFFFF5` | 生成りのページ地 | 40% | 画素の実測 | | `background-alt` | `#FEFEFE` | 額縁内のクリーム地 | 8% | 画素の実測 | | `accent-1` | `#C1A66F` | 金の額縁・飾り罫 | 2% | 画素の実測 | | `secondary` | `#E5AFB4` | リボン帯ピンク | 3% | 画素の主要色に補正 | | `tint-1` | `#FDE4EB` | 淡いピンクの光彩・吹き出し | 8% | 画素の実測 | | `tint-2` | `#C7EFF7` | 淡い水色の光彩・吹き出し | 6% | 画素の主要色に補正 | | `accent-2` | `#3D7FD6` | 水色キャラクター文字 | 1% | 推定 | | `text` | `#3A3030` | 本文・見出し文字 | 3% | 推定 | | `text-muted` | `#6E6464` | 注釈文字 | 1% | 推定 | | `surface` | `#FFFEF2` | セット内容ボックス | 4% | 画素の実測 | | `line` | `#D5D3CC` | ボックス細枠 | 1% | 画素の主要色に補正 | | `secondary-accessible` | `#FCF6F7` | AA を満たす補正値（計算） | | 計算 | - 地は生成りで統一し、白すぎる白は使わない - 見出しの欧文と Point 番号はマゼンタで強調する - 区切りと額縁は金色の細い装飾線にする - ピンクと水色を左右の 2 人のキャラ色として対で使う - 吹き出しの見出し色はキャラ色、本文は濃い文字 - `ribbon-label` は文字 `#C3379E` × 背景 `#E5AFB4` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#FCF6F7`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名ロゴ風の装飾見出し | 装飾・ディスプレイ | Dela Gothic One | 700 | 44px | 1.1 | 0.02em | | `accent` | シリーズ名・Point の欧文筆記体 | 欧文スクリプト | Playfair Display | 700 | 26px | 1.2 | 0.0em | | `headline-lg` | Point の見出し | 明朝 | Shippori Mincho | 700 | 17px | 1.4 | 0.05em | | `body-md` | 説明文（中央揃え） | 明朝 | Noto Serif JP | 500 | 10px | 1.8 | 0.03em | | `headline-sm` | 吹き出し内のセリフ | 丸ゴシック | Zen Maru Gothic | 700 | 11px | 1.4 | 0.0em | | `note` | 注釈・権利表記 | ゴシック | Noto Sans JP | 400 | 7px | 1.5 | 0.0em | - 本文は明朝で中央揃えにし、上品な読み味にする - 欧文の筆記体と和文の明朝を 1 行に並べて見出しにする - Point 番号は斜体の筆記体でマゼンタにする - 吹き出しのセリフだけ丸ゴシックにして口語らしさを出す - 注釈は写真の右下に小さく入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と吹き出しは左右に散らして配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 全体を左右の金の縦罫で囲み、1 枚の額縁に見せる - セクションの頭には金の飾り罫と Point 見出しを置く - 商品写真は中央に大きく、場面写真は左右の角に小さく置く - 説明文は 2〜3 行で短くまとめる ## Elevation & Depth - 影はほぼ使わず、平面の装飾で見せる - 吹き出しにはキャラ色の外側グローを薄くかける - 商品写真の背景は光のぼかしで浮き立たせる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜き。場面写真は角丸なしの長方形に白い細枠 - **セクション境界**: 金の唐草飾り罫を中央に置く。直線で区切る - 額縁の四隅は唐草装飾にする - 弾数ラベルは両端が燕尾形のリボン帯にする - 吹き出しは角丸の長方形にして、上に見出しラベルを重ねる ## Components - **金の額縁ボックス**（`ornate-frame`）: 四隅に装飾がある金枠の中に、シリーズ説明を中央揃えで置く - **リボン帯ラベル**（`ribbon-label`）: 燕尾形の端を持つピンクの帯。弾数と商品名を明朝のマゼンタ文字で入れる - **Point 見出し**（`point-heading`）: 上に金の飾り罫を置き、筆記体の Point 番号と明朝の見出しを並べる - **キャラセリフ吹き出し**（`speech-bubble`）: キャラ色の淡い地にグローをかけ、上の見出しラベルにキャラ名を入れる - **引き出し線つき注記**（`callout-circle`）: 白い角丸の枠に短い特長を書き、細い線で商品の部分を指す - **セット内容ボックス**（`set-box`）: 細枠の中に、隅付き括弧の見出しと ◆ 付きの内容を 1 行で並べる - **場面カット**（`scene-thumb`）: アニメの場面を小さな長方形にして、商品写真の角に重ねる ## Do's and Don'ts **Do** - 生成り地と金の装飾で、全体を額縁に入れたように見せる - 特長は Point 1〜4 の順に、見出し・短文・写真の 3 段で並べる - ピンクと水色のキャラ色を左右対称に配置する - 光彩とキラキラ装飾を商品の周りに薄く重ねる - ページの最下部に花のイラストと権利表記を置く **Don't** - 黒や原色の強いベタ面は使わない - 太いゴシックで本文を組まない - 角張った無装飾の枠線は使わない - 見出し装飾を金以外の色にしない - 写真に濃い影を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と商品を一目で伝える）: パステルの光彩と花びらを背景に、キャラ 2 人と大きな商品を置き、下に装飾ロゴを重ねる 2. **シリーズ紹介**（復刻シリーズの位置づけを説明する）: 金の額縁に筆記体見出しと明朝の 3 行説明を入れ、下にリボン帯ラベルを置く 3. **イメージ写真**（実物の質感を見せる）: 淡いパステル布と小花を背景に、商品を 2 本並べて撮る。全幅で見せる 4. **特長 1（デザイン）**（本体の再現度を伝える）: 花のイラスト付き Point 見出し、手持ちの写真、引き出し線の注記、発光の比較を並べる 5. **セット内容**（同梱物を明示する）: 細枠のボックスに ◆ の箇条書きと注釈を入れる 6. **特長 2（変身演出）**（音と演出の再現を伝える）: 光彩の背景に商品 2 本を置き、場面カットと手書き風のセリフを散らす 7. **特長 3（音声収録）**（収録の数を訴求する）: 中央に商品を置き、左右にキャラ色の吹き出しを 3 つずつ並べる 8. **特長 4（主題歌）**（楽曲の収録を伝える）: 大きい明朝の見出しと場面カットを 1 枚置き、花の装飾と権利表記で締める ## Imagery - 商品はパステルの布や小花と一緒に、柔らかい自然光で撮る - 背景はピンクと水色のボケた光彩、レンズフレア、キラキラ粒子 - 水彩風の花（ばら・デイジー・紫陽花）を見出しや四隅に添える - 金の唐草線の装飾を罫線と額縁に使う - アニメの場面カットを小さな長方形で添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では中央 600〜750px の 1 カラムを保つ - 額縁の外側は生成り地か、淡いパステルの光彩背景で埋める - PC では吹き出しと写真の配置に余白を広く取り、左右対称を保つ - 文字サイズは PC で 1.2〜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-9dc8fb58`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000249994/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（5/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。