DESIGN.md — 白×ピンクの紙吹雪アイドルカードアプリ LP（Pastel Confetti Idol Digital Card App LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: 紙吹雪・パステル・推し活・デジタルトレカ・端末モックアップ・ふわっとした光
• 地の質感: 白地に、ぼかした虹色の光の玉と、幾何学の紙吹雪（三角・丸・波線）をのせる
• 形: 角丸のカード写真と端末フレーム。CTA はピル型ボタン
• 温度感: 明るく甘い暖色寄り

Colors

• 地はほぼ白。セクションを区切る色の帯は入れない
• 見出しはピンク（primary）だけで目立たせる
• 濃いピンクから白へのグラデーションの帯は最後の CTA だけに使う
• 紫・水色・黄色・ベージュは紙吹雪とぼかした光の玉だけに使う
• 無料をうたうバッジだけはターコイズで目立たせる
• 本文はチャコールグレーで小さく控えめに
• badge-free は文字 #FFF2FA × 背景 #54BDC3 のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2D7B7F、4.55:1）を使う。
• cta-band は文字 #FFF2FA × 背景 #FF8EAD のコントラスト比が 1.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E0003D、4.56:1）を使う。

Typography

• 見出しはピンクの太字で 2 行に収め、中央揃えにする
• 見出しの後ろに、淡い虹色の線で縁取った筆記体の英単語を透かしで重ねる
• 本文は 11px 前後で小さくし、2 行で言い切る
• 語尾に「！」を付けて元気なトーンにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央揃え。PC は画像と文章を左右に交互に並べる
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 各特長は「ビジュアル → ピンクの見出し → 短い説明」の順で縦に積む
• カードを横に並べた帯は画面の端まで広げ、斜めに配置する
• 端末モックアップをカードの帯に重ねて奥行きを出す
• 最後の CTA 帯は角丸の大きなブロックにし、左右に少し余白を残す

Elevation & Depth

• 端末モックアップには、柔らかく大きな落ち影を付ける
• カード写真には薄い影を付けて、重ねたときの立体感を出す
• CTA ボタンには、内側の光沢と下向きの影でぷっくりした質感を出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: トレカの比率（縦長）の角丸長方形。少し回転させて扇形や斜めの帯に並べる
• セクション境界: 区切り線は使わない。白い余白とぼかした光の玉で切り替える
• バッジは不揃いな円形にし、端末に重ねる
• 紙吹雪は三角・丸・四角・波線の線画にする
• ボタンは画面幅いっぱいのピル型にする

Components

• 紙吹雪のファーストビュー（hero-confetti）: 白地にパステルの幾何学紙吹雪を散らし、中央に傾けた端末モックアップを置く
• 無料バッジ（badge-free）: ターコイズの不揃いな円に、白い太字を 3 行で入れて端末に重ねる
• グループのロゴ帯（logo-marquee）: 白黒のロゴを横一列に流す。端で途切れてもよい
• カードの扇形配置（card-fan）: 縦長のカード写真 7〜8 枚を、2 段で少しずつ傾けて重ねる
• 透かし欧文付きの見出し（heading-script-ghost）: 淡い虹色の筆記体を背後に置き、手前にピンクの 2 行見出しを重ねる
• グラデーションの CTA 帯（cta-band）: 上の濃いピンクから下の白へのグラデーション。紙吹雪とカード写真を入れ、白い大見出しを置く
• 主 CTA ボタン（button-primary）: 淡いピンクで光沢のあるピル型。文字は濃い色の太字
• ログインのテキストリンク（link-login）: ボタンの下に置く、下線付きの小さなグレーの文字

Do's and Don'ts

Do - 白地を広く取り、ピンクは見出しと CTA に集中させる - 端末モックアップとカード写真を主役にして、文章は短くする - 背景に虹色のぼかした光の玉を画面端にのぞかせる - 見出しの背後には必ず欧文の透かしを入れる - CTA は最後にまとめ、ボタンの下にログインリンクを添える

Don't - 濃い色や黒をセクションの地に使わない - 見出しをピンク以外の色にしない - 四角く角ばったボタンにしない - 本文を長くしたり、左揃えの段落にしない（SP） - 紙吹雪を写真やテキストに重ねて読みにくくしない

Page Structure

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

1. ファーストビュー（アプリの存在と無料であることを伝える）: 紙吹雪の上に端末モックアップと無料バッジを置き、下にロゴ風のタイトルを入れる
2. 参加グループのロゴ帯（対象の幅広さを示す）: 白黒のロゴを横一列に並べ、左右は画面端で切る
3. 特長 1：限定カード（コンテンツの魅力を見せる）: カード写真を扇形に重ね、ピンクの見出しと 2 行の説明を添える
4. 特長 2：コレクション（集める楽しさを伝える）: 斜めのカード帯に端末を重ね、透かし欧文付きの見出しを置く
5. 特長 3：プロフィール作成（集めたカードの使い道を見せる）: 下に向かってフェードする端末画面と、透かし欧文付きの見出し
6. CTA（無料登録へ導く）: ピンクのグラデーション帯に白い見出しとカード写真を入れ、ピル型ボタンとログインリンクを置く
7. フッター（権利表記）: 白地に小さなコピーライトを中央揃えで

Imagery

• 人物写真はパステルの背景で、明るく柔らかい光で撮った正面のバストアップ
• カードは、チェックやドットの淡い柄を背景にし、筆記体のサインを重ねる
• 端末は白いフレームのスマホを 3D 風に傾けたモックアップ
• 紙吹雪は、紫・ピンク・水色・黄・ベージュの線画の図形を白地に散らす
• 画面の端に虹色のぼかした光の玉を半分だけのぞかせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は、タイトルを左・端末を右に置いた 2 カラムのファーストビューにする
• PC の特長は、画像と文章を左右に交互に並べ、文章は中央寄りにする
• PC の CTA 帯は横長の角丸ブロックにし、文章とボタンを左・カード写真を右に置く
• カード帯は PC でも画面の端まで広げる

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