DESIGN.md — 朱赤×抹茶緑の和紙調お菓子キャンペーンLP（Festive Red Green Snack Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、和風、親しみ・手作り感、情報量多め・訴求型
• キーワード: 和紙テクスチャ・朱赤と緑の2コース・黄フチ極太数字・短冊ラベル・紙吹雪・キャラクター
• 地の質感: 生成りの和紙調ノイズ地。商品型の黄色い線画を地紋として散らす
• 形: 太い色枠で囲んだ大きなコンテナ。中にピル型の帯見出しと角丸カードを入れる
• 温度感: 暖色寄りでにぎやか。お祭りのような温かさ

Colors

• 地は生成りの和紙調で統一し、白は中に置くカードにだけ使う
• コースごとに緑と朱赤を割り当て、枠・帯見出し・ボタン・表の罫線を同じ色にそろえる
• 金額・賞品名は赤文字に黄色の太フチとドロップシャドウをつける
• 注釈は黒の小さい文字にし、色はつけない
• ヘッダーは朱赤の地に紙吹雪を散らし、下に山吹色の青海波の帯を置く
• button-primary は文字 #FFFFFF × 背景 #598E35 のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#528331、4.52:1）を使う。
• button-secondary-red は文字 #FFFFFF × 背景 #E33A0C のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC380C、4.55:1）を使う。
• band-heading は文字 #FFFFFF × 背景 #598E35 のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#528331、4.52:1）を使う。
• tab-switch は文字 #FFFFFF × 背景 #598E35 のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#528331、4.52:1）を使う。

Typography

• 帯見出しは字間を0.3em前後に広げ、白い太字で中央に置く
• 金額は数字を大きく、単位や助詞は小さくしてメリハリを出す
• 強調したい語だけ赤文字にし、下に黄色のマーカーを敷く
• ルビ風の小さい読みを数字の上に添えてもよい
• 全体は丸みのある太字ゴシックで親しみを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品と商品写真は左右2分割を許容
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• コースごとに画面幅いっぱいの太い色枠コンテナで囲む
• コンテナの左上に短冊ラベルを、右上にキャラクターを置く
• 各情報ブロックの頭にピル型の帯見出しを置き、その下に中央揃えで内容を並べる
• 規約は高さ固定の白いスクロールボックスにする
• ステップは縦に積んだ角丸カードで、イラストの下に説明を置く

Elevation & Depth

• CTAボタンには濃い色の下影をつけて立体感を出す
• 数字の装飾文字は黄フチと暗い影を重ねる
• カード類は影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品写真は切り抜きにする。手順写真は円形に切り抜き、三角矢印でつなぐ
• セクション境界: 太い色枠の箱で区切る。ヘッダー下は青海波の帯
• 緑の枠は手描き風のガタつく線にする
• タブはコンテナの上辺に接して左右に2分割する
• 吹き出しは円形で、しっぽをつける

Components

• 主CTAボタン（button-primary）: 幅いっぱいのピル型ボタン。右端に白丸の矢印アイコンを置き、下影をつける
• 赤コースのボタン（button-secondary-red）: 主CTAと同じ形の朱赤版
• 帯見出し（band-heading）: コース色のピル型の帯に、字間を広げた白文字を入れる
• 短冊ラベル（tanzaku-label）: 傾けた和紙の短冊に筆文字と小さいイラストを入れ、コース名を示す
• 賞金の装飾数字（prize-number）: 赤い極太数字に黄色フチと影をつけ、後ろに助詞を小さく続ける
• ステップカード（step-card）: 淡色の角丸カード。中にスマホ線画イラストと太字の説明を入れる
• 応募方法タブ（tab-switch）: 選択中はコース色の地に白文字、非選択は白地にコース色の文字
• 規約スクロールボックス（scroll-terms）: 白い箱に小さい文字。高さを固定してスクロールさせる
• FAQカード（faq-card）: 白い角丸カード。質問は赤文字でQ.を頭につけ、回答は黒文字

Do's and Don'ts

Do - コースごとの色分けを枠・帯・ボタンまで徹底する - 生成りの和紙地に商品型の線画を薄く散らす - 金額や数字は極太で大きく見せる - 情報ブロックには必ず帯見出しをつける - キャラクターを要所に置いて親しみを出す

Don't - 真っ白なフラット地を全面に使わない - 寒色系やモノトーンの配色にしない - 細い明朝体で見出しを作らない - 1つのコンテナに緑と赤を混ぜない - 写真を角丸の四角で大きく敷き詰めない

Page Structure

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

1. ファーストビュー（キャンペーン名を祝祭感とともに伝える）: 朱赤の地に紙吹雪。左に丸ロゴ、中央に白い大コピー、右にキャラクター。下に青海波の帯とタイトル
2. コース紹介（2つの応募コースを一目で示す）: 短冊2枚を並べ、両脇に賞品を入れた円形の吹き出しを置く
3. 賞品（コース1）（賞金の大きさを訴求する）: 緑の枠の中に帯見出し、賞の名前を赤文字にし、装飾数字で金額を見せる
4. 応募期間・応募内容（条件を明示する）: 帯見出しの下に日付を大きな太字で、注釈を小さく置く
5. CTA（応募フォームへ誘導する）: 緑のピル型ボタンを幅いっぱいに置く
6. 応募手順（応募方法を分かりやすく示す）: タブで方法を切り替え、ステップカードを縦に並べる
7. 結果発表・規約・問い合わせ（補足情報を載せる）: 帯見出しと中央揃えの文字、規約はスクロールボックス
8. 賞品（コース2）（もう1つのコースの賞品を訴求する）: 朱赤の枠の中で、左に装飾文字、右に切り抜き商品写真とサイズ表記
9. アプリ応募手順（購入から応募までの流れを示す）: 白いカードに丸数字の手順、対象商品の表、写真を円形にして矢印でつなぐ
10. よくある質問（不安を解消する）: 白いFAQカードにQ&Aを3つ並べる
11. フッター（ブランドの印象を締めくくる）: 和紙地にキャラクターとロゴを横一列に並べる

Imagery

• 太い主線とフラットな塗りのゆるいキャラクターイラスト
• 茶色の太線で描いたスマホと手の線画。アクセントは黄と赤
• 商品は切り抜き写真にし、寸法線と手書き風の吹き出しを添える
• 地紋は商品形状の黄色い線画を斜めに散らす
• ヘッダーは多色の紙吹雪と青海波
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約70%幅のコンテナを置き、外側は和紙地を見せる
• PC ではステップカードを横に2列で並べる
• 装飾文字やキャラクターの配置は SP と同じ構成のまま縮小する
• 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 行書くと起動時に読み込まれる。