DESIGN.md — 生成り和柄×朱と緑の縁起物キャンペーンLP（Japanese Festive Pattern Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 和風、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: お正月・縁起物・和柄・朱と緑・抽選プレゼント・キャラクター
• 地の質感: 生成り地に梅花・七宝・雲・ドットの和柄をフラットに散らす。グラデーションや陰影は使わない。
• 形: 角丸のカード、ピル型ボタン、波形の見出しラベル、丸い番号バッジ
• 温度感: 暖色寄り。生成りと朱で温かく、深緑で締める

Colors

• ページの地は生成りにして、和柄を全面に敷く
• 情報はすべて白いカードに載せる。カード枠は朱色か深緑の線にする
• 主CTAは朱オレンジ、詳細リンクは深緑、ハガキ用は山吹色と役割で色を分ける
• 見出しラベルは深緑の地に白文字
• 番号バッジ・STEPラベル・Qアイコンは朱オレンジで統一する
• 手順カードの面は淡いピンクにして白と区別する
• button-primary は文字 #FFFFFF × 背景 #FC5302 のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D14502、4.6:1）を使う。
• badge-number は文字 #FFFFFF × 背景 #FC5202 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D44502、4.51:1）を使う。
• nav-tab は文字 #FFFFFF × 背景 #FC5202 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D44502、4.51:1）を使う。

Typography

• 見出しとボタンは太い丸ゴシックで字間を広くとり、親しみを出す
• 本文は中太のゴシックで行間を広めにする
• 当選人数や日付の数字は大きく太くする
• ロゴ見出しは白フチと影の付いた極太文字にする
• 注釈は11pxで、カードの下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。手順カードは縦積み、または横スクロールの3枚
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは白いカード1枚に収め、上辺に緑の見出しラベルをかぶせる
• カードの間は40px前後あけ、その隙間に和柄を見せる
• 景品は番号バッジ・名前・写真・人数バッジ・詳細ボタンを1単位にする
• 景品の単位どうしは緑の点線で区切る
• CTAは各ブロックの終わりにボタン幅を中央揃えで置く

Elevation & Depth

• 影は基本的に使わず、フラットにする
• カードは2px前後の朱線または緑線で浮かせる
• FAQの白い行は枠線も影もなしで地から浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品写真は白背景の角版か、切り抜きで置く
• セクション境界: 直線の区切りは使わない。和柄の地の上に白カードを並べて区切る
• ボタンはピル型で、右端に白丸の矢印アイコンを付ける
• 見出しラベルは上下が波打つ緑の帯
• 番号バッジは朱色の円に、緑の葉の飾りを添える
• 当選人数バッジは葉の形の緑タグ

Components

• 応募CTA（button-primary）: 朱オレンジのピル型ボタン。右端に白丸の矢印を付ける
• 詳細リンクボタン（button-secondary）: 深緑のピル型ボタン。白文字と白丸の矢印
• 波形見出しラベル（heading-label）: カード上辺にかぶせる緑の波形帯。脇にキャラクターを添える
• セクションカード（card-section）: 白地に朱色の枠線を付けた角丸カード
• ポイント番号バッジ（badge-number）: 朱色の円の中に数字とコース名を入れ、緑の葉を添える
• STEPカード（step-card）: 淡いピンクの縦長カード。上に朱色のピル型STEPラベル、中央に白丸に入れた緑の線画アイコン
• FAQアコーディオン（faq-item）: 白い角丸の行。左に朱丸のQアイコン、右に緑の丸いプラスアイコン
• アンカーナビ（nav-tab）: 朱オレンジの帯を5つに区切ったタブ
• 応募要項スクロール枠（scroll-box）: 白いカード内の固定高さのテキスト枠。緑のスクロールバーを付ける

Do's and Don'ts

Do - 地には和柄（梅・七宝・雲・ドット）を必ず敷く - 情報は白カードにまとめ、緑の波形ラベルで見出しにする - 朱・緑・山吹をボタンの役割で使い分ける - 縁起物のキャラクターを見出しの脇に小さく添える - 手順はSTEP番号・アイコン・短文の3段で組む

Don't - 寒色や黒を基調にしない - グラデーションや強い影を使わない - 角の立った四角いボタンにしない - 写真を全面背景にして和柄を隠さない - 明朝体で堅くしない

Page Structure

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

1. ファーストビュー（キャンペーン名と当選総数を伝える）: 金の和柄の地に極太ロゴとキャラクターを置く。緑の吹き出しで総当選数、縦帯で応募条件を示す
2. アンカーナビ（各セクションへ移動させる）: 朱色のタブを5つ横に並べる
3. 応募期間（期間と締切を伝える）: グレーの帯の上に、朱ラベル付きの日付を並べ、その上に緑のCTAを置く
4. 豆知識（縁起の由来を伝える）: 朱枠のカードに、テキストと丸い写真を左右に並べる
5. 景品（コース別の景品を見せる）: 番号バッジ・写真・人数タグ・緑のボタンを1単位にし、点線で区切る
6. Wチャンス（外れた人への追加抽選を伝える）: グレージュの面に景品2点を並べる
7. 対象商品（購入対象を示す）: 商品写真を3列+2列で並べ、緑のレシピボタンを置く
8. 応募方法（WEB応募とハガキ応募の手順を示す）: STEPカードを3つ並べて2系統分示し、それぞれの下にCTAを置く
9. 応募要項（規約を詳しく載せる）: スクロール枠に小さい文字で入れる
10. よくある質問（疑問を解消する）: 白いQ行のアコーディオンを和柄の地に直接並べる
11. お問い合わせ・最終CTA（窓口を案内し、応募へ誘導する）: ロゴ・電話番号・受付時間ラベルのカードの下に朱色のCTAを置く

Imagery

• 縁起物（だるま・梅・扇・金の雲）のフラットなキャラクターイラストを使う
• 背景の和柄は生成り・金・ピーチの3色程度で、細い線の入らない面だけで描く
• 商品写真は白背景で、真上か斜め上から撮る
• 手順のアイコンは緑の細い線画にし、白丸の中に入れる
• 金色のきらめき（四芒星）を散らして華やかにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約480px幅相当の固定カラムを置き、左右に和柄の地を広げる
• SPではカード幅を90%にし、STEPカードは縦に積む
• ナビは2段にするか横スクロールにする
• FVのロゴとキャラクターは縦に積み直す
• 対象商品はSPで2列にする

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