--- version: alpha name: Candy Pop Collectible Toy LP description: 黄緑の地にピンクと水色を重ね、スプリンクル柄やマーブル柄でお菓子らしさを出した子ども向けコレクション玩具の LP。縁取りの太い丸ゴシック見出しにルビを振る。購入カードには赤い大きな価格と、虹色グラデのピル型 CTA を置く。 colors: primary: '#DBE35A' secondary: '#ABCD07' background: '#FDEBE9' surface: '#F7ECF2' background-alt: '#EEF5CC' accent-1: '#97416D' accent-2: '#1E9BD7' tint-1: '#F5B6D5' cta: '#FE4443' on-cta: '#FEFBFB' marker: '#C60716' dark-section: '#00516E' text: '#222222' accent-3: '#E8261E' cta-accessible: '#E90201' secondary-accessible: '#617404' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.3 accent: fontFamily: Montserrat fontSize: 48px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 12px lg: 16px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-store: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px button-disabled: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px purchase-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 680px price-display: textColor: '{colors.marker}' typography: '{typography.accent}' height: 60px label-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 36px quantity-stepper: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 36px heading-slash: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 50px character-slider: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 260px --- # DESIGN.md — 黄緑×ピンクのお菓子ポップな玩具 LP（Candy Pop Collectible Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: お菓子・スプリンクル・ガチャ・コレクション・ルビ付き見出し・虹色グラデ・子ども向け - **地の質感**: スプリンクル柄・マーブル・ワッフルコーンの質感背景と、うすい線画のお菓子柄パターン - **形**: 角丸カード、ピル型ボタン、円形のスポット背景、ドット付きスライダー - **温度感**: 暖かく明るい高彩度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DBE35A` | ブランド面・セクション地の黄緑 | 17% | 画素の実測 | | `secondary` | `#ABCD07` | 購入エリア外枠の濃い黄緑 | 8% | 画素の実測 | | `background` | `#FDEBE9` | 購入セクションの淡ピンク地 | 14% | 画素の実測 | | `surface` | `#F7ECF2` | 購入カードの淡ピンク面 | 10% | 画素の実測 | | `background-alt` | `#EEF5CC` | 店舗案内カードの淡黄緑面 | 5% | 画素の実測 | | `accent-1` | `#97416D` | 見出し強調・カード枠のマゼンタ | 3% | 画素の主要色に補正 | | `accent-2` | `#1E9BD7` | WEB購入カード枠・見出しの水色 | 3% | 推定 | | `tint-1` | `#F5B6D5` | 購入見出しセクションのピンク地 | 6% | 画素の実測 | | `cta` | `#FE4443` | 店舗検索ボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FEFBFB` | ボタン上の白文字 | 0% | 画素の実測 | | `marker` | `#C60716` | 価格の赤 | 1% | 画素の実測 | | `dark-section` | `#00516E` | 商品ラベル帯の紺青 | 1% | 画素の実測 | | `text` | `#222222` | 注釈・本文の黒 | 2% | 推定 | | `accent-3` | `#E8261E` | 注意書きの赤文字 | 0% | 推定 | | `cta-accessible` | `#E90201` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#617404` | AA を満たす補正値（計算） | | 計算 | - セクション地は黄緑、ピンク、淡ピンクで切り替える - 購入カードは淡ピンクの面にマゼンタか水色の太い枠を付ける - 価格は赤の極太数字にし、税込表記は小さく添える - 主 CTA は「マゼンタ→黄→黄緑」の虹色グラデにし、文字は黒の太字 - 注意書きは赤文字、本文の注釈は黒の小さい文字 - 見出しは白縁取りに、水色の影かマゼンタの影を付ける - `button-store` は文字 `#FEFBFB` × 背景 `#FE4443` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E90201`、4.56:1）を使う。 - `character-slider` は文字 `#ABCD07` × 背景 `#F7ECF2` のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#617404`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し（ルビ付き・縁取り） | 丸ゴシック | M PLUS Rounded 1c | 900 | 34px | 1.4 | 0.02em | | `headline-md` | 購入カード上部のキャッチ（白縁のマゼンタ） | 丸ゴシック | M PLUS Rounded 1c | 900 | 18px | 1.3 | 0.0em | | `headline-sm` | 商品名（紺青色の太字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.3 | 0.0em | | `accent` | 価格の数字 | 欧文サンセリフ | Montserrat | 800 | 48px | 1.0 | -0.02em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 900 | 22px | 1.2 | 0.05em | | `body-md` | 店舗案内・商品概要の本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.0em | | `note` | ※付きの注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | - 子ども向けなので、見出しの難しい漢字にはルビを振る - 大見出しは白の太い縁取りに、色付きのドロップシャドウを付ける - 見出しの強調語（数字など）だけマゼンタにし、他は水色にする - 価格は数字を大きく、円・税込を小さくする - 注釈は小さい文字でまとめて載せ、重要な行だけ赤にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラ一覧は 4 列グリッド - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 購入カードは画面幅いっぱいから左右 18px 内側に置く - カード内は「キャッチ→商品画像→商品名と価格→CTA→注釈」の順に並べる - 商品名は左、価格は右に並べる - キャラ紹介は横スライダーにし、左右の矢印とドットを付ける - カード同士は 16〜20px 空ける ## Elevation & Depth - カードに影は付けず、太い色枠で区切る - ボタンは黒い細線の縁と、下方向へのやや強い影で立体的に見せる - 見出し文字は縁取りとオフセット影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品やキャラは切り抜きで配置し、背景にピンクや紺の円形スポットを敷く - **セクション境界**: 直線で色を切り替えるほか、ピンクの地に溶けたクリームのような波形を使う - CTA はすべてピル型にする - カードは角丸 12〜16px に太さ 3px の枠を付ける - ラベル帯は角丸なしの長方形にする ## Components - **虹色グラデ CTA**（`button-primary`）: マゼンタ→黄→黄緑のグラデのピル型ボタン。右端に矢印を置き、文字は黒の極太 - **赤い店舗検索ボタン**（`button-store`）: 赤いピル型に白文字。右に白の矢印 - **販売終了ボタン**（`button-disabled`）: 灰色のピル型に黒縁。文字は黒 - **購入カード**（`purchase-card`）: 淡ピンクの面にマゼンタか水色の太枠。上部に縁取り付きのキャッチを置く - **価格表示**（`price-display`）: 赤の極太数字に、小さな「円」と「10%税込」を添える - **商品種別ラベル**（`label-band`）: 紺青の長方形の帯に白抜き文字でセット名を書く - **数量選択**（`quantity-stepper`）: 黒地の −/+ ボタンで白い数値欄を挟む - **スラッシュ見出し**（`heading-slash`）: 見出しの両側に斜線を付けた、白縁取りのマゼンタ文字 - **キャラ紹介スライダー**（`character-slider`）: 角丸カードにキャラの絵とプロフィール 3 項目を載せる。マゼンタの丸矢印とドットで送る ## Do's and Don'ts **Do** - スプリンクル柄やマーブル柄など、お菓子を思わせる背景を使う - 見出しには縁取りとルビを付ける - 購入カードの価格と CTA を大きく目立たせる - コレクションの種類を 4 列グリッドで一覧にする - 特殊版（光る・金銀・キラキラ）は色の違う円形スポットで区別する **Don't** - 明朝体や細いゴシックで見出しを作らない - 無彩色だけの落ち着いた配色にしない - カードに影を多用しない（枠線で区切る） - 注釈を省略しない - CTA を角張った四角にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズ名と商品の魅力を一目で伝える）: スプリンクル柄・マーブル・コーン柄の背景にロゴと大きな商品写真を置く。特長を吹き出しで 2〜3 個添える 2. **関連シリーズバナー**（別シリーズへ誘導する）: 紺の海のような背景の横長角丸バナーに、「詳しくはこちら」ボタンを付ける 3. **キャンペーン告知**（プレゼント企画を知らせる）: 画像バナーとテキストで期間を示す 4. **店頭購入案内**（単品の価格と販売店を案内する）: 淡黄緑のカードに商品と価格、注意事項のリスト、赤い店舗検索ボタンを置く 5. **WEB限定セット**（セット商品の購入を促す）: マゼンタ枠のカードに商品画像、価格、CTA、注釈を並べる 6. **遊び方・組み合わせ**（着せ替えの楽しさを伝える）: 黄緑の地に大見出しを置き、着せ替え前後を矢印で示す。衣装を 4 列で一覧にする 7. **キャラクター紹介**（集めたくなる気持ちを高める）: プロフィール付きのカードを横スライダーで見せる 8. **購入セクション**（最終的にカートへ入れてもらう）: ピンク地にスラッシュ見出しを置く。水色枠のカードに数量選択と虹色の「カートに入れる」ボタンを付ける 9. **商品概要**（基本情報を示す）: 白い角丸カードに中央揃えの見出しと区切り線を置き、仕様を箇条で書く ## Imagery - 鮮やかな色のソフビ風フィギュアを、白背景から切り抜いて使う - 背景はカラフルなスプリンクル、ピンクのマーブル、ワッフルコーンの質感にする - 黄緑の地には、白い線画のお菓子アイコン（ドーナツ・カップケーキ）を薄く散らす - シークレット枠は「?」マーク付きのシルエットで見せる - キラキラ光る星の装飾を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 900px 幅。購入カードは「左に画像、右に価格・CTA」の 2 カラムにする - PC のファーストビューはロゴと商品を横に並べ、背景柄を左右へ広げる - 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-2bb8f424`（元 LP の URL から採番） - **元 LP**: https://deagostini.jp/mco - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。