DESIGN.md — パステル夢かわキャラクターアプリ LP（Pastel Dreamy Character App Subscription LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: パステル・夢かわ・キラキラ・雲形タブ・光沢ボタン・キャラクター
• 地の質感: シャボン玉の光、星のきらめき、グラデーションの空。ボタンはツヤのあるジェル風
• 形: 大きな角丸カード、雲形の見出しタブ、ピル型ボタン、セクションの頭は上向きのアーチ
• 温度感: 甘く明るい。ピンクと水色で温かさと爽やかさを両立する

Colors

• 地の色はセクションごとに水色、ピンク、ラベンダーのパステルで切り替える
• 内容は白い角丸カードに載せ、地のパステルと分ける
• 見出しはピンク、補足見出しは紫青、大見出しはゴールドの立体文字にする
• 主 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

• 見出しはすべて太い丸ゴシックで中央揃えにする
• 語尾に「♪」や「！」を付けて弾んだ調子を出す
• 大見出しにはゴールドのグラデーションと白フチを付ける
• 補足見出しは「＼ ／」で挟んで強調する
• 数字は一段大きくし、色を変える
• 注釈は 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

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

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