DESIGN.md — 若葉緑×こげ茶の手描きお菓子キャンペーンLP（Playful Green Forest Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、ナチュラル
• キーワード: 森の丘・雲形吹き出し・線画イラスト・キャラクター散らし・白フチ極太見出し・SNS投稿
• 地の質感: フラットな塗りに、細かいドット柄と葉っぱのシルエットを重ねる。紙風カードはうっすら罫線入り。
• 形: 丸い雲形の白い面と、なだらかな丘のカーブ。ボタンはピル型、カードのふちは波形。
• 温度感: あたたかく明るい。春らしい黄緑に、こげ茶と黄色で可愛さを足す。

Colors

• 地は黄緑の丘と緑を交互に重ね、本文は必ず白い雲形の面に載せる。
• 見出し・本文・枠線はこげ茶で統一し、黒は使わない。
• 黄色はボタン・バッジ・番号・マーカーにだけ使う。
• 深緑の面に置く文字は白にする。
• ピンクや紫は花やキャラ小物などの差し色に留める。

Typography

• 見出しはこげ茶の極太文字に太い白フチを付け、緑の地から浮かせる。
• 本文は太めの丸ゴシックで、行間を広く取り中央揃えにする。
• 強調語には黄色の下半分マーカーを引く。
• キャッチは白抜き文字を1文字ずつ傾けて躍らせる。
• 日付や期間は太字で大きめにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。応募STEPは画像とテキストを左右交互に並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 白い雲形の面を左右にずらして重ね、絵本のような流れを作る。
• キャラクターは面の端からはみ出すように配置する。
• 本文ブロックは中央揃えにする。
• 応募方法は紙風カードに①②③の番号付きで縦に並べる。
• 動画サムネイルは2+1の配置にする。

Elevation & Depth

• 影はほぼ使わない。こげ茶の太い線と面の重なりで奥行きを出す。
• ボタンはこげ茶の3px枠で立体感を出し、ドロップシャドウは付けない。
• 見出しの白フチで地からの浮きを表現する。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 線画イラストは雲形の白い面に収める。動画サムネイルは角丸の四角にこげ茶の枠を付ける。
• セクション境界: なだらかな丘のカーブと葉っぱのシルエットで区切る。紙カードの上下は波形のふち。
• 直線の区切りは使わず、曲線か雲形で区切る。
• キャンペーン概要の枠は黄色の太枠に角丸と四隅の鋲を付ける。
• 賞品の見出しは、こげ茶の丸の中に1文字ずつ置く。

Components

• 黄色ピルボタン（button-primary）: 黄色地にこげ茶の太枠を付け、右端に三角の矢印を置く。
• 白ピルボタン（button-secondary）: 白地にこげ茶の太枠。TOPへ戻るなどのサブ導線に使う。
• 雲形吹き出し（cloud-bubble）: 白い雲形の大きな面。線画イラストや本文を収める。
• 白フチ見出し（heading-outline）: こげ茶の極太文字に白フチを付け、2行で中央に置く。
• 波形ふちの紙カード（paper-card）: 生成り地に薄い罫線を入れ、上下をこげ茶の波形で縁取る。応募手順を載せる。
• 黄色丸番号（number-badge）: 黄色の丸にこげ茶の枠と数字。手順の頭に置く。
• STEP吹き出しタグ（step-tag）: こげ茶の丸い吹き出しにSTEPと番号を白抜きで入れ、イラスト枠の角に重ねる。
• 期間バー（period-bar）: こげ茶の帯に白文字で期間を入れ、黄色ピルのラベルを上に重ねる。
• 賞名リボン（prize-ribbon）: 黄色地にこげ茶の枠を付けたリボン型の見出し。審査・抽選は緑の小タグで示す。

Do's and Don'ts

Do - 背景は黄緑と緑の丘・木・葉で森の舞台を作る。 - 人物は細い線画に淡い塗りのみで描き、キャラクターは太めの線でポップに描く。 - 本文は白い雲形の面に中央揃えで載せる。 - 主な導線は黄色のピルボタンで統一する。 - 花やハートを小さく散らして余白を楽しくする。

Don't - 黒文字や真っ黒の線を使わない。 - 角張った直線の区切りやシャープな四角カードにしない。 - 写真を背景いっぱいに敷かない。写真は動画サムネイルだけにする。 - 細い明朝体やクールな寒色系にしない。 - キャラクターを等間隔に整列させない。

Page Structure

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

1. ファーストビュー（キャンペーン名と2つの遊び方を示す）: 白フチの極太タイトルを置き、雲形吹き出し2つに親子・友人の線画を入れる。商品パッケージと躍る白抜きキャッチを重ねる。
2. コンセプト（商品の楽しみ方を伝える）: 深緑の丘形の面に白文字の本文を左揃えで載せ、キャラクターを両端に置く。
3. 楽しみ方の提案（描いてシェアする行動を促す）: 白い雲形の面に2行の見出しとマーカー入り本文を置く。スマホケースのイラストと手書き風コメントを添える。
4. ジェネレーター紹介（Webツールへ誘導する）: 雲形の面に見出し・本文・黄色ピルボタンを置き、下に線画イラストを入れる。
5. 動画紹介（PR動画で楽しさを見せる）: 緑のドット地に白フチ見出しを置き、こげ茶枠のサムネイルを2+1で並べ、注釈を添える。
6. キャンペーン概要（投稿方法と期間を伝える）: 葉っぱの装飾の下に見出しを置き、黄色太枠の白カードに本文を入れ、こげ茶の期間バーで締める。
7. 賞品（賞品の魅力を伝える）: 白い雲形の面2つに賞名リボン・賞品内容・人数バッジを入れ、キャラクターと賞品写真を添える。
8. 応募方法（応募手順を示す）: 波形ふちの紙カードに丸番号付きの手順を並べる。STEP01〜04はイラストと文を左右交互に置く。
9. 規約・リンク（規約やTOPへ誘導する）: 黄色と白のピルボタンを縦に中央へ並べる。
10. フッター（サイト情報）: こげ茶の帯に白い小さな文字でリンクとコピーライトを入れる。

Imagery

• 人物は細いこげ茶の線画に、ピンクや緑の淡い塗りでシンプルに描く。
• キャラクターはデフォルメした動物にし、ポーズ違いを各セクションの端に置く。
• 背景は平塗りの丘・丸い木・笹の葉・小花で描く。
• パッケージや賞品の写真は切り抜きで傾けて配置する。
• 動画サムネイルは笑顔の人物写真に太い文字テロップを重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約960px幅の舞台を作り、FVの吹き出し2つを左右に並べる。
• PCは雲形の面とイラストを左右2カラムで交互に置く。
• 動画サムネイルはPCで3つを横一列に並べる。
• 応募方法はPCで紙カードとSTEPの列を横に並べる。
• 期間バーはPCで1行にまとめる。

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