--- version: alpha name: Kawaii Pink Purple Candy Campaign LP description: 濃いピンクと藤紫を軸にした、ハート・キラキラ装飾いっぱいのゆめかわ系プレゼントキャンペーンLP。ぷっくりした立体ロゴ風見出し、ピル型グラデーションCTA、白い角丸カードで賞品や手順を見せる。波形の区切りでピンク地と藤紫地を交互に切り替える。 colors: primary: '#E64E8B' secondary: '#A05090' background: '#F4C9DC' background-alt: '#CCB1D2' surface: '#FFFFFF' tint-1: '#EE87B3' tint-2: '#F5D4E2' accent-1: '#BB94C2' accent-2: '#FDEE23' cta: '#BD4A82' on-cta: '#FFFFFF' text-body: '#3A3236' dark-section: '#8E3E86' line: '#DCCED6' primary-accessible: '#BB1A5B' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 50px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 21px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 24px fontWeight: 500 lineHeight: 1.2 label-button: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em note: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px button-secondary: backgroundColor: '{colors.tint-2}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px period-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px info-table: backgroundColor: '{colors.tint-2}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 130px anchor-nav: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 50px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 360px heading-sparkle: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 320px count-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px terms-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 400px --- # DESIGN.md — ピンク×紫のゆめかわ菓子キャンペーンLP（Kawaii Pink Purple Candy Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: ゆめかわ・ハート・キラキラ・ぷっくり立体文字・ピンク×藤紫・コラボ - **地の質感**: 淡いピンク地にハートやリボン柄を薄く敷き、光沢のある3Dハートや果物のグミを散らす。艶のあるグラデーション。 - **形**: ピル型ボタン、大きめ角丸カード、波線の区切り、アーチ形カード、ハート形の番号バッジ。 - **温度感**: 甘く温かい。女性向けの柔らかいパステルに濃いマゼンタで締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E64E8B` | 濃いピンク（期間ラベル・CTA・見出し文字） | 6% | 画素の実測 | | `secondary` | `#A05090` | 藤紫（ラベル・帯・枠） | 6% | 推定 | | `background` | `#F4C9DC` | ピンク地の基本背景 | 35% | 画素の実測 | | `background-alt` | `#CCB1D2` | 藤紫の淡いセクション背景 | 15% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード | 14% | 画素の実測 | | `tint-1` | `#EE87B3` | 告知ブロックの中間ピンク | 10% | 画素の実測 | | `tint-2` | `#F5D4E2` | 情報表の半透明白地 | 3% | 画素の実測 | | `accent-1` | `#BB94C2` | ラベル用薄紫 | 2% | 画素の実測 | | `accent-2` | `#FDEE23` | 強調の黄色文字 | 0% | 画素の実測 | | `cta` | `#BD4A82` | 応募ボタンのマゼンタ | 2% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text-body` | `#3A3236` | 本文の濃いグレー | 2% | 推定 | | `dark-section` | `#8E3E86` | FV下の濃い紫帯 | 2% | 推定 | | `line` | `#DCCED6` | 規約内の区切り線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#BB1A5B` | AA を満たす補正値（計算） | | 計算 | - 地はピンク(#F4C9DC系)と藤紫(#C4ACC5系)を波線で交互に切り替える。 - CTA・期間ラベル・見出し文字は濃いピンク一色に統一。 - ラベルや帯・カード枠は藤紫でピンクと対にする。 - 白は賞品カード・手順カード・規約ボックスの面だけに使う。 - 黄色は当選訴求の強調語にだけ少量使う。 - 本文は黒でなく濃いグレーで甘さを保つ。 - `button-secondary` は文字 `#E64E8B` × 背景 `#F5D4E2` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BB1A5B`、4.51:1）を使う。 - `period-label` は文字 `#FFFFFF` × 背景 `#E64E8B` のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BB1A5B`、4.51:1）を使う。 - `anchor-nav` は文字 `#FFFFFF` × 背景 `#E64E8B` のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BB1A5B`、4.51:1）を使う。 - `prize-card` は文字 `#E64E8B` × 背景 `#FFFFFF` のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BB1A5B`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（白フチ付きピンク立体文字） | 丸ゴシック | M PLUS Rounded 1c | 900 | 50px | 1.1 | 0.02em | | `headline-lg` | セクション見出し（白フチ+ピンク影、両脇にキラキラ） | 丸ゴシック | M PLUS Rounded 1c | 900 | 28px | 1.3 | 0.05em | | `headline-md` | 告知ブロックの白抜き見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 21px | 1.5 | 0.05em | | `headline-sm` | 賞品名・規約の小見出し（ピンク文字） | 丸ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.5 | 0.04em | | `body-md` | 応募条件・規約本文 | 丸ゴシック | M PLUS Rounded 1c | 500 | 12px | 1.8 | 0.02em | | `accent` | 日付の大きい数字 | 欧文サンセリフ | Montserrat | 500 | 24px | 1.2 | 0.0em | | `label-button` | CTA・ラベル文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 22px | 1.3 | 0.04em | | `note` | ※注釈 | 丸ゴシック | M PLUS Rounded 1c | 500 | 11px | 1.7 | 0.02em | - 全体を丸ゴシックで統一し、角ばった書体は使わない。 - 見出しは白フチ＋ピンクの影で、ぷっくりしたシール風にする。 - 日付は数字だけ大きくし、曜日は丸囲みにする。 - 見出しの両脇にキラキラ星を左右対称に置く。 - 本文は12px前後・行間1.8でたっぷり取る。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧は3列+2列、PCは賞品3列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 中央揃えを基本にし、本文だけ左揃え。 - セクション境界は波線にして色を切り替える。 - CTAブロックは同じ型（ボタン+アカウント情報表）を複数回繰り返す。 - 賞品カードは左右に余白を広く取った縦並び。 - ページ内ナビは2×2のピンク帯ボタン。 ## Elevation & Depth - CTAは下に濃いピンクの厚み影を付けて押せそうに見せる。 - 白カードは影ほぼなしで、淡いピンクの縁取りで浮かせる。 - 3Dハートやグミの装飾に光沢とドロップシャドウ。 - 規約ボックスは藤紫の太枠で囲む。 ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品・賞品は白カード内に切り抜きで置く。人物は背景と合成。 - **セクション境界**: ゆるい波線（ピンクと藤紫の二重線） - ボタンとラベルは全てピル型。 - 手順カードは上部がアーチ形。 - 番号はハート形バッジ。 - 告知ブロックは角を内側に切り欠いた装飾フレーム。 ## Components - **応募CTAボタン**（`button-primary`）: マゼンタのグラデーション・ピル型で左端にキャラクターが重なる。下に厚み影。 - **詳細リンクボタン**（`button-secondary`）: 淡いピンクのピル型に濃ピンク文字と右矢印。 - **期間ラベル**（`period-label`）: 濃ピンクのピル帯に白文字、下に大きな数字の日付。 - **アカウント情報表**（`info-table`）: 半透明白地の角丸ボックスに、薄紫ピルのラベルと値を3行並べる。 - **ページ内ナビ**（`anchor-nav`）: 2×2のピンク帯ボタン。白文字と下向き矢印。 - **賞品カード**（`prize-card`）: 白の大角丸カード。画像、ピンクの賞品名、当選数、右下に紫の丸＋ボタン。 - **キラキラ見出し**（`heading-sparkle`）: 白フチピンク文字の両脇に紫の星を配置。 - **手順カード**（`step-card`）: 上がアーチ形の白カードに紫ハート番号バッジ。横スライド＋ドット。 - **当選数ハートバッジ**（`count-badge`）: 光沢のある紫の3Dハートに白文字で総数。 - **規約スクロールボックス**（`terms-box`）: 藤紫の太枠白ボックス。ハートアイコン付き小見出しと点線区切り。 ## Do's and Don'ts **Do** - ハート・キラキラ・果物の3D装飾を背景の左右に散らす。 - CTAはページ内で3回以上繰り返す。 - 期間や当選数の数字を大きく見せる。 - ピンク地と藤紫地を波線で交互に切り替える。 - キャラクターをボタンや見出しに添えて親しみを出す。 **Don't** - 黒や原色の青・緑を面で使わない。 - 角ばったボタンや明朝体を使わない。 - 装飾を本文の上に重ねて読みにくくしない。 - 白背景だけの平坦なセクションを作らない。 - 影を強くしすぎて重くしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボと賞品の魅力を一目で伝える）: 人物写真にハートや果物を散らし、立体文字キャッチ。下部に紫帯で当選訴求と商品パッケージ。 2. **応募概要**（応募方法と期間を簡潔に示す）: 中間ピンク地に白抜き見出し、ピルラベル＋大きな日付を2つ。下端は波線。 3. **CTA**（すぐ応募させる）: キャラ付きピル型CTA、アカウント情報表、応募条件の本文。 4. **ページ内ナビ**（各情報へ誘導）: 2×2のピンク帯ボタン。 5. **賞品紹介**（賞品の魅力と当選数を伝える）: キラキラ見出し、コラボロゴ、紫ハートの総数バッジ、白カードを縦に並べる。 6. **対象商品**（対象商品を示す）: パッケージ画像を3+2列、下線付き注意文、注意ボックス、詳細ボタン、店舗検索ボタン。 7. **応募概要の再掲**（期間を再確認させる）: 藤紫地に装飾フレームのピンクボックス、上にキャラ顔。 8. **応募方法**（手順を4ステップで示す）: ハート番号付きアーチ形カードを横スライド、その後CTAと情報表。 9. **応募規約**（規約を掲示）: 藤紫地に太枠白のスクロールボックス、下にCTA。 10. **フッター**（ブランド誘導とページトップ）: ブランドバナーとキャラのページトップボタン。 ## Imagery - 人物はポップな衣装で、ピンク紫の背景と光の玉を合成する。 - 光沢のある3Dハート（ピンク・紫・白）を大小ランダムに散らす。 - 四芒星のキラキラを紫系で見出し周りに添える。 - ゆるい線画のデフォルメキャラをCTAや見出しに添える。 - 背景にリボン・ハート柄を薄い透かしで敷く。 - 商品は白背景の切り抜きパッケージで並べる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せで内容幅は約800px、背景装飾は全幅に広げる。 - FVは横長構図にし、キャッチを左、当選訴求を右に置く。 - 応募概要は見出し左・期間右の横並びにする。 - 賞品カードは3列、手順カードは2×2グリッドにする。 - ページ内ナビは4つ横一列。 - 対象商品は5つ横一列。 ## 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-72e7ea6f`（元 LP の URL から採番） - **元 LP**: https://www.meiji.co.jp/products/brand/fruits_gummi/punipuni_fruits_cp/index.html - **解析に使った画像**: 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/）からご連絡ください。