宇宙黒×赤×黄の食品くじキャンペーン LP

Cosmic Black Red Instant Food Campaign LP

星空の黒背景に赤と黄色の極太文字を重ねた、インパクト重視の食品キャンペーンLP。前半は黒地に白カードで賞品を見せ、稲妻形の赤黄ラインを境に白地へ切り替わり、対象商品と参加方法を見せる。

キャンペーン・プレゼント力強い・インパクトポップ・元気情報量多め・訴求型SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

上半分は黒の星空、下半分は白地。境目に赤と黄の稲妻ラインを置く
大きな訴求文字は黄色に黒の立体影と黒縁で強くする
見出し・数量・手順は赤で統一する
賞品カードは白地に赤い縁と、外に赤い発光ふうの影を付ける
CTAは深紅のグラデに黄色の文字。白い細い内側の縁を付ける
本文は白地上なら黒、黒地上なら白にする

TYPOGRAPHY

書体

displayコースの大訴求・当選額装飾・ディスプレイ／ Dela Gothic One 900 ／ 44px ／行間 1.15

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出し（赤に白縁）装飾・ディスプレイ／ Dela Gothic One 900 ／ 30px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-md賞品名（赤）ゴシック／ Noto Sans JP 900 ／ 24px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-smサブ見出し・商品名ゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md賞品説明の本文ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

note※の注釈・仕様ゴシック／ Noto Sans JP 500 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonCTA文字装飾・ディスプレイ／ Dela Gothic One 900 ／ 24px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

accent表の数値・ラベル帯ゴシック／ Zen Kaku Gothic New 900 ／ 22px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

本文も太字にし、全体を力強くする
訴求の大きな文字は斜体ぎみの極太書体に黒縁と立体影を付ける
強調したい語だけ大きくし、助詞は小さくして字の大小に差をつける
注釈は10px前後で、カード下部にまとめる
数値は大きく、単位は小さく添える

PAGE STRUCTURE

セクション構成

ファーストビューキャンペーンの全体と賞品を一目で伝える黒地に集中線。大きな商品写真の上に赤白の極太タイトル。左右に星形の吹き出しで2つのコースを示し、賞品写真と期間の丸バッジを散らす
導入コピー参加の流れを一言で伝える星空に白の太文字を2行、中央揃え
Aコースの訴求賞品コースの魅力を見せるコースのラベル帯の下に黄色の極太見出し。必要なポイントを赤い立体文字で示す
賞品カード（少ないポイント）賞品の詳細を見せる白カードに数量バッジ、賞品名、本文、写真、注釈を並べ、賞品ごとに赤線で区切る
特別体験の訴求目玉の賞品を盛り上げる白い小見出しと黄色の大見出しを重ね、別の白カードで日付の枠を付けて見せる
Bコースの訴求必ずもらえる特典を見せるコインの絵を周りに散らし、黄色の大きな金額見出しを置く
当選額表結果ごとの賞品を一覧にする白カードに2列の表。最上位の行を黄色にし、下に選べる支払いポイントの黒枠ボックスと注釈を置く
対象商品対象になる商品を示す稲妻の区切りから白地へ。赤の立体見出しの下に、商品の切り抜き画像と商品名を縦に並べる
参加方法手順を4ステップで伝える赤枠の中で、山形の区切りと線画アイコンを使って縦に並べる
CTA・注意事項参加を促し、参加できない場合の案内をする深紅のピル型CTA、赤い線の注意ボックス、下線付きの規約リンク

COMPONENTS

部品

くじ挑戦CTA button-primary深紅グラデのピル型に白い内枠。黄色の極太文字で、主語を大きく
賞品カード prize-card白地に赤の縁と赤い外側の影。賞品名、本文、写真、注釈の順に並べる
コースラベル帯 label-tabカード上端に重なる台形の深紅帯。小さい説明と大きなコース名を並べる
当選数バッジ count-badge赤の角丸正方形に白の太字で人数
インパクト見出し impact-heading黄色の極太文字に黒縁と立体影。星空の上に中央揃え
当選額表 reward-table2列の表。見出しは赤、行は灰色の線で区切り、最上位の行は黄色で強調
参加手順フロー step-flow赤枠の中に番号付きの手順と赤の線画アイコン。山形で区切り、下に赤地白文字の注意を置く
注意ボックス notice-box赤い線の角丸枠。中央揃えの小さな文字で、大事な一文を赤にする

守ること

黒地には星粒と流れ星を必ず散らす
訴求の文字は黄・赤・白の3色に限る
カード上端にラベル帯を重ね、コースの区別を明確にする
数量・金額は大きな数字で目立たせる
CTAは参加方法の直後に1つだけ大きく置く

DON'T

避けること

淡い色や細い書体を使わない
黒地の上に縁なしの白カードを置かない
黄色の文字を白地に直接置かない
商品画像に余計な装飾枠を付けない
グラデをカード背景に使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 宇宙黒×赤×黄の食品くじキャンペーン LP（Cosmic Black Red Instant Food Campaign LP）

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

Overview

業種: キャンペーン・プレゼント／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
キーワード: 星空の黒・極太の黄色文字・赤い縁取り・流れ星・稲妻の区切り・白カード
地の質感: 黒地に星粒と流れ星を散らした宇宙風の背景。文字には黒い立体影と赤の縁取りを付ける
形: 角丸の白カード（赤い縁）、赤い角丸の数量バッジ、台形のラベル帯、ピル型のCTA
温度感: 熱い。赤と黄の高彩度で、お祭りのような勢いを出す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#020202`	前半の星空の黒地	42%	画素の実測
`background-alt`	`#FFFFFF`	後半の白地	30%	画素の実測
`surface`	`#FFFFFD`	賞品カードの白面	20%	画素の実測
`primary`	`#E60113`	ブランドの赤（バッジ・賞品名・手順枠）	6%	画素の実測
`secondary`	`#A8102E`	ラベル帯とCTAの深紅グラデ基色	2%	推定
`accent-1`	`#F9F461`	大見出しの黄色	2%	画素の実測
`cta`	`#B6103C`	主CTAボタン面	1%	画素の実測
`on-cta`	`#FBF50A`	CTA上の文字	0%	画素の実測
`text`	`#070707`	本文・見出しの黒	4%	画素の実測
`on-dark`	`#FFFFFF`	黒地上の白文字	1%	画素の実測
`line`	`#424241`	表の区切り線・区切り赤線	0%	画素の主要色に補正
`text-muted`	`#424241`	注釈の灰色	1%	画素の主要色に補正

上半分は黒の星空、下半分は白地。境目に赤と黄の稲妻ラインを置く
大きな訴求文字は黄色に黒の立体影と黒縁で強くする
見出し・数量・手順は赤で統一する
賞品カードは白地に赤い縁と、外に赤い発光ふうの影を付ける
CTAは深紅のグラデに黄色の文字。白い細い内側の縁を付ける
本文は白地上なら黒、黒地上なら白にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	コースの大訴求・当選額	装飾・ディスプレイ	Dela Gothic One	900	44px	1.15	-0.02em
`headline-lg`	セクション見出し（赤に白縁）	装飾・ディスプレイ	Dela Gothic One	900	30px	1.2	0.0em
`headline-md`	賞品名（赤）	ゴシック	Noto Sans JP	900	24px	1.3	0.02em
`headline-sm`	サブ見出し・商品名	ゴシック	Noto Sans JP	700	17px	1.5	0.02em
`body-md`	賞品説明の本文	ゴシック	Noto Sans JP	700	15px	1.7	0.03em
`note`	※の注釈・仕様	ゴシック	Noto Sans JP	500	10px	1.6	0.0em
`label-button`	CTA文字	装飾・ディスプレイ	Dela Gothic One	900	24px	1.2	0.0em
`accent`	表の数値・ラベル帯	ゴシック	Zen Kaku Gothic New	900	22px	1.3	0.0em

本文も太字にし、全体を力強くする
訴求の大きな文字は斜体ぎみの極太書体に黒縁と立体影を付ける
強調したい語だけ大きくし、助詞は小さくして字の大小に差をつける
注釈は10px前後で、カード下部にまとめる
数値は大きく、単位は小さく添える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SPは1カラム。PCは賞品カード内を2カラムにする
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
白カードは画面幅の約88%で中央に置き、上端にラベル帯を半分はみ出させる
賞品は数量バッジを左、賞品名を右に横並びにする
賞品と賞品の間は赤い細線で区切る
対象商品は商品画像と名前を縦に積み、間を広めにとる
参加手順は赤枠の中で、山形の区切りで縦につなぐ

Elevation & Depth

白カードの外に赤い発光ふうの影（ぼかし約12px）
大きな文字には黒の立体影を下方向へずらして付ける
CTAは深紅のグラデで立体的に見せる

Shapes

角丸: 小 6px ／中 12px ／大 16px。ボタンはピル型。
写真の切り抜き: 商品は切り抜きで影なし。人物写真は角なしの長方形
セクション境界: 黒から白へは赤と黄の稲妻形ジグザグで切り替える
数量バッジは赤の角丸正方形に白文字
ラベル帯は下側が細くなる台形で、深紅グラデ
手順の区切りは下向きの山形（シェブロン）
サブ注意枠は赤い線の角丸ボックス

Components

くじ挑戦CTA（button-primary）: 深紅グラデのピル型に白い内枠。黄色の極太文字で、主語を大きく
賞品カード（prize-card）: 白地に赤の縁と赤い外側の影。賞品名、本文、写真、注釈の順に並べる
コースラベル帯（label-tab）: カード上端に重なる台形の深紅帯。小さい説明と大きなコース名を並べる
当選数バッジ（count-badge）: 赤の角丸正方形に白の太字で人数
インパクト見出し（impact-heading）: 黄色の極太文字に黒縁と立体影。星空の上に中央揃え
当選額表（reward-table）: 2列の表。見出しは赤、行は灰色の線で区切り、最上位の行は黄色で強調
参加手順フロー（step-flow）: 赤枠の中に番号付きの手順と赤の線画アイコン。山形で区切り、下に赤地白文字の注意を置く
注意ボックス（notice-box）: 赤い線の角丸枠。中央揃えの小さな文字で、大事な一文を赤にする

Do's and Don'ts

Do - 黒地には星粒と流れ星を必ず散らす - 訴求の文字は黄・赤・白の3色に限る - カード上端にラベル帯を重ね、コースの区別を明確にする - 数量・金額は大きな数字で目立たせる - CTAは参加方法の直後に1つだけ大きく置く

Don't - 淡い色や細い書体を使わない - 黒地の上に縁なしの白カードを置かない - 黄色の文字を白地に直接置かない - 商品画像に余計な装飾枠を付けない - グラデをカード背景に使わない

Page Structure

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

ファーストビュー（キャンペーンの全体と賞品を一目で伝える）: 黒地に集中線。大きな商品写真の上に赤白の極太タイトル。左右に星形の吹き出しで2つのコースを示し、賞品写真と期間の丸バッジを散らす
導入コピー（参加の流れを一言で伝える）: 星空に白の太文字を2行、中央揃え
Aコースの訴求（賞品コースの魅力を見せる）: コースのラベル帯の下に黄色の極太見出し。必要なポイントを赤い立体文字で示す
賞品カード（少ないポイント）（賞品の詳細を見せる）: 白カードに数量バッジ、賞品名、本文、写真、注釈を並べ、賞品ごとに赤線で区切る
特別体験の訴求（目玉の賞品を盛り上げる）: 白い小見出しと黄色の大見出しを重ね、別の白カードで日付の枠を付けて見せる
Bコースの訴求（必ずもらえる特典を見せる）: コインの絵を周りに散らし、黄色の大きな金額見出しを置く
当選額表（結果ごとの賞品を一覧にする）: 白カードに2列の表。最上位の行を黄色にし、下に選べる支払いポイントの黒枠ボックスと注釈を置く
対象商品（対象になる商品を示す）: 稲妻の区切りから白地へ。赤の立体見出しの下に、商品の切り抜き画像と商品名を縦に並べる
参加方法（手順を4ステップで伝える）: 赤枠の中で、山形の区切りと線画アイコンを使って縦に並べる
CTA・注意事項（参加を促し、参加できない場合の案内をする）: 深紅のピル型CTA、赤い線の注意ボックス、下線付きの規約リンク

Imagery

商品は真上から撮った切り抜き。彩度の高いパッケージを大きく見せる
賞品は白地に切り抜いた写真か、着けている様子の写真
黒地に白い星粒、斜めに走る流れ星、集中線
黄色いコインを散らし、お金の特典を表す
手順のアイコンは赤一色の太い線画
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは上部に赤いピル型のナビを並べる
PCのファーストビューは横長にし、コースの吹き出しを左に寄せる
PCの賞品カードは2カラムで並べ、横幅は約75%にする
PCの当選額表は左に表、右にポイントのボックスを置く
PCの対象商品は3列のグリッド、手順は横に4つ並べて矢印形でつなぐ

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

---
version: alpha
name: Cosmic Black Red Instant Food Campaign LP
description: 星空の黒背景に赤と黄色の極太文字を重ねた、インパクト重視の食品キャンペーンLP。前半は黒地に白カードで賞品を見せ、稲妻形の赤黄ラインを境に白地へ切り替わり、対象商品と参加方法を見せる。
colors:
  background: '#020202'
  background-alt: '#FFFFFF'
  surface: '#FFFFFD'
  primary: '#E60113'
  secondary: '#A8102E'
  accent-1: '#F9F461'
  cta: '#B6103C'
  on-cta: '#FBF50A'
  text: '#070707'
  on-dark: '#FFFFFF'
  line: '#424241'
  text-muted: '#424241'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.6
  label-button:
    fontFamily: Dela Gothic One
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.2
  accent:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.3
rounded:
  sm: 6px
  md: 12px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 72px
  prize-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 1200px
  label-tab:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    rounded: '{rounded.sm}'
    height: 48px
  count-badge:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 64px
  impact-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 240px
  reward-table:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 640px
  step-flow:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 1100px
  notice-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 260px
---

# DESIGN.md — 宇宙黒×赤×黄の食品くじキャンペーン LP（Cosmic Black Red Instant Food Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
- **キーワード**: 星空の黒・極太の黄色文字・赤い縁取り・流れ星・稲妻の区切り・白カード
- **地の質感**: 黒地に星粒と流れ星を散らした宇宙風の背景。文字には黒い立体影と赤の縁取りを付ける
- **形**: 角丸の白カード（赤い縁）、赤い角丸の数量バッジ、台形のラベル帯、ピル型のCTA
- **温度感**: 熱い。赤と黄の高彩度で、お祭りのような勢いを出す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#020202` | 前半の星空の黒地 | 42% | 画素の実測 |
| `background-alt` | `#FFFFFF` | 後半の白地 | 30% | 画素の実測 |
| `surface` | `#FFFFFD` | 賞品カードの白面 | 20% | 画素の実測 |
| `primary` | `#E60113` | ブランドの赤（バッジ・賞品名・手順枠） | 6% | 画素の実測 |
| `secondary` | `#A8102E` | ラベル帯とCTAの深紅グラデ基色 | 2% | 推定 |
| `accent-1` | `#F9F461` | 大見出しの黄色 | 2% | 画素の実測 |
| `cta` | `#B6103C` | 主CTAボタン面 | 1% | 画素の実測 |
| `on-cta` | `#FBF50A` | CTA上の文字 | 0% | 画素の実測 |
| `text` | `#070707` | 本文・見出しの黒 | 4% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 黒地上の白文字 | 1% | 画素の実測 |
| `line` | `#424241` | 表の区切り線・区切り赤線 | 0% | 画素の主要色に補正 |
| `text-muted` | `#424241` | 注釈の灰色 | 1% | 画素の主要色に補正 |

- 上半分は黒の星空、下半分は白地。境目に赤と黄の稲妻ラインを置く
- 大きな訴求文字は黄色に黒の立体影と黒縁で強くする
- 見出し・数量・手順は赤で統一する
- 賞品カードは白地に赤い縁と、外に赤い発光ふうの影を付ける
- CTAは深紅のグラデに黄色の文字。白い細い内側の縁を付ける
- 本文は白地上なら黒、黒地上なら白にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | コースの大訴求・当選額 | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.15 | -0.02em |
| `headline-lg` | セクション見出し（赤に白縁） | 装飾・ディスプレイ | Dela Gothic One | 900 | 30px | 1.2 | 0.0em |
| `headline-md` | 賞品名（赤） | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.02em |
| `headline-sm` | サブ見出し・商品名 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em |
| `body-md` | 賞品説明の本文 | ゴシック | Noto Sans JP | 700 | 15px | 1.7 | 0.03em |
| `note` | ※の注釈・仕様 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em |
| `label-button` | CTA文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 24px | 1.2 | 0.0em |
| `accent` | 表の数値・ラベル帯 | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.3 | 0.0em |

- 本文も太字にし、全体を力強くする
- 訴求の大きな文字は斜体ぎみの極太書体に黒縁と立体影を付ける
- 強調したい語だけ大きくし、助詞は小さくして字の大小に差をつける
- 注釈は10px前後で、カード下部にまとめる
- 数値は大きく、単位は小さく添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。PCは賞品カード内を2カラムにする
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- 白カードは画面幅の約88%で中央に置き、上端にラベル帯を半分はみ出させる
- 賞品は数量バッジを左、賞品名を右に横並びにする
- 賞品と賞品の間は赤い細線で区切る
- 対象商品は商品画像と名前を縦に積み、間を広めにとる
- 参加手順は赤枠の中で、山形の区切りで縦につなぐ

## Elevation & Depth

- 白カードの外に赤い発光ふうの影（ぼかし約12px）
- 大きな文字には黒の立体影を下方向へずらして付ける
- CTAは深紅のグラデで立体的に見せる

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 商品は切り抜きで影なし。人物写真は角なしの長方形
- **セクション境界**: 黒から白へは赤と黄の稲妻形ジグザグで切り替える
- 数量バッジは赤の角丸正方形に白文字
- ラベル帯は下側が細くなる台形で、深紅グラデ
- 手順の区切りは下向きの山形（シェブロン）
- サブ注意枠は赤い線の角丸ボックス

## Components

- **くじ挑戦CTA**（`button-primary`）: 深紅グラデのピル型に白い内枠。黄色の極太文字で、主語を大きく
- **賞品カード**（`prize-card`）: 白地に赤の縁と赤い外側の影。賞品名、本文、写真、注釈の順に並べる
- **コースラベル帯**（`label-tab`）: カード上端に重なる台形の深紅帯。小さい説明と大きなコース名を並べる
- **当選数バッジ**（`count-badge`）: 赤の角丸正方形に白の太字で人数
- **インパクト見出し**（`impact-heading`）: 黄色の極太文字に黒縁と立体影。星空の上に中央揃え
- **当選額表**（`reward-table`）: 2列の表。見出しは赤、行は灰色の線で区切り、最上位の行は黄色で強調
- **参加手順フロー**（`step-flow`）: 赤枠の中に番号付きの手順と赤の線画アイコン。山形で区切り、下に赤地白文字の注意を置く
- **注意ボックス**（`notice-box`）: 赤い線の角丸枠。中央揃えの小さな文字で、大事な一文を赤にする

## Do's and Don'ts

**Do**
- 黒地には星粒と流れ星を必ず散らす
- 訴求の文字は黄・赤・白の3色に限る
- カード上端にラベル帯を重ね、コースの区別を明確にする
- 数量・金額は大きな数字で目立たせる
- CTAは参加方法の直後に1つだけ大きく置く

**Don't**
- 淡い色や細い書体を使わない
- 黒地の上に縁なしの白カードを置かない
- 黄色の文字を白地に直接置かない
- 商品画像に余計な装飾枠を付けない
- グラデをカード背景に使わない

## Page Structure

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

1. **ファーストビュー**（キャンペーンの全体と賞品を一目で伝える）: 黒地に集中線。大きな商品写真の上に赤白の極太タイトル。左右に星形の吹き出しで2つのコースを示し、賞品写真と期間の丸バッジを散らす
2. **導入コピー**（参加の流れを一言で伝える）: 星空に白の太文字を2行、中央揃え
3. **Aコースの訴求**（賞品コースの魅力を見せる）: コースのラベル帯の下に黄色の極太見出し。必要なポイントを赤い立体文字で示す
4. **賞品カード（少ないポイント）**（賞品の詳細を見せる）: 白カードに数量バッジ、賞品名、本文、写真、注釈を並べ、賞品ごとに赤線で区切る
5. **特別体験の訴求**（目玉の賞品を盛り上げる）: 白い小見出しと黄色の大見出しを重ね、別の白カードで日付の枠を付けて見せる
6. **Bコースの訴求**（必ずもらえる特典を見せる）: コインの絵を周りに散らし、黄色の大きな金額見出しを置く
7. **当選額表**（結果ごとの賞品を一覧にする）: 白カードに2列の表。最上位の行を黄色にし、下に選べる支払いポイントの黒枠ボックスと注釈を置く
8. **対象商品**（対象になる商品を示す）: 稲妻の区切りから白地へ。赤の立体見出しの下に、商品の切り抜き画像と商品名を縦に並べる
9. **参加方法**（手順を4ステップで伝える）: 赤枠の中で、山形の区切りと線画アイコンを使って縦に並べる
10. **CTA・注意事項**（参加を促し、参加できない場合の案内をする）: 深紅のピル型CTA、赤い線の注意ボックス、下線付きの規約リンク

## Imagery

- 商品は真上から撮った切り抜き。彩度の高いパッケージを大きく見せる
- 賞品は白地に切り抜いた写真か、着けている様子の写真
- 黒地に白い星粒、斜めに走る流れ星、集中線
- 黄色いコインを散らし、お金の特典を表す
- 手順のアイコンは赤一色の太い線画
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは上部に赤いピル型のナビを並べる
- PCのファーストビューは横長にし、コースの吹き出しを左に寄せる
- PCの賞品カードは2カラムで並べ、横幅は約75%にする
- PCの当選額表は左に表、右にポイントのボックスを置く
- PCの対象商品は3列のグリッド、手順は横に4つ並べて矢印形でつなぐ

## Agent Prompt Guide

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-90288911`（元 LP の URL から採番）
- **元 LP**: https://cp.nissin.com/m/ufo2605/lp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://cp.nissin.com/m/ufo2605/lp/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

キャンペーン・プレゼント赤×空色グラデのポップなキャラ抽選キャンペーンLPPop Red Character Lottery Campaign LP キャンペーン・プレゼントバター黄×焦茶枠の菓子キャンペーンLPButter Yellow Campaign Card LP キャンペーン・プレゼントからし黄×朱赤の昭和レトロ酒類キャンペーンLPRetro Showa Mustard Red Liquor Campaign LP キャンペーン・プレゼント黒×赤×黄の屋台祭り風キャンペーンLPBold Festival Black Red Yellow Campaign LP キャンペーン・プレゼントピンク柄×虹色アイドルのポップなキャンペーンLPPink Idol Pop Campaign LP キャンペーン・プレゼント赤×黄×黒のポップ図形アイス応募キャンペーンLPBold Red Pop Graphic Campaign LP