DESIGN.md — 海の青×草原の黄の子ども向け菓子ゲームLP（Playful Ocean & Savanna Snack Game Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型
• キーワード: ゲームUI風・海と草原の2世界・方眼紙パネル・ルビ付き極太文字・キャラクター添え・ギザギザ枠
• 地の質感: 方眼紙のグリッド柄と細かいドット柄を淡く敷く。背景は水彩風の海中・サバンナのイラスト。
• 形: 斜めカットの帯見出し、六角形のラベル、楕円の写真枠、波線の区切り、星形・ギザギザのバッジ。
• 温度感: 明るく暖かい。青で冷たく、黄で暖かくして対比させる。

Colors

• 前半は海系の青、後半は草原系の黄緑・黄に分ける。世界ごとにパネル・ラベル・帯の色を揃える。
• パネルの地は、外背景より明るい淡色に方眼柄を重ねる。
• 主CTAと吹き出しボタンだけ赤橙のグラデーションにする。他の面では赤橙を使わない。
• 説明パネルは中立のグレー＋ドット柄にして、周りのイラストから切り離す。
• 本文は焦げ茶にする。黒は使わない。
• 期限など重要な注記だけ赤文字にする。
• button-primary は文字 #FFFFFF × 背景 #F0501E のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D73E0E、4.58:1）を使う。
• speech-button は文字 #FFFFFF × 背景 #F0501E のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D73E0E、4.58:1）を使う。

Typography

• 子ども向けなので、見出しの漢字には小さなルビを振る。
• 見出しは白文字に色の縁取りとドロップシャドウを付け、ステッカー風にする。
• 数字は1.5倍ほど大きくし、黄やオレンジで強調する。
• 本文は焦げ茶で、行間を1.8にとって読みやすくする。
• 見出しは中央揃え、注意事項は左揃えの箇条書きにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。菓子型一覧は2カラムのグリッドで、奇数個のときは最後を中央に置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各世界は、外背景イラストの上に枠付きの方眼パネルを重ねて組む。
• パネル内は大型（組み合わせ型）→ミニチュア→通常型の順に並べ、波線で区切る。
• 大型アイテムは1カラムで大きく見せ、通常型は2カラムで並べる。
• 手順はSTEPバッジ→説明文→スマホ画面モック→▼矢印の順に縦に並べる。
• セクションの境目にイラストの地形（海底・茂み・砂）を挟んで、世界をつなぐ。

Elevation & Depth

• ラベルやボタンは、下方向にずらした濃色のベタ影で立体感を出す。
• パネルには濃い色の太い枠線（4px前後）を付け、影は使わない。
• スマホのモックはグレーの太いフレームで描き、白い縁で浮かせる。
• 写真の楕円の後ろに、色違いの楕円をずらして重ねる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 菓子は白い楕円の中に切り抜いて置き、色付きの縁取りを付ける。商品パッケージは花形（ギザギザ円）の色面に載せる。
• セクション境界: イラストの地形でつなぐ（海底の岩、茂み、黄色い波状の帯）。パネル内の区切りは波線にする。
• ラベルは左右が尖った六角形にする。
• セクション見出し帯は平行四辺形にし、斜めにカットする。
• 囲み枠は郵便切手のようなギザギザの縁にする。
• CTAは厚みのあるピル型で、右端に丸い矢印アイコンを付ける。

Components

• 主CTAボタン（button-primary）: 赤橙グラデーションのピル型ボタン。左にカメラアイコンを星形バッジで重ね、右に丸矢印を付ける。
• 吹き出し型の誘導ボタン（speech-button）: 赤橙の丸いボタンの右端にキャラクターを重ねる。2行のルビ付き文言を入れる。
• 斜め帯見出し（slant-heading）: 平行四辺形の帯に白抜きの太字を載せ、濃色のずれ影を付ける。世界ごとに青か橙にする。
• 六角形の名札（hex-label）: 菓子写真の下に置く名前ラベル。濃紺の縁取り付きで、左に泡、右に草のワンポイントを入れる。
• 楕円写真枠（item-oval）: 白い楕円に菓子を切り抜いて置く。背後に淡色の楕円をずらして重ねる。
• 個数バッジ吹き出し（badge-bubble）: 楕円写真の右上に重ねる尖った吹き出し。大きな数字と小さな補足の2行にする。
• STEPバッジ（step-badge）: 角の欠けた多角形で、下に吹き出しの尾を付ける。STEPと番号を白で載せ、青と橙を交互に使う。
• ギザギザ枠パネル（stamp-panel）: 切手のような縁の白い囲み。中にまとめ見出し、イラスト、モックを置く。
• 蛍光マーカー見出し（name-marker）: 監修者の肩書きと名前の背景に、蛍光黄緑の帯を敷く。

Do's and Don'ts

Do - 海は青系、陸は黄・緑系というように、世界ごとにパネル・ラベル・見出し帯の色を揃える。 - 見出しの漢字にはすべてルビを振る。 - 見出しやボタンの横にキャラクターを添え、親しみを出す。 - パネル背景には、方眼柄やドット柄を淡く敷く。 - ボタンやラベルには、濃色のずれ影で厚みを付ける。

Don't - 赤橙をCTA以外の大きな面に使わない。 - 細い明朝体や淡いグレー文字を使わない。 - 写真を四角く切り抜いて並べない（楕円か花形に入れる）。 - セクション間を、直線で無地の境界にしない。 - 本文に純黒を使わない。

Page Structure

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

1. ファーストビュー（企画名とゲーム体験を一目で伝える）: 海と草原を斜めの稲妻で二分したイラストに、立体ロゴ風タイトルと斜め帯の説明を重ねる。左右下に商品パッケージを置く。
2. アイテム紹介（世界1）（集められる種類を見せ、集めたい気持ちを高める）: 青い方眼パネルにする。大型→ミニ→通常の順に、楕円写真と六角ラベルを並べる。最後に吹き出しボタンを置く。
3. アイテム紹介（世界2）（2つ目のラインナップを見せる）: 同じ構成を、黄・クリームの方眼パネルで繰り返す。
4. 対象商品（参加に必要な商品を示す）: 砂色の地に花形の色面を置き、その上に商品を載せる。2カラムで並べ、下に味ごとの色で商品名を入れる。
5. 企画概要（種類数と期限を伝える）: タイトルをもう一度出し、大きな数字を強調する。期限は星形の緑バッジに入れる。
6. 遊び方（操作手順を説明する）: グレーのドットパネルの中に、STEPバッジ・説明文・スマホモックを縦に並べ、▼でつなぐ。
7. まとめ訴求（ゲームのご褒美を伝える）: ギザギザ枠の中に、星付きの見出しとシルエットイラスト、モックを置く。
8. CTA（ゲーム開始へ誘導する）: 赤橙のピル型ボタンに、カメラアイコンのバッジを重ねる。
9. 注意事項（動作環境と注意点を伝える）: ギザギザ枠のパネルに斜め帯の見出しを付け、箇条書きを並べる。期限は赤字にする。
10. 監修者紹介（内容の信頼性を補う）: ジャングルイラストの上に、角を斜めに切った白カードを置く。蛍光マーカーの名前、写真、本文、黄緑のピル型ボタンで構成する。
11. フッター（SNS共有と企業情報を載せる）: 白地に赤いロゴ帯、SNSの丸アイコン3つ、規約リンクとコピーライトを置く。

Imagery

• 背景は、輪郭線の少ないフラットなイラストで描く。海中（魚群・サンゴ・沈没船）とサバンナ（キリン・ゾウ・岩）を使う。
• 菓子は真上から撮り、白背景で切り抜く。周りに色付きの縁取りを入れる。
• 主役キャラクターを見出しの両脇やボタン端に小さく添える。
• 釣り竿・網・星・泡などの小物を散らして、ゲーム感を出す。
• ゲーム画面は、グレーフレームのスマホモックに入れて見せる。
• 監修者は、仕事場で撮った自然な人物写真を角丸なしで使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約900pxのパネルを置き、両側の背景イラストを広く見せる。
• アイテムの通常型は、PCで4カラム、大型は2カラムにする。
• 遊び方は、PCで4ステップを横一列に並べ、▶でつなぐ。
• 対象商品は、PCで3カラム＋2カラムにする。
• 監修者カードは、PCで写真を右に置く2カラムにする。
• FVは、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 行書くと起動時に読み込まれる。