DESIGN.md — ピンク×パステルのポップなドール予約LP（Pop Pastel Collectible Doll Pre-order LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: ショッキングピンク・パステル色の地の切り替え・吹き出し見出し・黒い細線の白カード・手芸小物の装飾・丸窓写真
• 地の質感: 平塗りの地にドット柄や方眼をうっすら敷き、波線の境界と切り抜き写真でコラージュ風にする
• 形: 角丸カード・吹き出し・円形写真・ピル型ボタン・波形のセクション境界
• 温度感: 暖色寄り。セクションごとに寒色パステルを差し込む

Colors

• 地色はセクションごとに切り替える。導入はピンク、詳細は淡いピンク、製品情報は水色、販売情報はラベンダー、展示情報はサーモン
• 本文は白いカードの上に置き、カードには濃い墨色の細い枠線を付ける
• 見出しの文字色はそのセクションの地色を濃くした色にそろえる
• 黄色は「期間限定」などの短いラベルだけに使う
• 注意文や締切の情報は赤文字で目立たせる
• 主ボタンはピンク、PDFや送料など補助のボタンは黒灰にする
• button-primary は文字 #FEFEFE × 背景 #F35CA5 のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E31176、4.52:1）を使う。
• speech-heading は文字 #F458A2 × 背景 #FDFDFD のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E10F73、4.57:1）を使う。
• date-badge は文字 #FEFEFE × 背景 #F458A2 のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E10F73、4.51:1）を使う。
• spec-tag は文字 #80CCFE × 背景 #FDFDFD のコントラスト比が 1.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0279C7、4.53:1）を使う。

Typography

• 見出しは太い丸ゴシックにし、上に小さい補足文と波線を添える
• セクション見出しの左にアイコン（トルソーや値札など）を置く
• 色地の上の紹介文は白文字で中央そろえにし、短く改行する
• 英字の見出しは白抜きや半透明で背景になじませる
• 表のラベルは角丸の枠付きタグにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ディテール写真だけ 2 列の円形グリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは画面の端から約 10px あけたほぼ全幅で置く
• 目次は大きいバナーを縦に 3 つ並べ、それぞれの下に丸い矢印を重ねる
• 製品情報は左にラベルタグ、右に値を置き、水色の線で区切る
• 販売情報は 2 つのタブで切り替える
• 最後にサイズがばらばらの写真を詰めたコラージュを置く

Elevation & Depth

• カードは影ではなく 1.5px の墨色の枠線で立たせる
• 切り抜き写真は白いフチを付けてカードの外に少しはみ出させる
• ボタンにはごく弱い影を付けるか、影なしにする

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物の切り抜き、円形、角丸四角を混ぜて使う
• セクション境界: 波形のカーブや、山形のスカラップ状の境界
• 見出しは尾の付いた角丸の吹き出しにする
• ディテール写真は円形にし、右下に虫眼鏡アイコンを重ねる
• ボタンはピル型にし、右端に丸い矢印アイコンを付ける
• 日付バッジは円形のスタンプ風にする

Components

• 主CTAボタン（button-primary）: ピンクのピル型。右端に黒丸の矢印アイコンを付ける
• 補助ボタン（button-sub）: 黒灰のピル型。PDFや送料案内に使う
• 吹き出し見出し（speech-heading）: 白い角丸の吹き出しに色の太い枠線を付け、小さい補足文と大きい見出しを入れる
• 目次バナー（nav-banner）: 色地の角丸パネルに人物の切り抜きと吹き出しを置き、下に円形の矢印ボタンを重ねる
• 日付スタンプ（date-badge）: 濃いピンクの円に白文字で発売日と時刻を入れる
• 仕様ラベル（spec-tag）: 白地に色の枠線を付けた小さな角丸タグ。表の項目名に使う
• 期間限定ラベル（limited-label）: 黄色地に濃い文字の角丸ラベル
• 情報カード（info-card）: 白地に墨色の細い枠線を付けた角丸カード。店舗カードは上部にサーモン色の帯を付ける
• ディテール丸窓（zoom-thumb）: 円形の写真に虫眼鏡アイコンを重ね、下にピンクの小さいキャプションを入れる

Do's and Don'ts

Do - セクションごとにパステル地を変えて、どこの情報かを色で区別する - 糸巻き・リボン・ボタン・ハサミなど手芸小物の切り抜きを散らす - 見出しには小さい補足文と波線を必ず添える - カードは白地＋墨色の細い枠線＋角丸でそろえる - 日付と「期間限定」は目立つバッジにする

Don't - くすんだ色や暗い地をメインに使わない - 角が直角のカードや四角いボタンにしない - 本文を色地の上に長く書きすぎない（白いカードに入れる） - 強い影を付けた立体的な表現にしない - 明朝体を本文に使わない（明朝はキャラクター名だけ）

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品の存在感と受注の開始日を伝える）: 全面の人物写真の上部にロゴ、下部に明朝のキャラクター名と白いラベル、右に円形の日付スタンプを置く
2. リリース告知（商品の概要と魅力を伝える）: スカラップ境界のあとをピンク地にし、傾けた吹き出し見出しと白文字の中央そろえの文を置く。下に角丸写真を互い違いに並べる
3. 目次（3 つの情報ブロックへ誘導する）: 白い枠付きカードの中に、ピンク・水色・紫のバナーと矢印ボタンを縦に並べる
4. ディテール（衣装や各部のこだわりを見せる）: 英字の白抜き見出しと縦線をタイムライン風に置き、白カードに円形写真を 2 列×5 段で並べる
5. ボディ解説（特別な仕様を説明する）: 大きな角丸写真の下に白カードを置き、アイコン付きの見出し・説明文・ピンクのボタンを入れる
6. 取り扱いの注意（注意事項と説明書への導線）: 白カードに※付きの箇条書きと黒灰のPDFボタンを置き、下を波形の境界にする
7. 製品情報（セット内容と価格などの仕様を伝える）: 水色地に白カードを置き、タグ＋値の表を水色の線で区切る。右上に人物の切り抜きをはみ出させる
8. 販売情報（受注期間・支払い方法・発送時期を伝える）: ラベンダー地に人物の切り抜きと期間限定ラベルを置き、2 つのタブ付きカードで受注方法を切り替える
9. 注意事項（送料・返品などのルール）: 赤いアイコン付きの小見出しと箇条書きを並べ、黒灰の小ボタンを置く
10. 展示情報（店舗で実物を見られることを伝える）: サーモン地にのれん風の見出しを置き、帯付きの店舗カードを 2 枚並べる。カードには写真、バージョンのバッジ、期間、店舗情報を入れる
11. 写真コラージュ（多彩なポーズで世界観を補強する）: 角丸写真をサイズを変えてすき間なく敷き詰める
12. 最終CTA・フッター（注文へ誘導する）: ピンク地の白カードに名前、日付スタンプ、期間限定ラベル、大きなピンクのボタンを置き、その下にSNSアイコンと権利表記を入れる

Imagery

• 明るく浅い被写界深度で、ボケた背景の前に被写体を置いて撮る
• 全身ポーズの人物は白いフチ付きで切り抜き、カードからはみ出させる
• 部位のアップは寄りで撮り、円形に切り抜く
• リボン・糸巻き・ハートの風船・旗のガーランドなどの小物を切り抜いて散らす
• 背景にドット柄や方眼のテクスチャを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではファーストビューを横長にし、名前と日付スタンプを写真の中央下に置く
• PC では目次の 3 バナーを横に並べる
• PC ではディテール写真を 3 列にし、右側に全身の切り抜きを大きく置く
• PC では大きな英字（例: 〇〇 DETAILS）を背景に縦書きで配置する
• PC では右上に固定の目次と、追従する注文ボタンを置く
• PC では店舗カードを 2 列にし、販売情報は左に切り抜き写真・右に本文の 2 カラムにする

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 行書くと起動時に読み込まれる。