--- version: alpha name: Pastel Pink Character Vote Campaign LP description: 淡いピンクの地に劇場カーテンや紙吹雪を重ね、擬人化した果物キャラを大量に配置したSNS投票キャンペーンLP。ローズ色の太い縁取り見出しとマゼンタのグラデCTAで、にぎやかで親しみやすい印象を作る。 colors: background: '#FDE9EA' background-alt: '#FED0D0' surface: '#FFFFFF' primary: '#C45160' text: '#481613' text-body: '#4A3A3A' cta: '#E0407A' on-cta: '#FFFFFF' accent-1: '#F99773' accent-2: '#B2957F' tint-1: '#FFF5DA' marker: '#FFF0A0' dark-section: '#F68484' line: '#8A4A4A' cta-accessible: '#DD2C6C' primary-accessible: '#C34F5E' accent-2-accessible: '#907057' accent-1-accessible: '#D74009' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 20px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 48px period-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 44px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px ribbon-banner: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 52px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px character-tile: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 130px prize-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 320px marker-subhead: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 24px rules-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 280px --- # DESIGN.md — 桃色ステージとフルーツキャラの投票キャンペーンLP（Pastel Pink Character Vote Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、親しみ・手作り感、やさしい・柔らかい - **キーワード**: 淡ピンク地・劇場カーテン・紙吹雪・擬人化キャラ・投票・ドット柄 - **地の質感**: フラットな塗りに水玉ドット・斜線ストライプ・紙吹雪を散らす。カードは白で薄い影。 - **形**: 角丸カード、ピル型ボタン、波形のセクション境界、リボン帯見出し、丸い番号バッジ。 - **温度感**: 暖色。ピンク〜コーラル〜オレンジで甘く明るい。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FDE9EA` | ページの基本地色（淡ピンク） | 30% | 画素の実測 | | `background-alt` | `#FED0D0` | 濃いめピンクの帯セクション地 | 13% | 画素の実測 | | `surface` | `#FFFFFF` | カード・規約ボックスの白 | 20% | 画素の実測 | | `primary` | `#C45160` | ブランドのローズピンク（枠線・番号・帯） | 6% | 画素の主要色に補正 | | `text` | `#481613` | 見出しの濃いこげ茶 | 2% | 画素の実測 | | `text-body` | `#4A3A3A` | 本文の茶系グレー | 2% | 推定 | | `cta` | `#E0407A` | CTAのマゼンタ〜コーラル グラデ | 1% | 推定 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#F99773` | タイトル文字のコーラル〜オレンジ | 8% | 画素の主要色に補正 | | `accent-2` | `#B2957F` | リボン帯の金茶 | 4% | 画素の主要色に補正 | | `tint-1` | `#FFF5DA` | 商品枠のクリーム地 | 2% | 画素の実測 | | `marker` | `#FFF0A0` | サブ見出しの黄色マーカー | 0% | 推定 | | `dark-section` | `#F68484` | カーテン・ステージのサーモン赤 | 6% | 画素の実測 | | `line` | `#8A4A4A` | 見出し下の装飾線・枠 | 0% | 推定 | | `cta-accessible` | `#DD2C6C` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C34F5E` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#907057` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D74009` | AA を満たす補正値（計算） | | 計算 | - 地は淡ピンクを基本に、セクションごとに一段濃いピンクと交互に切り替える。 - カード・規約・投稿枠は白で、ローズピンクの細い縁取りを付ける。 - 見出し文字はこげ茶で統一し、黒は使わない。 - CTAはマゼンタ→コーラルの横グラデ＋白文字のみ。 - キャラ一覧タイルは果物ごとの鮮やかな色グラデで、ページで最も彩度を高くする。 - 金茶のリボン帯は告知見出しなど1〜2箇所に限定。 - `button-primary` は文字 `#FFFFFF` × 背景 `#E0407A` のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DD2C6C`、4.51:1）を使う。 - `period-pill` は文字 `#FFFFFF` × 背景 `#C45160` のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C34F5E`、4.56:1）を使う。 - `ribbon-banner` は文字 `#FFFFFF` × 背景 `#B2957F` のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#907057`、4.52:1）を使う。 - `character-tile` は文字 `#FFFFFF` × 背景 `#F99773` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D74009`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインタイトル。白縁＋影付きの太い丸ゴシック | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（上下に装飾線） | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.3 | 0.05em | | `headline-md` | プレゼント名などのグラデ文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.3 | 0.02em | | `headline-sm` | マーカー付きサブ見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 手順説明・規約本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | STEP表記・日付の数字 | 欧文サンセリフ | Montserrat | 700 | 20px | 1.1 | 0.02em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 見出しは丸ゴシック太字で中央揃え。 - セクション見出しは上下に菱形端の細線を添える。 - 日付の数字は大きく、曜日は丸囲みで小さく。 - 本文は中央揃え短行、規約のみ左揃え。 - メインタイトルは白い太縁取りとドロップシャドウで立体感を出す。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラ一覧は SP 3 列グリッド、STEP は縦積み。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - コンテンツは中央寄せ、左右にキャラを余白へはみ出させて配置。 - セクション境界は波形で地色を切り替える。 - STEPカードは等幅で矢印でつなぐ。 - 規約は固定高の白ボックス内でスクロール。 ## Elevation & Depth - 白カードに薄いピンク寄りの影（0 4px 12px rgba(200,80,100,.15)）。 - CTAボタンに下方向の柔らかい影。 - キャラタイルは白縁＋軽い影で浮かせる。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: キャラは切り抜きイラスト、一覧は角丸の縦長タイル - **セクション境界**: 波形（スカラップ）と劇場カーテン - 期間表示はピル型帯で、左にラベルの白ピル。 - STEP番号はローズの円形バッジをカード上辺に重ねる。 - リボン帯は両端が切れ込んだ形。 ## Components - **グラデCTAボタン**（`button-primary`）: マゼンタ→コーラルの横グラデ、ピル型、白文字 - **期間表示帯**（`period-pill`）: ローズ斜線ストライプのピル帯に白ラベルと大きな日付 - **装飾線付き見出し**（`section-heading`）: こげ茶の見出しを上下の菱形端の線で挟む - **金茶リボン帯**（`ribbon-banner`）: 告知見出しを載せる両端切れ込みのリボン - **STEPカード**（`step-card`）: ローズ縁の白角丸カード、上辺に丸番号、中に画面イラスト - **キャラタイル**（`character-tile`）: 果物色グラデの縦長角丸タイル、右上に白丸番号、下に名前 - **プレゼント枠**（`prize-box`）: 白地にローズ二重枠、クリーム地の商品枠を＋でつなぐ - **マーカー付きサブ見出し**（`marker-subhead`）: 黄色の下半分マーカーを敷いた太字 - **規約スクロール枠**（`rules-box`）: 白ボックス内に丸ドット付き小見出しと本文、右にピンクのスクロールバー ## Do's and Don'ts **Do** - キャラを各セクションの左右に必ず配置し、端からはみ出させる。 - 紙吹雪・水玉・斜線パターンを余白に散らしてにぎやかさを出す。 - 見出し文字はこげ茶、強調はローズで統一する。 - セクション切替は波形で柔らかくつなぐ。 - 日付・期間は大きくピル帯で目立たせる。 **Don't** - 黒文字や真っ黒の面を使わない。 - 寒色を主要色に使わない（キャラタイル内のみ可）。 - 角の鋭い四角ボタンにしない。 - 写真中心にしない。主役はイラストキャラ。 - 白地だけの単調なセクションを続けない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名・特典・期間を一目で伝える）: 左右に劇場カーテン、紙吹雪、中央に立体タイトル、周囲にキャラと商品、下に期間ピル 2. **キャラ横スクロール帯**（キャラの魅力で興味を引く）: 白角丸カードにキャラを1体ずつ並べた横一列 3. **プレゼント告知**（賞品と当選数を訴求）: 金茶リボン見出し＋グラデ文字、白枠内に商品2点を＋で並べる 4. **期間表示**（締切を明示）: 大きなストライプのピル帯 5. **参加方法**（手順を3段階で説明）: 濃ピンク地、マーカー付きサブ見出し、STEPカード3枚を矢印でつなぐ 6. **結果発表**（発表日と方法を告知）: 装飾線見出し＋中央揃え短文、水玉円とキャラ 7. **キャラクター紹介**（投票対象を一覧）: カーテンで開くステージ演出、果物色タイルの5列グリッド 8. **SNS投稿**（SNSでの盛り上がりを見せる）: 投稿カード3枚を並べ、下にグラデCTA 9. **公式SNS**（フォロー導線）: 濃ピンク地にSNSアイコンを中央に並べる 10. **応募規約**（条件を明示）: 前文中央揃え、白スクロールボックス 11. **お問い合わせ**（事務局情報）: 中央揃えのテキストと注釈、左右にキャラ 12. **ブランド導線バナー**（ブランドサイトへ誘導）: ローズ地の角丸バナーに商品画像と白文字、矢印アイコン ## Imagery - 果物を擬人化した太めの輪郭線のフラットイラスト。顔・手足付きで表情豊かに。 - キャラはマントや小物を持たせて個性を出す。 - 背景装飾は紙吹雪、ハート、水玉ドット円、斜線ストライプ。 - 劇場の赤いカーテンでステージ感を演出。 - 商品は白背景の切り抜きパッケージ画像。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央約900px幅、SPは1カラムで余白16px。 - キャラ一覧はPC5列→SP3列。 - STEPカードはPC横3枚→SP縦積み、矢印は下向きに。 - SNS投稿カードはPC3枚→SP横スワイプ。 - 左右の装飾キャラはSPでは小さくし数を減らす。 ## 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-6fb3d9b9`（元 LP の URL から採番） - **元 LP**: https://www.kagome.co.jp/campaign/fruit_senkyo/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。