--- version: alpha name: Cosmic Hero Collab Game Campaign LP description: 星空の青い背景の上に、縦長の 1 カラムを中央に置いたスマホゲームのコラボ告知 LP。セクションごとに青紺・赤・金属グレー・黒と地色を切り替える。極太で縁取りした立体見出しと、ゲーム画面のカードを縦に積み重ねる、にぎやかなイベント型の構成。 colors: background: '#5E70D2' primary: '#3B4894' secondary: '#A4202D' dark-section: '#000000' background-alt: '#A2A4AD' surface: '#E8E6F2' cta: '#D8F02A' on-cta: '#292C45' accent-1: '#E040B0' on-dark: '#F2F9FF' accent-2: '#292C45' text-body: '#292C45' background-accessible: '#8290DC' accent-1-accessible: '#D0229C' background-alt-accessible: '#6E717D' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 900 lineHeight: 1.25 headline-sm: fontFamily: M PLUS 1p fontSize: 18px fontWeight: 900 lineHeight: 1.3 accent: fontFamily: Montserrat fontSize: 11px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 900 lineHeight: 1.2 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 12px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' section-title: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 80px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-secondary: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-sub: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px period-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 24px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px event-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 380px notice-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 300px floating-menu: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 160px --- # DESIGN.md — 宇宙青×赤の特撮コラボゲーム LP（Cosmic Hero Collab Game Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 星空背景・縁取り立体ロゴ見出し・セクション色の切り替え・ゲーム画面カード・集中線・放射光・期間バッジ - **地の質感**: 星屑のボケ、金属のヘアライン、放射状の集中線、光彩エフェクト - **形**: 角を斜めに落とした多角形の見出し台座、角丸の小さいカード、ピル型ボタン - **温度感**: 寒色（青・紺）がベースで、赤と蛍光色が熱さを加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#5E70D2` | ページ外側の星空背景 | 45% | 画素の主要色に補正 | | `primary` | `#3B4894` | メインのセクション地色（紺青） | 15% | 画素の主要色に補正 | | `secondary` | `#A4202D` | 着せ替えセクションの赤地 | 6% | 画素の主要色に補正 | | `dark-section` | `#000000` | イベント・フッターの黒地 | 6% | 画素の実測 | | `background-alt` | `#A2A4AD` | 金属グレーのセクション | 6% | 画素の実測 | | `surface` | `#E8E6F2` | 賞品カード・注意事項ボックスの淡い地 | 3% | 推定 | | `cta` | `#D8F02A` | 主ボタン（ライムイエロー） | 0% | 推定 | | `on-cta` | `#292C45` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E040B0` | 2 つ目のボタン・強調文字（マゼンタ） | 0% | 推定 | | `on-dark` | `#F2F9FF` | 濃い地の上の白文字 | 2% | 画素の実測 | | `accent-2` | `#292C45` | 期間バッジの濃紺台 | 1% | 画素の主要色に補正 | | `text-body` | `#292C45` | 淡いボックス内の本文 | 0% | 画素の主要色に補正 | | `background-accessible` | `#8290DC` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D0229C` | AA を満たす補正値（計算） | | 計算 | | `background-alt-accessible` | `#6E717D` | AA を満たす補正値（計算） | | 計算 | - 外側は星空の青グラデで固定し、中央カラムの地色をセクションごとに切り替える - セクションの地色は紺青・赤・金属グレー・黒の 4 種類を順番に使う - 見出しは白・赤・金色の文字に、黒や紺の太い縁取りを重ねる - 主 CTA はライムイエロー、2 つ目のボタンはマゼンタにして、地色との補色関係で目立たせる - 本文中の強調語はマゼンタかピンク - 注意事項は淡いラベンダーの箱に入れ、濃い文字で書く - `page` は文字 `#292C45` × 背景 `#5E70D2` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#8290DC`、4.53:1）を使う。 - `button-secondary` は文字 `#F2F9FF` × 背景 `#E040B0` のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D0229C`、4.5:1）を使う。 - `button-sub` は文字 `#F2F9FF` × 背景 `#A2A4AD` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#6E717D`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出し（立体の縁取りロゴ） | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.2 | 0.0em | | `headline-lg` | イベント名・キャンペーン名 | ゴシック | Dela Gothic One | 900 | 26px | 1.25 | 0.0em | | `headline-sm` | 小見出し・スキル名 | ゴシック | M PLUS 1p | 900 | 18px | 1.3 | 0.0em | | `accent` | 見出しの下に添える英字ラベル | 欧文サンセリフ | Montserrat | 800 | 11px | 1.2 | 0.1em | | `body-md` | 説明文（中央揃え） | ゴシック | Noto Sans JP | 700 | 14px | 1.7 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 900 | 15px | 1.2 | 0.0em | - 見出しは画像化を前提に、太い縁取りとドロップシャドウ、グラデーションを付ける - 見出しの直下に小さい英字ラベルを置く - 本文は太字で中央揃え、1 行を短めにする - 日付と期間は濃紺のバッジに数字を大きく入れる - 注釈は※付きで小さく、薄めの色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（PC でも中央に固定幅のカラム） - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算） - カラム内のセクションは端まで地色で塗る - イベントは画像バナー＋遊び方のスライダーで 1 カードにまとめ、縦に積む - 賞品は 2 列のカードを並べる - CTA は中央に置き、その下に注釈と小さいサブボタンを添える - スライダーの左右には矢印、下にはドットを付ける ## Elevation & Depth - 見出しやロゴには強いドロップシャドウと光彩を付ける - カードは黒やグレーの太い枠で囲み、影は使わない - キャラクターの背後に放射状の光を置き、浮き出して見せる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: キャラクターは切り抜いて使い、ゲーム画面は角丸の矩形に収める - **セクション境界**: カラム中央に台形の切り欠きタブを付けて、地色を切り替える - 見出し台座やラベルは角を斜めに落とした多角形にする - ボタンは完全なピル型にし、矢印か外部リンクのアイコンを付ける - キャラクター一覧のアイコンは角丸の正方形にする ## Components - **立体ロゴ見出し**（`section-title`）: 縁取りした極太文字。後ろに六角形のエンブレムを敷き、下に英字ラベルを付ける - **主 CTA ボタン**（`button-primary`）: ライムイエローのピル型ボタンに外部リンクのアイコンを付ける - **マゼンタボタン**（`button-secondary`）: 後半キャンペーンの参加ボタン - **小さいサブボタン**（`button-sub`）: グレーのピル型。詳細を見るための補助ボタン - **開催期間バッジ**（`period-badge`）: 濃紺の帯に「開催期間」ラベルと日付を入れる - **賞品カード**（`prize-card`）: 上部に色付きの見出し帯、中は淡い地、下に当選人数の帯を付ける - **イベントカード**（`event-card`）: バナー画像＋遊び方の帯＋スクリーンショットのスライダー - **注意事項ボックス**（`notice-box`）: 淡いラベンダー地に対象者や店舗を箇条書きにする - **追従メニュー**（`floating-menu`）: PC の右下に固定する黒いメニュー。セクションへのリンクを並べる ## Do's and Don'ts **Do** - セクションごとに地色をはっきり切り替えて、リズムを作る - 見出しは必ず縁取りと影を付けて立体的にする - キャラクターの背後には放射光か集中線を置く - 期間・賞品・人数は数字を大きく見せる - スライダーには矢印とドットを付けて、操作できると分かるようにする **Don't** - 淡色ベースの余白が多い上品なデザインにしない - 細い明朝体の見出しを使わない - CTA を地色に近い色にしない - 装飾のない平らな見出しにしない - 写真の実写素材を主役にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボ開催を告知する）: 宇宙背景にキャラクターを集合させ、両ブランドのロゴと×、大きなタイトル、期間の帯を置く 2. **アプリ導線**（ダウンロードを促す）: 黒地にストアバッジを並べ、遊び方へのピル型ボタンを置く 3. **新キャラ紹介**（目玉キャラを見せる）: 紺地。光背付きのキャラスライダー、アイコンの列、ゲーム画面、スキル説明 4. **限定お着替え**（限定衣装を訴求する）: 赤地にセット名ロゴとキャラを置き、黒枠の補足ボックスを添える 5. **剣士お着替え**（入手できる衣装を一覧で見せる）: 金属グレー地に 2 列で放射光とキャラを置き、下に台座ラベルを付ける 6. **イベント**（期間中のイベントを紹介する）: 黒地にイベントカードを縦に積む 7. **キャンペーン**（SNS 施策・店舗施策を紹介する）: 紺紫地に賞品カード 2 列、CTA、注意事項ボックス 8. **復帰・新規施策**（新規と復帰のユーザーを呼び込む）: 大きな数字を使った一枚バナー 9. **コラボ動画**（動画へ誘導する）: ダークグレーの金属地にサムネイルのスライダーを置く 10. **フッター**（ナビゲーション・規約・権利表記）: 黒地にリンク、ストアバッジ、アプリ情報、規約リストを置く ## Imagery - 2〜3 頭身のデフォルメキャラクターを切り抜いて大きく配置する - 背景は星空のボケと宇宙の光で埋める - キャラクターの背後には白く光る放射光や集中線を入れる - ゲームのスクリーンショットは枠付きのカードに収める - 爆発や炎のエフェクトでにぎやかさを足す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は約 480px 幅（元画像では約 950px）のカラムを中央に固定し、両側に星空背景を見せる - PC では左側にコラボロゴを、右下に追従メニューを固定する - SP はカラムを全幅にし、外側の背景は使わない - 賞品カードは SP でも 2 列のまま保つ ## 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-57a59524`（元 LP の URL から採番） - **元 LP**: https://www.asobism.co.jp/social/shirodora/collabo_ultraman/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（3/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。