朱赤×紫の元気なポイント還元キャンペーン LP

Vivid Vermilion Point Campaign LP

朱赤の地に紫のボタン、黄色の極太数字を重ねたポイント還元キャンペーン LP。競技場風のイラストと紙吹雪で祝祭感を出し、参加手順は白い丸と端末イラストのカルーセルで見せる。後半は白文字の規約を長く並べる情報量の多い構成。

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

ダウンロード

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

COLORS

配色

地はほぼ朱赤一色。濃い朱のブロブを左右端に散らす
主 CTA は紫で統一し、朱地から浮かせる
セクション見出しは黄色文字＋白い斜線帯
朱地の本文・規約は白文字
補足説明は白カードに入れ、見出しは赤茶
フッター付近だけ白・グレー・濃灰に切り替える

TYPOGRAPHY

書体

displayFV の還元ポイント数字装飾・ディスプレイ／ Dela Gothic One 900 ／ 64px ／行間 1.0

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

headline-lgセクション見出し（黄色）ゴシック／ M PLUS Rounded 1c 800 ／ 20px ／行間 1.4

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

headline-md白カードの見出し丸ゴシック／ M PLUS Rounded 1c 800 ／ 17px ／行間 1.5

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

headline-sm規約の項目名ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.6

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

body-md規約本文・説明文ゴシック／ Noto Sans JP 500 ／ 11px ／行間 1.7

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

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

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

label-buttonエントリーボタン丸ゴシック／ M PLUS Rounded 1c 800 ／ 18px ／行間 1.2

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

数字は極太のディスプレイ書体を黄色で塗り、濃い縁取りを付ける
見出しは丸みのある太ゴシックを中央揃えにする
規約本文は小さめの白文字。※はぶら下げインデントにする
強調したい語だけ朱色にする
日付は数字を大きく、曜日は丸囲みにする

PAGE STRUCTURE

セクション構成

ヘッダー・パンくずサイトの所在を示す白地にロゴとボタン、小さいグレーのパンくず
ファーストビュー特典額と期間を一目で伝える紫の空と競技場、朱のトラックのイラスト。黄色の極太数字とキャラ、リボンを重ねる
エントリー CTA参加登録させるベージュ帯に紫ボタンと同意チェック
参加ステップ条件を 3 段階で示す白い円の中の端末イラストをカルーセルで送り、下に注釈
規約導入運営主体と同意を促す斜線帯見出しと白い太字の中央揃えの文
サービス説明カード仕組みを図解する白カードに 2 パネルを矢印でつなぎ、黄色バッジを添える
キャンペーン詳細・注意事項条件を網羅する朱地に白文字。項目見出しは太字、※の箇条書き
関連キャンペーン回遊を促す金色ラベル付きの白カードにバナー画像
シェア・他企画導線拡散と回遊3 色のシェアバーと白地の枠ボタン
フッターSNS とサービスへの導線グレー帯に丸い SNS アイコン、アイコン付きのグリッド、濃灰地のリンク

COMPONENTS

部品

エントリーボタン button-entry紫の横長ボタンに白い太字と指アイコン。下に同意チェックボックスを置く
斜線帯見出し heading-slash白い斜線ストライプの帯で黄色見出しを上下からはさむ
ステップ円カード step-circle白い円の中に端末イラストと番号ラベル、説明文。左右の矢印で送る
白い説明カード info-card赤茶の見出しと、2 つのパネルを矢印でつないだ図解
黄色丸バッジ badge-free黄色の円に紫の太字で無料などを示す
金色ラベル ribbon-checkカード上端に金色のラベルを置き、白文字とキラキラ装飾を添える
SNS シェアバー share-bar黒・紺・緑の 3 色を横に等分したシェアボタン
サブ導線ボタン button-outline白地に黒い細枠と丸矢印。他の企画へ誘導する

守ること

朱赤の地を大きく取り、紫の CTA で目を引く
数字は黄色の極太書体で大きく見せる
紙吹雪・コイン・キラキラを散らして祝祭感を出す
参加条件は 3 ステップの番号付きで見せる
規約は省略せず、項目名を太字にして並べる

DON'T

避けること

CTA を朱系の色にして地に埋もれさせない
寒色やパステルを主役にしない
細い明朝体を使わない
朱地に黒い本文を置かない
グラデーションや強い影を多用しない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 朱赤×紫の元気なポイント還元キャンペーン LP（Vivid Vermilion Point Campaign LP）

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

Overview

業種: キャンペーン・プレゼント／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
キーワード: 朱赤ベタ地・紫のエントリーボタン・黄色の極太数字・紙吹雪とコイン・斜線の見出し飾り・白カードで補足
地の質感: フラットなベタ塗り。濃い朱色の不定形ブロブを背景に散らして奥行きを出す
形: 角丸カード、太い枠の端末イラスト、白い円形のステップ、斜線の帯
温度感: 暖色中心で高揚感があり、紫で締める

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#DA5641`	メインの朱赤地	45%	画素の実測
`secondary`	`#6B4C8C`	エントリーボタン・枠の紫	4%	画素の実測
`cta`	`#6B4C8C`	主 CTA ボタン	2%	画素の実測
`on-cta`	`#FFFAFF`	ボタン上の文字	0%	画素の実測
`background`	`#FEFEFE`	カード・フッター上部の白	15%	画素の実測
`background-alt`	`#F9E1DD`	CTA 帯のベージュ	6%	画素の実測
`accent-1`	`#FEED15`	見出し・数字の黄色	2%	画素の実測
`dark-section`	`#A84331`	背景ブロブの濃い朱	4%	画素の実測
`accent-2`	`#7CB830`	端末イラストの黄緑枠・矢印	1%	推定
`text`	`#893D36`	白カード内の見出し赤茶	0%	画素の実測
`text-body`	`#FFFFFF`	朱地上の白い本文	3%	画素の主要色に補正
`surface`	`#E8E8E8`	SNS 帯の薄グレー	3%	画素の実測
`on-dark`	`#333333`	フッター地	7%	画素の実測
`accent-3`	`#FDC32C`	キャンペーン用の金色コイン・バッジ	1%	画素の実測
`on-cta-accessible`	`#990099`	AA を満たす補正値（計算）		計算

地はほぼ朱赤一色。濃い朱のブロブを左右端に散らす
主 CTA は紫で統一し、朱地から浮かせる
セクション見出しは黄色文字＋白い斜線帯
朱地の本文・規約は白文字
補足説明は白カードに入れ、見出しは赤茶
フッター付近だけ白・グレー・濃灰に切り替える
ribbon-check は文字 #FFFAFF × 背景 #FDC32C のコントラスト比が 1.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#990099、4.63:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の還元ポイント数字	装飾・ディスプレイ	Dela Gothic One	900	64px	1.0	-0.02em
`headline-lg`	セクション見出し（黄色）	ゴシック	M PLUS Rounded 1c	800	20px	1.4	0.04em
`headline-md`	白カードの見出し	丸ゴシック	M PLUS Rounded 1c	800	17px	1.5	0.04em
`headline-sm`	規約の項目名	ゴシック	Noto Sans JP	700	13px	1.6	0.02em
`body-md`	規約本文・説明文	ゴシック	Noto Sans JP	500	11px	1.7	0.02em
`note`	※注釈	ゴシック	Noto Sans JP	500	10px	1.6	0.02em
`label-button`	エントリーボタン	丸ゴシック	M PLUS Rounded 1c	800	18px	1.2	0.06em

数字は極太のディスプレイ書体を黄色で塗り、濃い縁取りを付ける
見出しは丸みのある太ゴシックを中央揃えにする
規約本文は小さめの白文字。※はぶら下げインデントにする
強調したい語だけ朱色にする
日付は数字を大きく、曜日は丸囲みにする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。ステップは横スクロールのカルーセル
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
FV は画面幅いっぱいの一枚絵
FV の直下に CTA と同意チェックを並べる
見出しは上下を斜線帯ではさむ
白カードは左右 16px ほど内側に置き、角丸を付ける
規約は左揃えで長く続ける

Elevation & Depth

影はほとんど付けずフラットにする
ボタンは下に濃い紫の厚みを付けて立体感を出す
白カードは影なしで地色とのコントラストだけで浮かせる

Shapes

角丸: 小 4px ／中 8px ／大 16px。ボタンは角丸の長方形。
写真の切り抜き: ステップは白い円の中に端末イラストを入れる。バナーは角丸の長方形
セクション境界: 直線で切り替え、不定形のブロブを背景に散らす
主ボタンは角丸 8px の横長長方形
端末イラストは太い紫と黄緑の枠
サブボタンは白地に細い黒枠と丸矢印

Components

エントリーボタン（button-entry）: 紫の横長ボタンに白い太字と指アイコン。下に同意チェックボックスを置く
斜線帯見出し（heading-slash）: 白い斜線ストライプの帯で黄色見出しを上下からはさむ
ステップ円カード（step-circle）: 白い円の中に端末イラストと番号ラベル、説明文。左右の矢印で送る
白い説明カード（info-card）: 赤茶の見出しと、2 つのパネルを矢印でつないだ図解
黄色丸バッジ（badge-free）: 黄色の円に紫の太字で無料などを示す
金色ラベル（ribbon-check）: カード上端に金色のラベルを置き、白文字とキラキラ装飾を添える
SNS シェアバー（share-bar）: 黒・紺・緑の 3 色を横に等分したシェアボタン
サブ導線ボタン（button-outline）: 白地に黒い細枠と丸矢印。他の企画へ誘導する

Do's and Don'ts

Do - 朱赤の地を大きく取り、紫の CTA で目を引く - 数字は黄色の極太書体で大きく見せる - 紙吹雪・コイン・キラキラを散らして祝祭感を出す - 参加条件は 3 ステップの番号付きで見せる - 規約は省略せず、項目名を太字にして並べる

Don't - CTA を朱系の色にして地に埋もれさせない - 寒色やパステルを主役にしない - 細い明朝体を使わない - 朱地に黒い本文を置かない - グラデーションや強い影を多用しない

Page Structure

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

ヘッダー・パンくず（サイトの所在を示す）: 白地にロゴとボタン、小さいグレーのパンくず
ファーストビュー（特典額と期間を一目で伝える）: 紫の空と競技場、朱のトラックのイラスト。黄色の極太数字とキャラ、リボンを重ねる
エントリー CTA（参加登録させる）: ベージュ帯に紫ボタンと同意チェック
参加ステップ（条件を 3 段階で示す）: 白い円の中の端末イラストをカルーセルで送り、下に注釈
規約導入（運営主体と同意を促す）: 斜線帯見出しと白い太字の中央揃えの文
サービス説明カード（仕組みを図解する）: 白カードに 2 パネルを矢印でつなぎ、黄色バッジを添える
キャンペーン詳細・注意事項（条件を網羅する）: 朱地に白文字。項目見出しは太字、※の箇条書き
関連キャンペーン（回遊を促す）: 金色ラベル付きの白カードにバナー画像
シェア・他企画導線（拡散と回遊）: 3 色のシェアバーと白地の枠ボタン
フッター（SNS とサービスへの導線）: グレー帯に丸い SNS アイコン、アイコン付きのグリッド、濃灰地のリンク

Imagery

競技場やゴールテープなど、勝利をイメージしたフラットなイラスト
黄色いマスコットキャラが両手を挙げて喜ぶポーズ
金色のコインと色とりどりの紙吹雪を散らす
スマホ画面は太い枠の簡略化したイラストで描く
背景に濃い朱の不定形ブロブを置く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はコンテンツ幅を約 800px に収め、中央に置く
PC はステップ 3 つを横に並べ、カルーセルにしない
FV の一枚絵は PC で横長に組み直す
背景のブロブは PC で左右の余白いっぱいに広げる
フッターのグリッドは 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 行書くと起動時に読み込まれる。

---
version: alpha
name: Vivid Vermilion Point Campaign LP
description: 朱赤の地に紫のボタン、黄色の極太数字を重ねたポイント還元キャンペーン LP。競技場風のイラストと紙吹雪で祝祭感を出し、参加手順は白い丸と端末イラストのカルーセルで見せる。後半は白文字の規約を長く並べる情報量の多い構成。
colors:
  primary: '#DA5641'
  secondary: '#6B4C8C'
  cta: '#6B4C8C'
  on-cta: '#FFFAFF'
  background: '#FEFEFE'
  background-alt: '#F9E1DD'
  accent-1: '#FEED15'
  dark-section: '#A84331'
  accent-2: '#7CB830'
  text: '#893D36'
  text-body: '#FFFFFF'
  surface: '#E8E8E8'
  on-dark: '#333333'
  accent-3: '#FDC32C'
  on-cta-accessible: '#990099'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 64px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 17px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.06em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-entry:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 48px
  heading-slash:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    height: 70px
  step-circle:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 230px
  info-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 300px
  badge-free:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.secondary}'
    rounded: '{rounded.full}'
    height: 56px
  ribbon-check:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 30px
  share-bar:
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    height: 26px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 36px
---

# DESIGN.md — 朱赤×紫の元気なポイント還元キャンペーン LP（Vivid Vermilion Point Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型
- **キーワード**: 朱赤ベタ地・紫のエントリーボタン・黄色の極太数字・紙吹雪とコイン・斜線の見出し飾り・白カードで補足
- **地の質感**: フラットなベタ塗り。濃い朱色の不定形ブロブを背景に散らして奥行きを出す
- **形**: 角丸カード、太い枠の端末イラスト、白い円形のステップ、斜線の帯
- **温度感**: 暖色中心で高揚感があり、紫で締める

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#DA5641` | メインの朱赤地 | 45% | 画素の実測 |
| `secondary` | `#6B4C8C` | エントリーボタン・枠の紫 | 4% | 画素の実測 |
| `cta` | `#6B4C8C` | 主 CTA ボタン | 2% | 画素の実測 |
| `on-cta` | `#FFFAFF` | ボタン上の文字 | 0% | 画素の実測 |
| `background` | `#FEFEFE` | カード・フッター上部の白 | 15% | 画素の実測 |
| `background-alt` | `#F9E1DD` | CTA 帯のベージュ | 6% | 画素の実測 |
| `accent-1` | `#FEED15` | 見出し・数字の黄色 | 2% | 画素の実測 |
| `dark-section` | `#A84331` | 背景ブロブの濃い朱 | 4% | 画素の実測 |
| `accent-2` | `#7CB830` | 端末イラストの黄緑枠・矢印 | 1% | 推定 |
| `text` | `#893D36` | 白カード内の見出し赤茶 | 0% | 画素の実測 |
| `text-body` | `#FFFFFF` | 朱地上の白い本文 | 3% | 画素の主要色に補正 |
| `surface` | `#E8E8E8` | SNS 帯の薄グレー | 3% | 画素の実測 |
| `on-dark` | `#333333` | フッター地 | 7% | 画素の実測 |
| `accent-3` | `#FDC32C` | キャンペーン用の金色コイン・バッジ | 1% | 画素の実測 |
| `on-cta-accessible` | `#990099` | AA を満たす補正値（計算） |  | 計算 |

- 地はほぼ朱赤一色。濃い朱のブロブを左右端に散らす
- 主 CTA は紫で統一し、朱地から浮かせる
- セクション見出しは黄色文字＋白い斜線帯
- 朱地の本文・規約は白文字
- 補足説明は白カードに入れ、見出しは赤茶
- フッター付近だけ白・グレー・濃灰に切り替える
- `ribbon-check` は文字 `#FFFAFF` × 背景 `#FDC32C` のコントラスト比が 1.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#990099`、4.63:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の還元ポイント数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 64px | 1.0 | -0.02em |
| `headline-lg` | セクション見出し（黄色） | ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.04em |
| `headline-md` | 白カードの見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.5 | 0.04em |
| `headline-sm` | 規約の項目名 | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.02em |
| `body-md` | 規約本文・説明文 | ゴシック | Noto Sans JP | 500 | 11px | 1.7 | 0.02em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.02em |
| `label-button` | エントリーボタン | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.2 | 0.06em |

- 数字は極太のディスプレイ書体を黄色で塗り、濃い縁取りを付ける
- 見出しは丸みのある太ゴシックを中央揃えにする
- 規約本文は小さめの白文字。※はぶら下げインデントにする
- 強調したい語だけ朱色にする
- 日付は数字を大きく、曜日は丸囲みにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。ステップは横スクロールのカルーセル
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- FV は画面幅いっぱいの一枚絵
- FV の直下に CTA と同意チェックを並べる
- 見出しは上下を斜線帯ではさむ
- 白カードは左右 16px ほど内側に置き、角丸を付ける
- 規約は左揃えで長く続ける

## Elevation & Depth

- 影はほとんど付けずフラットにする
- ボタンは下に濃い紫の厚みを付けて立体感を出す
- 白カードは影なしで地色とのコントラストだけで浮かせる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: ステップは白い円の中に端末イラストを入れる。バナーは角丸の長方形
- **セクション境界**: 直線で切り替え、不定形のブロブを背景に散らす
- 主ボタンは角丸 8px の横長長方形
- 端末イラストは太い紫と黄緑の枠
- サブボタンは白地に細い黒枠と丸矢印

## Components

- **エントリーボタン**（`button-entry`）: 紫の横長ボタンに白い太字と指アイコン。下に同意チェックボックスを置く
- **斜線帯見出し**（`heading-slash`）: 白い斜線ストライプの帯で黄色見出しを上下からはさむ
- **ステップ円カード**（`step-circle`）: 白い円の中に端末イラストと番号ラベル、説明文。左右の矢印で送る
- **白い説明カード**（`info-card`）: 赤茶の見出しと、2 つのパネルを矢印でつないだ図解
- **黄色丸バッジ**（`badge-free`）: 黄色の円に紫の太字で無料などを示す
- **金色ラベル**（`ribbon-check`）: カード上端に金色のラベルを置き、白文字とキラキラ装飾を添える
- **SNS シェアバー**（`share-bar`）: 黒・紺・緑の 3 色を横に等分したシェアボタン
- **サブ導線ボタン**（`button-outline`）: 白地に黒い細枠と丸矢印。他の企画へ誘導する

## Do's and Don'ts

**Do**
- 朱赤の地を大きく取り、紫の CTA で目を引く
- 数字は黄色の極太書体で大きく見せる
- 紙吹雪・コイン・キラキラを散らして祝祭感を出す
- 参加条件は 3 ステップの番号付きで見せる
- 規約は省略せず、項目名を太字にして並べる

**Don't**
- CTA を朱系の色にして地に埋もれさせない
- 寒色やパステルを主役にしない
- 細い明朝体を使わない
- 朱地に黒い本文を置かない
- グラデーションや強い影を多用しない

## Page Structure

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

1. **ヘッダー・パンくず**（サイトの所在を示す）: 白地にロゴとボタン、小さいグレーのパンくず
2. **ファーストビュー**（特典額と期間を一目で伝える）: 紫の空と競技場、朱のトラックのイラスト。黄色の極太数字とキャラ、リボンを重ねる
3. **エントリー CTA**（参加登録させる）: ベージュ帯に紫ボタンと同意チェック
4. **参加ステップ**（条件を 3 段階で示す）: 白い円の中の端末イラストをカルーセルで送り、下に注釈
5. **規約導入**（運営主体と同意を促す）: 斜線帯見出しと白い太字の中央揃えの文
6. **サービス説明カード**（仕組みを図解する）: 白カードに 2 パネルを矢印でつなぎ、黄色バッジを添える
7. **キャンペーン詳細・注意事項**（条件を網羅する）: 朱地に白文字。項目見出しは太字、※の箇条書き
8. **関連キャンペーン**（回遊を促す）: 金色ラベル付きの白カードにバナー画像
9. **シェア・他企画導線**（拡散と回遊）: 3 色のシェアバーと白地の枠ボタン
10. **フッター**（SNS とサービスへの導線）: グレー帯に丸い SNS アイコン、アイコン付きのグリッド、濃灰地のリンク

## Imagery

- 競技場やゴールテープなど、勝利をイメージしたフラットなイラスト
- 黄色いマスコットキャラが両手を挙げて喜ぶポーズ
- 金色のコインと色とりどりの紙吹雪を散らす
- スマホ画面は太い枠の簡略化したイラストで描く
- 背景に濃い朱の不定形ブロブを置く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はコンテンツ幅を約 800px に収め、中央に置く
- PC はステップ 3 つを横に並べ、カルーセルにしない
- FV の一枚絵は PC で横長に組み直す
- 背景のブロブは PC で左右の余白いっぱいに広げる
- フッターのグリッドは PC で幅を固定し中央寄せ

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

SOURCE

出典と注意

この 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