--- 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/）からご連絡ください。