DESIGN.md — 蛍光イエロー×ドット絵の子ども体験イベントLP（Pixel Retro Game Kids Event LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、レトロ、かわいい、情報量多め・訴求型
• キーワード: ドット絵・レトロゲーム・蛍光色・黒太線・子ども・夏休み
• 地の質感: ベタ塗りの蛍光面とうっすらした市松模様。ドットのグラデーションで色面を切り替える
• 形: ピクセル状に角を欠いた枠、黒い太いアウトライン、ずらした影
• 温度感: 高温で明るい。夏の陽気さ

Colors

• 地色は蛍光イエロー→黄緑→白市松を交互に切り替え、セクションを色で区切る
• 境界は黄から黄緑へドット状のディザで溶かす
• 線と文字は黒で統一し、蛍光面上でもコントラストを確保
• 主要操作ボタンは濃紺地に黄文字、決定ボタンは黄地に黒文字
• 店舗ラベルはピンク・緑・オレンジ・水色など多色のピルで識別
• 未公開ボタンはグレーで半透明にし coming soon を重ねる

Typography

• 見出しは中央揃えで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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。