--- version: alpha name: Vivid Game Collab Ice Cream Campaign LP description: 黄・緑・青の原色ベタ面を、セクションごとに弧状の境界で切り替える期間限定コラボ商品のLP。白フチ付きの極太ゴシック見出し、黒線で囲んだ角丸の価格ボックス、赤いラベル、ギザギザのバッジを使い、ゲームのような楽しさを出す。商品写真は切り抜きで大きく見せる。 colors: primary: '#FED403' secondary: '#43AC34' accent-1: '#029CDB' cta: '#EA2313' on-cta: '#FDE20C' surface: '#FEFDFC' background-alt: '#FDF2BD' tint-1: '#85CB7B' tint-2: '#8ED3F0' text: '#20130A' text-body: '#342728' on-dark: '#FFFFFF' cta-accessible: '#E52213' accent-1-accessible: '#01648D' typography: display: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 900 lineHeight: 1.25 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 900 lineHeight: 1.3 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Dela Gothic One fontSize: 13px fontWeight: 400 lineHeight: 1.3 rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' price-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 130px pill-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px button-primary: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px badge-feature: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 64px badge-burst: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 100px heading-outline: textColor: '{colors.text}' typography: '{typography.display}' height: 70px count-tab: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 80px --- # DESIGN.md — 黄・青・緑の原色ゲームコラボ菓子LP（Vivid Game Collab Ice Cream Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 原色・ゲーム風・切り抜き商品写真・白フチ極太見出し・価格ボックス・星モチーフ - **地の質感**: ベタ塗りの原色の面に、細かいドットや格子のパターンを薄く重ねる。キャラクター線画のシルエットを地に透かす。 - **形**: 黒い太線で囲んだ角丸ボックス、ピル型ボタン、ギザギザの星形バッジ、弧状のセクション境界。 - **温度感**: 明るく暑い夏の高温。子どもも大人も楽しめる元気さ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FED403` | メインの黄色の地 | 22% | 画素の実測 | | `secondary` | `#43AC34` | 緑のセクション地 | 18% | 画素の主要色に補正 | | `accent-1` | `#029CDB` | 青のセクション地 | 13% | 画素の実測 | | `cta` | `#EA2313` | 赤ラベル・ボタン文字 | 5% | 画素の実測 | | `on-cta` | `#FDE20C` | 赤ラベル上の黄文字 | 1% | 画素の実測 | | `surface` | `#FEFDFC` | ボタン・帯・カード面 | 6% | 画素の実測 | | `background-alt` | `#FDF2BD` | 黄地の価格ボックス内の淡い黄 | 8% | 画素の主要色に補正 | | `tint-1` | `#85CB7B` | 緑地の価格ボックス内の淡い緑 | 3% | 画素の実測 | | `tint-2` | `#8ED3F0` | 青地の価格ボックス内の淡い青 | 3% | 推定 | | `text` | `#20130A` | 価格・見出しの黒文字、ボックスの枠線 | 4% | 画素の実測 | | `text-body` | `#342728` | 本文の文字 | 2% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 色地の上の白文字 | 1% | 推定 | | `cta-accessible` | `#E52213` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#01648D` | AA を満たす補正値（計算） | | 計算 | - 商品ごとにセクションの地を黄→緑→青→黄の順で切り替え、境界は弧状にする。 - 価格ボックスは、地の色を淡くした色で塗り、黒の太線で囲む。 - 赤は特典ラベルとボタン文字だけに使う。 - 黄色地では本文を黒にし、緑地・青地では本文を白にする。 - 見出しは黒文字に白い太フチを付け、どの地の色でも読めるようにする。 - お得さを示すバッジは黄色地に青文字で目立たせる。 - `button-primary` は文字 `#EA2313` × 背景 `#FEFDFC` のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E52213`、4.52:1）を使う。 - `badge-feature` は文字 `#FDE20C` × 背景 `#EA2313` のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E52213`、4.55:1）を使う。 - `badge-burst` は文字 `#029CDB` × 背景 `#FED403` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#01648D`、4.56:1）を使う。 - `count-tab` は文字 `#029CDB` × 背景 `#FEFDFC` のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#01648D`、4.53:1）を使う。 - `speech-bubble` は文字 `#EA2313` × 背景 `#FEFDFC` のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E52213`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の大見出し（白フチ付き） | 装飾・ディスプレイ | Dela Gothic One | 900 | 28px | 1.25 | 0.0em | | `headline-lg` | 価格の数字 | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.1 | -0.02em | | `headline-sm` | サイズ名・ラベル・バッジ | ゴシック | M PLUS Rounded 1c | 900 | 15px | 1.3 | 0.0em | | `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.04em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `label-button` | ピル型ボタン・帯の文字 | ゴシック | Noto Sans JP | 900 | 15px | 1.3 | 0.02em | | `accent` | 手書き風の斜めの吹き出し文字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 13px | 1.3 | 0.0em | - 見出しは極太ゴシックにし、黒文字に白い太フチと影を付ける。 - 価格の数字は特大にし、「各」や「スモール」などの補足は小さく添える。 - 本文は14px前後で、行間をゆったりとる。 - 注釈は※で始め、11px前後にする。 - 斜めに配置した短い吹き出し文字で、ひとことを補足する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。価格は 2 列で並べる。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - 商品1つにつき「見出し→切り抜き写真→特典ラベル→本文→価格ボックス→注釈」の順に並べる。 - 商品写真は画面幅いっぱいに大きく配置し、要素同士を重ねてよい。 - 価格ボックスは左右に約5%の余白をとって中央に置く。 - 特典ラベルは写真の上に斜めや重ねで配置する。 - セクションの切り替えは弧で区切り、上下に余白をとる。 ## Elevation & Depth - 価格ボックスやボタンの下に、黒やトーンを落とした色で約3pxの影を付けて、立体感を出す。 - 切り抜き写真に白フチを付けて、シール風にする。 - 影のぼかしはほぼ使わず、フラットに保つ。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品やキャラクターは背景を切り抜き、白フチを付けたシール風にする。 - **セクション境界**: 上に凸の大きな弧で地の色を切り替える。 - 価格ボックスは角丸約8pxにし、黒の2〜3px線で囲む。 - バッジは星形のギザギザにする。 - 入数ラベルは左端を画面に付けた片側ピル型にする。 - 地には星や線画を薄く散らす。 ## Components - **価格ボックス**（`price-box`）: 黒の太線で囲んだ淡色の角丸箱。中にサイズ名と大きな価格を2列で並べ、下に白い帯を置く。 - **白ピル帯**（`pill-band`）: 価格ボックス内の、選び方を案内する白いピル型の帯。 - **詳細ボタン**（`button-primary`）: 白いピル型に赤文字。右端に赤い丸矢印を付け、下に黄色い影を置く。 - **特典ラベル**（`badge-feature`）: 赤い角丸の板に黄色文字。ピン留め風のドットを付ける。 - **お得バッジ**（`badge-burst`）: 黄色のギザギザ星形に青文字で、お得感を示す。 - **白フチ見出し**（`heading-outline`）: 黒文字に白い太フチを付けた、極太の商品名見出し。2行で中央に揃える。 - **入数タブ**（`count-tab`）: 画面の左端から出る白い片側ピル型に、青文字で入数を書く。 - **吹き出し**（`speech-bubble`）: 白い角丸の吹き出しに赤文字で、補足のひとことを書く。 ## Do's and Don'ts **Do** - 商品ごとに地の色を切り替え、リズムを作る。 - 価格は特大の黒数字で、ひと目で読めるようにする。 - 切り抜き写真に白フチを付け、大胆に重ねる。 - 星やギザギザの装飾を散らして、賑やかにする。 - 注釈は価格ボックスの直下にまとめる。 **Don't** - くすんだ色やパステルだけで構成しない。 - 細い明朝体や繊細な書体を使わない。 - 価格ボックスから黒枠を外さない。 - グラデーションの多用やぼかし影で、フラット感を崩さない。 - 余白を広くとりすぎて、静かな印象にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（期間・コラボ・商品群を一度に伝える）: 空と芝生の背景にキャラクターを集合させる。弧状のロゴ帯を置き、下の黄色地に商品の切り抜き写真を並べる。 2. **新作の主力商品**（目玉商品を訴求する）: 背景の上に商品を特大で置く。黄色の商品名ラベル、白文字の本文、詳細ボタンを添える。 3. **商品紹介（黄色地）**（カップ商品の価格を案内する）: 白フチ見出し、写真、本文、価格ボックス、注釈の順に並べる。 4. **商品紹介（緑地）**（サンデーの特典を訴求する）: 弧で緑地に切り替える。赤ラベル、吹き出し、白カードで特典を説明する。 5. **商品紹介（青地）**（特典付き商品を紹介する）: 青地にキャラクターの線画を透かす。白カードにグッズの説明図を載せる。 6. **テイクアウトセット**（持ち帰り商品とおまけを訴求する）: 緑地に箱の写真を置く。入数バッジとグッズ写真を添える。 7. **入数別ボックス**（サイズ別のお得さを比較させる）: 青地に箱の写真、入数タブ、お得バッジ、価格ボックスを繰り返す。 8. **ケーキ紹介**（予約商品へ誘導する）: 黄色地に号数のピルと価格を並べ、詳細ボタンを置く。 9. **プレゼントキャンペーン**（アプリ連動の特典を告知する）: 緑地に黄色の大見出しを置く。白カードに景品を4つ並べ、注釈とボタンを添える。 10. **フッター注釈**（注意事項と権利表記を示す）: 芝生と城の背景イラストの上に、白文字で注釈を並べる。 ## Imagery - 商品は真正面からやや俯瞰で撮り、背景を切り抜く。 - キャラクターやグッズには白フチを付けて、シール風にする。 - 地には星や単色の線画を薄く散らす。 - 空・芝生・城のような明るいゲーム風の背景を使う。 - おまけのグッズは、使っている場面がわかる説明図にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP のカラムを中央に約750px幅で置き、左右は地の色で埋める。 - 価格ボックスの2列構成は PC でも維持する。 - PC では見出しを1.3倍程度まで拡大する。 - 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-24dc9a30`（元 LP の URL から採番） - **元 LP**: https://www.31ice.co.jp/contents/topics/250701_02.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。