--- version: alpha name: Pastel Confetti Idol Digital Card App LP description: 白い地にパステルの紙吹雪と、ぼかしたカラーの光をちりばめたアイドル向けデジタルトレカアプリの LP。端末モックアップとカード写真が主役。ピンクの見出しと、ピンクのグラデーションの CTA 帯で無料登録へ導く。 colors: background: '#FEFEFE' primary: '#F0628E' secondary: '#FF8EAD' tint-1: '#FFCDDC' tint-2: '#FEF3F5' cta: '#FEA2BD' on-cta: '#3A2A30' on-primary: '#FFF2FA' text-body: '#444444' accent-1: '#54BDC3' accent-2: '#C77DE0' accent-3: '#EBD3CB' text-muted: '#555555' accent-1-accessible: '#2D7B7F' secondary-accessible: '#E0003D' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Pacifico fontSize: 44px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' hero-confetti: backgroundColor: '{colors.background}' height: 250px badge-free: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 60px logo-marquee: backgroundColor: '{colors.background}' height: 40px card-fan: rounded: '{rounded.md}' height: 200px heading-script-ghost: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 70px cta-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 260px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px link-login: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 16px --- # DESIGN.md — 白×ピンクの紙吹雪アイドルカードアプリ LP（Pastel Confetti Idol Digital Card App LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: 紙吹雪・パステル・推し活・デジタルトレカ・端末モックアップ・ふわっとした光 - **地の質感**: 白地に、ぼかした虹色の光の玉と、幾何学の紙吹雪（三角・丸・波線）をのせる - **形**: 角丸のカード写真と端末フレーム。CTA はピル型ボタン - **温度感**: 明るく甘い暖色寄り ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEFE` | ページの地色 | 58% | 画素の実測 | | `primary` | `#F0628E` | 見出し文字・ロゴのピンク | 3% | 推定 | | `secondary` | `#FF8EAD` | CTA 帯の上部の濃いピンク | 5% | 画素の主要色に補正 | | `tint-1` | `#FFCDDC` | CTA 帯の中間ピンク | 3% | 画素の実測 | | `tint-2` | `#FEF3F5` | CTA 帯下部の淡いピンク | 3% | 画素の実測 | | `cta` | `#FEA2BD` | 主 CTA ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#3A2A30` | CTA ボタン上の文字 | 0% | 推定 | | `on-primary` | `#FFF2FA` | ピンク帯の上の白い見出し | 0% | 画素の実測 | | `text-body` | `#444444` | 本文の文字 | 1% | 推定 | | `accent-1` | `#54BDC3` | 無料バッジのターコイズ | 0% | 画素の実測 | | `accent-2` | `#C77DE0` | 紙吹雪の紫 | 0% | 推定 | | `accent-3` | `#EBD3CB` | 紙吹雪のベージュ | 1% | 画素の実測 | | `text-muted` | `#555555` | ログインリンク・コピーライト | 0% | 推定 | | `accent-1-accessible` | `#2D7B7F` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#E0003D` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ白。セクションを区切る色の帯は入れない - 見出しはピンク（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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風のタイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.1 | 0.0em | | `headline-lg` | CTA 帯の白い大見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-md` | 特長ごとのピンクの 2 行見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `body-md` | 特長の説明文（中央揃えで 2 行） | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `accent` | 見出しの背後に置く欧文の透かし文字 | 欧文スクリプト | Pacifico | 400 | 44px | 1.0 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.02em | | `note` | ログインリンク・コピーライト | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | - 見出しはピンクの太字で 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 ```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-80d93dab`（元 LP の URL から採番） - **元 LP**: https://www.kl-tc.sukisuki-shop.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。