--- version: alpha name: Vivid Yellow Pop Food Campaign LP description: 鮮やかな黄色の地にきらめき装飾を散らし、赤・青・緑・オレンジ・マゼンタの原色で各セクションを色分けした食品メーカーのレシート応募キャンペーンLP。白い角丸カードと太い色枠で情報をまとめ、レシピ写真カードを2列で並べて投票を促す。 colors: primary: '#FFF000' background: '#FFFFFF' cta: '#EF0D33' on-cta: '#FFF4F3' secondary: '#0152A4' accent-1: '#0DA03C' accent-2: '#DE7F3F' accent-3: '#E8137F' tint-1: '#FEE6E6' tint-2: '#DCF0FF' accent-1-blue: '#028CD4' text: '#222222' marker: '#FCF201' surface: '#BBBBBB' accent-2-accessible: '#B0591E' cta-accessible: '#E00C30' accent-3-accessible: '#CC1170' accent-1-accessible: '#0B8131' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Zen Maru Gothic fontSize: 9px fontWeight: 700 lineHeight: 1.4 accent: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 56px arch-header: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 140px recipe-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 210px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px prize-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 520px step-badge: backgroundColor: '{colors.accent-3}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px date-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 150px floating-buttons: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px --- # DESIGN.md — 黄色地×原色ポップの食品投票キャンペーンLP（Vivid Yellow Pop Food Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 原色ポップ・黄色地・きらめき装飾・色分けセクション・白カード・レシピ写真 - **地の質感**: フラットな単色面に白や黄の星形きらめきを散らす。グラデーションや陰影はほぼ使わない。 - **形**: 大きめ角丸の白カード、太い色枠、上辺がアーチ形の見出しパネル、斜めにずれた付箋風ラベル。 - **温度感**: 暖色寄りで明るく賑やか。青と緑で情報部分を引き締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFF000` | ページ全体の地色・ブランドの黄色 | 20% | 画素の実測 | | `background` | `#FFFFFF` | カード内・白帯の地 | 40% | 画素の実測 | | `cta` | `#EF0D33` | 見出しアーチ・帯見出し・主要ボタンの赤 | 5% | 画素の主要色に補正 | | `on-cta` | `#FFF4F3` | 赤ボタン上の白文字 | 1% | 画素の実測 | | `secondary` | `#0152A4` | 説明パネル・アーチ見出しの濃い青 | 3% | 画素の実測 | | `accent-1` | `#0DA03C` | 応募期間帯・対象商品枠の緑 | 3% | 推定 | | `accent-2` | `#DE7F3F` | 賞品セクションの枠・ラベルのオレンジ | 3% | 画素の主要色に補正 | | `accent-3` | `#E8137F` | 応募方法の枠・STEP番号のマゼンタ | 2% | 推定 | | `tint-1` | `#FEE6E6` | レシピ一覧パネルの淡ピンク | 7% | 画素の実測 | | `tint-2` | `#DCF0FF` | 別系統レシピパネルの淡い水色 | 2% | 画素の実測 | | `accent-1-blue` | `#028CD4` | 賞品名・リンクボタンの明るい青 | 1% | 画素の実測 | | `text` | `#222222` | 本文・注釈の黒 | 2% | 推定 | | `marker` | `#FCF201` | 当選数の下に引く黄マーカー | 1% | 画素の実測 | | `surface` | `#BBBBBB` | 規約スクロール枠の線 | 1% | 推定 | | `accent-2-accessible` | `#B0591E` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E00C30` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#CC1170` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#0B8131` | AA を満たす補正値（計算） | | 計算 | - 地は黄色、情報ブロックは白の角丸カードで乗せる。 - セクションごとに枠色と見出し札の色を変える（賞品=オレンジ、応募方法=マゼンタ、対象商品=緑）。 - メインタイトルは1文字ごとに青・緑・赤・オレンジ・紫を変えた多色にする。 - 日付などの重要情報は緑の全幅帯に白文字で載せる。 - レシピ系統ごとに赤アーチ＋淡ピンク、青アーチ＋淡水色の対で色分けする。 - 当選人数は青の太字に黄マーカーを敷いて強調する。 - `section-title-tag` は文字 `#FFF4F3` × 背景 `#DE7F3F` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#B0591E`、4.54:1）を使う。 - `arch-header` は文字 `#FFF4F3` × 背景 `#EF0D33` のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E00C30`、4.57:1）を使う。 - `button-outline` は文字 `#EF0D33` × 背景 `#FFFFFF` のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E00C30`、4.56:1）を使う。 - `button-primary` は文字 `#FFF4F3` × 背景 `#EF0D33` のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E00C30`、4.57:1）を使う。 - `step-badge` は文字 `#FFF000` × 背景 `#E8137F` のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#CC1170`、4.56:1）を使う。 - `date-band` は文字 `#FFF4F3` × 背景 `#0DA03C` のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#0B8131`、4.64:1）を使う。 - `floating-buttons` は文字 `#FFF4F3` × 背景 `#E8137F` のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#CC1170`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインタイトル（多色・白フチ） | 装飾・ディスプレイ | Dela Gothic One | 900 | 52px | 1.15 | 0.02em | | `headline-lg` | セクション見出し札・賞品名 | ゴシック | M PLUS Rounded 1c | 900 | 28px | 1.3 | 0.04em | | `headline-md` | STEP見出し・応募条件 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.03em | | `headline-sm` | 日付帯・カード内リード | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 説明文・注意事項 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.02em | | `note` | レシピ名ラベル・キャプション | 丸ゴシック | Zen Maru Gothic | 700 | 9px | 1.4 | 0.0em | | `accent` | 当選人数の数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 30px | 1.1 | 0.0em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.2 | 0.05em | - 見出しは太い丸ゴシック系で、文字に白フチを付けて地から浮かせる。 - メインタイトルは1文字ずつ色を変え、少し傾ける。 - 数字は本文より2倍以上大きくし、単位は小さく添える。 - 見出しは中央揃え、注意事項のみ左揃えでぶら下げインデントを付ける。 - 本文に細字は使わず、最低でも400ウェイトで読みやすくする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、レシピ写真カードは 2 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは画面左右に約7%の余白を取り中央に置く。 - セクション見出し札はカード上端に半分かぶせて配置する。 - レシピカードは2列で並べ、奇数の最後は中央に寄せる。 - 応募手順は縦に STEP を並べ、間に下向き三角を置く。 - 日付・応募方法の要点は全幅の色帯でまとめる。 ## Elevation & Depth - 影はほぼ使わずフラット。 - 見出し札は白フチで立体感を出す。 - ボタンは下側に濃い色の縁を付けて押せる感じにする。 - 右下に丸い追従ボタンを縦に3つ並べる。 ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 料理写真は真上から撮った正方形に近い形で、点線の枠と斜めにずらした色帯の影を付ける。 - **セクション境界**: 直線で色帯を切り替える。レシピパネルは上辺をアーチ形にする。 - 白カードは角丸24pxに太さ4px前後の色枠を付ける。 - サブボタンは白地に色枠のピル型にする。 - 見出し札は少し傾けた四角に白フチを付ける。 - STEP番号は塗りの円にする。 - 吹き出し的な補足は淡黄の円にする。 ## Components - **セクション見出し札**（`section-title-tag`）: オレンジ・マゼンタ・緑の四角に白い太字、白フチ付き。少し傾けてカード上にかぶせる。 - **アーチ見出しパネル**（`arch-header`）: 上辺がドーム形の赤または青パネル。白文字の見出しを弧に沿わせ、きらめきを散らす。 - **レシピ写真カード**（`recipe-card`）: 点線で囲んだ正方形写真、色帯のラベル、一言キャプション、色枠のピルボタンで構成する。 - **枠線ピルボタン**（`button-outline`）: 白地にカードの色と同じ枠線と文字色を付けた小さめのピル。 - **赤の全幅ボタン**（`button-primary`）: 赤地に白文字と三角アイコン。下側に濃いオレンジの縁を付ける。 - **賞品カード**（`prize-card`）: 白地にオレンジ枠の角丸カード。賞品画像、淡黄の円形吹き出し、黄マーカー付きの当選人数を入れる。 - **STEP番号バッジ**（`step-badge`）: マゼンタの円に小さく英字のSTEP、大きく数字を入れる。数字は黄色。 - **日付帯**（`date-band`）: 緑の全幅帯に白いピル型ラベルと白の太字日付を並べる。 - **追従丸ボタン**（`floating-buttons`）: 右下に固定するマゼンタ・緑・青の円形ボタン。白文字を2行で入れる。 ## Do's and Don'ts **Do** - 地は必ず鮮やかな黄色にし、白や薄黄の星形きらめきを周囲に散らす。 - セクションごとに原色の枠色を決め、見出し札と色をそろえる。 - 賞品の数と当選人数は特大の数字で見せる。 - 応募手順はSTEP番号・イラスト・短い説明を縦に並べる。 - 料理写真は明るい真上からの写真を使い、器と布の色で彩りを出す。 **Don't** - くすんだ色や中間色をメインに使わない。 - 細い明朝体や繊細な書体を使わない。 - 黄色地に直接長文を置かない（必ず白カードに入れる）。 - 強い影や光沢のグラデーションを付けない。 - 1つのカードに複数の枠色を混ぜない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と楽しさを一目で伝える）: 黄地に商品パッケージ、四隅に料理写真、中央に多色の大きなタイトル、周囲にきらめきを散らす。 2. **賞品サマリー**（賞品の内容と当選数を短く伝える）: 白帯の左にスマホ画像、右に青と赤の太字コピーを置く。 3. **応募条件**（何をすれば応募できるかを示す）: 黄帯に緑のピルラベルを置き、条件を赤字2行で＋記号でつなぐ。 4. **応募期間**（期間と締切を明示する）: 緑の全幅帯に白いピルラベルと白の太字日付を並べる。 5. **投票の導入**（投票の対象と方法を説明する）: 赤アーチに多色ロゴ風の見出しを入れ、下の青パネルに白字で説明を書く。 6. **レシピ一覧（系統A）**（投票対象のレシピを見せる）: 赤アーチ＋淡ピンクのパネルにレシピ写真カードを2列で並べる。 7. **レシピ一覧（系統B）**（別の味のレシピを見せる）: 青アーチ＋淡水色のパネルに同じ形のカードを並べる。 8. **賞品**（賞品の詳細とダブルチャンスを示す）: オレンジの見出し札の下にオレンジ枠の白カードを2枚置く。当選数には黄マーカーを敷く。 9. **応募方法**（手順と注意事項を伝える）: マゼンタ枠のカードに3つのSTEPを縦に並べ、注意事項と規約リンクを添える。 10. **補助CTA**（撮影方法の案内へ誘導する）: 白帯の中央に赤の全幅ボタンを置く。 11. **対象商品**（対象のパッケージを示す）: 緑の見出し札の下に緑枠のカードを置き、パッケージ写真と商品名を並べる。 12. **問い合わせ・応募要項**（問い合わせ先と規約を示す）: 白カードに赤の帯見出しを付け、フリーダイヤルを大きく出す。規約は内部スクロールの枠に入れる。 13. **フッター**（法務リンクと企業表記）: 白地に小さいリンク、コピーライト、企業ロゴを置く。 ## Imagery - 料理は白い器を真上から撮り、チェックや無地のカラフルな布・木の板を背景にする。 - 写真には点線の枠と、斜めにずらした色帯の影を付ける。 - スマホ操作はシンプルな線画イラストにし、青い集中線を添える。 - 背景には4方向に光る星形のきらめきを、白・淡黄・オレンジで散らす。 - 商品パッケージは切り抜き画像で見出しパネルの中に置く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもコンテンツ幅は約800px相当の中央1カラムに保つ。 - PCの賞品リンクボタンは2つを横に並べる。 - PCの応募STEPは3つを横に並べ、間を三角矢印でつなぐ。 - PCの対象商品は2つを横に並べる。 - 追従の丸ボタンはSP・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-8aa7fb78`（元 LP の URL から採番） - **元 LP**: https://wantan.maruchan-cp.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。