DESIGN.md — パステル虹色のゆめかわ玩具キャラ LP（Pastel Dreamy Character Toy LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: ゆめかわ・パステル虹色・リボン帯・ドット絵・ふわふわ雲
• 地の質感: 水彩のようなパステルのにじみに、白い雲・ドット・ハート・星を散らした柔らかな地
• 形: 波形のフチがついた角丸カード、チェック柄のリボン帯、ハート型フレーム
• 温度感: 暖色寄りのパステル。甘く明るい

Colors

• 地はピンク・黄・ミントのパステルを水彩のようにぼかし、白い雲を重ねる
• コンテンツはクリーム〜淡い黄色のカードにのせ、ピンクのフチで囲む
• セクション見出しはピンクのチェック柄リボン帯に白文字
• サブ見出しは水色リボン帯に濃いブラウン文字
• 強調語だけビビッドピンクにし、見出しは白い太フチで浮かせる
• 製品の説明は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

• 見出しはすべて太い丸ゴシックにし、白か濃色の太いフチ文字にする
• 見出しの強調語はピンク、それ以外はブラウンにして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

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

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