--- version: alpha name: Pixel Retro Game Festival LP description: 鮮やかな青のグラデーション地に白カード、黒の太枠とドットの影、ドット絵キャラとピクセル雲で彩った都市型ゲームイベントの LP。英字の太い見出しは 1〜2 文字だけ青にする。ピンクはスタンプや番号、帯で差し色に使う。 colors: primary: '#2397F4' tint-1: '#7BC5FE' accent-1: '#F84D7F' accent-2: '#A2819C' text: '#0C0C0C' dark-section: '#000000' background: '#FFFFFF' background-alt: '#EFEFEF' surface: '#FFFFFF' secondary: '#3A87C6' on-primary: '#F5FEFF' line: '#CCC3C2' accent-3: '#F4B87A' secondary-accessible: '#347BB5' primary-accessible: '#0A76CD' accent-1-accessible: '#E50949' typography: display: fontFamily: Righteous fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.45 headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em accent: fontFamily: Righteous fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' card-event: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 420px button-more: backgroundColor: '{colors.dark-section}' typography: '{typography.accent}' height: 40px tag-outline: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-location: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px badge-stamp: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 90px heading-section: textColor: '{colors.text}' typography: '{typography.display}' height: 80px number-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px table-info: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 120px card-concept: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 700px --- # DESIGN.md — 青×ピンクのドット絵ゲームイベント LP（Pixel Retro Game Festival LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、レトロ、情報量多め・訴求型、かわいい - **キーワード**: ドット絵・ピクセル装飾・青グラデーション・黒の太枠カード・ゲームUI風・イベント一覧 - **地の質感**: ベタ塗りとピクセルのモザイク。カード影は網点状のドット。 - **形**: 四隅をピクセル状に欠いたカードと角丸ピルタグを組み合わせる。 - **温度感**: 明るく元気でやや冷たい青系。ピンクで温度を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2397F4` | イベント一覧の地とメイン青 | 12% | 画素の実測 | | `tint-1` | `#7BC5FE` | グラデーションの明るい側・コンセプトカードの地 | 9% | 画素の実測 | | `accent-1` | `#F84D7F` | スタンプ帯・番号丸などのピンク | 5% | 画素の主要色に補正 | | `accent-2` | `#A2819C` | 青からピンクへのグラデ中間の紫 | 2% | 画素の主要色に補正 | | `text` | `#0C0C0C` | 見出し・本文の黒 | 3% | 画素の実測 | | `dark-section` | `#000000` | MOREバー・ヘッダー帯・フッター | 3% | 画素の実測 | | `background` | `#FFFFFF` | ページの白地 | 46% | 画素の実測 | | `background-alt` | `#EFEFEF` | 開催概要・主催の薄いグレー地 | 5% | 画素の実測 | | `surface` | `#FFFFFF` | カードの白い面 | 15% | 画素の実測 | | `secondary` | `#3A87C6` | タグの枠と文字の青 | 1% | 画素の実測 | | `on-primary` | `#F5FEFF` | 青地の上の白文字 | 1% | 画素の実測 | | `line` | `#CCC3C2` | リストの区切り線 | 1% | 画素の主要色に補正 | | `accent-3` | `#F4B87A` | キャラ・ドット絵の肌色 | 1% | 推定 | | `secondary-accessible` | `#347BB5` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#0A76CD` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E50949` | AA を満たす補正値（計算） | | 計算 | - イベント一覧セクションは青から水色への横グラデーションを地にし、その上に白カードを並べる - 英字の見出しは黒にし、1〜2 文字だけ primary の青にする - ピンクは、スタンプ対象バッジ・地図の番号・特集帯にだけ使う - 青からピンクへのグラデーションはバッジと SNS 帯に限定する - カードの下部は黒帯にし、白抜きの太字英字を置く - 情報セクションは白とグレーを交互に敷く - `tag-outline` は文字 `#3A87C6` × 背景 `#FFFFFF` のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#347BB5`、4.52:1）を使う。 - `button-location` は文字 `#F5FEFF` × 背景 `#2397F4` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0A76CD`、4.57:1）を使う。 - `badge-stamp` は文字 `#F5FEFF` × 背景 `#F84D7F` のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E50949`、4.59:1）を使う。 - `number-circle` は文字 `#F5FEFF` × 背景 `#F84D7F` のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E50949`、4.59:1）を使う。 - `table-info` は文字 `#F5FEFF` × 背景 `#2397F4` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0A76CD`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文サンセリフ | Righteous | 400 | 40px | 1.1 | 0.02em | | `headline-sm` | 英字見出し下の和文小見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `headline-md` | カード内のイベント名 | ゴシック | Noto Sans JP | 700 | 18px | 1.45 | 0.0em | | `headline-lg` | コンセプトカードの見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.05em | | `body-md` | 本文と中央揃えのコンセプト文 | ゴシック | Noto Sans JP | 500 | 15px | 1.9 | 0.03em | | `label-button` | タグと場所ボタン | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.03em | | `accent` | MORE+ 等の英字ラベル | 欧文サンセリフ | Righteous | 400 | 16px | 1.0 | 0.02em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.0em | - 英字見出しは丸みのある極太ジオメトリック書体を使い、下に小さな和訳を添える - 見出しの一部の文字を青にしてリズムを作る - コンセプト文は中央揃えにし、行間を広く取る - 和文はゴシックのみを使い、明朝は使わない - 数字番号は白の太字を丸の中に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは大型 1 列と小型 2 列を混在させる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - カード間は縦に約 40px 空け、右上のバッジがはみ出す余地を残す - 小カードは 2 列で間を 16px 空け、高さをそろえる - セクション見出しは中央に置き、上下に 40px 前後の余白を取る - 地図の下は番号＋名称の縦リストにし、エリアごとに区切り線を入れる - 開催概要は見出しバーと値の行を交互に並べる表にする ## Elevation & Depth - カードは黒 2px の枠を付け、右下にドット網点の影を 6px ずらして付ける - 番号丸は右下に黒いベタ影を付ける - ぼかしたドロップシャドウは使わない ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: ロゴやサムネイルは角丸 12px の矩形に収める - **セクション境界**: 直線で色を切り替え、境界にピクセル市松の帯や散ったドットブロックを置く - カードの角はピクセル状に段差を付けて欠く - タグ・場所ボタン・期間表示はピル型にする - バッジは円形か角丸矩形にし、スタンプのアイコンを重ねる - 画面端に 3〜6 個の正方ドットを散らす ## Components - **イベントカード**（`card-event`）: 黒枠でピクセル角の白カード。中身はロゴ・名称・タグ。下端に黒の MORE+ バーを置き、影はドット - **MORE バー**（`button-more`）: カード下端いっぱいの黒帯に白い英字の MORE+ を置く - **カテゴリタグ**（`tag-outline`）: 白地に青枠・青文字のピル - **場所ピル**（`button-location`）: 青のベタ塗りに、ピンアイコンと白文字 - **スタンプ対象バッジ**（`badge-stamp`）: 青→ピンクのグラデ円に白文字。白縁を付け、スタンプのアイコンを重ねてカード右上にはみ出させる - **英字セクション見出し**（`heading-section`）: 極太英字の一部を青にし、下に和文の小見出しを置く。横にドット絵キャラを添える - **番号丸**（`number-circle`）: ピンクの円に黒縁と黒い影。白の太字で 2 桁番号を入れる - **開催概要テーブル**（`table-info`）: 青の見出し行と白の値行を交互に並べる。角丸のブロック - **コンセプトカード**（`card-concept`）: 水色のチェック柄地に黒の太枠とピクセル角。文は中央揃え ## Do's and Don'ts **Do** - 装飾はドット絵キャラ・ピクセル雲・正方ドットでそろえる - カードには必ず黒枠とドットの影を付ける - 英字見出しの一部の文字を青にする - タグはピル型にし、役割で塗りと枠を使い分ける - 情報の多い一覧はカードを繰り返し、構成を統一する **Don't** - ぼかし影やガラス風の質感を使わない - 明朝体や細い書体を見出しに使わない - ピンクを広い本文面に使わない - 写真を背景いっぱいに敷かない（一覧は青地とカードでつくる） - 角の丸い柔らかいカードだけで構成しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴの表示とメニューへの導線）: 白地に横長ロゴ。右端に黒い正方形のハンバーガー 2. **ファーストビュー**（世界観と会期を伝える）: 上に会期の帯、その下に水色地の大型イラスト、さらに下にロゴと黒帯の SNS アイコン 3. **コンセプト**（イベントの思想を伝える）: 水色チェック柄カードに中央揃えの詩的な文。背景に薄い英字を置く 4. **イベント一覧（大）**（主要会場を詳しく紹介する）: 青グラデ地に 1 列の大カード。バッジ・タグ・場所ピルを付ける 5. **イベント一覧（小）**（参加店舗を網羅する）: 2 列の小カードを繰り返す。各カードにスタンプバッジ 6. **特集イベント**（関連企画を強調する）: 青→ピンクのグラデ枠で包んだ大カード 7. **スタンプラリー**（回遊企画を告知する）: ピンクのチェック柄帯。白のピルに期間を入れ、キャラ 2 体を並べる 8. **マップ**（会場の位置を示す）: ピクセル枠のイラスト地図にピンクの番号ピンを置き、下に番号付きリスト 9. **開催概要**（基本情報を示す）: グレー地に青の見出し行の表 10. **主催・協賛・後援**（信頼性を示す）: 白カードにロゴを 3 列で並べ、中央見出しに罫線を添える 11. **SNS**（フォローを促す）: 青→ピンクのグラデ帯の上下にピクセルの縁。白丸アイコン 12. **お問い合わせ・フッター**（連絡先と注意事項）: 青のピクセル枠ボックスにメールを表示し、注釈リストを置く。フッターは黒帯 ## Imagery - 32〜48px グリッドのドット絵の動物キャラを見出しやカードの角に乗せる - 白とグレーの段々状のピクセル雲を画面端から出す - 青・水色・ピンク・黒の正方ドットを市松状に散らす - メインビジュアルは太線のアニメ調イラストにし、ガジェットが飛び散る構図にする - 地図は水色の道路線画にし、ドット絵の木や建物を置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の大カードはサムネイルを左、本文を右の 2 カラムにし、下にグレーの詳細表を足す - PC の小カードは 3 列にし、日時・料金・アクセスの表を表示する - PC のマップリストは 4 列のグリッドにする - PC の協賛ロゴは横に並べ、見出しまわりの余白を広げる - SP では詳細を省き、MORE で遷移させる ## 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-c665a5dc`（元 LP の URL から採番） - **元 LP**: https://shibuya-games-week.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。