--- version: alpha name: Pop Character Collab Snack Campaign LP description: キャラクターのイラスト柄を敷いた生成りの地に、白カードを載せた LP。セクションごとに赤・青・緑・ピンクの太い枠で色を切り替える。黄色リボンの見出し、多角形のナビボタン、紺色のピル型 CTA を使い、ゲームのようなにぎやかなキャンペーン感を出す。 colors: primary: '#EA3D53' secondary: '#0479DB' accent-1: '#2FA17A' accent-2: '#ED4C89' accent-3: '#FDE76A' background: '#F6F8ED' surface: '#FDFEFD' tint-1: '#D6ECDF' cta: '#024C85' on-cta: '#FEFFFE' text: '#2C2C2D' marker: '#E0002A' dark-section: '#1F3A6E' tint-2: '#FAD0D4' primary-accessible: '#E71F38' marker-accessible: '#C10024' secondary-accessible: '#0476D6' accent-1-accessible: '#278565' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 32px 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: 50px button-link-frame: backgroundColor: '{colors.surface}' textColor: '{colors.marker}' typography: '{typography.headline-sm}' height: 44px ribbon-heading: backgroundColor: '{colors.accent-3}' textColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 44px nav-polygon: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 130px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px checker-title: backgroundColor: '{colors.tint-2}' textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 50px step-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 32px year-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 28px closed-badge: backgroundColor: '{colors.marker}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 36px --- # DESIGN.md — 赤青緑ピンクの原色ポップなお菓子コラボキャンペーンLP（Pop Character Collab Snack Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 原色ポップ・キャラクター総出演・リボン見出し・白カード・色分けセクション・ドット絵装飾 - **地の質感**: 生成りの地にイラストの柄を敷く。カード内はフラットな白。市松とドット絵の飾りを入れる。 - **形**: 角丸カードと多角形のバッジ。リボン型の見出し。ピル型ボタン。 - **温度感**: 暖かく元気。子どもっぽい楽しさがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EA3D53` | キャンペーン①セクションの赤い地 | 9% | 画素の主要色に補正 | | `secondary` | `#0479DB` | キャンペーン②セクションの青い地・枠 | 7% | 画素の主要色に補正 | | `accent-1` | `#2FA17A` | ゲーム連動セクションの緑の地・年号ラベル | 6% | 画素の主要色に補正 | | `accent-2` | `#ED4C89` | 沿革セクションのピンクの地・枠 | 4% | 画素の実測 | | `accent-3` | `#FDE76A` | リボン見出し・期間帯の黄色 | 2% | 推定 | | `background` | `#F6F8ED` | 柄を敷いたページの生成りの地 | 20% | 画素の実測 | | `surface` | `#FDFEFD` | コンテンツを載せる白カード | 29% | 画素の実測 | | `tint-1` | `#D6ECDF` | 沿革タイムラインの淡いミントの地 | 10% | 画素の実測 | | `cta` | `#024C85` | 主 CTA の紺のピル型ボタン | 1% | 画素の実測 | | `on-cta` | `#FEFFFE` | CTA 上の白い文字 | 0% | 画素の主要色に補正 | | `text` | `#2C2C2D` | 見出しと本文の黒文字 | 3% | 画素の実測 | | `marker` | `#E0002A` | 強調数字・リンク文字の赤 | 1% | 推定 | | `dark-section` | `#1F3A6E` | リボンの縁・ボタン枠の紺の線 | 0% | 推定 | | `tint-2` | `#FAD0D4` | 市松飾り・FV 下の淡いピンク | 2% | 画素の実測 | | `primary-accessible` | `#E71F38` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#C10024` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#0476D6` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#278565` | AA を満たす補正値（計算） | | 計算 | - 地は生成りにして、キャラクター柄を左右の余白に見せる - セクションごとに赤→青→緑→ピンクと太い色枠を切り替える - 中身は必ず白カードに載せて読みやすくする - 見出しは黄色リボンに紺の縁と紺の文字 - 強調したい数字や当選数は赤、またはピンクのグラデ文字にする - 主 CTA は紺のピル型。リンクボタンは白地に赤文字と紺の枠 - 受付が終わったリンクは文字を淡いピンクにして、赤い終了バッジを重ねる - `nav-polygon` は文字 `#FEFFFE` × 背景 `#EA3D53` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E71F38`、4.5:1）を使う。 - `checker-title` は文字 `#E0002A` × 背景 `#FAD0D4` のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#C10024`、4.57:1）を使う。 - `step-label` は文字 `#FEFFFE` × 背景 `#0479DB` のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#0476D6`、4.59:1）を使う。 - `year-tag` は文字 `#FEFFFE` × 背景 `#2FA17A` のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#278565`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.02em | | `headline-lg` | セクションの導入見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 22px | 1.5 | 0.08em | | `headline-md` | リボン見出し・コース名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.4 | 0.05em | | `headline-sm` | 手順の説明・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.7 | 0.05em | | `body-md` | 本文・リスト | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.03em | | `note` | 注釈・サイズ表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 当選数・日付の大きい数字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.1 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - 見出しは太い丸ゴシックで、字間を少し広げる - 数字は大きな極太書体にして、単位は小さく添える - 中央揃えを基本にする - 強調語には黄色の下線マーカーを引く - 暗い地の上の文字は白か黄色にする - 注釈は ※ を付けて小さい灰黒で入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードの中にグリッドを入れる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 32px、基本単位 8px、カード内 20px（375px 幅換算） - カラーの外枠の中に白カードを入れ子にする - ナビの 4 ボタンは左右に互い違いでジグザグに並べる - カードの端からキャラクターがはみ出して覗くように置く - 手順は STEP ラベルと下向きの矢印で縦につなぐ - リンクボタンは白い帯状で、縦に連続して並べる ## Elevation & Depth - 影はほぼ付けず、フラットにする - カードと地の差は色だけで出す - ボタンの立体感は紺の線の枠で出す ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜きにする。キャラクターは白フチ付きで切り抜く。月替わりの画像は角丸の枠で囲む - **セクション境界**: 直線で区切り、色の外枠を切り替える - ナビボタンは不規則な多角形にする - 見出しは両端が垂れたリボン型 - 当選数のバッジは円形で金色のグラデーション - 終了・近日公開のタグは赤い四角を少し傾けて置く ## Components - **紺のピル型 CTA**（`button-primary`）: 白い太字に右矢印を付ける。中央に置く - **枠付きのリンク帯ボタン**（`button-link-frame`）: 白地に紺の枠と赤い点線の飾り。赤字で、上にキャラクターが覗く - **黄色のリボン見出し**（`ribbon-heading`）: 紺の縁取りで、両端が垂れる - **多角形のナビボタン**（`nav-polygon`）: 赤・青・緑・ピンクの多角形に白文字とアイコンを入れる - **コース別の賞品カード**（`prize-card`）: 色付きの枠にコース名、円形の当選数バッジ、賞品写真を入れる - **市松のタイトル**（`checker-title`）: 淡いピンクか水色の市松地に、1 文字ずつ離した見出しを載せる - **STEP ラベル**（`step-label`）: 青い四角に白文字。下に矢印を付ける - **年号ラベル**（`year-tag`）: 緑の四角に白い数字。タイムラインに使う - **終了バッジ**（`closed-badge`）: 赤い四角に白文字。傾けて重ねる ## Do's and Don'ts **Do** - セクションごとに原色の外枠を変える - キャラクターをカードの角から覗かせる - 当選数は大きな数字のバッジで見せる - 見出しはリボンと市松で装飾する - 地にはキャラクター柄を薄く敷く **Don't** - くすんだ色や落ち着いた色だけで構成しない - 明朝体を使わない - 濃い影やグラデーションの面を多用しない - 白カードを使わずに柄の上へ文字を直接置かない - 余白を広く取りすぎて静かにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボ企画名と期間を伝える）: パステルの空と雲を背景に、キャラクターが集合したイラストとロゴ風タイトル。下に黄色の期間帯を置く 2. **企画ナビ**（4 つの企画へ誘導する）: 白カードの中に、色違いの多角形ボタンをジグザグに配置する 3. **企画①の賞品**（賞品と当選数を見せる）: 赤い外枠の中に、コース別の色付きカードを縦に並べる 4. **対象商品**（対象商品を示す）: 市松のタイトルの下に、商品パッケージの写真をグリッドで並べる 5. **締切と CTA**（応募へ誘導する）: 大きな日付を見せ、紺のピル型ボタンを置く 6. **企画②の SNS 応募**（SNS 応募の方法を伝える）: 青い外枠に、トゲ型の吹き出しと STEP の手順を入れる 7. **月替わりのクイズ**（毎月の画像と応募リンクを載せる）: 月ごとに色の違う角丸の枠に画像を入れ、枠付きのリンク帯を並べる 8. **応募要項**（規約を示す）: 青地の中でスクロールする要項ボックス 9. **ゲーム連動**（アイテム特典を案内する）: 緑の外枠に商品写真とリンク帯を置く 10. **歩み・沿革**（ブランドの歴史を伝える）: ピンクの外枠の中にタブを置き、ミント地のタイムラインに年号ラベルと商品写真を並べる 11. **新商品の告知**（関連商品へ誘導する）: 大きなキービジュアルとピル型 CTA、SNS アイコン 12. **問い合わせ・フッター**（連絡先と SNS を示す）: 黄色の地に旗の飾りと大きな電話番号。下に SNS アイコンと赤い公式サイトボタン ## Imagery - キャラクターは太い輪郭線とフラットな塗りのアニメ調で描く - 商品パッケージは白背景で切り抜く - 地の柄は家・木・カップなど、小さなイラストの繰り返し - ドット絵のモチーフと音符・キラキラを散らす - 季節のシーンは原色のイラストで描き込む - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツを中央約 600px に固定し、左右に柄の地を広く見せる - PC では賞品カードを横長にし、写真を右に置く - PC の沿革は 3 列のタイムラインにする - PC のナビボタンは 2×2 の配置にする - 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-55dd30ed`（元 LP の URL から採番） - **元 LP**: https://www.sankogokigen.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。