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

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

Overview

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

Colors

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

Typography

• 本文もすべて太めのゴシックにして、子ども向けの柔らかさを出す。
• コンセプト文は中央揃えにし、短い行で改行する。
• 大見出しは 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

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

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