DESIGN.md — 紫×橙のハロウィン食品AR企画 LP（Halloween Purple Orange Playful AR Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: ハロウィン・夜空の紫・かぼちゃオレンジ・極太丸文字・イラスト多用・ステップ解説
• 地の質感: ベタ塗りを基本に、紫のストライプ、黄色地のドット、斜めに切り替わる帯、クレヨン風の塗りを重ねる
• 形: 大きめの角丸カード、ピル型ボタン、リボン型の見出し帯、吹き出し型のラベル
• 温度感: 暖かく、にぎやかで子どもらしい

Colors

• 地色はセクションごとに大きく切り替える。紫の夜空→紫のストライプ→黄色のドットとオレンジの斜め帯→白→深緑→白→ベージュの順。
• オレンジは期間の帯、STEP ラベル、主ボタン、リボン見出しに使う。
• 紫の地にのせる本文は白地のカードに入れ、文字は紫かこげ茶にする。
• 深緑の帯では白と黄色の文字を使い、マーカーには黄色を使う。
• 注意書きは赤で強調し、白い箱に入れる。
• 商品ラインの違いは紫と緑のラベル色で見分けられるようにする。
• button-orange は文字 #FDFBF3 × 背景 #FC8D21 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B55A02、4.58:1）を使う。
• ribbon-heading は文字 #FDFBF3 × 背景 #FC8D21 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B55A02、4.58:1）を使う。
• step-label は文字 #FDFBF3 × 背景 #FC8D21 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B55A02、4.58:1）を使う。

Typography

• ほぼ全体を太字の丸ゴシックで組み、細い文字は使わない。
• リード文は中央揃えにし、1 行 15〜20 字で意味の切れ目ごとに改行する。
• 大見出しは縁取りとグラデをかけた極太文字にし、少し傾けて動きを出す。
• 数字や当選人数は大きくし、黄色マーカーを引く。
• 見出しの導入に「＼ ／」の囲みや、◆ を 2 つずつ並べた飾りを使う。
• 長い規約だけは標準的なゴシック体にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。参加方法と商品一覧だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白い大カードの中に STEP の小カードを縦に積み、間を紫の下矢印でつなぐ。
• STEP の小カードはクリームとグレーを交互にし、上端にオレンジのピル型ラベルを重ねる。
• セクション見出しはリボン型の帯を中央に置く。
• ボタンは幅 85〜90% の中央配置にする。
• 注釈はカードの外に、地色の上で小さく置く。
• FV は全面イラストで、文字と商品を一枚絵として組む。

Elevation & Depth

• ボタンとFAQカードには、こげ茶の濃い影を下に 4〜6px ずらして付ける（ぼかさない）。
• カードは基本的にフラットにし、太い縁で分ける。
• 黒板風のパネルは白い細枠で囲み、立体感はつけない。
• ぼかした影は使わない。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品写真は背景を切り抜いて置く。キャラクターのイラストは枠からはみ出させる
• セクション境界: 家や木のシルエットの境界、斜めの色帯、角を内側にえぐったカードの縁
• 主ボタンとラベルはピル型にする。
• 白い大カードの上の角は、内側に丸くえぐる。
• 吹き出し型のラベルは六角形気味にし、下にしっぽを付ける。
• FAQ カードはこげ茶の太い縁と角丸 16px で作る。
• 参加方法のカードの上には、半円のオレンジ STEP 札を重ねる。

Components

• 主 CTA ボタン（button-primary）: 紫の地に夜の家のイラストを添え、右端に矢印を置いた横長のピル型ボタン
• オレンジのピル型ボタン（button-orange）: 下にずらした濃い影を付けたオレンジのボタン
• アウトラインのボタン（button-outline）: 白地にこげ茶の縁を付け、右端に ▼ を置いた小さめのピル型ボタン
• リボン型の見出し（ribbon-heading）: オレンジの帯の両端に黒いリボンの端を付け、かぼちゃやクモの巣を添えた見出し
• STEP ラベル（step-label）: カードの上端に重ねる、オレンジのピル型の番号札
• 手順カード（step-card）: クリームかグレーの角丸カード。見出し、イラスト、ボタンを中央揃えで入れる
• 吹き出し型のラベル（speech-label）: 紫か緑の吹き出しに白文字で対象を示し、下のカードに重ねる
• 黒板風のキャンペーンパネル（chalkboard-panel）: 深緑の地に三角の旗、紙吹雪、子どものイラストを散らし、白と黄色の文字で告知する
• FAQ の開閉カード（faq-item）: 白地にこげ茶の太い縁と下の影を付け、右端に薄オレンジの丸に＋を入れた開閉カード
• 注意の箱（warning-box）: 白い箱に赤い太字で注意を書く。赤い縁と ⚠ アイコンを付ける場合もある

Do's and Don'ts

Do - セクションごとに地色と柄（ストライプ・ドット・斜めの帯）を切り替えて、楽しさを出す。 - コウモリ、星のきらめき、かぼちゃ、キャンドルなどの小物を余白に散らす。 - 手順は番号札と矢印で、1 つずつ縦に見せる。 - ボタンや縁にはこげ茶のずらし影を付けて、手作り感を出す。 - 期間・当選数・注意点は色の帯やマーカーで目立たせる。

Don't - 細い明朝体や細いゴシック体で見出しを組まない。 - 無彩色だけの落ち着いた配色にしない。 - ぼかした影やガラス風の効果を使わない。 - 長文をカードに入れずに紫の地へ直接のせない。 - 写実的な写真の人物は使わず、イラストで統一する。

Page Structure

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

1. ファーストビュー（企画の世界観と体験内容を一目で伝える）: 紫の夜空の一枚絵。極太の縁取り文字、中央の大きなキャラクター、手前の商品と手書き風のバッジで組む
2. 期間の帯（体験できる期間を伝える）: オレンジの全幅帯。白いピル型の見出しを置き、白い太字で日付を中央に入れる
3. 導入ストーリー（体験の楽しさを物語として伝える）: 角をえぐった白カードに、紫の中央揃えの文と橙のハッシュタグを入れる
4. キャンペーンの告知（投稿キャンペーンへ誘導する）: 家のシルエットの下に黒板風のパネルを置き、旗、紙吹雪、ギフトのロゴを添える
5. 遊び方（体験の手順を説明する）: 紫のストライプ地の上に白い大カードを置き、STEP の小カード 5 つを矢印でつなぐ
6. 素材のダウンロード（対象別に素材を配布する）: 黄色のドット地にオレンジの斜め帯を重ねる。吹き出しラベル付きのカードに素材と商品を並べ、ボタンを置く
7. 体験の起動 CTA（体験の開始へ誘導する）: 下矢印、紫の大きな問いかけ見出し、キャラクターのイラストのあとに紫のピル型ボタンを置き、下に商品を横一列に並べる
8. 対象商品（対象となる商品を示す）: 白地に 2×2 の商品グリッドを置き、紫の区切り線と赤い注釈を添える
9. 投稿キャンペーンの詳細（賞品と参加方法を伝える）: 深緑の地にクモの巣の線画を重ねる。黄色地の賞品カードと、2×2 の参加ステップカードを置き、3 色のボタンを並べる
10. よくある質問（不安や疑問を解消する）: 白地に、こげ茶の縁と影を付けた開閉カードを縦に並べる
11. 利用規約・問い合わせ（規約と窓口を示す）: ベージュの地に白いスクロール枠の規約を置き、大きな電話番号とブランドサイトへのボタンを続ける

Imagery

• 子どもやキャラクターは、太い主線と頬の赤みのある、親しみやすいフラットなイラストで描く。
• マスコットのモンスターは、クレヨンで塗ったような質感にする。
• 洋館、墓、柵、枯れ木は濃紺のシルエットで描き、紫やピンクの雲と組み合わせる。
• 商品は背景を切り抜いた写真を斜めに配置し、影を軽く付ける。
• 星のきらめき、コウモリ、紙吹雪、三角の旗、キャンディを余白に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約 400〜480px 幅のカード列を置き、背景の柄を全幅に広げる。
• PC の FV は横長の一枚絵にし、左右にお城やかぼちゃのイラストを広げる。
• PC では期間を 1 行にまとめる。
• PC では参加方法を 4 カラムに並べる。
• 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 行書くと起動時に読み込まれる。