DESIGN.md — 黄色ドット×黒縁極太文字のお菓子キャンペーンLP（Pop Yellow Comic Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 黄色ドット・黒縁極太文字・雲形の白い面・ゆるキャラ・黒板・吹き出し
• 地の質感: ハーフトーンのドット柄と放射線を敷いた、コミック調のフラットな質感
• 形: 雲形・波線・吹き出し・花形バッジなど、丸くてやわらかい不定形
• 温度感: 暖色寄り。黄色が主で、深緑と青を差し色に使う

Colors

• 地は黄色ドットと白を交互に置き、境目は雲形か波線にする
• 見出しは黄色や白の文字に焦げ茶の太い縁取りを付ける
• 強調語は赤で、日付ラベルやバッジは青で示す
• 深緑の黒板ブロックは講座のような解説だけに使う
• FAQと注意事項は黄色ドットの上に白カードを置き、読みやすくする
• 1語ずつ色を変えた多色ロゴ文字は、要所で1〜2回だけ使う
• flower-badge は文字 #EDFCF9 × 背景 #027CC9 のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#0277C1、4.51:1）を使う。

Typography

• 大見出しは極太書体に3〜4px相当の焦げ茶の縁取りと影を付ける
• 見出しは中央揃えで2〜4行に分け、1行を短くする
• 本文は12px前後で中央揃えにし、行間を広めにとる
• 例文は丸みのある書体で吹き出しの中に入れる
• 英字のロゴ文字は1文字ずつ色を変え、黒で縁取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。手順と講座は画像と文の 2 列を部分的に使う
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を切り替え、雲形や波線でつなぐ
• 見出しはセクション上部の中央に大きく置く
• キャラクターは見出しや画像の端からはみ出すように重ねる
• FAQや注意事項は白カードを縦に並べ、間隔は約8px
• 規約は高さを固定した枠の中でスクロールさせる

Elevation & Depth

• 影はほぼ使わず、黒い縁取りで立体感を出す
• FAQとフリーお題のカードには薄い影を付ける
• 見出しの文字には下方向にずらした濃い影を付ける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品とキャラクターは切り抜き。お題の写真は太い枠付きの四角で見せる
• セクション境界: 雲形・波線・大きな円弧
• カードとボックスは角丸10px前後
• バッジは花形の青や雲形の白にする
• 吹き出しにはしっぽを付ける
• 日付は黒枠で角丸の白ボックスに入れる

Components

• 縁取り極太見出し（heading-outlined）: 黄色または白の極太文字に焦げ茶の縁取りと影を付けた見出し
• 期間ボックス（period-box）: 黒い太枠の白い角丸ボックス。青字のラベルの下に大きな日付を置く
• 黒板風の講座ブロック（chalkboard）: 茶色の木枠で囲んだ深緑の面。白と黄色の文字で手順を説明する
• STEP番号（step-number）: STEPの文字と白丸の中の色付き数字の後に、下線付きの見出しを続ける
• 例文の吹き出し（speech-bubble）: しっぽ付きの白い角丸の吹き出し。中の例文は緑の丸ゴシック
• 花形の番号バッジ（flower-badge）: 青い花形に白い数字を入れ、手順カードの左上にはみ出させる
• 外部リンクボタン（button-primary）: 黄色のボックスの中に置く黒いピル型ボタン
• FAQアコーディオン（faq-item）: 白い角丸カード。左に吹き出しアイコン、右に黄色い丸の＋を置く
• 注意事項リスト（notice-list）: 白カードの中に、赤い丸の「！」アイコンと文を点線で区切って並べる
• 黄色ラベル（pill-label）: 問い合わせ欄の項目名を入れる小さな黄色のピル

Do's and Don'ts

Do - 見出しは必ず黒い縁取りの極太文字にする - セクションの境目は雲形・波線・円弧にする - キャラクターを各セクションの端に置いてにぎやかにする - 手順は番号バッジとイラストで視覚的に示す - 長い規約やFAQは白カードとスクロール枠にまとめる

Don't - 細い明朝体や上品な配色を使わない - 直線だけで区切った、硬い区切りを多用しない - 黄色以外の暖色を主役にしない - 本文まで装飾書体にしない - 写真を全面に敷いて、ドット柄を隠さない

Page Structure

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

1. ファーストビュー（企画名と商品をひと目で伝える）: 黄色の放射線を背景に雲形ロゴを置き、右に商品の切り抜きを配置する
2. キャンペーン告知（賞品と開催期間を示す）: 縁取りの大見出しを置き、左右にキャラクター、下に黒枠の期間ボックスを置く
3. 企画概要（コラボの内容を説明する）: 白い雲形の面に2社のロゴと中央揃えの本文を置き、最後に大きな訴求コピーを入れる
4. コラボ相手の紹介（サービスについて説明する）: 黄色の角丸ボックスに赤字のリードと本文を入れる
5. 参加の仕組み（パッケージ裏のお題を示す）: 弧状のロゴ文字の下に、パッケージ図と赤い矢印を置く
6. ボケ方講座（考え方を4ステップで教える）: 黒板風のブロックに、STEP番号・イラスト・例文の吹き出しを並べる
7. 賞品紹介（賞品の魅力を伝える）: 黄色の吹き出し形の面に、Tシャツの写真・青いバッジ・雲形の吹き出しを置く
8. 応募方法（3ステップで手順を示す）: 淡い黄色のカードに青い花形の番号とイラストを置き、下に説明文を添える
9. 対象商品（対象のパッケージを示す）: ドット地に商品の切り抜きを重ねて並べ、目印マークを雲形の吹き出しで示す
10. 応募規約（規約を掲載する）: グレーの角丸のスクロール枠に入れる
11. 追加コンテンツ（自由に遊べるお題を案内する）: 横スクロールのカードと、黄色のボックスに入れた外部リンクボタンを置く
12. よくある質問（疑問を解消する）: 黄色ドット地に白いアコーディオンを10件並べる
13. 注意事項・問い合わせ（補足と連絡先を示す）: 白カードに注意事項のリスト、電話番号、黄色ラベルを入れる

Imagery

• 太い線と単色塗りで描いた、ゆるいキャラクターのイラスト
• 商品パッケージは影なしで切り抜き、少し傾けて重ねる
• お題の写真は青か黄色の太枠で囲む
• 背景は白ドットのハーフトーンと放射線
• 赤い矢印、ギザギザの吹き出し、キラキラ記号で動きを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約900pxのコンテンツ幅を取り、両側までドット地を広げる
• 講座の黒板は、PCでは中央の画像と左右2ステップずつの横長1枚にまとめる
• 応募方法の3ステップは、PCでは3カラムで並べる
• フリーお題のカードは、PCでは3枚を並べて表示する
• 外部リンクボックスは、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 行書くと起動時に読み込まれる。