--- version: alpha name: Pop Red Character Lottery Campaign LP description: 赤いドット地のFVと、空色から黄色へ変わるグラデ背景が特徴の菓子ブランド抽選キャンペーンLP。白いカードの上辺に赤い城壁風ヘッダーを付け、太丸ゴシックの赤文字と3Dキャラ・立体的な雲で、遊び心のあるゲーム的な世界観を作る。 colors: primary: '#E40011' on-primary: '#FFF0F0' background: '#E9E9E9' secondary: '#42B0FF' background-alt: '#FFE85B' cta: '#F7A21B' on-cta: '#FEFCF4' accent-1: '#5B8EF0' text: '#151515' accent-2: '#CF0610' dark-section: '#2E3E46' line: '#F7F8F9' accent-3: '#FEA522' text-muted: '#777777' cta-accessible: '#A46706' accent-1-accessible: '#2367EB' primary-accessible: '#E10011' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.1em accent: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.2 rounded: sm: 6px md: 16px lg: 28px 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}' card-castle-header: backgroundColor: '{colors.background}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 64px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-nav: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px step-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 270px calendar: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 520px speech-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px label-bar: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px period-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 24px --- # DESIGN.md — 赤×空色グラデのポップなキャラ抽選キャンペーンLP（Pop Red Character Lottery Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 赤ドット地・空色→黄色グラデ・3Dキャラクター・ぷっくり雲・城壁風カード見出し・ゲームUI風ボタン - **地の質感**: 細かい白ドットを敷いた赤地と、なめらかな縦グラデ。雲やキャラは3DCGで立体感がある - **形**: 角丸大きめの白カードに濃いオフセット影。ボタンはピル型で白い縁取り付き - **温度感**: 暖色の赤と寒色の空色を対比させた、明るく賑やかな温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E40011` | ブランド赤（FV・見出し帯・フッター） | 20% | 画素の実測 | | `on-primary` | `#FFF0F0` | 赤地上の白文字 | 3% | 画素の実測 | | `background` | `#E9E9E9` | カード内の白地 | 24% | 画素の実測 | | `secondary` | `#42B0FF` | 空色の背景グラデ上部 | 12% | 画素の実測 | | `background-alt` | `#FFE85B` | 下部の黄色背景 | 7% | 画素の実測 | | `cta` | `#F7A21B` | 予約など主CTAのオレンジ | 0% | 推定 | | `on-cta` | `#FEFCF4` | CTA上の白文字 | 0% | 画素の実測 | | `accent-1` | `#5B8EF0` | ナビ系ボタンの青 | 2% | 推定 | | `text` | `#151515` | 本文の黒文字 | 1% | 画素の実測 | | `accent-2` | `#CF0610` | 見出し・説明の赤文字 | 2% | 画素の実測 | | `dark-section` | `#2E3E46` | カードのオフセット影 | 1% | 推定 | | `line` | `#F7F8F9` | カレンダー枠のグレー | 1% | 画素の主要色に補正 | | `accent-3` | `#FEA522` | カレンダー強調の黄橙 | 0% | 画素の実測 | | `text-muted` | `#777777` | 注釈のグレー文字 | 0% | 推定 | | `cta-accessible` | `#A46706` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#2367EB` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E10011` | AA を満たす補正値（計算） | | 計算 | - FVとイベント・フッターは白ドット柄の赤地で挟む - 中間は空色→水色→黄緑→黄色の縦グラデで世界観の移り変わりを表現 - 情報は必ず白カードに載せ、見出し帯は赤 - カード内の見出し・ステップ説明は赤文字、長文本文は黒 - 主CTAはオレンジ、案内・規約系ボタンは青で役割を分ける - 黄・オレンジは日付やバッジなど小面積の強調に限定 - `button-cta` は文字 `#FEFCF4` × 背景 `#F7A21B` のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A46706`、4.52:1）を使う。 - `button-nav` は文字 `#FFF0F0` × 背景 `#5B8EF0` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#2367EB`、4.51:1）を使う。 - `speech-bubble` は文字 `#FFF0F0` × 背景 `#E40011` のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E10011`、4.51:1）を使う。 - `period-badge` は文字 `#FFF0F0` × 背景 `#E40011` のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E10011`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション大見出し（赤・白） | 丸ゴシック | M PLUS Rounded 1c | 900 | 24px | 1.35 | 0.05em | | `headline-md` | カード見出し帯の白文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.1em | | `headline-sm` | 景品名・ステップ説明の赤太字 | ゴシック | Noto Sans JP | 900 | 14px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.75 | 0.02em | | `note` | 注釈・商標表記 | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.0em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.3 | 0.1em | | `accent` | 日付・会場名の大きな数字 | ゴシック | Noto Sans JP | 900 | 26px | 1.2 | 0.0em | - 全体に太いウェイト（700〜900）を使い、細い書体は使わない - 見出しは丸ゴシックで字間を少し広げる - 本文も太字で、子ども向けにも読める強さを出す - 長い見出しは2行に改行し中央揃え - 日付・数字は大きく、曜日などの括弧は小さめに - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、景品パッケージ一覧は 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは画面幅の約90%で中央配置 - カード内の写真は約80%幅で縦積み - ステップは番号付きの枠カードを縦に並べる - セクション間に雲やキャラを大きく置いて余白を埋める - ナビボタンは1個+2個の段組み ## Elevation & Depth - 白カードは下に約12pxずらした濃紺グレーの影（ぼかしなし） - ステップカードも同様のオフセット影 - ボタンは白い縁と内側の光沢でぷっくりした立体感 - 雲・キャラは3DCGの陰影でカードより手前に重ねる ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 景品写真は角丸なしの横長長方形、イベント写真は白縁の角丸 - **セクション境界**: 立体的な雲の連なりや、赤帯の直線で切り替える - カード上辺は凸凹の城壁（カレンダー留め具）風の赤ヘッダー - ステップ番号は台形の赤いタブ - セクション見出しの左右に台形アイコンを置く - 吹き出しは丸く柔らかい形 ## Components - **城壁風見出しカード**（`card-castle-header`）: 上辺が凸凹の赤帯に白見出し、左右に白丸。本体は白で濃い影付き - **主CTAボタン**（`button-cta`）: オレンジのピル型、白い外縁と赤の外枠、紙吹雪模様 - **青いナビボタン**（`button-nav`）: 青のピル型に白縁、内側に小さな紙片模様。規約・ページ内リンク用 - **番号付きステップカード**（`step-card`）: 赤い太枠の白カードに台形の番号タブ、イラストと赤字説明 - **抽選カレンダー**（`calendar`）: 赤い月帯と曜日、グレー罫線の表に赤・黄のイベント帯 - **赤い吹き出し**（`speech-bubble`）: 楕円の赤い吹き出しに白文字、キャラのセリフ - **白ラベル帯**（`label-bar`）: 赤地上の白い角丸帯に赤文字で項目名 - **期間バッジ**（`period-badge`）: FVで日付の上に置く小さな赤角丸ラベル ## Do's and Don'ts **Do** - 赤ドット地とグラデ背景の上に白カードを置く構成を守る - キャラ・雲・星・紙吹雪を余白に散らして賑やかにする - ボタンはピル型で白縁と光沢を付ける - 見出しは太丸ゴシックの赤か白 - カードにはぼかしなしのオフセット影を付ける **Don't** - 細い明朝や繊細な書体を使わない - くすんだ色やモノトーン中心にしない - 影をぼかした柔らかいドロップシャドウにしない - 写真を角丸カードや円形にしすぎない（景品写真は長方形） - 赤とオレンジのCTAを同じ役割で混在させない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー・ナビ**（ブランド表示と回遊）: 赤地に白丸柄のロゴ帯、下に白背景の5分割テキストナビ 2. **ファーストビュー**（キャンペーン名と期間を伝える）: 赤ドット地にロゴ風タイトル、周囲に3Dキャラと商品、期間バッジ、青ナビボタン3つ 3. **キャンペーン概要**（仕組みの説明）: 空色地に城壁風白カード、画像の下に赤見出しと黒本文 4. **景品紹介**（景品の魅力を見せる）: 白カード内に景品写真と赤字の名前を縦に連続 5. **抽選カレンダー**（スケジュール提示）: 月帯付きカレンダー表と注意アイコン付き注記、月送りボタン 6. **参加方法**（手順を理解させる）: 番号タブ付き赤枠カードを5つ縦並び、キャラのイラスト 7. **対象パッケージ**（対象商品を示す）: 黄色ドット地、雲の境界、2カラムのパッケージ画像 8. **マイページ誘導**（継続参加を促す）: 赤い吹き出しのセリフと青ボタン、後光を背負うキャラ 9. **世界観紹介**（キャラの世界を楽しませる）: 3D街並みイラストと雲の上にキャラを並べる 10. **イベント告知**（来場予約を促す）: 赤ドット地に会場写真、白ラベル帯で場所・日程、オレンジCTA 11. **規約・問い合わせ・フッター**（補足情報）: 青ボタン群、台形アイコン付き見出し、白文字の連絡先、SNSアイコン ## Imagery - キャラクターは光沢のある3DCGで、正面向きの大きな目 - 雲はぷっくり丸い3Dの白で、セクション境界やカード背面に重ねる - 景品写真は明るいグレーの無地背景でのスタジオ物撮り - 一部の景品は暖かい木目の室内で生活シーン風に撮る - 装飾は白・黄の星、チョコ片、カラフル紙片を散らす - 赤地には小さな白ドットを規則的に敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも中央の白カード幅は約70%で、背景の雲とキャラが左右に広がる - PCは概要カードを画像左・テキスト右の2カラムにする - PCの景品一覧は3カラムグリッド - PCのステップは2〜3カラムの横並び - PCのイベント告知は写真左・情報右の2カラム - PCのFVボタン3つは横一列 ## 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-02578139`（元 LP の URL から採番） - **元 LP**: https://pinoice.com/pinonokuji/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。