--- version: alpha name: Pastel Character Collab Snack Campaign LP description: クリームイエローとピンクの水玉地を交互に敷き、こげ茶の太い縁取り文字と手描き風キャラクターで甘く温かい雰囲気を作るお菓子のコラボキャンペーンLP。こげ茶の二重枠カードと肉球の角飾りで情報をまとめる。 colors: primary: '#824737' background: '#FFE8AA' background-alt: '#FAD7DB' surface: '#FFFBEE' tint-1: '#FFFFFF' dark-section: '#29A2F4' accent-1: '#FFE97A' accent-2: '#F27B93' accent-3: '#FE3B3C' text-body: '#5C271B' cta: '#6D6D6D' on-cta: '#FFFFFF' secondary: '#319ADC' accent-2-accessible: '#E81A43' accent-3-accessible: '#EE0102' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 900 lineHeight: 1.25 headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.02em body-md: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Fredoka fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.03em rounded: sm: 8px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' nav-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 170px period-bar: backgroundColor: '{colors.primary}' typography: '{typography.note}' height: 75px framed-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 900px ribbon-heading: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' height: 70px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 125px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px badge-date: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 50px scroll-box: backgroundColor: '{colors.tint-1}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 370px button-sns: textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px --- # DESIGN.md — クリーム×ピンク水玉のキャラコラボ菓子キャンペーンLP（Pastel Character Collab Snack Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感 - **キーワード**: 水玉地・こげ茶縁取り文字・キャラクターイラスト・肉球の角飾り・お菓子色・二重枠カード - **地の質感**: 白い小さな水玉を散らしたパステル地。イラストは手描き風の線画にフラットな塗り - **形**: 角丸の枠カード、リボン型の見出し帯、ピル型SNSボタン、ゆるい円弧のセクション境界 - **温度感**: 暖色寄り。クリーム・ピンク・焼き菓子の茶色で甘く温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#824737` | 見出し文字・枠線・帯のこげ茶 | 11% | 画素の主要色に補正 | | `background` | `#FFE8AA` | クリームイエローの水玉地 | 22% | 画素の実測 | | `background-alt` | `#FAD7DB` | ピンクの水玉地 | 15% | 画素の実測 | | `surface` | `#FFFBEE` | 枠カード内のアイボリー面 | 13% | 画素の主要色に補正 | | `tint-1` | `#FFFFFF` | 規約など白カード面 | 10% | 画素の実測 | | `dark-section` | `#29A2F4` | 特別コンテンツの青水玉地 | 6% | 画素の実測 | | `accent-1` | `#FFE97A` | 強調マーカー・帯の黄色 | 2% | 画素の主要色に補正 | | `accent-2` | `#F27B93` | FVカードのピンク枠と文字 | 1% | 推定 | | `accent-3` | `#FE3B3C` | 発売日バッジの赤 | 0% | 画素の実測 | | `text-body` | `#5C271B` | 本文のこげ茶文字 | 2% | 画素の実測 | | `cta` | `#6D6D6D` | 応募開始ボタンのグレー | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の実測 | | `secondary` | `#319ADC` | サブ見出しの水色 | 0% | 画素の実測 | | `accent-2-accessible` | `#E81A43` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#EE0102` | AA を満たす補正値（計算） | | 計算 | - 地色はクリームとピンクの水玉をセクションごとに交互に切り替える - 文字・枠線は黒を使わずこげ茶で統一する - 情報カードはアイボリーか白の面にこげ茶の二重線枠 - 黄色は見出しの下線マーカーとキラキラ装飾に限定 - 特別コンテンツだけ青の水玉地で目立たせる - FVの3導線カードはピンク・茶・水色で色分けする - `nav-card` は文字 `#F27B93` × 背景 `#FFFFFF` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#E81A43`、4.51:1）を使う。 - `badge-date` は文字 `#FFFFFF` × 背景 `#FE3B3C` のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#EE0102`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し（白フチ＋影付き） | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.02em | | `headline-lg` | 賞品訴求の大コピー | 丸ゴシック | M PLUS Rounded 1c | 900 | 32px | 1.25 | 0.0em | | `headline-md` | 賞品名・中見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.05em | | `headline-sm` | 手順ラベル・導線カード文言 | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.35 | 0.02em | | `body-md` | 中央揃えの紹介文 | 丸ゴシック | Zen Maru Gothic | 500 | 14px | 2.0 | 0.08em | | `note` | 注釈・規約・仕様 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 英字ラベル（COMING SOON等） | 欧文サンセリフ | Fredoka | 700 | 18px | 1.2 | 0.05em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.0 | 0.03em | - 大見出しはこげ茶文字に白い太フチと薄い影 - 本文は中央揃え・行間広めで短い行に改行 - 強調語は文字を大きくし黄色マーカーを敷く - 小見出しの前後に斜線「＼ ／」を添える - 注釈は左揃え・小さく・※で始める - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。導線カード3列、手順4列、対象商品2列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 枠カードは左右4%ほどの余白で横幅いっぱい - 見出しは枠カード上辺に重ねて配置 - キャラクターを見出しの左右やセクション境界に配置 - 画像と本文は中央寄せで縦に積む ## Elevation & Depth - 影はほぼ使わずフラット - 見出し文字に下方向の薄い影 - 応募開始ボタンに濃い下影で立体感 - 商品パッケージ画像に柔らかい落ち影 ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品・賞品は切り抜き。キャラクターは背景なしのイラスト配置 - **セクション境界**: 大きな円弧（丘型）で地色を切り替え、境界にキャラクターを並べる - 枠カードの四隅に肉球マークを置く - 見出しはリボン帯型の枠で囲む - 手順カードは上辺に番号を切り欠きで乗せる - SNSボタンはピル型で太い黒縁 ## Components - **FV導線カード**（`nav-card`）: 色違いの太枠角丸カード3枚。見出し・画像・下矢印 - **期間表示帯**（`period-bar`）: こげ茶帯に白枠ラベルと期間を2行 - **二重枠カード**（`framed-card`）: アイボリー面にこげ茶二重線、四隅に肉球 - **リボン見出し**（`ribbon-heading`）: カード上辺に重なる帯型見出し - **応募手順カード**（`step-card`）: 白角丸カード4列、上に番号、線画アイコン＋ラベル - **応募ボタン**（`button-primary`）: ピル型、点線の内枠、下に濃い影 - **発売日バッジ**（`badge-date`）: 赤い丸型ギザ縁に白文字2行 - **規約スクロール枠**（`scroll-box`）: 白面こげ茶枠の内部スクロール - **SNSボタン**（`button-sns`）: 各SNS色のピル型、右に矢印 ## Do's and Don'ts **Do** - 水玉地をクリームとピンクで交互に使う - 文字・線はこげ茶に統一する - 見出しの周りにキャラクターやお菓子のイラストを置く - カードの四隅に肉球などの小さな飾りを入れる - キラキラ装飾を黄色で余白に散らす **Don't** - 純黒の文字や細い線を使わない - 寒色を広く使わない（特別枠以外） - 直角でシャープなカードにしない - 写真の背景付き画像をそのまま並べない - 本文を長い行で左揃えにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観と3つの見どころを示す）: 全面イラストにリボン型ロゴ、下に色違い導線カード3枚 2. **期間表示**（キャンペーン・レシート期間を示す）: こげ茶帯に白枠ラベル付き2行 3. **コラボ紹介**（コラボの背景を伝える）: ピンク水玉地、記念ロゴ、大見出し、中央揃え本文、周囲にお菓子画像 4. **限定商品**（新商品と個包装デザインを紹介）: 二重枠カード内に商品画像・発売日バッジ・カルーセル 5. **プレゼント賞品**（当選数と賞品を訴求）: クリーム地、当選数の丸バッジ、大コピー、賞品画像を左右交互に配置、仕様の注釈 6. **対象商品**（対象商品を一覧化）: 枠カードに商品パッケージを1＋2列で並べ、下に注釈 7. **応募方法**（応募手順を示す）: ピンク地、4ステップカード、下向き三角、応募ボタン 8. **無効レシート例**（NG例を示す）: 角丸枠内にレシート図と×印を2列 9. **応募規約**（規約を掲示）: 白いスクロール枠、見出し左右にイラスト 10. **特別コンテンツ予告**（公開予定を告知）: 丘型境界の青水玉地、白文字見出しとCOMING SOON 11. **キャラクター紹介**（キャラの魅力を伝える）: 斜めの大イラスト、下に二重枠の紹介文 12. **SNS導線**（公式アカウントへ誘導）: 斜線付き小見出しとピル型SNSボタン ## Imagery - 手描き風の茶色い線画にパステルのフラット塗りのキャラクター - 焼き菓子・紅茶・プリンなどお茶会モチーフを散らす - 商品パッケージや賞品は切り抜きで正面配置 - 肉球・キラキラ・音符などの小さな装飾 - 格子柄の布の上に置いた俯瞰構図のメインビジュアル - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に最大幅約750pxのSPレイアウトを置く - 左右余白には水玉地を広げる - FVイラストは中央カラム内で拡大 - グリッドの列数は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-d31986b4`（元 LP の URL から採番） - **元 LP**: https://www.coconut-sable.jp/sablepurin/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。