DESIGN.md — 黄×ピンク×紺のお祭り系アプリキャンペーン LP（Multi-Color Festival App Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、かわいい
• キーワード: お祭り・紙吹雪・集中線・企画ごとの色替え・極太縁取り文字・アプリ誘導
• 地の質感: ベタ塗りの原色の上に、薄い放射状の集中線と紙吹雪・星を散らす。グラデーションはほぼ使わない
• 形: 角丸の矩形カード、紺の角ばったリボン型バッジ、ギザギザのスタンプ型ラベル
• 温度感: 高彩度でとても暖かい。紺の締め色でまとめる

Colors

• FV と締めの会員特典は黄色地。企画セクションは青→ピンク→緑→オレンジと一色ずつ地を変える
• 各企画の見出し・カードは、そのセクションの地色を濃くした色でまとめる
• 文字と縁取りは紺で統一し、多色でも散らからないようにする
• 強調語はマゼンタか黄色の文字にし、白い角丸ラベルに乗せる
• セクションの境目には紺の帯か、白ドットを打ったマゼンタの帯を入れる
• 主 CTA はマゼンタのピル型、アプリストアのボタンは黒
• button-primary は文字 #FFFEFD × 背景 #F30C8C のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E20B82、4.53:1）を使う。

Typography

• 見出しは極太にし、白フチと紺の影を重ねて立体的に見せる
• 本文もほぼ太字にし、中央揃えにする
• 曜日は小さな丸の中に一文字で入れる
• 説明文の上下に斜めの短い線（＼ ／）を付けて注目させる
• 価格は数字を特大にし、OFF の文字は小さめに並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。企画一覧は 2×2、特典カードは 3 列、商品一覧は 4 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算）
• セクションは端まで色で塗り、中のカードは左右 4% 程度の余白を取る
• 各企画の冒頭は左上に第○弾バッジ→白い吹き出し→特大見出し→期間の順に並べる
• クーポンは週ごとの横長カードを縦に積む。左に文字、右に商品写真
• 注釈はセクションの最後に左揃えで置く
• 一覧は角丸のクリーム色パネルにまとめる

Elevation & Depth

• カードの下に濃い同系色の厚いベタ影（ぼかしなし、4〜6px）を付ける
• 見出し文字は白フチ＋紺の影で浮かせる
• 商品写真には白と淡い色の二重フチを付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 背景を抜いた商品写真。ステッカー風の波形フチで丸く切り抜く
• セクション境界: 直線で区切り、紺の帯やドット入りのマゼンタ帯を挟む
• バッジは紺の角ばった形で、カードの左上にはみ出させる
• カードは角丸 12px 前後
• スタンプ型のギザギザラベルを右上に重ねる
• 主ボタンは完全なピル型

Components

• 主 CTA ボタン（button-primary）: マゼンタのピル型。右端に白い丸の再生アイコン
• アプリストアボタン（store-buttons）: 黒い角丸ボタンを 2 つ横に並べる。白文字
• 企画目次カード（campaign-index-card）: 2×2 に並べた色違いのカード。白文字の企画名と下向き矢印の丸、左上に紺のバッジ
• 第○弾バッジ（badge-ribbon）: 紺地に白文字。角ばったリボン型で、セクションの左上に置く
• 白い吹き出しラベル（bubble-label）: 白い角丸の面に紺の太字。見出しの前振りに使う
• 週替わりクーポンカード（coupon-card）: 上に白い期間の帯、下に色の面。左に特大の価格、右に商品写真
• 期間ピル（period-pill）: 紺のピル型に白文字で期間を書く。曜日は丸で囲む
• 特典カード（benefit-card）: 白い角丸カードを 3 列に並べる。紺のラベル、マゼンタの強調語、下にイラスト
• ステッカー一覧（sticker-grid）: クリーム色のパネルに、波形フチの丸い商品写真を 4 列に並べる

Do's and Don'ts

Do - 企画ごとに地の色を変え、区切りがひと目でわかるようにする - 文字・縁取り・バッジは紺で統一する - 見出しは白フチ付きの極太にし、紙吹雪や星を周りに散らす - 価格や数字はとにかく大きくする - アプリダウンロードの導線をページ上部と最後の 2 か所に置く

Don't - 細い明朝体や繊細な書体は使わない - くすんだ色やパステルだけの配色にしない - 黒い文字を多用しない（紺を使う） - 1 つのセクションの中に複数の地色を混ぜない - 写真に暗い背景を付けない

Page Structure

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

1. ファーストビュー（キャンペーン名・期間・会員規模を伝える）: 黄色地に集中線と紙吹雪。上に吹き出し、中央にロゴと極太タイトル、下に紺の期間ピル。左右に手に持ったスマホのイラスト
2. リード文（感謝の気持ちと内容を短く伝える）: 紺の太字を中央揃えにする。数字は白いピルに入れ、強調語はマゼンタ
3. 企画の目次（4 つの企画へ誘導する）: 色違いのカードを 2×2 に並べ、各カードに下向き矢印を付ける
4. アプリダウンロード帯（アプリのインストールを促す）: ドット入りのマゼンタ帯に、黒いストアボタンを 2 つ並べる
5. 企画1 抽選会（抽選の参加条件と景品を伝える）: 青地。右上にスタンプラベル、特大の見出し、期間を 2 段組のパネルにする
6. 企画2 週替わりクーポン（週ごとの割引を伝える）: ピンク地。週番号バッジ付きの色違いクーポンカードを 4 枚縦に積む
7. 企画3 期間限定アップグレード（追加料金で量が増える特典を伝える）: 黄緑地。左に大きな商品写真、右に濃い緑の価格カードを 2 枚
8. 企画4 ステッカープレゼント（全種類のノベルティを見せる）: オレンジ地。クリーム色のパネルに丸いステッカー写真を 4 列に並べ、最後に注釈
9. 会員特典・CTA（アプリの価値を伝えてダウンロードへ誘導する）: 黄色地にロゴ、白い特典カード 3 枚、マゼンタのピル CTA、ストアボタン

Imagery

• 商品写真は背景を抜き、真上か斜め上から明るく撮る
• 丸い商品は白＋淡い色の波形フチでステッカー風にする
• 紙吹雪・星・リボンをフラットなイラストで散らす
• セクションの背景には薄い放射状の集中線を入れる
• スマホやコインなどのアイコンは、太い線のポップなイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 750px 前後の SP と同じ幅の列を置き、左右は地色や柄で埋める
• 企画目次は PC で 4 列横並びにしてもよい
• クーポンカードは PC で 2 列にできる
• ステッカー一覧は PC で 6〜8 列に増やす
• 見出しの文字サイズは最大で 1.5 倍までに留める

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