--- version: alpha name: Pastel Pop Character Campaign LP description: ピンク・水色・黄色のパステル地に、ストライプ・方眼・ギンガム柄を切り替えて重ねる、ポップなキャラクターコラボの飲料キャンペーンLP。極太の丸ゴシックに白フチと影を付けた見出し、赤いピル型CTA、白カードと色帯の見出しで、懸賞の情報をにぎやかに整理している。 colors: primary: '#F0537C' cta: '#E32344' on-cta: '#FFFFFF' background: '#FEFFFE' background-alt: '#FFD7F1' tint-1: '#E2F1FD' tint-2: '#FEFE82' secondary: '#73D2FF' accent-1: '#9AD000' accent-2: '#F09921' accent-3: '#2F6DB5' text: '#424242' marker: '#FEFACB' accent-text: '#E26F97' primary-accessible: '#E7144B' secondary-accessible: '#007DB8' accent-2-accessible: '#AA670B' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 28px fontWeight: 800 lineHeight: 1.2 label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 900 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: 56px button-recipe: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 40px period-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 40px course-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 220px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 64px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 48px pill-title: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px orange-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px terms-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 200px --- # DESIGN.md — パステル柄×キャラクターの飲料キャンペーンLP（Pastel Pop Character Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: パステル・柄の切り替え・キャラクター・白フチ文字・懸賞・にぎやか - **地の質感**: ストライプ・方眼・水玉・ギンガムなどの平面パターンを地に敷く。グラデーションはほぼ使わず、ベタ塗りのイラスト調にする - **形**: 角丸の白カード、ピル型ボタン、吹き出し、波線やスカラップのセクション境界 - **温度感**: 暖かく明るい。ピンクと黄色が中心で、水色が爽やかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F0537C` | メインピンク（帯・見出し・フッター） | 7% | 画素の主要色に補正 | | `cta` | `#E32344` | CTAボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAの文字 | 1% | 画素の主要色に補正 | | `background` | `#FEFFFE` | カードの白地 | 28% | 画素の実測 | | `background-alt` | `#FFD7F1` | 淡いピンクの地 | 9% | 画素の実測 | | `tint-1` | `#E2F1FD` | 水色のギンガム地 | 8% | 画素の実測 | | `tint-2` | `#FEFE82` | 黄色の方眼地 | 7% | 画素の実測 | | `secondary` | `#73D2FF` | 空色（ファーストビュー下の地・見出し帯） | 6% | 画素の実測 | | `accent-1` | `#9AD000` | 黄緑（コース帯・見出し帯） | 3% | 画素の実測 | | `accent-2` | `#F09921` | オレンジ（期間・応募方法の強調） | 1% | 画素の実測 | | `accent-3` | `#2F6DB5` | 濃い青（枠線・見出し） | 2% | 推定 | | `text` | `#424242` | 本文の濃いグレー | 2% | 画素の実測 | | `marker` | `#FEFACB` | 黄色カードの地・強調 | 3% | 画素の実測 | | `accent-text` | `#E26F97` | | 1% | 画素の実測 | | `primary-accessible` | `#E7144B` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#007DB8` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#AA670B` | AA を満たす補正値（計算） | | 計算 | - セクションごとに地の色と柄を変える（ピンクのストライプ→空色→水玉→黄色の方眼→ピンク→水色のギンガム） - 情報は白か淡い黄色のカードにのせ、柄の上で直接文字を読ませない - CTAは赤のピル型にそろえ、ほかの用途には赤い面を使わない - 当選数・倍率などの数字は赤かピンクで大きくする - 見出し帯はピンク・空色・黄緑・青を順番に回し、色で塊を分ける - フッターはピンクの地に白文字でしめる - `period-band` は文字 `#FFFFFF` × 背景 `#F0537C` のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E7144B`、4.57:1）を使う。 - `ribbon-heading` は文字 `#FFFFFF` × 背景 `#73D2FF` のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#007DB8`、4.54:1）を使う。 - `orange-label` は文字 `#FFFFFF` × 背景 `#F09921` のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#AA670B`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャンペーン名 | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.1 | 0.0em | | `headline-lg` | 賞品の訴求見出し（白フチ＋影付き） | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.3 | 0.02em | | `headline-md` | 帯見出し・カードタイトル | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.02em | | `headline-sm` | 賞品名・飲み方名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.4 | 0.0em | | `body-md` | 本文・応募方法 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em | | `note` | 注意書き・規約 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 日付・当選数の数字 | 欧文サンセリフ | Montserrat | 800 | 28px | 1.2 | 0.0em | | `label-button` | CTAボタン | 丸ゴシック | M PLUS Rounded 1c | 900 | 18px | 1.2 | 0.05em | - 見出しは極太の丸ゴシックにし、白フチと濃色の影を付けてステッカー風に見せる - 見出しの中の数字や単位は2倍近い大きさにして、強弱を大きくつける - 本文は中央揃えで短く改行する。応募方法だけは●付きの左揃えにする - 注意書きは※付きの小さな文字にし、重要な注意だけ赤にする - 斜線で挟んだ「＼ ／」の見出しで、呼びかけの調子を出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内の商品やレシピは 2 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 中央に白カードを置き、左右の柄の地をフレームとして見せる - カードの左上に色帯の見出しを少しはみ出させて重ねる - キャラクターのイラストをカードの角にはみ出させ、硬さを崩す - 応募コースは番号付きのカードを縦に積む - レシピは吹き出し→写真→名前→ボタンの順でそろえる ## Elevation & Depth - CTAは下側に濃い赤のベタ影（4px程度）を付けて、押せる立体感を出す - カードは影なしで、色付きの太い枠線（3〜4px）で浮かせる - 見出し文字は白フチ＋濃色のずらし影でポップに見せる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 飲み物の写真は角丸の長方形。商品は背景を抜いたボトル単体 - **セクション境界**: 波線・スカラップ・点線とリボンで区切り、柄の切り替えで境界を示す - CTAとサブボタンはどちらもピル型か大きめの角丸 - 吹き出しは角丸で、下向きのしっぽを付ける - 見出し帯は片側を斜めにカットするか、リボン形にする - 番号バッジはりんごや丸の形にする ## Components - **主CTAピルボタン**（`button-primary`）: 赤地に白い極太文字。下に濃い影と白い光沢ラインを入れる - **レシピ用小ボタン**（`button-recipe`）: 赤い角丸ボタン。2列カードの下にそれぞれ置く - **期間帯**（`period-band`）: ピンクの全幅帯に白い小さなピルラベルと日付を並べる - **応募コースカード**（`course-card`）: 黄緑の枠の白カード。左上に番号と帯ラベル、右に賞品の画像、当選数は赤で大きく - **色帯見出し**（`ribbon-heading`）: カード上端にはみ出す空色・ピンク・黄緑の帯。白文字で、横に商品の写真を重ねる - **吹き出し**（`speech-bubble`）: 青い枠の白い吹き出しで、ひと言のポイントを2行で書く - **ピル型セクション名**（`pill-title`）: 青い枠の白いピルの中に、青い太字でセクション名を入れる - **期間ラベル**（`orange-label`）: オレンジのピルに白文字の見出しを入れ、下にオレンジの大きな日付を置く - **規約スクロール枠**（`terms-box`）: 白地に小さな文字を入れ、固定の高さでスクロールさせる ## Do's and Don'ts **Do** - セクションごとに柄と地の色を切り替え、楽しい雰囲気をつくる - 数字（当選数・日付・倍率）を大きく色付きで目立たせる - キャラクターやりんごなどのモチーフを、カードの外側に散らす - 情報は必ず白カードにのせて読みやすくする - CTAは赤のピル型で統一する **Don't** - 暗い色や黒の地は使わない - 細い明朝体や細いゴシックを見出しに使わない - 柄の上に直接小さな本文をのせない - 写真に暗いフィルターや強いグラデーションをかけない - CTAの色をセクションごとに変えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **グローバルナビ**（セクションへのページ内リンク）: ピンクの帯に白文字のメニューを等間隔で並べる 2. **ファーストビュー**（キャンペーン名と世界観を伝える）: ピンクのストライプの部屋のイラストにキャラクターと商品を置き、白フチ極太ロゴを重ねる。下にピンクの期間帯 3. **導入メッセージ**（習慣化を呼びかける）: 空色の地に雲・木・キャラクターのイラスト。中央揃えの短い文を並べる 4. **賞品・応募コース**（購入本数ごとの賞品を見せる）: 水玉の地にリボン見出しと大きな当選総数。番号付きのコースカードを3枚縦に積む 5. **当選倍率の特典**（特定の商品の購入を促す）: 青い枠のボックスに矢印付きの見出し。組み合わせの例を「＋」でつないで示す 6. **対象商品**（対象になるボトルを示す）: 黄色の方眼の地に白カード。商品を4列で、種類ごとに点線見出しで区切る 7. **応募方法・期間**（手順と締切を伝える）: ピンクの地に黄色の枠のカード。●の箇条書きと、オレンジの大きな日付 8. **規約とCTA**（同意して応募させる）: スクロールする規約枠の下に、赤いピル型の大きなCTA 9. **飲み方提案**（商品の楽しみ方を広げる）: 水色のギンガムの地。色帯見出しのカードに、吹き出し・写真・ボタンを2列で並べる 10. **お問い合わせ・フッター**（窓口と権利表記を示す）: ピンクの地に淡いりんごの柄。白文字で電話番号を大きく書く ## Imagery - キャラクターは太い輪郭線とベタ塗りのイラストで、カードの角や余白にのぞかせる - りんご・花・雲・木などの小さなモチーフを、柄の地に散らす - 飲み物の写真は明るい自然光で、淡い背景にグラスを置いて真俯瞰より少し斜めから撮る - 商品のボトルは背景を抜き、正面から撮って並べる - 賞品の画像はスマホ画面やカードの実物イメージを少し傾けて置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC版も中央に約70%幅の1カラムで組み、左右に柄の地を広く見せる - SPではナビをハンバーガーメニューにし、期間帯は2行にする - 対象商品はPCで4列、SPで2列にする - レシピカードはSPでも2列のまま、写真を小さくする - 見出しの文字サイズはSPでPCの約75%にする ## 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-c1abca98`（元 LP の URL から採番） - **元 LP**: https://cp-page.com/lp/osukatsu-hellokitty-cp/2026/index.html - **解析に使った画像**: PC（PC版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。