--- version: alpha name: Pastel Dreamy Character App Subscription LP description: 夜空のファーストビューから、水色・ピンク・ラベンダーのパステル地へつながる構成。白い角丸カードと雲形の見出しタブで特典を 3 つ並べる。光沢のある赤ピンクのピル型 CTA を何度も置く、かわいい系の月額アプリ訴求 LP。 colors: primary: '#F66896' cta: '#D74366' on-cta: '#FFFFFF' accent-1: '#FDF108' background: '#FEFEFE' background-alt: '#C6E7FF' tint-1: '#F5CEEB' tint-2: '#BDBEF6' dark-section: '#142145' secondary: '#686BA1' accent-2: '#B28248' marker: '#FFF06A' surface: '#ECECEC' text: '#3C3C3C' accent-3: '#FD82A4' cta-accessible: '#D53B5F' primary-accessible: '#E80E54' accent-3-accessible: '#EA0443' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 800 lineHeight: 1.25 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.03em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Nunito fontSize: 22px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px button-pink: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 76px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 52px cloud-tab-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 900px note-box: backgroundColor: '{colors.surface}' typography: '{typography.note}' height: 60px service-band: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 52px accordion: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px extra-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 130px --- # DESIGN.md — パステル夢かわキャラクターアプリ LP（Pastel Dreamy Character App Subscription LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: パステル・夢かわ・キラキラ・雲形タブ・光沢ボタン・キャラクター - **地の質感**: シャボン玉の光、星のきらめき、グラデーションの空。ボタンはツヤのあるジェル風 - **形**: 大きな角丸カード、雲形の見出しタブ、ピル型ボタン、セクションの頭は上向きのアーチ - **温度感**: 甘く明るい。ピンクと水色で温かさと爽やかさを両立する ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F66896` | 見出し文字・強調ピンク | 3% | 画素の実測 | | `cta` | `#D74366` | 主 CTA の赤ピンク | 2% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FDF108` | CTA 内の強調数字（黄） | 0% | 画素の実測 | | `background` | `#FEFEFE` | カードと白地 | 31% | 画素の実測 | | `background-alt` | `#C6E7FF` | 特長セクションの水色地 | 10% | 画素の実測 | | `tint-1` | `#F5CEEB` | 追加サービスのピンク地 | 9% | 画素の実測 | | `tint-2` | `#BDBEF6` | ラベンダーのグラデーション地 | 5% | 画素の実測 | | `dark-section` | `#142145` | FV の夜空 | 4% | 画素の実測 | | `secondary` | `#686BA1` | サブ文字・ログインボタンの紫青 | 2% | 画素の実測 | | `accent-2` | `#B28248` | 見出し・アーチ縁のゴールド | 1% | 画素の実測 | | `marker` | `#FFF06A` | 黄色マーカー | 0% | 推定 | | `surface` | `#ECECEC` | 注釈ボックスのグレー | 2% | 画素の実測 | | `text` | `#3C3C3C` | 黒の本文・見出し | 1% | 推定 | | `accent-3` | `#FD82A4` | サービス帯のピンク | 2% | 画素の実測 | | `cta-accessible` | `#D53B5F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E80E54` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#EA0443` | AA を満たす補正値（計算） | | 計算 | - 地の色はセクションごとに水色、ピンク、ラベンダーのパステルで切り替える - 内容は白い角丸カードに載せ、地のパステルと分ける - 見出しはピンク、補足見出しは紫青、大見出しはゴールドの立体文字にする - 主 CTA は赤ピンクの光沢ボタンに白文字。数字だけ黄色で目立たせる - 黒は FV の夜空と、ページ末尾の説明セクションだけに使う - 注釈はグレーの面に入れ、小さな文字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#D74366` のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D53B5F`、4.55:1）を使う。 - `button-pink` は文字 `#FFFFFF` × 背景 `#F66896` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E80E54`、4.54:1）を使う。 - `cloud-tab-card` は文字 `#F66896` × 背景 `#FEFEFE` のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E80E54`、4.5:1）を使う。 - `service-band` は文字 `#FFFFFF` × 背景 `#FD82A4` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#EA0443`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し（ゴールドの立体文字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 40px | 1.25 | 0.05em | | `headline-lg` | ポイントごとの見出し（ピンク） | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.35 | 0.03em | | `headline-md` | 補足見出し・説明のキャッチ | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.5 | 0.02em | | `accent` | point 番号の英字ラベル | 欧文サンセリフ | Nunito | 900 | 22px | 1.1 | 0.02em | | `label-button` | CTA ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.2 | 0.05em | | `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.02em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | - 見出しはすべて太い丸ゴシックで中央揃えにする - 語尾に「♪」や「！」を付けて弾んだ調子を出す - 大見出しにはゴールドのグラデーションと白フチを付ける - 補足見出しは「＼ ／」で挟んで強調する - 数字は一段大きくし、色を変える - 注釈は 11px 前後で左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。スタンプ画像は 2〜3 列のグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードの左右に 16px ほどパステル地をのぞかせる - ポイントのカードは雲形タブと一緒に縦に積む - CTA の直下に注釈ボックスを必ず置く - 画像は中央揃えにし、カード幅いっぱいに置く - セクション間は 40〜60px 空ける ## Elevation & Depth - CTA ボタンは下側に濃い影を付け、上部にハイライトを入れて立体的なジェル風にする - 白カードは影なしか、ごく薄い影にとどめる - キャラクター画像は柔らかい落ち影でなじませる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: スタンプは円形か角丸で切り抜く。ゲーム画面は四角のまま置く - **セクション境界**: 上向きのアーチ曲線にゴールドの細い縁取りを付ける - カードの頭には雲形のタブを付け、point 番号を入れる - ボタンはすべてピル型にする - サービス名の帯は左にアプリアイコンを重ねた横長の帯にする - 直角の区切りは使わず、曲線でつなぐ ## Components - **光沢 CTA ボタン**（`button-primary`）: 赤ピンクのジェル風ピル型ボタン。右端に指差しアイコン、数字は黄色にする - **申込ボタン（バッジ付き）**（`button-pink`）: ピンクのグラデーションのピル型ボタン。上辺にゴールドの小さなバッジを重ねる - **ログインボタン**（`button-secondary`）: 紫青のグラデーションのピル型ボタン。既契約者向けに使う - **雲形タブ付きポイントカード**（`cloud-tab-card`）: 白い角丸カードの上に雲形のタブを付け、英字ラベルと番号をピンクで入れる。横に虹の装飾を添える - **注釈ボックス**（`note-box`）: グレーの面に入れた※書き。CTA の直下に置く - **サービス名の帯**（`service-band`）: ピンクの横帯。左にアプリアイコンを重ね、白文字でサービス名を入れる - **開閉ボタン**（`accordion`）: 白いピル型のバー。中央に文言と下向きの矢印を置く - **「さらに」特典ボックス**（`extra-box`）: 赤い枠線の角丸ボックス。上に赤いリボン型の見出しを付け、特典を黄色マーカーで強調する ## Do's and Don'ts **Do** - パステルのグラデーション地に、星やシャボン玉のきらめきを散らす - CTA はページの冒頭、中盤、末尾の 3 回以上置き、毎回注釈を添える - 特典は番号付きのカードで 1 つずつ見せる - キャラクターを大きく配置し、カードの端からはみ出させてもよい - 既契約者向けの導線は別の色のボタンで分ける **Don't** - 濃い原色の地を広く使わない - 角張ったボタンや直線的な区切りを使わない - 明朝体や細い書体を見出しに使わない - 注釈を省いたり、CTA から離して置いたりしない - 写真を暗く無彩色に加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの世界観と、無料で始められることを伝える）: 夜空からラベンダーへのグラデーション。ロゴ、施設写真、3D キャラクターを重ね、光沢 CTA、注釈、既契約者リンク、開閉ボタンを続ける 2. **ポイントの導入**（特典の数を予告する）: アーチ形の水色地にゴールドの立体大見出しを置き、きらめきを散らす 3. **特長1：クーポン**（契約者限定の特典を見せる）: 雲形タブ付きの白カードにバナーを 2 つ並べ、申込ボタン、注釈、ログインボタン、※書きを続ける 4. **特長2：ゲーム**（ポイントが当たる遊びを訴求する）: ゲーム画面の図、「当たり」の吹き出しバッジ、スタンプカードのイラストを縦に並べる 5. **特長3：スタンプ**（限定スタンプの魅力を伝える）: 円形や角丸のスタンプ画像をランダムなグリッドに配置する 6. **追加サービス紹介**（関連サービスを 2 つ紹介する）: ピンク地にサービス名の帯、ゲーム画面、キャッチを置き、白カードに 3 列のスタンプグリッドを入れる 7. **CTA**（申込を促す）: 光沢 CTA と注釈ボックスを置く 8. **締めのビジュアル**（世界観で余韻を残す）: ラベンダーのグラデーションに白文字のキャッチを置き、キャラクターを並べる。下端はアーチで切る 9. **サービス説明**（サービス全体の内容を説明する）: 白地にロゴ見出しを置き、端末画面のモック、「さらに」特典ボックス、フラットな赤い CTA、注釈を続ける 10. **フッター**（問い合わせ先と著作権を示す）: グレー地にグレー枠の角丸ボタンと、コピーライトを置く ## Imagery - キャラクターは 3D の質感で柔らかく、正面向きの笑顔にする - 背景にはシャボン玉、ボケた光、星形のきらめきを散らす - スタンプは手描き調のイラストに文字を添え、円形などで切り抜く - ゲーム画面は明るいフラットなイラスト調にする - 虹やリボンの小物で装飾する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央 480〜600px の SP 幅カラムを固定し、左右はパステルのグラデーション地で埋めることを推奨 - スタンプのグリッドは PC で 4 列まで増やしてよい - CTA の幅は最大 420px 程度に抑える - FV のキャラクターは 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-0df448a7`（元 LP の URL から採番） - **元 LP**: https://pr.imgs.jp/cp_page.php?cp_site_id=19&auth=AkeGUmZWRo - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。