---
version: alpha
name: Playful Crayon Parent-Child Event LP
description: 生成りグレーと薄い黄色の地に、クレヨン調の色ブロブを散らした親子向け体験イベントの LP。こげ茶の丸みのある太字ゴシック、黄色マーカーを引いた見出し、えんじ色の枠線ボタンで、子どもらしい元気さと食品メーカーらしい温かさを両立させている。後半はタブ付きの黄色パネルに日時・スケジュール・応募・FAQ をまとめた情報量の多い構成。
colors:
  primary: '#FED344'
  background: '#FDFDFD'
  background-alt: '#EDE8E4'
  surface: '#FEF3D5'
  text: '#361D0C'
  secondary: '#BB1C38'
  cta: '#B1E4D3'
  on-cta: '#FFFFFF'
  marker: '#FDF21B'
  accent-1: '#F7CB73'
  accent-2: '#5CC05A'
  accent-3: '#F08A3A'
  tint-1: '#F1E9E6'
  line: '#5A3A24'
typography:
  display:
    fontFamily: Zen Maru Gothic
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Yusei Magic
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.02em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.6
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-course:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 46px
  button-outline:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.secondary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 52px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 52px
  heading-marker:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 40px
  heading-star:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 40px
  tab-course:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 32px
  badge-free:
    backgroundColor: '{colors.text}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 22px
  faq-item:
    textColor: '{colors.accent-3}'
    typography: '{typography.body-md}'
    height: 48px
  schedule-list:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 62px
---

# DESIGN.md — クレヨン質感とたまご色の親子体験イベント LP（Playful Crayon Parent-Child Event LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、やさしい・柔らかい
- **キーワード**: クレヨン調ブロブ・黄色マーカー見出し・こげ茶の文字・たまご色パネル・傾けた写真・星の飾り
- **地の質感**: 地に細かい紙のテクスチャ。装飾はクレヨンでこすったようなざらついた不定形の色面。
- **形**: 不定形のブロブ、角丸パネル、少し傾けた白フチ写真、星・ジグザグ・スプリングの小さな飾り。
- **温度感**: 暖色寄り。黄色・ベージュ・こげ茶が中心で、ピンク・水色・黄緑をアクセントに散らす。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#FED344` | イベントパネルの黄色い外枠 | 7% | 画素の実測 |
| `background` | `#FDFDFD` | 基本の白い紙地 | 30% | 画素の実測 |
| `background-alt` | `#EDE8E4` | 導入・コンセプト部の生成りグレー地 | 10% | 画素の実測 |
| `surface` | `#FEF3D5` | パネル内のたまご色カード地 | 14% | 画素の実測 |
| `text` | `#361D0C` | 見出し・本文のこげ茶 | 3% | 画素の実測 |
| `secondary` | `#BB1C38` | ブランドのえんじ。手書き風キャッチと枠線ボタン | 1% | 画素の実測 |
| `cta` | `#B1E4D3` | 申込ボタンのミントグリーン | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | 申込ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `marker` | `#FDF21B` | 見出し下の黄色マーカー | 1% | 画素の実測 |
| `accent-1` | `#F7CB73` | コース選択ボタンのオレンジ黄 | 1% | 画素の主要色に補正 |
| `accent-2` | `#5CC05A` | コース選択ボタンの緑 | 1% | 推定 |
| `accent-3` | `#F08A3A` | FAQ の質問文と区切り線のオレンジ | 0% | 推定 |
| `tint-1` | `#F1E9E6` | 問い合わせ部の薄ピンクベージュ地 | 5% | 画素の実測 |
| `line` | `#5A3A24` | FAQ・スケジュール枠のこげ茶線 | 0% | 推定 |

- 地は白紙・生成りグレー・薄ピンクベージュをセクションごとに交互に切り替える。
- 文字は黒ではなくこげ茶で統一する。
- イベント情報は黄色い外枠の中にたまご色の角丸カードを置いてまとめる。
- えんじはブランド想起の手書きキャッチと枠線ボタンだけに使う。
- 見出しの強調は黄色マーカーの帯で行う。
- ピンク・水色・黄緑・ベージュのブロブは余白の飾りにだけ使い、文字の下には置かない。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV のロゴタイトル | 丸ゴシック | Zen Maru Gothic | 900 | 48px | 1.1 | 0.02em |
| `headline-lg` | セクション大見出し（マーカー付き） | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.5 | 0.05em |
| `headline-md` | パネル内の見出し（星飾り付き） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.05em |
| `accent` | えんじの手書き風キャッチ・擬音の強調 | 手書き・筆 | Yusei Magic | 400 | 30px | 1.4 | 0.02em |
| `body-lg` | コンセプト文（中央揃え） | ゴシック | Zen Kaku Gothic New | 700 | 14px | 2.0 | 0.04em |
| `body-md` | 日時・スケジュール・FAQ の本文 | ゴシック | Noto Sans JP | 700 | 11px | 1.8 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.2 | 0.04em |
| `note` | 注釈・※書き | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em |

- 本文もすべて太めのゴシックにして、子ども向けの柔らかさを出す。
- コンセプト文は中央揃えにし、短い行で改行する。
- 大見出しは 2 段組みにして、1 段ずつ黄色マーカーを敷く。
- 擬音や感情語はえんじ色にして、手書き風の書体で文中に差し込む。
- 詳細情報は左揃えの小さい文字で詰めて書く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC も中央に約 500px のカラムを置く
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションの切り替えは背景色の変化で表す。
- 写真は左右にはみ出すくらい大きく置き、少し傾けて 2 枚重ねる。
- ブロブはセクションの左右の端に半分見切れさせて置く。
- イベント詳細は黄色外枠の中のカードに縦に積む。
- スケジュールと FAQ は横線で区切った白いリストにする。

## Elevation & Depth

- 影はほぼ使わず、平面で構成する。
- 傾けた写真にはごく薄いドロップシャドウと白フチを付ける。
- 奥行きはパネルの入れ子（黄色→たまご色→白）で表す。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 四角い写真を数度傾け、白フチを付けて重ねる。強調ラベルは円形バッジ。
- **セクション境界**: 背景色の直線的な切り替え。パネル内は点線で区切る。
- サブボタンはえんじの枠線のピル型にする。
- コース選択ボタンは角丸の塗りボタンにして、アイコンと矢印を入れる。
- タブは上の角だけを丸める。
- FAQ は角丸なしの細枠ボックスにする。

## Components

- **コース選択ボタン**（`button-course`）: 黄と緑の 2 つを横に並べる。アイコン・ラベル・右矢印入りで、濃い色の縁取りを付ける。
- **枠線サブボタン**（`button-outline`）: 白地にえんじの 2px 枠を付けたピル型。右端に矢印か別窓アイコンを置く。
- **申込ボタン**（`button-primary`）: ミント色の角丸ボタン。小さい補足と大きいラベルを 2 段で入れる。会員種別ごとに 2 つ並べる。
- **マーカー見出し**（`heading-marker`）: こげ茶の太字の下半分に、黄色の帯を手塗り風に敷く。
- **星飾り見出し**（`heading-star`）: 見出しの左右に、こげ茶の大小の星を散らす。
- **コース切替タブ**（`tab-course`）: 上の角だけを丸めたタブ。選択中は黄色、非選択は緑。
- **無料バッジ**（`badge-free`）: こげ茶地に白文字の小さいピル型。
- **FAQ アコーディオン**（`faq-item`）: 白地に細枠のボックス。Q はオレンジ文字で、右端に＋/−の丸アイコンを置く。
- **スケジュールリスト**（`schedule-list`）: 黄色の見出し帯の下に、番号付きの項目を白地の横線区切りで並べる。

## Do's and Don'ts

**Do**
- クレヨン調のブロブと小さな飾りを、余白の左右に散らす。
- 文字色はこげ茶で統一する。
- 見出しには黄色マーカーか星の飾りを必ず付ける。
- 写真は子どもの手元や表情を寄りで撮り、傾けて重ねる。
- 詳細情報は黄色パネルの中にまとめ、情報を整理して見せる。

**Don't**
- 純黒の文字や寒色だけの配色にしない。
- 角の鋭い硬いボックスを多用しない。
- ブロブを本文の下に重ねて可読性を下げない。
- えんじを大きな面で使わない。
- 影を強くしない。

## Page Structure

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

1. **ファーストビュー**（イベント名と世界観を伝える）: 四隅にクレヨン調の色面と顔つきキャラを置き、中央にこげ茶の丸ゴシックで大きなロゴタイトルと短い副題を配置する。
2. **コース選択**（2 つのコースへ誘導する）: 生成り地に短いコピーを置き、黄と緑のボタンを横に並べる。
3. **コンセプト**（体験の意義を語る）: えんじの手書き風キャッチの下に、中央揃えの詩的な短文を 3 段落置く。最後にえんじの枠線ボタン。
4. **体験の魅力**（親子で楽しむ様子を見せる）: マーカー見出しの下に、傾けた写真を 2 枚、画面からはみ出す大きさで重ねる。
5. **特典紹介**（記念品の価値を伝える）: マーカー見出しと、写真の上に円形バッジ＋アイコンを重ねたビジュアル。
6. **イベント詳細**（日時・対象・場所を伝える）: タブ付きの黄色外枠の中に、たまご色のカードを置く。星飾り見出し・項目リスト・説明文の順に並べる。
7. **当日のスケジュール**（流れを明示する）: 黄色い見出し帯と、番号付きの白いリスト。
8. **応募フォーム**（申込を完了させる）: スクロールできる要項ボックス、オレンジの同意チェックボックス、ミント色の申込ボタン 2 つ。
9. **よくある質問**（不安を解消する）: 星飾り見出しと、細枠のアコーディオン。
10. **お問い合わせ**（連絡先を示す）: 薄ピンクベージュ地に、中央揃えでアドレスを白い帯で表示する。
11. **企業の想い**（ブランドの理念を伝える）: 六角形を蜂の巣状に並べた多色の図と、大きめの中央揃えの文章。最後にえんじの枠線ボタン。
12. **フッター**（規約と著作権を示す）: 白地に小さい文字のリンクと社名。

## Imagery

- 子どもの手元や表情を自然光で寄って撮った、明るく温かい写真。
- 写真は四角のまま数度傾け、白フチを付ける。
- 装飾はクレヨンで塗ったようなざらついた不定形のブロブ（ピンク・水色・黄緑・ベージュ・紫）。
- 星・ジグザグ・スプリング・お菓子や調理器具の小さなイラストを散らす。
- 顔の付いた丸いキャラクターで遊び心を出す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも本文は中央の狭いカラムに収め、左右は背景色とブロブで埋める。
- PC の FV は、ブロブとキャラを横一面に広げる。
- PC では写真 2 枚を横に並べて傾ける。
- イベントパネルの黄色は 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-910715b8`（元 LP の URL から採番）
- **元 LP**: https://www.morinaga.co.jp/oyakokyoushitsu/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。