--- version: alpha name: Kawaii Pink Lavender Collab Campaign LP description: ピンクとラベンダーの面を、ドーム状のカーブで交互に切り替えるレシート応募キャンペーンLP。白いピル型見出しの上に星とハートを並べて飾り、白カードで賞品・対象商品・応募手順を整理する。応募ボタンはピンクから紫へのグラデーション。 colors: primary: '#AE87DA' background: '#F0ACD5' surface: '#FFFFFF' dark-section: '#5B3280' secondary: '#7B4FC4' cta: '#EC63BC' on-cta: '#FFFFFF' accent-1: '#E3231A' accent-2: '#FFE600' tint-1: '#FEE9F9' text: '#29272A' accent-3: '#3BBBEB' background-alt: '#F5F5F5' text-muted: '#777777' cta-accessible: '#DB1B98' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 1.5 headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: M PLUS Rounded 1c fontSize: 10px fontWeight: 500 lineHeight: 1.7 accent: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-pill: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 44px prize-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 560px course-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 280px list-bar: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 36px step-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px notice-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 580px accordion: backgroundColor: '{colors.background-alt}' textColor: '{colors.dark-section}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 84px button-footer: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px --- # DESIGN.md — ピンク×ラベンダーのかわいいお菓子コラボキャンペーンLP（Kawaii Pink Lavender Collab Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: ゆめかわ・パステル・ドーム曲線・ピル見出し・グラデCTA・キャラ柄パターン - **地の質感**: フラットなパステル面に、うっすらとシルエット柄を敷く。カードには下方向へ濃いめの影を落とし、ぷっくりした質感を出す - **形**: 大きな角丸カード、ピル型の見出しとバッジ、円形の写真フレーム、上に膨らむドーム状のセクション境界 - **温度感**: 甘く明るい暖色寄り。ピンクと紫で夢っぽいかわいさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AE87DA` | ラベンダーのセクション地 | 14% | 画素の実測 | | `background` | `#F0ACD5` | ピンクのセクション地 | 18% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード地 | 25% | 画素の実測 | | `dark-section` | `#5B3280` | 濃紫のフッター地と第2コースのカード | 8% | 画素の実測 | | `secondary` | `#7B4FC4` | 見出しとSTEPバッジの紫 | 1% | 推定 | | `cta` | `#EC63BC` | 応募ボタンのグラデーション（ピンク→紫） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 応募ボタンの文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E3231A` | 第1コースのラベルと円フレームの赤 | 2% | 画素の実測 | | `accent-2` | `#FFE600` | 第2コースのラベルと円フレームの黄 | 1% | 推定 | | `tint-1` | `#FEE9F9` | ステップアイコンの丸地とカードの淡いグラデ | 7% | 画素の実測 | | `text` | `#29272A` | 本文テキスト | 1% | 画素の実測 | | `accent-3` | `#3BBBEB` | 見出し帯のドット（水色） | 0% | 画素の実測 | | `background-alt` | `#F5F5F5` | アコーディオンと番号チップの淡いグレー | 3% | 画素の実測 | | `text-muted` | `#777777` | 注釈テキスト | 0% | 推定 | | `cta-accessible` | `#DB1B98` | AA を満たす補正値（計算） | | 計算 | - 地の色はピンクとラベンダーをセクションごとに交互に切り替える - カード・見出しピル・商品枠は白にして、地の色から浮かせる - コースごとに識別色を持たせる（赤と黄）。ラベル・円フレーム・カード地で統一する - 主CTAと注意点ボックスの見出し帯は、ピンク→紫の横グラデーションにする - フッターは濃紫で締め、ボタンにはピンクの枠線を付ける - 良い例は淡い緑の地、悪い例は淡い赤の地で区別する - `button-primary` は文字 `#FFFFFF` × 背景 `#EC63BC` のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DB1B98`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャンペーンタイトル（赤文字に黄縁の立体ロゴ） | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.2 | 0.0em | | `headline-lg` | 白ピル内のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.03em | | `headline-md` | 賞品名・事務局名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 1.5 | 0.0em | | `headline-sm` | 見出し帯・アコーディオンの項目名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.4 | 0.0em | | `body-md` | 説明本文（中央揃え） | 丸ゴシック | M PLUS Rounded 1c | 500 | 13px | 1.9 | 0.03em | | `note` | 注釈・規約文 | 丸ゴシック | M PLUS Rounded 1c | 500 | 10px | 1.7 | 0.0em | | `accent` | 当選人数（例：50名様） | 丸ゴシック | M PLUS Rounded 1c | 700 | 22px | 1.2 | 0.0em | | `label-button` | CTA・STEPバッジ | 丸ゴシック | M PLUS Rounded 1c | 700 | 18px | 1.3 | 0.03em | - 全体を太めの丸ゴシックで統一する - セクション見出しは紫の文字で、白いピルの中に置く - 人数など強調したい数字だけ赤くし、サイズも上げる - 説明文は中央揃え。1行を短くして改行を多めにする - 色地の上の文字は白にする - FVのロゴだけ、縁取りと立体感のある装飾書体を使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。対象商品だけ2カラムのグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクションは中央に寄せ、カードは左右に約6%の余白を取る - 見出しの上には星とハートを交互に5つ並べる - 賞品は1コースにつき1カードとし、縦に重ねる - 応募手順はSTEPバッジ→丸アイコン→説明文→赤い下向き矢印の順で、縦につなげる - 規約はアコーディオンにまとめ、その下に同意チェックとCTAを2段並べる ## Elevation & Depth - カードには下方向へ濃いめの影を付ける（約0 4px 0 の色付き影） - 見出しピルにも、薄い紫の下影を付ける - アコーディオンは、紫の下線風の影で立体的に見せる - CTAには、濃い色の下影を付ける ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 賞品は、太い色枠付きの正円の中に白抜きで置く。商品写真は、白い角丸カードの中に切り抜きで置く - **セクション境界**: 上に膨らむ大きなドーム状のカーブで、地の色を切り替える - 見出し・バッジ・コースラベルはピル型にする - カードは大きめの角丸にする - 応募CTAは角丸の長方形（radius md）にする - FVの下端もカーブさせ、次のセクションへつなげる ## Components - **ピル見出し**（`section-title-pill`）: 上に星とハートの飾りを並べ、白いピルの中に紫文字で見出しを置く - **賞品カード**（`prize-card`）: コース色のラベル、色枠付きの円形写真、賞品名、人数ピルを順に並べるカード - **コースラベル**（`course-label`）: コース名を書いた赤または黄のピル - **商品カード**（`product-card`）: 白い角丸カードに、切り抜きの商品写真と商品名・容量を入れる - **見出し帯**（`list-bar`）: 左にドットを置いた白い帯。紫文字でカテゴリ名を書く - **STEPバッジ**（`step-badge`）: 紫のピルにSTEP番号を入れ、下に淡いピンクの丸アイコンを置く - **注意点ボックス**（`notice-box`）: グラデーションの見出し帯に紫の枠線を付けたボックス。中に番号チップと良い例・悪い例を入れる - **規約アコーディオン**（`accordion`）: 淡いグレーの角丸バーに項目名を書き、右端に▼を置く - **応募CTA**（`button-primary`）: ピンク→紫のグラデーションのボタン。上に小さな説明、下に大きなボタン名の2段組 - **フッターリンクボタン**（`button-footer`）: 濃紫の地に置く、ピンク枠の白抜きピル ## Do's and Don'ts **Do** - 地の色はピンクとラベンダーを交互に使い、境界はドームのカーブにする - 見出しは毎回、星とハートの飾りと白いピルのセットで出す - コースごとの識別色を一貫させる - ラベンダーの面には、キャラクターのシルエット柄を薄く敷く - 応募手順は、番号バッジと丸アイコンで視覚的に区切る **Don't** - 直線的なセクション境界や、角張ったカードは使わない - 黒や原色の面を大きく使わない（フッターの濃紫は例外） - 明朝体や細い書体を使わない - 見出しを地に直接置かない（必ず白いピルに入れる） - 影をぼかしの強いドロップシャドウにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観、賞品、応募期間を一目で伝える）: 左右に色を分けた背景の上に人物写真・賞品・ロゴを配置する。下部に、期間を書いた白ピルを置き、ラベンダーのカーブで締める 2. **プレゼント概要**（当選人数と応募条件を伝える）: ピンクの地に置いた白ピル見出しで人数を赤く強調し、その下に白文字の説明を中央揃えで置く 3. **賞品紹介**（コース別の賞品を見せる）: コース色のカードを縦に重ね、円形フレームの中に賞品を置く。下に人数ピルを付ける 4. **対象商品**（どの商品がどのコースの対象かを示す）: シルエット柄のラベンダー地に、ドット付きの見出し帯と2列の白い商品カードを並べる 5. **応募方法**（レシート応募の手順を説明する）: 大きな白カードの中に、説明文、注釈、STEP1〜3の縦フローを入れる 6. **撮影の注意点**（レシートの不備を防ぐ）: グラデーション帯付きの枠ボックスに番号チップを並べ、良い例（緑）と悪い例（赤）のボックスを置く 7. **応募規約・CTA**（同意を得てから応募へ送る）: ラベンダーの地にアコーディオンを3つ置き、同意チェックとグラデーションCTAを2つ続ける 8. **お問い合わせ**（事務局の連絡先を示す）: 淡いグラデーションのカードに、点線で区切った項目を並べる 9. **フッター**（ブランドサイトへの導線と著作権表記）: 濃紫のドーム状の地に、ピンク枠のピルボタンとコピーライトを置く ## Imagery - 人物は、パステルの衣装を着て正面から笑顔で写る、明るい撮影にする - 賞品は白抜きで撮り、太い色枠の円形フレームに入れる - 商品パッケージは切り抜き写真にし、白いカードの中央に置く - 背景には、マスコットのシルエットを淡い色で敷き詰めたパターンを使う - 星・ハート・キラキラの白いアイコンを装飾に散らす - ステップアイコンは細い線のアイコンにし、淡いピンクの丸の中に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでも、FVのビジュアルは画面幅いっぱいに使う - PCでは賞品カードを2列に横並びにする - PCでは対象商品を4列のグリッドにする - PCではSTEP1〜3を横3列に並べ、矢印も横向きにする - PCでは良い例と悪い例を横に並べ、CTA2つも横並びにする - PCではコンテンツ幅を約1000pxに抑え、中央に寄せる ## 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-18136add`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/ototo/shinakocp2026/ - **解析に使った画像**: 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/）からご連絡ください。