--- version: alpha name: Bold Red Pop Graphic Campaign LP description: 真っ赤な地に黄と黒をきかせた、音楽とアイスがテーマの応募キャンペーンLP。幾何学的なフラットイラストと太いディスプレイ書体で勢いを出し、特典は水色と淡黄の帯で区切る。応募手順は黒い角丸カードで番号順に並べる。 colors: primary: '#E90015' background: '#FFF98F' dark-section: '#1E0000' background-alt: '#B9DCE1' cta: '#FFFF16' on-cta: '#100000' accent-1: '#FEEC03' surface: '#FFFEFE' secondary: '#3D3D3D' on-dark: '#FFFFF0' text: '#100000' accent-2: '#F20401' accent-3: '#022399' line: '#F5B0B5' accent-2-accessible: '#ED0401' typography: display: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: M PLUS 1p fontSize: 22px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS 1p fontSize: 16px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: M PLUS 1p fontSize: 15px fontWeight: 700 lineHeight: 1.85 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: M PLUS 1p fontSize: 18px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 72px 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: 68px button-play: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px heading-shadow: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 40px step-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 420px accordion-row: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 58px badge-star: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 48px badge-lottery: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px date-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 140px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 52px --- # DESIGN.md — 赤×黄×黒のポップ図形アイス応募キャンペーンLP（Bold Red Pop Graphic Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 真紅ベタ地・黄色アクセント・幾何学フラットイラスト・太字斜体見出し・黒い手順カード・アコーディオン規約 - **地の質感**: グラデーションなしのベタ塗り。イラストは多角形を切り貼りしたようなフラット調。 - **形**: 角丸カード・ピル型ボタン・星形バッジ・斜めにカットしたラベル帯。 - **温度感**: 高温。赤が全体の半分以上を占め、熱気とにぎやかさがある。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E90015` | メインの赤地 | 42% | 画素の実測 | | `background` | `#FFF98F` | 淡黄の特典セクション地 | 11% | 画素の実測 | | `dark-section` | `#1E0000` | 応募手順カードの黒地 | 13% | 画素の実測 | | `background-alt` | `#B9DCE1` | 水色の特典帯 | 5% | 画素の実測 | | `cta` | `#FFFF16` | 黄色のピル型ボタン | 2% | 画素の実測 | | `on-cta` | `#100000` | 黄ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FEEC03` | セクション境界の黄ライン・強調文字 | 1% | 画素の実測 | | `surface` | `#FFFEFE` | 白いカード・吹き出し | 6% | 画素の実測 | | `secondary` | `#3D3D3D` | プレイヤーカードのチャコール地 | 3% | 画素の実測 | | `on-dark` | `#FFFFF0` | 赤・黒地上の白文字 | 2% | 画素の主要色に補正 | | `text` | `#100000` | 明色地上の黒文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#F20401` | 特典の名称・数字に使う赤文字 | 0% | 画素の実測 | | `accent-3` | `#022399` | 下線見出しの紺文字 | 0% | 画素の実測 | | `line` | `#F5B0B5` | アコーディオンの区切り線 | 0% | 推定 | | `accent-2-accessible` | `#ED0401` | AA を満たす補正値（計算） | | 計算 | - 地の基本は真紅。特典の詳細だけ水色帯と淡黄面に切り替える。 - セクションの境界には太さ6px前後の黄ラインを横一本で引く。 - 黒い手順カードの中で強調したい語句は黄色の文字にする。 - 明色地の上では、景品名と数量を赤の太字にする。 - CTA は黄のピル型。赤地の上で目立たせる。 - 白は日付ボックス・お問い合わせカード・吹き出しにだけ使う。 - `badge-star` は文字 `#F20401` × 背景 `#FFFEFE` のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#ED0401`、4.52:1）を使う。 - `badge-lottery` は文字 `#F20401` × 背景 `#FFFEFE` のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#ED0401`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのタイトル・セクションの大見出し（斜体・影付き） | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.2 | 0.0em | | `headline-lg` | セクション見出し（白文字＋黒のドロップシャドウ） | 装飾・ディスプレイ | Dela Gothic One | 400 | 26px | 1.3 | 0.02em | | `headline-md` | 景品名・小見出し | ゴシック | M PLUS 1p | 900 | 22px | 1.35 | 0.02em | | `headline-sm` | 手順カードの見出し・アコーディオン項目 | ゴシック | M PLUS 1p | 800 | 16px | 1.5 | 0.02em | | `body-md` | 本文（太めのゴシック） | ゴシック | M PLUS 1p | 700 | 15px | 1.85 | 0.03em | | `note` | ※で始まる注釈 | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.0em | | `accent` | 大きな数字（ポイント額・当選人数・電話番号） | 装飾・ディスプレイ | Dela Gothic One | 400 | 48px | 1.0 | -0.02em | | `label-button` | ボタンのラベル | ゴシック | M PLUS 1p | 900 | 18px | 1.2 | 0.04em | - 見出しは極太のディスプレイ書体を使い、斜体や黒影を付けて勢いを出す。 - 本文も太字（700）にして、赤地の上でも読めるようにする。 - 数字は単位の約2倍の大きさにして目立たせる。 - 強調語は色（黄・赤）で示す。下線は明色地の見出しだけに使う。 - 注釈は※から始め、2行目以降を1字ぶん字下げする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特典の一覧だけ 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 本文は左右に約24pxの余白を取り、左揃えにする。 - 見出しは中央揃えで、セクション上端から約48pxあける。 - 手順カードは幅をほぼいっぱいに取り、カード同士は8pxの間隔で縦に積む。 - アコーディオンは上下に線を引いた行として並べ、行の高さは約60pxにする。 - 各セクションの末尾には赤地の余白を広く取り、その後に黄ラインで区切る。 ## Elevation & Depth - 影は基本的に使わず、ベタ面の色の差で層を分ける。 - 見出し文字だけ、黒いハードシャドウ（ぼかしなし・右下に2〜3pxずらす）を付ける。 - FVのイラストは、黄の太い輪郭で人物を切り出す。 ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 景品写真は背景を抜いた切り抜き。イラストは幅いっぱいの裁ち落とし。 - **セクション境界**: 直線の黄ライン。特典帯は色面を水平に切り替える。 - カード類は角丸16〜24px。 - ボタンは完全なピル型。 - 特典ラベルは星形バッジと斜めカットの帯を組み合わせる。 - ＋アイコンは細線の白丸で囲む。 ## Components - **黄ピルCTA**（`button-primary`）: 黄地に黒の太字ラベル。マイページボタンやページトップに使う。 - **再生ボタン**（`button-play`）: 黒地のピル型に黄の枠線。赤い三角アイコンと黄文字を載せる。 - **影付きセクション見出し**（`heading-shadow`）: 白の極太文字に黒のハードシャドウ。中央に置く。 - **手順カード**（`step-card`）: 黒い角丸カード。左上の白枠ボックスに番号ラベル、隣に白い見出し。中にアイコンと本文、アコーディオンを入れる。 - **アコーディオン行**（`accordion-row`）: 上下に区切り線を引き、左に太字の項目名、右に丸で囲んだ＋アイコンを置く。 - **星形の特典バッジ**（`badge-star`）: 白い星形に「特典＋番号」を入れ、その横に黒または赤の斜めカット帯でコース名を置く。 - **抽選・先着ラベル**（`badge-lottery`）: 赤い枠の小さな四角ラベル。すぐ横に大きな赤い人数を並べる。 - **期間ボックス**（`date-box`）: 白い角丸の箱に、黒の太字で日付を大きく入れる。 - **吹き出し**（`speech-bubble`）: 白いピル型の吹き出しに下向きのしっぽを付け、黒の太字を入れる。 ## Do's and Don'ts **Do** - 赤のベタ地を基本にし、黄と黒をアクセントとして必ず添える。 - 見出しは極太のディスプレイ書体にし、斜体または黒影を付ける。 - 応募手順は、番号ラベル付きの黒いカードで縦に並べる。 - 長い規約や注意事項はアコーディオンに格納する。 - 景品は切り抜き写真に大きな数字の人数を組み合わせて見せる。 **Don't** - グラデーションやソフトな影を使わない。 - 細い明朝体や繊細な書体を使わない。 - パステル調だけで構成しない。 - 白地のセクションを広く取らない。 - 写真に過度なフィルターや装飾をかけない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（テーマとキャンペーン期間を一目で伝える）: 幾何学イラストを幅いっぱいに置き、縦組みの極太タイトルを重ねる。下端に黒帯で期間を入れる。 2. **対象と特典サマリー**（特典を3つ並べて俯瞰させる）: 赤帯に対象商品を明記し、水色と黄の斜め分割地に星形バッジ付きで3列に並べる。下に白いピル型の詳細ボタン。 3. **企画説明**（キャンペーンの意図を伝える）: 赤地に白の太字本文を行間広めで組み、作業する人物のイラストを左右に散らす。 4. **コラボ紹介**（コラボ相手を告知する）: 影付き見出し、筆文字ロゴ、人物写真の順に置き、プロフィールはアコーディオンにする。 5. **視聴コンテンツ**（体験への参加を促す）: チャコールの角丸カードに、スタジオのイラスト・吹き出し・レコード盤・再生ボタンを入れる。 6. **キャンペーン概要**（内容と期間を正確に伝える）: 見出しと本文の下に白い期間ボックスを置き、その下に注釈リストを続ける。 7. **応募特典（先着）**（必ずもらえる特典を訴求する）: 水色帯に下線付きの見出し。黒い角丸の条件ボックスと、大きな数字のポイント額で見せる。 8. **応募特典（抽選）**（抽選で当たる景品を紹介する）: 淡黄地に、イラストで描いた景品名バナー・コースバッジ・切り抜き写真・赤い景品名・当選人数を並べる。 9. **応募方法**（手順を順番に説明する）: 黒の角丸カードを5枚縦に並べる。各カードに番号ラベル・アイコン・黄色の強調文字・アコーディオンを入れる。 10. **対象商品**（購入対象を示す）: 商品の切り抜き写真を4列×2段に並べ、下に白文字の箇条書きを置く。 11. **応募規約**（規約を網羅する）: 導入の本文の後に、白線で区切ったアコーディオンを15項目前後並べる。 12. **お問い合わせ・フッター**（窓口案内とページ先頭への導線）: 白い角丸カードに赤い見出しと大きな電話番号を入れ、その下に黄のページトップボタンを置く。 ## Imagery - 多角形を組み合わせたフラットなキュビズム風人物イラスト。赤・ピンク・紫・黄で塗り、黄の太い輪郭線を付ける。 - 録音機材を持つ小さな人物のフラットイラストを、余白にアクセントとして散らす。 - 景品と商品は、白背景を抜いた切り抜き写真にする。 - 手順の説明には、太い黒線と白面のシンプルなアイコンを使う。 - 紙吹雪のような小さな色片を散らして、お祝いらしさを出す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP の1カラムを幅約260pxで中央に固定し、黒の縦線で枠取りする。 - PC の左右の余白は赤地にし、人物イラストと紙吹雪を一面に繰り返し敷く。 - PC の左にはキャンペーン概要と期間の白カード、右には黒いメニューパネルとスマホ参加用のQRカードを固定表示する。 - SP では右上に白丸のハンバーガーメニュー、右下に丸い応募ボタンを固定表示する。 ## 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-03657764`（元 LP の URL から採番） - **元 LP**: https://giant-2026spr.glico.com/zakuon/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。