--- version: alpha name: Retro Cola Red Pop Dessert LP description: 深いコーラ赤を地にして、山吹色の帯とボタンでアクセントを付けたコンビニ冷菓の新商品告知 LP。商品写真の周りに水しぶきとはじける星の装飾を重ね、駄菓子のような懐かしさとはじける楽しさを出している。 colors: primary: '#992A23' secondary: '#FEAC0B' cta: '#FDAC0B' on-cta: '#FDFCF1' background: '#FEFEFE' background-alt: '#FFFFFF' accent-1: '#FEB00E' text: '#691C16' on-primary: '#FFFFFF' text-muted: '#83352A' dark-section: '#992A23' accent-2: '#90B4C1' line: '#723C39' secondary-accessible: '#9D6801' cta-accessible: '#9E6A01' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Zen Antique fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Kosugi Maru fontSize: 18px fontWeight: 700 lineHeight: 1.3 label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 8px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' date-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 46px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px burst-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 220px tag-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 28px callout-label: textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 60px price-block: textColor: '{colors.text}' typography: '{typography.display}' height: 80px section-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 56px --- # DESIGN.md — コーラ赤×山吹のレトロポップ冷菓 LP（Retro Cola Red Pop Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、レトロ、力強い・インパクト、親しみ・手作り感 - **キーワード**: コーラ赤・山吹アクセント・水しぶき・はじける星・白抜き太字・駄菓子レトロ - **地の質感**: 赤地に白や薄紅の水しぶきテクスチャ。平塗りの面に写真の切り抜きを重ねる - **形**: ギザギザの吹き出し、星形のスパーク、波形のスカラップ境界、角丸ボタン - **温度感**: 暖色。赤と山吹でにぎやかで温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#992A23` | メイン地色のコーラ赤 | 45% | 画素の実測 | | `secondary` | `#FEAC0B` | 発売日帯・見出し帯の山吹 | 4% | 画素の実測 | | `cta` | `#FDAC0B` | 店舗検索ボタンの山吹 | 1% | 画素の実測 | | `on-cta` | `#FDFCF1` | CTA上の白文字 | 0% | 画素の実測 | | `background` | `#FEFEFE` | 説明・注釈エリアの白地 | 12% | 画素の実測 | | `background-alt` | `#FFFFFF` | 写真周りの淡いグレー白 | 4% | 画素の実測 | | `accent-1` | `#FEB00E` | 強調大見出しのオレンジ | 0% | 画素の実測 | | `text` | `#691C16` | 白地の本文・見出しのこげ茶赤 | 1% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 赤地上の白文字 | 1% | 画素の主要色に補正 | | `text-muted` | `#83352A` | 注釈の茶色小文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#992A23` | ページ下部の濃い茶 | 4% | 画素の実測 | | `accent-2` | `#90B4C1` | 星装飾の水色 | 0% | 画素の実測 | | `line` | `#723C39` | サブボタンの枠のこげ茶 | 0% | 画素の実測 | | `secondary-accessible` | `#9D6801` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#9E6A01` | AA を満たす補正値（計算） | | 計算 | - 地色はコーラ赤にして、白地は説明と注釈のエリアだけに使う - 山吹は発売日帯、セクション見出し帯、主 CTA に限って使う - 赤地上の文字は白にして、最重要の語だけオレンジで大きくする - 白地の文字は黒ではなくこげ茶赤にして、暖色のトーンを保つ - 星の装飾は山吹・水色・薄紅を散らして使う - `date-band` は文字 `#FDFCF1` × 背景 `#FEAC0B` のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#9D6801`、4.61:1）を使う。 - `button-primary` は文字 `#FDFCF1` × 背景 `#FDAC0B` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#9E6A01`、4.51:1）を使う。 - `tag-pill` は文字 `#FDFCF1` × 背景 `#FEAC0B` のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#9D6801`、4.61:1）を使う。 - `section-band` は文字 `#FDFCF1` × 背景 `#FEAC0B` のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#9D6801`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名ロゴ風の極太見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | 赤地のキャッチ見出し。強調語はオレンジで特大 | 丸ゴシック | M PLUS Rounded 1c | 900 | 30px | 1.5 | 0.02em | | `headline-md` | 帯見出し・誘導見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.03em | | `headline-sm` | 小見出し。手書き風の明朝 | 明朝 | Zen Antique | 700 | 16px | 1.4 | 0.1em | | `body-md` | 中央揃えの説明文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.8 | 0.02em | | `accent` | 写真に引き出し線で付ける素材の名前 | 丸ゴシック | Kosugi Maru | 700 | 18px | 1.3 | 0.0em | | `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.2 | 0.03em | | `note` | ※印の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | - 見出しは中央揃えにして、改行で語のかたまりを区切る - 強調語は文字サイズを 1.5 倍、色をオレンジにする - 赤地の白文字には薄い影を付けて浮かせる - 素材名には引き出し線を添え、左寄せで写真に重ねる - 注釈は左揃えの小さな文字で、白地にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品写真を中央か右寄せに大きく置く - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - ファーストビューは商品写真を主役にし、商品名を上、価格を右下に置く - 発売日は全幅の山吹帯にする - 写真の引き出し線で素材を説明するセクションを作る - CTA は中央に縦に並べ、主 CTA の下にサブボタンを置く - 関連商品は全幅のバナーを縦に並べる ## Elevation & Depth - 主 CTA には右下へ濃い影をずらして付け、立体的なボタンに見せる - 見出しの白文字にはごく薄い影を付ける - カードの影は使わない。写真の重なりで奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品カップを背景ごと切り抜き、水しぶきと重ねる - **セクション境界**: 白地との境界は波形のスカラップ。斜めの切り替えもある - 説明ブロックはギザギザの爆発形吹き出しで囲む - サブボタンは白地に枠線のピル型 - 主 CTA は角丸の山吹ボタンに二重の縁を付ける - 星形のスパークを周りに散らす ## Components - **発売日帯**（`date-band`）: 全幅の山吹帯に白い太字で発売日を示す - **店舗検索ボタン**（`button-primary`）: 山吹地に白文字。左に丸矢印、右に店舗アイコン。濃い影付き - **情報リンクボタン**（`button-secondary`）: 白地にこげ茶の枠と文字のピル型。左に丸矢印 - **ギザギザ吹き出し**（`burst-bubble`）: 白い爆発形の中に、小見出しと説明文を中央揃えで置く - **手書き風タグ**（`tag-pill`）: 見出しの左上に斜めに置く、山吹のギザギザタグ - **素材の引き出しラベル**（`callout-label`）: 白文字の素材名と、写真へ伸びる白い線 - **価格表示**（`price-block`）: 本体価格と税込価格を黒の太字で 2 段に積む - **セクション見出し帯**（`section-band`）: 全幅の山吹帯に白文字の見出し ## Do's and Don'ts **Do** - 赤地の面積を広く取り、白地は説明のブロックだけに使う - 商品写真は大きく切り抜き、水しぶきを重ねる - 星のスパークを周りに散らして、はじける楽しさを出す - 強調語はオレンジの特大文字にする - CTA は山吹の立体的なボタン 1 つに絞る **Don't** - 寒色を地色に使わない - 細いゴシックの見出しにしない - 白地の文字を真っ黒にしない - 直線的なカードや格子のレイアウトを多用しない - 山吹を本文の色に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と価格をひと目で伝える）: 赤地に水しぶき、切り抜いた商品写真、極太の商品名、右側に縦書きのコピー、右下に価格 2. **発売日帯**（発売時期を告知する）: 全幅の山吹帯に白文字 3. **コンセプト**（味と食感の魅力を伝える）: 赤地にタグ付きの 3 行見出し。強調語はオレンジの特大文字。下に中央揃えの説明文 4. **商品の解説**（商品ジャンルを説明する）: 波形の境界の白地、またはギザギザ吹き出しに、小見出しと説明文 5. **素材の紹介**（構成素材を見せる）: 大きな商品写真に引き出し線で素材名を付ける。詳細へのタグボタン付き 6. **CTA**（来店を促す）: 誘導見出し、商品写真、山吹の主ボタン、枠線のサブボタン 7. **注釈**（価格・税率・取り扱いの注意）: 白地に※付きの小さな文字を並べる 8. **関連商品**（ほかの商品へ回遊させる）: 山吹の見出し帯の下に、全幅の商品バナーを縦に並べる ## Imagery - 商品は正面からやや見下ろす角度で撮り、背景を切り抜く - 赤地に白〜薄紅の水しぶき素材を大胆に重ねる - 星形・爆発形のスパークを手描き風に散らす - 関連商品のバナーはテーマ色の背景と果物などの素材を組み合わせる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 960px の 1 カラムを維持し、両脇まで赤地にする - PC のファーストビューは商品を中央、商品名を左下、価格を右に置く - PC の見出しは 1 行にまとめる - PC は素材ラベルを写真の左右に振り分ける - PC の関連商品は 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-a5a468e7`（元 LP の URL から採番） - **元 LP**: https://www.ministop.co.jp/syohin/sweets/halohalo/pachipachi-cola2026.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。