DESIGN.md — 緑×黄のポップな子ども職業体験イベントLP（Green Pop Kids Job Experience Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、親しみ・手作り感、信頼・誠実、清潔・爽やか
• キーワード: 濃い緑・黄色帯・子どもイラスト・縦積みボタン・イベント告知・ポータル
• 地の質感: フラットな単色面だけで作る。影もグラデーションもほぼ使わない。
• 形: 小さな角丸の長方形ボタンとカードで構成する。セクション境界は直線で区切る。
• 温度感: 暖かく明るい。緑で安心感を出し、黄とベージュで楽しさを足す。

Colors

• ボタンとフッターは同じ濃い緑で統一し、ブランド色として扱う。
• 会員登録の導線は黄色の全幅帯にまとめ、ページ内で目立たせる。
• 問い合わせはミント地、フッターは濃緑地にする。地色を変えてセクションを区切る。
• マゼンタは日程の数字にだけ使う。
• 見出し文字は緑、本文はダークグレーで書く。
• 白地を基本にし、色面は帯状に挟む。
• button-primary は文字 #FFFFFF × 背景 #1D8D3B のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1C8738、4.59:1）を使う。
• notice-badge は文字 #1E8E3A × 背景 #EDF6F3 のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1B8135、4.5:1）を使う。
• cta-band は文字 #1E8E3A × 背景 #F9C706 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1B8135、4.57:1）を使う。
• contact-panel は文字 #1E8E3A × 背景 #C3E5D5 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1B8135、4.5:1）を使う。
• sponsor-grid は文字 #FFFFFF × 背景 #1E8E3A のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1B8135、4.54:1）を使う。

Typography

• 見出しは緑の太字で中央揃えにし、下に太い緑の短い下線を引く。
• FVタイトルは極太のポップ書体で黄色にし、ルビを添える。
• ボタンの文字は白の太字で中央揃えにする。
• 本文は小さめのサイズで、行間を詰めすぎない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ボタンは縦積みで、一部だけ 2 列に並べる
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• ナビボタンは同じ幅で縦に並べ、間隔を約6pxにする。
• お知らせは日付とタイトルの2段で書き、下線で区切る。
• 会員登録の2ボタンと問い合わせの2ボタンは横並びにする。
• パートナーのロゴは白カードの3列グリッドに並べる。
• FVのイラストは全幅で見せる。

Elevation & Depth

• 影は使わず、フラットに仕上げる。
• 日程カードは緑の枠線と白地だけで浮かせる。

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: FVのイラストは全幅の矩形で見せる。地図は角丸なしの矩形で埋め込む。
• セクション境界: 直線で区切り、背景色の切り替えで見せる。
• ボタンは角丸3px程度の長方形にする。
• カードは緑の枠と小さな角丸で作る。
• ロゴカードは白地に角丸6pxにする。

Components

• 緑のナビボタン（button-primary）: 全幅に近い緑の長方形に白の太字を載せる。縦に複数並べる。
• 日程告知カード（event-card）: 緑枠の白カード。マゼンタで日程を大きく示し、下端に緑のリンク帯を付ける。
• 情報アイコン付きのお知らせ（notice-badge）: 緑の丸いiアイコンと緑の太字で始め、続けて薄い地の補足行を置く。
• 下線付き見出し（heading-underline）: 緑の中央揃えの文字に、太い緑の下線を引く。
• お知らせ行（news-item）: 小さな日付と本文を2段で書き、薄緑の下線で区切る。
• 会員登録帯（cta-band）: 黄色の全幅帯。緑の小見出しの下に、緑ボタン2つを横に並べる。
• 問い合わせパネル（contact-panel）: ミント地に、フォームボタンと電話ボタンを2列で並べる。
• 協力企業ロゴグリッド（sponsor-grid）: 濃緑地の上に、白い角丸カードを3列で並べる。

Do's and Don'ts

Do - 主色は濃い緑1色に絞り、ボタンをすべてこの色で統一する。 - 会員登録の導線は黄色の帯で目立たせる。 - FVは職業衣装の子どもキャラを並べた明るいイラストにする。 - 見出しは緑文字に下線を付けて統一する。 - 情報は1カラムに整理し、ボタンで各ページへ誘導する。

Don't - 暗い色や高級感のあるトーンにしない。 - グラデーションや強い影を使わない。 - ボタンの色をセクションごとに変えない。 - マゼンタを日程以外に多用しない。 - 実写写真をFVに使わない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ロゴとメニューを置く）: 緑の細い帯の左に白いロゴ、右にハンバーガーメニューを置く。
2. ファーストビュー（イベント名と楽しさを伝える）: 緑の空とベージュの地面のイラストを描く。黄色の極太タイトルに年号の丸バッジを添える。
3. 日程告知カード（開催日と受付状況を伝える）: 緑枠の白カードに、マゼンタの日程、お知らせ行、下部のリンク帯を収める。
4. ナビゲーション（詳細ページへ誘導する）: 緑のボタンを7つ縦に積む。
5. お知らせ（最新情報を伝える）: 下線見出しの下に、日付と本文の行を3件並べる。最後に一覧ボタンを置く。
6. 会員登録CTA（登録と仕事一覧へ誘導する）: 黄色の帯に、補足文付きの緑ボタン2つを横に並べる。
7. 会場案内（場所とアクセスを伝える）: 施設名、住所、地図の埋め込み、緑の説明文、アクセスボタンの順に並べる。
8. お問い合わせ（連絡方法を示す）: ミント地に、フォームと電話の2ボタン、窓口と受付時間の表を置く。
9. フッター（リンク・協力企業・主催者を示す）: 濃緑地に、2列のリンク、ロゴグリッド、縦線で区切った主催者の表を置く。

Imagery

• 太い主線とフラットな塗りの、ポップな子どもキャラのイラストにする。
• キャラは医者・料理人・警備員・農家など職業の衣装を着せる。
• 背景には施設の建物や地域の名物、吹き流しなどの祭り要素を描く。
• 空や背景の星などの小さな装飾を散らす。
• 地図は埋め込みをそのまま使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央の狭い1カラムを保ち、コンテンツ幅は約50%にする。
• PCのFVはイラストを横長にトリミングし、キャラを小さめに見せる。
• ボタンとカードはPCでも最大幅を固定して中央寄せにする。
• 帯状の背景色はPCでも全幅に伸ばす。

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 行書くと起動時に読み込まれる。