--- version: alpha name: Pop Yellow Retro Game Collection LP description: レモンイエローの地に紺色の斜め見出しラベルと白カードを重ねる、元気なゲームタイトル告知 LP。左端にはドット絵のブロック壁を敷く。流れる英字の帯と、ピンク・青のピル型 CTA で賑やかさとわかりやすさを両立している。 colors: primary: '#FBF165' dark-section: '#1E2A44' secondary: '#3C62A1' cta: '#F45594' on-cta: '#FFFFFF' accent-1: '#449CE4' background: '#FFFFFF' background-alt: '#FFFEEC' accent-2: '#FAE955' accent-3: '#E8402E' text: '#040711' on-dark: '#FFFFFF' tint-1: '#A8AB7D' cta-accessible: '#E60F64' accent-1-accessible: '#1D7AC6' typography: display: fontFamily: Montserrat fontSize: 26px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.06em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px 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: 44px button-reserve: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px heading-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 40px badge-edition: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 22px loop-band: textColor: '{colors.background}' typography: '{typography.accent}' height: 48px speech-copy: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 30px info-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 160px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 28px --- # DESIGN.md — 黄×紺のポップなレトロゲーム LP（Pop Yellow Retro Game Collection LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、レトロ、力強い・インパクト、情報量多め・訴求型 - **キーワード**: レモンイエロー・紺の斜めラベル・ドット絵・白カード・英字ループ帯・ピル型ボタン - **地の質感**: 黄色の地にキャラクターや擬音の薄いシルエット柄を同系色で敷く。左端にはピクセルアートのレンガ壁を置く。紺の面には細かいドット柄を入れる - **形**: 平行四辺形に傾けた紺の見出しラベル、角丸の白カード、ピル型ボタン、斜めに切ったセクション境界 - **温度感**: 明るく暖かい。紺で全体を締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FBF165` | ブランドの黄色（地） | 30% | 画素の実測 | | `dark-section` | `#1E2A44` | 紺の見出しラベル・情報カード | 8% | 推定 | | `secondary` | `#3C62A1` | トレーラーセクションの青い面 | 8% | 画素の実測 | | `cta` | `#F45594` | 購入・ストア誘導のピンクボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#449CE4` | 予約ボタンの青 | 1% | 画素の実測 | | `background` | `#FFFFFF` | カードの白地 | 14% | 画素の主要色に補正 | | `background-alt` | `#FFFEEC` | 商品パネルのクリーム地 | 6% | 画素の実測 | | `accent-2` | `#FAE955` | 版種ラベル・バッジの黄色 | 1% | 画素の実測 | | `accent-3` | `#E8402E` | 特別告知枠の赤 | 1% | 推定 | | `text` | `#040711` | 見出し・本文の文字 | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | 紺の面の上の白文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#A8AB7D` | 左端ドット壁のオリーブ | 5% | 画素の主要色に補正 | | `cta-accessible` | `#E60F64` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#1D7AC6` | AA を満たす補正値（計算） | | 計算 | - 地は黄色に統一する。本文の情報は白カードに載せて読みやすくする - 見出しラベルと商品情報のカードは紺にして全体を締める - 動画セクションだけは青の面にし、リズムを変える - 主 CTA は購入をピンク、予約を青にして役割で色を分ける - 黄色のバッジは版種・限定・注記のラベルにだけ使う - 赤は特別告知の枠と見出しに限定する - `button-primary` は文字 `#FFFFFF` × 背景 `#F45594` のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E60F64`、4.55:1）を使う。 - `button-reserve` は文字 `#FFFFFF` × 背景 `#449CE4` のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1D7AC6`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの英字（斜体） | 欧文サンセリフ | Montserrat | 900 | 26px | 1.1 | 0.02em | | `headline-lg` | 日本語の見出しラベル | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.04em | | `headline-md` | 発売日などの強調テキスト | ゴシック | Noto Sans JP | 900 | 18px | 1.4 | 0.02em | | `headline-sm` | カード上のラベル見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.04em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | 注釈・クレジット | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 英字ループ帯・吹き出しコピー | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.0 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.06em | - 英字の見出しは極太の斜体にして、紺の平行四辺形に白抜きで載せる - 日本語は太いゴシックで統一し、細い書体は使わない - 吹き出しコピーは白地に黒の極太文字で短い言葉を2〜3行に分ける - セクションの間には極太の英字を白抜き風に流すループ帯を置く - 注釈は小さく、※から書き始める - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品・タイル一覧は SP で 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右 5% ほど余白を取って中央に置く - 見出しラベルはセクション上端の中央に置き、カードに半分かぶせる - タイトル一覧は画像の下にピル型の名前ボタンを付けたグリッドにする - 商品はクリーム色のパネルの中に版種バッジ・パッケージ画像・ボタンを縦に並べる - 左端のドット壁は PC だけ。SP では帯状に縮めるか省く ## Elevation & Depth - 白カードには影をほぼ付けず、紙のようにフラットにする - 画像は黒い細枠で囲み、ゲームの画面らしさを出す - 見出しラベルは影を付けず、色の塊でカードの前に出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 四角いままか、角丸 4px で黒の細枠 - **セクション境界**: 斜めのカット、または英字ループ帯でセクションを区切る - 見出しラベルは平行四辺形（skew）にする - CTA は黒の細枠とドロップ影付きのピル型にする - 情報カードは角丸 16px の紺 - 動画は角丸 8px の白枠で囲む ## Components - **購入ピルボタン**（`button-primary`）: ピンクのピル型。左にカートのアイコン、右に矢印を置き、黒の細枠を付ける - **予約ピルボタン**（`button-reserve`）: 青のピル型で、購入ボタンと同じ形 - **白のサブボタン**（`button-outline`）: 白地に黒枠のピル型。タイトル名や詳細ページへの誘導に使う - **斜めの紺見出し**（`heading-label`）: 紺の平行四辺形に、極太斜体の英字または日本語を白抜きで入れる - **版種の黄色バッジ**（`badge-edition`）: 黄色の小さな四角に、太字で版種や限定の表記を入れる - **英字ループ帯**（`loop-band`）: 画面幅いっぱいに極太英字を横へ流す装飾の帯 - **吹き出しコピー**（`speech-copy`）: 白地の斜め帯に短いコピーを入れ、動画の周りに散らして置く - **製品情報カード**（`info-card`）: 紺の角丸カード。項目名を白ラベル、値を白文字にした表組みにする - **ニュース一覧**（`news-list`）: 白い帯の中に、紺の日付ラベルとタイトルを1行ずつ並べる ## Do's and Don'ts **Do** - 黄色の地と紺の見出しで高いコントラストを保つ - 見出しラベルは必ず斜めの平行四辺形にする - セクションの区切りには英字ループ帯や斜めカットを使う - キャラクターのイラストはカードの外側に重ね、動きを出す - CTA は役割で色を分け、ピル型に統一する **Don't** - くすんだ色や淡いパステルだけで全体を組まない - 細い明朝体や繊細な書体を使わない - 見出しをただの黒文字にしない - 白カードに大きな影を付けない - ピンクと青以外の色で CTA を作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品を印象づけ、ジャンルと対応機種を示す）: キャラクターを密集させたキービジュアルの中央にロゴを置く。左上に吹き出しのリード、右下に紺の帯で機種ロゴを並べる 2. **発売情報・購入導線**（発売日を伝え、購入や予約へ誘導する）: 白カードを左右2列に分け、黄色の版種バッジ・発売日・ピンクと青のボタンを置く 3. **ニュース**（最新のお知らせを伝える）: 紺の斜め見出しの下に、白い帯の日付付きリストを並べる 4. **投稿キャンペーンバナー**（ユーザーの参加を促す）: キャラクター付きの白い角丸バナーに、青文字の見出しと矢印を入れる 5. **トレーラー**（動画で魅力を伝える）: 青いドット柄の面の中央に動画を置き、吹き出しコピーとキャラクターを周りに散らす 6. **収録タイトル一覧**（収録内容を見せる）: 大きな画像を1枚載せ、その下を3列のグリッドにする。各画像に名前ボタンを付け、限定タイトルにはピンクのバッジを付ける 7. **新機能紹介**（新しいモードや便利機能を伝える）: 白い大カードの中に、紺ラベル付きの画面キャプチャを2列で並べる。ギャラリーはカルーセルにする 8. **特別エディション告知**（上位機種向けの遊び方を伝える）: 赤枠の白カードに赤の見出しラベル、イラストを2つ並べ、注釈を付ける 9. **商品ラインナップ**（機種と版を選ばせて購入させる）: 機種と版のタブで切り替える。クリーム色の商品パネルに予約ボタンと詳細へのボタンを置く 10. **製品情報**（仕様を整理して示す）: 紺の角丸カードにロゴと項目の表を載せる 11. **フッター**（権利表記とシェア）: 薄いグレーの地にレーティングマーク、SNSアイコン、クレジットを中央揃えで置く ## Imagery - 太い主線とビビッドなベタ塗りの、キャラクターのアニメ調イラスト - 左端にドット絵のレンガ壁と小さなピクセルキャラクターを置く - 黄色の地に擬音の英字やシルエットを同系色で薄く敷く - ゲーム画面のキャプチャは黒い枠付きの四角で見せる - 説明図はシンプルな線画のキャラクターと、淡い青の円を組み合わせる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 80% 幅のコンテンツを置き、左端にドット絵の壁を固定表示する - SP ではドット壁を省き、カードを画面幅の 90% にする - 発売情報の2列は SP で縦積みにする - タイトル一覧は PC の3列を SP で2列にする - 動画周りの吹き出しコピーは、SP では動画の上下に配置する - 機種タブは 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-9fdff032`（元 LP の URL から採番） - **元 LP**: https://www.konami.com/games/bomberman/collection/jp/ja/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。