DESIGN.md — 紫×ピンク×黄のポップなハロウィン菓子キャンペーンLP（Pop Halloween Character Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、親しみ・手作り感
• キーワード: ハロウィン・キャラクター・ビビッド配色・縁取り文字・ストライプ背景・子ども向け
• 地の質感: 縦ストライプ・ハート/コウモリ柄の地紋、劇場カーテンのイラスト、フラットなベタ塗り
• 形: 角丸パネル、ピル型ボタン、波形やギザギザのセクション境界、吹き出し
• 温度感: 暖色と紫の高彩度でにぎやか。夜のハロウィン感と遊び心がある

Colors

• セクションごとに紫・ピンク・黄・赤の地色を大きく切り替え、内容の区切りにする
• 地色の上には白い角丸パネルを置いて情報を読みやすくする
• 主CTAは黒地のピル型に白文字。黄地や紫地の上でもよく目立つ
• 見出しは白文字に黒の太い縁取り。強調する語は黄やピンクにする
• 賞品カードは朱赤の見出し帯に、黄文字の当選数を重ねる
• 黒帯はキャンペーンタイトルとコピーライトだけに使う

Typography

• 子ども向けなので、本文・見出しの漢字にはルビを付ける
• 見出しは太い黒縁取りと落ち影で、ステッカーのような見た目にする
• 見出しの一部の文字をイラストや別色に置き換えて遊びを入れる
• 本文は太めの丸ゴシックで短く改行し、中央揃えを基本にする
• 注意書きだけは細いゴシックの小さい文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦積み、手順は 1〜2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは全幅の色帯で、中央に白か淡色の角丸パネルを置く
• 見出しは帯中央にタブやリボンの形で置く
• キャラクターはパネルの縁からはみ出すように配置する
• 賞品は「賞名帯＋商品写真を＋で並べる＋名前ラベル」の型で繰り返す
• 手順は番号付きカードを矢印でつなぐ

Elevation & Depth

• 影はほぼ使わず、黒い縁取り線で立体感を出す
• 見出し文字には黒のずらし影を付ける
• パネルは影なしのフラットにする
• ボタンにも影は付けず、黒い面で強さを出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品・グッズは切り抜きにし、キャラクターはイラストの輪郭を活かす。スマホの画面は角丸の端末フレームに入れる
• セクション境界: 波形・ギザギザ・カーテンの裾など、セクション境界に装飾的なラインを入れる
• パネルは角丸12〜20px
• タブ見出しは全体を角丸にした帯
• ボタンは完全なピル型
• 吹き出しは白の楕円か角丸に黒線を付ける

Components

• 黒ピルボタン（button-primary）: 黒地に白文字、右端に▶を付けた詳細・購入ボタン
• 黄ピルボタン（button-secondary）: フッターの公式サイトへのリンク。黄地に黒文字
• ピンク／紫のタブ見出し（heading-tab）: パネル上辺に重ねる角丸ラベル。白い縁取り文字を載せる
• 縁取り見出し帯（section-banner）: 白い極太文字に黒縁を付け、左右に斜線の飾りを添えた見出し
• 賞品カード（prize-card）: 朱赤の賞名帯、黄色の当選数、クリーム地に商品を＋でつないで並べる
• 番号付き手順カード（step-card）: 白カードに番号と短文を入れ、ピンクの矢印でつなぐ
• キャラ吹き出し（speech-bubble）: 白地に黒線の吹き出し。縦書きのセリフも可
• スクロール式応募要項（scroll-terms）: 白い角丸ボックスに小さな文字の規約を入れ、中でスクロールさせる

Do's and Don'ts

Do - セクションごとに高彩度の地色を切り替える - 見出しは黒縁取りの極太文字で目立たせる - キャラクターのイラストをパネルの外にはみ出させて動きを出す - 本文の漢字にはふりがなを付ける - 地色の上に白パネルを敷いて情報をまとめる - CTAは黒いピル型＋▶で統一する

Don't - くすんだ色や淡いパステルだけで構成しない - 細い明朝体や縁取りのない細い見出しは使わない - 影の強い立体的なUIやグラデーションのボタンは使わない - 長文を左揃えで詰め込まない - 写真を全面背景にしない（イラストのベタ塗りを主にする）

Page Structure

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

1. グローバルナビ（ページ内の各企画へ移動させる）: 紫帯に白文字のメニューを4つ並べ、▼を付ける
2. ファーストビュー（企画名と期間を伝える）: 紫ピンクのストライプに夜の城とキャラを描き、縁取りの多色タイトルと期間の帯を置く
3. オリジナル動画（動画で世界観を見せる）: 深紅の劇場カーテンの舞台の中央に動画を置き、左右にキャラと吹き出しを配置する
4. 限定パッケージ（コラボ商品を紹介する）: ピンクのリボン見出し、紫の柄地に商品の切り抜きと黒ボタンを置く
5. 遊び方・作り方（商品の楽しみ方を伝える）: 薄紫のパネルに番号付きの2手順をイラストで見せる
6. なぞなぞ紹介（商品の中身の楽しさを伝える）: 大きな縁取りのコピーと、水色枠のカードを3枚並べる
7. 関連書籍（書籍の購入へ誘導する）: 白い角丸パネルに書影と説明、白いピルボタンを置く
8. ARフォトフレーム（体験コンテンツへ誘導する）: ピンクのストライプ地に3ステップのカードと、2つのスマホ画面＋黒ボタンを並べる
9. SNSキャンペーン（賞品と応募期間を見せる）: 黄色地に黒いタイトル帯、A/B/Cの賞品カードを縦に積む
10. 応募方法（応募の手順を説明する）: 白パネルにSTEPラベルを置き、▼でつないで縁取りの完了表示へ
11. 倍率アップ訴求（追加の参加を促す）: さらに!!の吹き出しと、大きな数字の訴求、スマホの画像を並べる
12. 応募要項（規約を開示する）: スクロールする白いボックスと黒いCTAボタン
13. 作品紹介・関連リンク（キャラクターの世界を紹介する）: 青灰ストライプの地に赤いカーテンの見出し、キャラ画像とバナーを置く
14. フッター（SNSと公式サイトへ誘導する）: 朱赤の地にSNSアイコンと黄色のピルボタン、黒いコピーライト帯

Imagery

• 太い黒の主線にベタ塗りで描いた、児童書風のキャラクターイラスト
• カボチャ・コウモリ・お城・お墓などのハロウィン小物を散らす
• 商品・グッズは白背景の切り抜き写真に、黒縁や影を付けずに使う
• 背景にストライプやハート/コウモリ形の地紋を同系色で入れる
• スマホの画面は黒い端末のフレームで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラム。賞品カードの商品3点は縦積みか2+1で並べる
• 手順カードは横3列から縦並びにし、矢印を下向きにする
• FVのタイトルは幅いっぱいにして、キャラは上下に分けて配置する
• PCではコンテンツ幅を約780pxに固定し、色帯だけを全幅にする
• ナビはSPではハンバーガーか横スクロールにする

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