--- version: alpha name: Holographic Pop Game Anniversary Campaign LP description: 水色からピンクへ流れるグラデーションとホログラム風の虹色の光で作る、スマホゲームの周年キャンペーンLP。青い立体的なピル型CTAを何度も置き、角を斜めに落としたサイバー調のパネルで報酬・キャンペーン・新キャラ・イベント一覧を縦に積む。 colors: primary: '#418DDD' background: '#68C7F8' background-alt: '#F7EDF7' surface: '#FDFEFE' cta: '#1E6FF0' on-cta: '#F8FDFF' secondary: '#F0508C' accent-1: '#F9C391' accent-2: '#A070E8' accent-3: '#FCD523' tint-1: '#ECFFFF' text: '#1D4790' dark-section: '#244A8D' marker: '#E8408A' cta-accessible: '#1C6DF0' secondary-accessible: '#E31361' primary-accessible: '#2577CE' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.35 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 14px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 14px full: 999px spacing: unit: 8px card: 12px section: 32px 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: 56px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-sns: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px feature-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 70px panel-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' period-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 20px character-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 130px numbered-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 110px info-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 280px --- # DESIGN.md — 水色×ピンクのホログラム調ゲーム周年LP（Holographic Pop Game Anniversary Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、クール・先進的、情報量多め・訴求型 - **キーワード**: ホログラム・水色グラデーション・立体ボタン・サイバー枠・キラキラ装飾・周年お祝い - **地の質感**: 虹色のグラデーションに光沢・発光・ドット網点・十字のきらめきを重ねたデジタルな質感 - **形**: 角を斜めに落としたパネル枠、立体的なピル型ボタン、ポップな傾き文字 - **温度感**: 明るく涼しげな水色が基調で、ピンク・オレンジで温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#418DDD` | ブランドを代表する青（CTA・見出し帯） | 7% | 画素の主要色に補正 | | `background` | `#68C7F8` | ページの外側の水色地 | 12% | 画素の主要色に補正 | | `background-alt` | `#F7EDF7` | 外側の淡いピンク地 | 8% | 画素の主要色に補正 | | `surface` | `#FDFEFE` | カード内の白地 | 10% | 画素の実測 | | `cta` | `#1E6FF0` | 主CTAの青 | 3% | 推定 | | `on-cta` | `#F8FDFF` | CTA上の白文字 | 1% | 画素の実測 | | `secondary` | `#F0508C` | ミニゲーム用のピンクCTA | 2% | 推定 | | `accent-1` | `#F9C391` | ミニゲームセクションのオレンジ地 | 6% | 画素の主要色に補正 | | `accent-2` | `#A070E8` | ラベル・見出し帯の紫 | 2% | 推定 | | `accent-3` | `#FCD523` | チケット等の黄色アクセント | 1% | 画素の実測 | | `tint-1` | `#ECFFFF` | セクション内の淡い水色 | 6% | 画素の実測 | | `text` | `#1D4790` | 見出しの紺文字 | 2% | 画素の主要色に補正 | | `dark-section` | `#244A8D` | アプリ情報ボックスの紺地 | 3% | 画素の実測 | | `marker` | `#E8408A` | 強調語のピンク文字 | 1% | 推定 | | `cta-accessible` | `#1C6DF0` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#E31361` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#2577CE` | AA を満たす補正値（計算） | | 計算 | - 外側は水色地とピンク地の帯を交互に置き、中央の本文カラムは白〜水色〜ピンクのグラデーションにする - 主CTAは青グラデーションと白文字にし、光沢と白い縁取りで立体的に見せる - ミニゲーム関連はオレンジ地とピンクのCTAで区別する - 見出しは白文字に青や紫の縁取り・影を付け、強調語だけピンクや黄色にする - SNS系のボタンは黒、情報ボックスは紺地に白文字にする - 虹色ホログラムは装飾と枠に限り、本文の背景には使わない - `button-primary` は文字 `#F8FDFF` × 背景 `#1E6FF0` のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1C6DF0`、4.56:1）を使う。 - `button-secondary` は文字 `#F8FDFF` × 背景 `#F0508C` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E31361`、4.52:1）を使う。 - `button-outline` は文字 `#418DDD` × 背景 `#FDFEFE` のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2577CE`、4.51:1）を使う。 - `feature-badge` は文字 `#F8FDFF` × 背景 `#418DDD` のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2577CE`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大きな数字の訴求 | 装飾・ディスプレイ | Dela Gothic One | 900 | 48px | 1.1 | 0.0em | | `headline-lg` | セクションの大見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 24px | 1.3 | 0.02em | | `headline-md` | パネル帯の見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.3 | 0.02em | | `headline-sm` | カード見出し・キャラ名 | ゴシック | Noto Sans JP | 700 | 13px | 1.35 | 0.0em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.0em | | `note` | 注釈・権利表記 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `label-button` | CTAの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.0 | 0.05em | | `accent` | 英字の周年表記 | 欧文サンセリフ | Montserrat | 800 | 14px | 1.2 | 0.05em | - 見出しは極太の丸ゴシックにし、白の縁取りとドロップシャドウで立体感を出す - 数字はかなり大きくし、助詞は小さくしてメリハリを付ける - キャッチは少し斜めに傾けたりジャンプ配置にしたりしてポップに見せる - 期間表記は細い帯の中に1行で入れる - 注釈は「※」から始まる小さなグレー文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。報酬アイコンは 3〜4 列、イベント一覧は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 100% - **余白**: セクション間 32px、基本単位 8px、カード内 12px（375px 幅換算） - セクションごとに枠付きパネルで区切り、パネルの上辺に見出し帯を載せる - 各セクションの最後に CTA を中央配置する - アイコンとラベルのセットを等間隔のグリッドに並べる - 横スワイプのカルーセルは次のカードを端に少し見せ、矢印を付ける - PC でも中央の 375px 相当のカラムを固定し、左右は背景帯を見せる ## Elevation & Depth - CTA は下に濃い色の影を付けた立体ボタンにし、白い外縁で浮かせる - パネルは発光する太い縁取りで浮かせ、影はほとんど付けない - アイコンは白フチとソフトシャドウでステッカー風にする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 14px。ボタンはピル型。 - **写真の切り抜き**: キャラは切り抜き、ゲーム画面は角丸の四角に入れる - **セクション境界**: 斜めのストライプやデジタル風の欧文透かしを入れた帯で、直線的に切り替える - パネルの角は斜めに落としてサイバー調にする - CTA はピル型にし、右端に三角の矢印を付ける - 特典バッジは角丸の四角を少し傾け、色違いで並べる - 番号は四角いタイルの中に入れる ## Components - **立体ピルCTA**（`button-primary`）: 青グラデーションのピル型。白い縁取りがあり、右に三角の矢印が付く - **ピンクCTA**（`button-secondary`）: ミニゲームへ誘導するピンク版の立体ピル - **黒SNSボタン**（`button-sns`）: 黒いピル型で、SNS の確認に誘導する - **アコーディオン/注意事項ボタン**（`button-outline`）: 白地に色付きの細い枠。＋や矢印が付く - **特典バッジ4連**（`feature-badge`）: 色違いの角丸タイルに、アイコンと2行のラベルを入れて横に並べる - **サイバー枠パネル**（`panel-frame`）: 角を斜めに落とした太枠に、見出し帯を載せたセクション枠 - **期間帯**（`period-bar`）: 細い紺または白の帯に期間を1行で書く - **キャラ紹介カード**（`character-card`）: 左にキャラの切り抜き、右に紫の名前帯・期間・説明を置く横長カード - **番号付きイベントタイル**（`numbered-tile`）: 番号タイルと2行の見出し、その下にゲーム画像を置く2列カード - **アプリ情報ボックス**（`info-box`）: 紺地にロゴ・アイコンを置き、項目と値を縦線で区切った表 ## Do's and Don'ts **Do** - CTA は各セクションの末尾に必ず置き、同じ形で繰り返す - 十字のきらめきやドット網点を見出しの周りに散らす - 色違いのバッジやチケットで報酬を視覚的に並べる - 数字は特大にして縁取りを付ける - キャンペーンが終わった枠は暗いオーバーレイを掛け、白文字で終了を告知する **Don't** - くすんだ色や暗い全面背景を使わない - 明朝体や細い書体を見出しに使わない - フラットで影のないボタンにしない - 余白を大きく取りすぎて静かな印象にしない - グラデーションの上に細い本文を直接置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（周年とキャンペーンの主役を一目で伝える）: キャラとタレントをネオン街の背景に合成し、下に期間帯を置く 2. **キャッチとCTA**（すぐプレイさせる）: 傾けたポップな見出しと青い立体CTAを置く 3. **特典バッジ**（企画の全体像を示す）: 色違いのバッジを4つ横に並べる 4. **メイン報酬訴求**（最大数量を訴求する）: タレント2人で特大の数字を挟み、期間と注釈を添える 5. **参加報酬**（参加方法と報酬を示す）: パネルにアイテム画像・操作説明・CTA を入れる 6. **ミッション報酬**（報酬一覧を見せる）: 3列のアイコングリッドに、特典動画の誘導を添える 7. **再訴求CTA**（参加を後押しする）: タレントが指差す構図の下に CTA を置く 8. **SNSキャンペーン**（拡散を促す）: 横スワイプのカード、賞品画像、黒いSNSボタン 9. **ミニゲーム**（WEB 限定の遊びへ誘導する）: オレンジ地に装飾ロゴ、遊び方の図解、ピンクCTA を置く 10. **新キャラ紹介**（限定キャラを紹介する）: 横長のキャラカードを縦に並べ、最後に CTA を置く 11. **イベント一覧**（周年施策を網羅する）: 番号付きタイルを2列グリッドで並べる 12. **締めのCTA**（最終誘導）: ロゴ風の見出しと青い立体CTA を置く 13. **SNS・アプリ情報・フッター**（公式情報を提示する）: SNSアイコン3つと紺の情報ボックス、リンク、トップへ戻るボタンを置く ## Imagery - キャラは白フチ付きの切り抜きにし、ステッカー風に配置する - 人物はシルバーの衣装で、明るいスタジオ光の下で撮った全身または半身の切り抜きにする - 背景はネオン街や虹色ホログラム、ボケた光の粒にする - チケットやアイテムは傾けたカラフルなアイコンとして描く - 十字のきらめき、ジグザグ線、ドット網点を装飾として散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも中央に SP 幅のカラムを固定し、左右に水色とピンクの帯背景ときらめき装飾を見せる - PC の左右の余白には情報を置かない - カルーセルは 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-ed07f83f`（元 LP の URL から採番） - **元 LP**: https://tsumtsum.game.line.me/ja/11th-anniversary/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（5/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。