DESIGN.md — 生成り×マゼンタの魔法少女玩具 LP（Pastel Magical Girl Collectible Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい
• キーワード: パステル・金の額縁・花・きらめき・筆記体・復刻玩具
• 地の質感: 生成りの紙のような地に金の唐草罫線。キラキラした光のぼかしを背景に重ねる
• 形: 角の装飾つき額縁、リボン帯、丸い吹き出し
• 温度感: 暖かく甘い。ピンクと水色の対比

Colors

• 地は生成りで統一し、白すぎる白は使わない
• 見出しの欧文と Point 番号はマゼンタで強調する
• 区切りと額縁は金色の細い装飾線にする
• ピンクと水色を左右の 2 人のキャラ色として対で使う
• 吹き出しの見出し色はキャラ色、本文は濃い文字
• ribbon-label は文字 #C3379E × 背景 #E5AFB4 のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#FCF6F7、4.51:1）を使う。

Typography

• 本文は明朝で中央揃えにし、上品な読み味にする
• 欧文の筆記体と和文の明朝を 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

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

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