--- version: alpha name: Pastel Pink Character Collab Campaign LP description: 淡いピンク・ラベンダー・水色を地に、濃いマゼンタで見出しと CTA を締めるキャラクターコラボのプレゼントキャンペーン LP。ハート・リボン・風船・虹の装飾を散らし、太い丸ゴシックの見出しとピル型ボタンでかわいく賑やかにまとめる。 colors: primary: '#E3007E' background: '#F7D2E3' background-alt: '#D9BFDA' secondary: '#C189D2' accent-1: '#FFFFFF' accent-2: '#7ECFF0' tint-1: '#FDF5C8' surface: '#FEFEFF' cta: '#F9D5E5' on-cta: '#C1558E' line: '#E5AFCC' text: '#4A4A4A' accent-3: '#EF99BE' on-cta-accessible: '#A43C73' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 400 lineHeight: 1.2 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: 22px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.03em accent: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.1 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px section-band: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-lg}' height: 56px anchor-tab: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 72px course-badge: textColor: '{colors.primary}' typography: '{typography.accent}' height: 48px period-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 70px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px character-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 160px badge-notice: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px contact-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px --- # DESIGN.md — パステルピンク×水色のキャラコラボ懸賞 LP（Pastel Pink Character Collab Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: パステル・ハート・リボン・キャラクター・懸賞・ガーリー - **地の質感**: フラットな単色面にイラスト装飾を散らす。グラデーションや写真の質感は使わない - **形**: ハート・雲・ぷっくりした楕円・波形の境界。ボタンはピル型、カードは角丸＋太枠 - **温度感**: 甘く温かい。ピンク主体で水色が爽やかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E3007E` | 見出し文字・帯・ブランド強調のマゼンタ | | 画素の実測 | | `background` | `#F7D2E3` | ページ基調の淡いピンク地 | | 画素の実測 | | `background-alt` | `#D9BFDA` | キャンペーン2などの淡いラベンダー地 | | 画素の実測 | | `secondary` | `#C189D2` | ラベンダー紫の見出し帯・コースC | | 画素の実測 | | `accent-1` | `#FFFFFF` | 水色の雲・ハートの面、ARセクション地 | | 画素の実測 | | `accent-2` | `#7ECFF0` | コース見出しの記号色（水色） | | 画素の実測 | | `tint-1` | `#FDF5C8` | コースAの淡いクリーム黄色の楕円 | | 推定 | | `surface` | `#FEFEFF` | カード・情報ボックスの白 | | 画素の実測 | | `cta` | `#F9D5E5` | ピル型CTAの淡いピンク面 | | 画素の主要色に補正 | | `on-cta` | `#C1558E` | CTA上のマゼンタ文字 | | 画素の主要色に補正 | | `line` | `#E5AFCC` | カード・ボタンの太いピンク枠 | | 画素の主要色に補正 | | `text` | `#4A4A4A` | 本文の濃いグレー | | 推定 | | `accent-3` | `#EF99BE` | お問い合わせ枠・SNS帯の濃いめピンク | | 画素の実測 | | `on-cta-accessible` | `#A43C73` | AA を満たす補正値（計算） | | 計算 | - 地はピンク→ラベンダー→水色→白とセクションごとに切り替え、境界は波形でつなぐ - 見出し文字と賞品数の数字はマゼンタで最も強くする - コース記号 A/B/C はオレンジ・水色・紫と色を変えて区別する - CTA は淡ピンク面＋マゼンタ枠と文字、右端に三角アイコン - 本文は濃いグレー、注釈は淡いグレーで小さく - 黒や濃紺の面は使わない（SNSアイコンのみ例外） - `button-primary` は文字 `#C1558E` × 背景 `#F9D5E5` のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#A43C73`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーンタイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（帯・大見出し） | 丸ゴシック | M PLUS Rounded 1c | 900 | 28px | 1.3 | 0.05em | | `headline-md` | コース名・賞品名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.35 | 0.03em | | `accent` | 当選人数などの大きな数字 | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.1 | 0.0em | | `headline-sm` | カード内見出し・リード | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.5 | 0.03em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | 注意事項・応募要項 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | CTAボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.2 | 0.05em | - 見出しは極太の丸ゴシックで中央揃え - 当選数の数字は周囲の文字の約2倍にし、単位は小さく添える - リードは2〜4行に分けて中央揃え、強調語だけマゼンタ - STEP 番号は欧文イタリックの小さめピンク - 注釈は11px前後で※付き、左揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ステップは縦積み、PC は 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 全要素を中央軸に揃える - 賞品ブロックは大きな有機形の色面の上に記号・画像・賞品名を配置 - キャラクターイラストは色面の端からはみ出させる - セクション見出しは横幅いっぱいの色帯＋リボン装飾 - 要項はスクロール枠内に収める ## Elevation & Depth - 影はほぼ使わずフラット - カードはピンクの太枠と右下のずらし影（ベタ）で立体感 - ボタンは下側に濃色の厚みをつける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品・グッズは切り抜きで配置、キャラクターはハート枠や切り抜き - **セクション境界**: 波形・雲形の曲線で色を切り替える - ハート・雲・楕円の有機形を背景に使う - カードは角丸＋2〜3pxのピンク枠 - 期間表示は角丸ラベル付きの枠 - 直角の硬い区切りは避ける ## Components - **ピル型CTA**（`button-primary`）: 淡ピンク面にマゼンタ太枠と文字、右に▶ - **リボン付き見出し帯**（`section-band`）: 全幅のマゼンタ／紫帯に白文字、左右にリボンイラスト - **キャンペーン切替タブ**（`anchor-tab`）: 色付きラベル上部＋白地説明＋▼の3枚並びカード - **コース記号**（`course-badge`）: 白縁取りの巨大なA/B/Cアルファベットと鉤括弧付きコース名 - **期間・締切ボックス**（`period-box`）: 上部に色ラベル、白地に日付を太字 - **ステップカード**（`step-card`）: STEP番号・見出し・説明・画像、矢印で連結 - **キャラクター紹介カード**（`character-card`）: ピンク枠の白カード上にリボン、横にキャラ画像 - **予告バッジ**（`badge-notice`）: マゼンタの丸に白文字 - **問い合わせ枠**（`contact-box`）: レース風コーナー装飾の淡ピンク枠 ## Do's and Don'ts **Do** - ハート・風船・虹・リボンを余白に散らす - 数字の当選数を最大級に強調する - セクションごとに地色をパステルで切り替える - ボタンはすべてピル型で統一 - キャラクターを各セクションの端に添える **Don't** - 暗い色や彩度の低い地を使わない - 細い明朝体を使わない - 写真の背景をそのまま四角で置かない - 角ばったボタンにしない - 注釈を本文と同じ大きさにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボとキャンペーンの告知）: ピンク地にバラ柄、ハート枠のキャラ2体、中央に太字タイトルと期間ボックス 2. **ナビゲーション**（複数キャンペーンへの誘導）: 色違いラベルのタブカード3枚を横並び 3. **キャンペーン1概要**（応募条件と総当選数）: リボン付きマゼンタ帯の下に中央揃えリード、数字を大きく 4. **賞品コース紹介**（コース別賞品の提示）: 黄・水色・紫の楕円色面に記号・賞品画像・当選数 5. **対象商品**（対象商品の一覧）: 白い雲形の面に商品パッケージを4列グリッド 6. **締切とCTA**（応募への誘導）: 締切ボックスとピル型CTA 7. **キャンペーン2**（SNS応募型キャンペーンの告知）: 紫帯見出し、予告バッジ、水色枠の賞品カード 8. **応募方法**（手順の説明）: Step ラベル付き枠を▼でつなぐ縦フロー 9. **応募要項**（規約の提示）: マゼンタ見出しタブ付きのスクロール枠 10. **ARコンテンツ**（体験コンテンツの案内）: 水色地に白ハート、3ステップカード 11. **キャラクター紹介**（キャラクターへの親近感）: キャラ画像とリボン付きカードを左右交互 12. **お問い合わせ・SNS**（問い合わせ先とSNS誘導）: 装飾枠の問い合わせ、ピンク帯にSNSアイコン ## Imagery - 太めの輪郭線のかわいいキャラクターイラストを切り抜きで配置 - ハート型の風船・虹・雲をパステルでフラットに描く - グッズや商品は白背景の切り抜きでやや傾けて配置 - 賞品画像の脇に手書き風の吹き出しコメントと曲線矢印 - 背景にバラや小さなハートの散らし柄 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は全セクション 1 カラム、幅 88% 程度に収める - PC の3列タブとステップカードは SP で縦積みまたは横スクロールに - 賞品ブロックは画像を上、賞品名と数字を下に積む - 装飾イラストは SP で縮小し本文に重ねない - PC はコンテンツ幅を約 900px に固定し左右に背景色を延長 ## 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-04b01f06`（元 LP の URL から採番） - **元 LP**: https://www.sanko-seika.co.jp/estherbunny/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。