DESIGN.md — 原色セクション×エアメール枠のお祝いキャンペーンLP（Festive Multicolor Party Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: お祝い・パーティ・原色・紙吹雪・エアメール枠・キャラクター
• 地の質感: 地色に淡い星柄と紙吹雪を散らし、白カードはフラットに置く
• 形: 斜めのリボン型見出し、波形のセクション境界、角丸の白カード
• 温度感: 暖かく陽気。彩度の高い原色の多色づかい

Colors

• セクションごとに地色を空色→マゼンタ→緑→オレンジ→空色と切り替える
• 情報は必ず白カードに載せ、地色の上に本文を直接置かない
• カードの縁は赤・白・紺の斜めストライプのエアメール枠にする
• セクション境界は黄色の細い波線帯で区切る
• 注記・サイズ情報は黄色ピル、強調語は赤文字
• 見出しプレートはセクション地色より濃い同系色か補色を使う
• step-badge は文字 #FFFFFF × 背景 #21A955 のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1A8744、4.57:1）を使う。

Typography

• 見出しは太い丸ゴシックで白抜き＋濃色の縁取り
• 本文は濃紺のゴシックで中央または左揃え
• 数字（当選数・期間）は大きく太くして目立たせる
• 英字見出しは黄色地に紺の太い欧文で添える
• 強調語のみ赤色にし、本文の色は増やさない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内は画像と文章を縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは見出しプレート→白カードの順で置く
• 景品カードは同じ型を縦に繰り返す
• STEPは番号バッジ＋イラスト＋説明の横並びで、区切り線で分ける
• カード右上に当選数の丸バッジを重ねる
• ナビはセクション色の平行四辺形ボタンを4つ並べる

Elevation & Depth

• 白カードに影はほぼ付けず、エアメール枠で浮かせる
• キャラクターや商品画像は切り抜きでカードの枠からはみ出させる
• 見出しプレートにはわずかなドロップシャドウ

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: キャラクター・商品は背景透過の切り抜き
• セクション境界: 黄色の細帯を伴う緩やかな波形
• 見出しは左右が斜めに切れたリボン・旗型
• ナビボタンは平行四辺形
• 当選数は円形バッジ
• 応募方法タブは上辺を角丸にしたタブ型
• How toの手順は紺のピル帯を縦に並べる

Components

• リボン型セクション見出し（section-ribbon-heading）: 斜めに傾いた濃色プレートに白い太字見出し、横にガーランドやイラスト
• エアメール枠カード（airmail-card）: 赤白紺ストライプの縁取り付き白カード
• コースラベル（course-label）: カード左上に斜めにかかる色付きラベル帯
• 当選数バッジ（count-badge）: 紺縁の白い円に大きな数字と名様
• サイズ注記ピル（spec-pill）: 黄色のピルに小さな仕様テキスト
• STEP番号バッジ（step-badge）: 黄緑の四角にSTEPと番号
• 詳細を見るボタン（button-secondary）: 紺のピル型帯ボタン、右端に黄色のプラスアイコン
• ダウンロードボタン（button-primary）: 赤地の白文字ボタン、アイコン付き
• ページ内ナビ（nav-parallelogram）: セクション色の平行四辺形ボタンと下向き矢印

Do's and Don'ts

Do - セクションごとに地色を変え、リズムを作る - 白カードはエアメール枠で統一する - ガーランド・紙吹雪・風船を見出しの周りに置く - キャラクターや商品は切り抜きで大きく見せる - 仕様や注記は黄色ピルにまとめる

Don't - くすんだ色や低彩度の配色にしない - 地色の上に長い本文を直接置かない - 細い明朝体など落ち着いた書体を使わない - 装飾のない四角い見出しにしない - 1セクションで地色を混在させない

Page Structure

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

1. ファーストビュー（お祝いムードとキャンペーン内容を一目で伝える）: 空色地にキャラクターと商品を配置し、ロゴ型タイトルを中央に置く
2. キャンペーン期間（期間と概要を示す）: エアメール枠の白カードに期間を大きく、説明を短く置く
3. ページ内ナビ（各セクションへ誘導する）: 色違いの平行四辺形ボタンを4つ並べる
4. 景品（賞品の魅力を伝える）: マゼンタ地にコースごとの白カードを縦に並べ、当選数バッジを重ねる
5. 対象商品（応募条件となる商品を示す）: 緑地に2分割カード、中央に「または」の丸を置く
6. 期間限定パッケージ（限定要素を訴求する）: エアメール枠カードに秘密を番号付き黄色吹き出しで紹介
7. 応募方法（手順を分かりやすく伝える）: オレンジ地、タブ切替の白カードにSTEP 3つを区切り線で並べる
8. 応募要項ボタン（詳細規約へ誘導）: 紺のピル帯ボタンを全幅で置く
9. もっと楽しむ（おまけコンテンツで回遊を促す）: 空色地にカード、How toのピル手順とダウンロードカード3枚
10. 関連リンク・フッター（ブランドサイトへ誘導）: 黄色〜緑の放射グラデーション地にバナーとロゴ、TOPへボタン

Imagery

• キャラクターは背景透過の切り抜きで、動きのあるポーズを使う
• 商品パッケージは斜め上からの切り抜き写真
• ガーランド・風船・プレゼント箱・紙吹雪をフラットなイラストで散らす
• 地色には同系色の星柄を薄く敷く
• 手順はスマホやレシートのシンプルな線画イラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラム。景品カードは画像を上、文章を下に積む
• ナビはSPで2×2の配置にする
• 対象商品の2分割はSPで縦積み
• ダウンロードカード3枚はSPで1列か横スクロール
• PCはコンテンツ幅約800pxで中央寄せ、左右に装飾を広げる

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