--- version: alpha name: Pop Anime Collab Event LP description: 淡いラベンダーの地に、ミントグリーン・マゼンタピンク・レモンイエローを強く効かせたアニメIPコラボの体験型イベントLP。ピンクの縁取り文字の見出し、白カードに色線の囲み、斜めに切ったグラデーションの帯で、にぎやかで元気な印象を作る。 colors: primary: '#45BD7A' secondary: '#E83FC8' cta: '#E640C9' on-cta: '#FEFEFF' background: '#EFE1FE' surface: '#FFFFFF' accent-1: '#FFFB74' accent-2: '#A8C82A' tint-1: '#FFF2C5' tint-2: '#DAF3E1' text: '#333333' dark-section: '#666664' marker: '#E0263A' cta-accessible: '#D21CB2' primary-accessible: '#2C7D50' typography: display: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 26px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' section-title-pop: textColor: '{colors.secondary}' typography: '{typography.display}' height: 44px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px framed-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 220px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 26px icon-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 72px venue-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px accordion: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px --- # DESIGN.md — ミント緑×ピンク×黄のポップなアニメコラボイベントLP（Pop Anime Collab Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: アニメコラボ・体験型イベント・縁取り見出し・斜めグラデ帯・ミント×ピンク・線囲みカード - **地の質感**: フラットな単色面と、黄→緑の斜めグラデーション帯。細かいドット柄をうっすら重ねる - **形**: 角丸のカード、ミント色の太い線囲み、丸アイコンバッジ、斜めのセクション境界 - **温度感**: 明るく暖かい。原色寄りでテンション高め ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#45BD7A` | ブランドのミントグリーン（枠線・見出し帯・ラベル） | 8% | 画素の主要色に補正 | | `secondary` | `#E83FC8` | 見出し文字・バッジのマゼンタピンク | 3% | 推定 | | `cta` | `#E640C9` | チケット購入ボタン | 1% | 推定 | | `on-cta` | `#FEFEFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#EFE1FE` | ページ地の淡いラベンダー | 30% | 画素の実測 | | `surface` | `#FFFFFF` | カード・情報ボックスの白 | 19% | 画素の実測 | | `accent-1` | `#FFFB74` | 黄色の帯・強調面 | 6% | 画素の実測 | | `accent-2` | `#A8C82A` | 黄緑のタブ・ボタン帯 | 3% | 推定 | | `tint-1` | `#FFF2C5` | ゲーム説明カードの淡いクリーム | 4% | 画素の実測 | | `tint-2` | `#DAF3E1` | 淡いミントの面 | 4% | 画素の主要色に補正 | | `text` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `dark-section` | `#666664` | 終了公演カードのグレーアウト | 2% | 画素の実測 | | `marker` | `#E0263A` | 告知の赤文字 | 0% | 推定 | | `cta-accessible` | `#D21CB2` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#2C7D50` | AA を満たす補正値（計算） | | 計算 | - 地は淡いラベンダーで通し、情報は白カードに載せる - 大枠・見出し帯・ラベルはミントグリーンで統一 - セクション見出しはピンク塗り＋白と黄の縁取り - 購入系ボタンとNEW/終了バッジはマゼンタピンク - 物語セクションだけ黄→緑の斜めグラデ帯で区切る - 終了した公演はグレーで沈めて現役と差をつける - `button-primary` は文字 `#FEFEFF` × 背景 `#E640C9` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D21CB2`、4.58:1）を使う。 - `step-card` は文字 `#45BD7A` × 背景 `#FFF2C5` のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2C7D50`、4.51:1）を使う。 - `pill-label` は文字 `#FEFEFF` × 背景 `#45BD7A` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2C7D50`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出し（縁取りポップ文字） | 装飾・ディスプレイ | Dela Gothic One | 400 | 28px | 1.2 | 0.05em | | `headline-md` | 枠見出し帯・カード題 | ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.4 | 0.02em | | `headline-sm` | ステップ名・ピル型ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.02em | | `body-md` | 本文・物語文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.02em | | `note` | 注意書き・料金注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | ステップ番号の大きな数字 | 欧文サンセリフ | Montserrat | 700 | 26px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.04em | - 見出しは太いポップ書体にピンク塗り、白と黄で二重に縁取る - 見出しの左右に小さな馬蹄型の装飾を置く - 本文は中央揃えが基本。物語文だけ左揃え - 料金表の数字は太字にしない - 注釈は11px、※付きで箇条書きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ステップ・グッズは PC で 3 列、SP では 1〜2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 大きな情報群は太いミント線の角丸枠でひとまとめにする - セクション見出しは中央に置き、下に24px空ける - ステップカードは三角矢印でつなぐ - プレイ形式は丸バッジを横に並べる - 公演会場は縦に積んだカードに、下端の全幅ボタンを付ける ## Elevation & Depth - 影はほぼ使わず、色線とベタ面で階層を作る - カードは1〜2pxの色線＋白地 - バッジだけ斜めに傾けて浮いて見せる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形。キャラ画像は正方形の色線枠に入れる - **セクション境界**: 斜めの直線カットで背景色を切り替える - 大枠は角丸16px・ミント線3px - ラベルはピル型、左右に小さな装飾 - アイコンは黄枠の白い円に入れる - グッズサムネは右下にピンクの＋ボタン ## Components - **縁取りポップ見出し**（`section-title-pop`）: ピンク文字＋白・黄の二重縁取り、左右に馬蹄装飾 - **チケット購入ボタン**（`button-primary`）: マゼンタ塗り・白文字の角丸ボタン - **ミント線の大枠**（`framed-box`）: 白地に太いミント線の角丸枠。上部はミント帯の見出し - **番号付きステップカード**（`step-card`）: クリーム地に大きな数字・小見出し・白円アイコン・説明 - **ミントのピル型ラベル**（`pill-label`）: 小見出し用の緑のピル。中は白文字 - **丸アイコンバッジ**（`icon-badge`）: 黄枠の白い円に緑の線アイコンと短い情報 - **会場カード**（`venue-card`）: 白カード＋黄緑の全幅ボタン帯。終了したものはグレーにしてピンクの斜めバッジを付ける - **注意事項アコーディオン**（`accordion`）: 白地にミント線、中央の文字と▼ ## Do's and Don'ts **Do** - 色はミント・ピンク・黄の3色に絞って繰り返す - 情報量が多い箇所は線囲みの白カードで区切る - 見出しは毎回同じ縁取りポップ文字で統一する - アイコンは単色の線画で揃える - 料金は表組みで、注釈は表の下にまとめる **Don't** - 暗い背景や黒ベタを多用しない - 見出しを細い明朝体にしない - 強い影やグラデーションをカードに付けない - ピンクを本文に使わない - 写真を枠なしで裁ち落としにしない（FVを除く） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボ世界観とタイトルを伝える）: キャラクターの全面キービジュアル、立体ロゴ、下に黄色帯のリード文と会場写真の帯 2. **ゲーム紹介**（体験内容を3点で説明する）: ミント枠の中に番号付きカードを3つ並べる 3. **動画**（CMで雰囲気を伝える）: ポップ見出しの下に16:9の動画を中央に置く 4. **ストーリー**（物語への没入感を作る）: 斜めに切った黄→緑のグラデ帯に、白文字の左揃え長文 5. **登場キャラクター**（キャラクターの紹介）: 色線枠のカードに立ち絵と名前を2列で 6. **参加方法**（購入から当日までの流れ）: 写真付きステップカードを矢印でつなぎ、最初のカードに購入ボタン 7. **プレイ形式**（人数・時間などの要件）: 丸アイコンバッジを5つ横に並べる 8. **チケット情報**（料金・特典・販売日程）: 大きなミント枠にタブ切替の料金表、黄枠の特典ボックス、ピル見出しで日程を区切る 9. **開催会場**（会場と期間の一覧）: 会場カードを縦に並べ、終了した会場はグレーにする 10. **グッズ**（物販の紹介）: 正方形サムネを3列グリッドで、下に商品名。特典はピンク枠で囲む 11. **よくある質問・注意事項**（補足情報）: 全幅のアコーディオンを3本積む ## Imagery - アニメ調キャラの明るいイラストを主役にし、躍動感あるポーズで見せる - 会場写真は明るく、人が遊んでいる様子を撮る - アイコンはミント単色の線画で、白い円の中に入れる - 背景に淡い斜めのストライプや大きなドットを薄く敷く - グッズは白背景で切り抜き、正方形に収める - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約900px幅のコンテンツを置き、左右は淡いラベンダーの地 - SPではステップカードを縦積みにし、矢印は下向きにする - SPのプレイ形式バッジは3＋2の折り返し、またはスクロール - SPのグッズは2列グリッド - 料金表はSPで横スクロールか、縦向きの表にする ## 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-3923e1ce`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/umamusume/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（5/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。