--- version: alpha name: Green Pop Kids Job Experience Event LP description: 濃い緑を主色に、黄色の帯とベージュの地を組み合わせた子ども向け職業体験イベントのポータル型LP。FVは職業衣装の子どものイラスト。その下に日程カードと緑の角丸ボタンのナビを縦に積む。お知らせ・会場・問い合わせを情報優先の1カラムで並べる。 colors: primary: '#1E8E3A' background: '#FFFFFF' background-alt: '#F8D499' secondary: '#F9C706' tint-1: '#C3E5D5' tint-2: '#EDF6F3' cta: '#1D8D3B' on-cta: '#FFFFFF' accent-1: '#C8156E' text: '#4B4A4A' line: '#BEE3D0' accent-2: '#F9D225' on-dark: '#FFFFFF' cta-accessible: '#1C8738' primary-accessible: '#1B8135' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 3px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 12px section: 48px 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.sm}' height: 32px event-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 150px notice-badge: backgroundColor: '{colors.tint-2}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 20px heading-underline: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 30px news-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 46px cta-band: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 100px contact-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 125px sponsor-grid: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.md}' height: 40px --- # DESIGN.md — 緑×黄のポップな子ども職業体験イベントLP（Green Pop Kids Job Experience Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、親しみ・手作り感、信頼・誠実、清潔・爽やか - **キーワード**: 濃い緑・黄色帯・子どもイラスト・縦積みボタン・イベント告知・ポータル - **地の質感**: フラットな単色面だけで作る。影もグラデーションもほぼ使わない。 - **形**: 小さな角丸の長方形ボタンとカードで構成する。セクション境界は直線で区切る。 - **温度感**: 暖かく明るい。緑で安心感を出し、黄とベージュで楽しさを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1E8E3A` | ブランド緑（ヘッダー・ボタン・フッター） | 27% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#F8D499` | FV下部のベージュ地 | 6% | 画素の主要色に補正 | | `secondary` | `#F9C706` | 会員登録帯の黄色 | 5% | 画素の実測 | | `tint-1` | `#C3E5D5` | 問い合わせセクションのミントの地 | 8% | 画素の実測 | | `tint-2` | `#EDF6F3` | お知らせ欄の薄いグレー地 | 6% | 画素の実測 | | `cta` | `#1D8D3B` | 主ボタンの緑 | 6% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#C8156E` | 日程を示すマゼンタの強調文字 | 1% | 推定 | | `text` | `#4B4A4A` | 本文の濃いグレー文字 | 2% | 画素の実測 | | `line` | `#BEE3D0` | お知らせの下線（薄緑） | 1% | 画素の主要色に補正 | | `accent-2` | `#F9D225` | FVタイトルの黄色文字 | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | 緑地の上の白文字 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#1C8738` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#1B8135` | AA を満たす補正値（計算） | | 計算 | - ボタンとフッターは同じ濃い緑で統一し、ブランド色として扱う。 - 会員登録の導線は黄色の全幅帯にまとめ、ページ内で目立たせる。 - 問い合わせはミント地、フッターは濃緑地にする。地色を変えてセクションを区切る。 - マゼンタは日程の数字にだけ使う。 - 見出し文字は緑、本文はダークグレーで書く。 - 白地を基本にし、色面は帯状に挟む。 - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのイベントタイトル | 装飾・ディスプレイ | Dela Gothic One | 700 | 40px | 1.15 | 0.02em | | `headline-lg` | 日程の大きな数字 | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.2 | 0.0em | | `headline-md` | セクション見出し（下線付き） | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.05em | | `headline-sm` | カード内の小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `body-md` | お知らせの本文・説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.0em | | `note` | 日付・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.03em | - 見出しは緑の太字で中央揃えにし、下に太い緑の短い下線を引く。 - 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 ```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-34b480b5`（元 LP の URL から採番） - **元 LP**: https://outofkidzania-takizawa.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。