--- version: alpha name: Pixel Retro Game Kids Event LP description: 蛍光イエローと黄緑の面に黒い太線、ドット絵風の吹き出しやボタンを組み合わせた、レトロゲーム調の子ども向け体験イベントLP。濃紺のピクセル枠ボタンで絞り込み検索へ誘導し、店舗カードや作家紹介を明るい市松背景に並べている。 colors: primary: '#FFFF00' secondary: '#8EFF69' cta: '#0245BB' on-cta: '#FFFF00' background: '#FEFEFE' background-alt: '#FEFEFE' text: '#111111' accent-1: '#8DFE6B' accent-2: '#BAAACC' accent-3: '#F3A4D4' tint-1: '#FBEFC5' surface: '#FEFEFE' dark-section: '#010101' marker: '#64BA42' typography: display: fontFamily: DotGothic16 fontSize: 40px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-lg: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em accent: fontFamily: DotGothic16 fontSize: 15px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' pixel-speech-heading: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px button-filter: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px button-search: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 40px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px store-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 160px date-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px venue-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px pixel-tile-banner: backgroundColor: '{colors.surface}' textColor: '{colors.text}' height: 130px credit-bar: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.accent}' height: 36px --- # DESIGN.md — 蛍光イエロー×ドット絵の子ども体験イベントLP（Pixel Retro Game Kids Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、レトロ、かわいい、情報量多め・訴求型 - **キーワード**: ドット絵・レトロゲーム・蛍光色・黒太線・子ども・夏休み - **地の質感**: ベタ塗りの蛍光面とうっすらした市松模様。ドットのグラデーションで色面を切り替える - **形**: ピクセル状に角を欠いた枠、黒い太いアウトライン、ずらした影 - **温度感**: 高温で明るい。夏の陽気さ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFFF00` | メイン地色の蛍光イエロー | 15% | 画素の実測 | | `secondary` | `#8EFF69` | 検索エリアの黄緑地 | 8% | 画素の実測 | | `cta` | `#0245BB` | 絞り込みボタンの濃紺 | 5% | 画素の実測 | | `on-cta` | `#FFFF00` | 濃紺ボタン上の黄文字 | 1% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 白の基本地 | 36% | 画素の実測 | | `background-alt` | `#FEFEFE` | 薄グレー市松地 | 10% | 画素の実測 | | `text` | `#111111` | 見出し・本文・線の黒 | 4% | 推定 | | `accent-1` | `#8DFE6B` | 期間の下線・予約帯の明るい緑 | 1% | 画素の実測 | | `accent-2` | `#BAAACC` | 会場ラベルの薄紫 | 1% | 画素の実測 | | `accent-3` | `#F3A4D4` | クレジット帯のピンク | 1% | 画素の実測 | | `tint-1` | `#FBEFC5` | サービス案内のクリーム地 | 3% | 画素の実測 | | `surface` | `#FEFEFE` | カード・吹き出しの白面 | 6% | 画素の実測 | | `dark-section` | `#010101` | フッターの黒帯 | 1% | 画素の実測 | | `marker` | `#64BA42` | 店舗ラベル等の多色チップ(緑) | 1% | 画素の実測 | - 地色は蛍光イエロー→黄緑→白市松を交互に切り替え、セクションを色で区切る - 境界は黄から黄緑へドット状のディザで溶かす - 線と文字は黒で統一し、蛍光面上でもコントラストを確保 - 主要操作ボタンは濃紺地に黄文字、決定ボタンは黄地に黒文字 - 店舗ラベルはピンク・緑・オレンジ・水色など多色のピルで識別 - 未公開ボタンはグレーで半透明にし coming soon を重ねる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風タイトル | 装飾・ディスプレイ | DotGothic16 | 700 | 40px | 1.2 | 0.05em | | `headline-lg` | 吹き出し内のセクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.4 | 0.08em | | `headline-md` | 開催日・予約開始の告知 | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.4 | 0.05em | | `body-lg` | リード文 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.9 | 0.08em | | `body-md` | 注意事項・紹介文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.0em | | `note` | 店舗カードの期間・注記 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | | `label-button` | ピクセルボタン文字 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.3 | 0.1em | | `accent` | 英字クレジット・ドット文字 | 装飾・ディスプレイ | DotGothic16 | 400 | 15px | 1.2 | 0.05em | - 見出しは中央揃えで2〜3行に改行 - 見出しは丸ゴシック太字で字間をやや広く - 日付は大きく、下に緑の帯線を引く - 注意書きは小さいゴシックで左揃え - 英字のクレジットにはドットフォントを使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、店舗カードのみ 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - セクション頭にピクセル吹き出し見出しを中央配置 - 絞り込みボタンは白カードに入れて縦に積み、間隔16px - イベント一覧は横スクロールのカルーセルで、左右のカードを少しはみ出させる - 店舗情報は2列グリッドで、カード間4px - CTAボタンは幅75%前後で中央に置く ## Elevation & Depth - ぼかし影は使わず、右下に黒やグレーの影を4〜6pxずらしたベタ影にする - 白カードの右下にグレーのずらし影を付ける - アウトラインボタンに黒の下影を付けて立体感を出す ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。カルーセル写真は縦長で細い黒枠 - **セクション境界**: 直線の切り替え。黄→黄緑はドットディザのグラデーション - 吹き出し・主要ボタンは角を階段状に欠いたピクセル形 - サブボタンは白地黒枠のピル - 店舗カードは黒の細枠で角丸6px - 店舗ラベルは多色のピル ## Components - **ピクセル吹き出し見出し**（`pixel-speech-heading`）: 白地に黒の太いドット枠。下中央にドットのしっぽを付ける - **絞り込みピクセルボタン**（`button-filter`）: 濃紺の六角形ピクセル枠に黄文字と黄色の＋アイコン。白カードとずらし影の上に置く - **検索決定ボタン**（`button-search`）: 黄地に黒のピクセル枠。右に黒三角を置く - **詳しくはボタン**（`button-outline`）: 白地に黒枠のピル。下に黒影、右に三角 - **店舗情報カード**（`store-card`）: 白地に黒細枠。上に多色のピルラベル、下に期間と予約日を中央揃えで書く - **日程・予約帯**（`date-band`）: 日付には緑の下線、予約開始は緑の帯に黒文字 - **会場ラベル**（`venue-label`）: ロゴ下の薄紫ピル。黒枠を付ける - **ピクセル枠バナー**（`pixel-tile-banner`）: 白地のドット枠タイル2つを横並び。上に小見出し、未公開はグレーにする - **クレジット帯**（`credit-bar`）: ピンク地に黒ピクセル枠。英字はドット文字 ## Do's and Don'ts **Do** - 枠・吹き出し・ボタンの角はドット状の階段で描く - 黒の太線と右下のベタ影で8bit風の立体感を出す - 地色は黄・黄緑・白市松を交互に使う - ひまわり・スイカ・太陽・雲などのドット絵を余白に散らす - 見出しは中央揃えで短く改行する **Don't** - ぼかし影やグラデーションボタンは使わない - 細い明朝や上品な書体は使わない - 角丸の大きいソフトなカードを主要部品にしない - くすんだ中間色を地色にしない - 文字を蛍光面に直接細字で置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名とキャラクターで世界観を伝える）: 黄地にキャラクター集合イラストを置き、その下に白枠のロゴボックスと会場ラベル。上に斜線で挟んだ短いコピー 2. **日程・リード**（会期と予約開始を告知する）: 緑の下線付きの日付、緑帯の予約案内、4行の中央揃えリード 3. **企画バナー**（関連企画へ誘導する）: 黄緑地にピクセル枠タイル2つと横長ボタン2本。未公開はグレーにする 4. **講座検索**（条件で講座を探してもらう）: キャラ＋吹き出しの導入の下に、濃紺の絞り込みボタン5本と黄色の検索ボタン 5. **注目イベント**（おすすめ講座を見せる）: 白市松地に横スクロールの写真カード。下にタイトルと日付・会場を添え、ドットのページャを付ける 6. **各店情報**（他店舗の開催情報を案内する）: 黄地に2列の店舗カード。ドット絵の太陽・雲・ひまわりで飾る 7. **イラストレーター紹介**（作家性をアピールする）: ピンクのクレジット帯、吹き出し、人形写真、作品画像、紹介文の順に並べる 8. **過去のイベント**（実績へ誘導する）: 黄地に吹き出し見出しと文房具のドット絵、ピルボタン 9. **子連れサービス**（施設サービスを案内する）: 白地に吹き出し見出しとクリーム色のバナー、ピルボタン 10. **受賞・注意事項**（信頼性とマナーを伝える）: 中央に受賞エンブレム、ピル見出しの下に左揃えの注意文 11. **SNS・フッター**（公式アカウントへ誘導する）: 緑枠のLINEバナーと各SNSの色枠アイコンを3つ並べ、最下部は黒帯のコピーライト ## Imagery - 黒い太い主線とフラットな塗りの、ちょっとクセのあるキャラクターイラスト - 職業・探検風の衣装を着たキャラクターを集合させる - 16pxグリッドで描いた季節のドット絵（太陽・雲・ひまわり・スイカ・ハート・文房具） - イベント写真は明るく彩度高めの実写を矩形で使う - 背景はうっすらとしたグレー市松とドットディザ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはコンテンツ幅を約1000pxに収め、地色は全幅に広げる - 絞り込みボタンはPCでは2〜3列に並べる - 店舗カードはPCでは3〜4列にする - イベントカルーセルはPCで3〜4枚同時に見せる - ファーストビューはイラストとロゴを横並びにしてもよい ## 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-d5bee280`（元 LP の URL から採番） - **元 LP**: https://website.hankyu-dept.co.jp/honten/h/kodomocollege/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。