--- version: alpha name: Pastel Sky Character Collab Campaign LP description: パステル水色を地に、白いハート型パネルとピンク・ミント・ココアブラウンのピル型ラベルを重ねたキャンペーンLP。キャラクターのイラストを各所に散らし、太い丸ゴシックで日付や特典を大きく見せる。夏の期間限定イベントらしい、かわいくポップな印象。 colors: primary: '#ABD0ED' background: '#FDFEFD' secondary: '#ECC5D8' background-alt: '#CCE7F2' cta: '#EE9CC4' on-cta: '#FFFFFF' accent-1: '#8C6A5E' accent-2: '#85CBCD' accent-3: '#AAD1ED' text: '#F2FDFE' text-body: '#ADC7DB' marker: '#EC8DBB' line: '#8C6A5E' dark-section: '#555555' text-body-accessible: '#477AA1' cta-accessible: '#DA297F' primary-accessible: '#287ABB' text-accessible: '#085F67' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.12em note: fontFamily: M PLUS Rounded 1c fontSize: 9px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Fredoka fontSize: 18px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Fredoka fontSize: 18px fontWeight: 700 lineHeight: 1.0 rounded: sm: 8px md: 24px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-check: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px heart-panel: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-lg}' height: 340px date-pill: backgroundColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 32px section-pill-heading: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px countdown-heart: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 90px toc-list: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px prize-card: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 220px label-dark: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 30px --- # DESIGN.md — 水色×ピンクのハート型キャラコラボ販促LP（Pastel Sky Character Collab Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: パステル水色・ハート型パネル・ピル型日付ラベル・キャラクター散らし・白抜き太字・アイス線画 - **地の質感**: フラットな単色面だけで作る。グラデーションや影は使わず、白の太い線画アイコンを添える。 - **形**: 大きなハート型の白パネル、ピル型ラベル、角丸大きめの白カード、アイスやカップの線画。 - **温度感**: 明るく涼しげな寒色のベースに、ピンクで甘さを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#ABD0ED` | メインの地色（パステル水色） | 32% | 画素の実測 | | `background` | `#FDFEFD` | 白地セクション・ハートパネル | 25% | 画素の実測 | | `secondary` | `#ECC5D8` | ピンク地セクション | 10% | 画素の実測 | | `background-alt` | `#CCE7F2` | 淡い水色のノベルティセクション | 9% | 画素の実測 | | `cta` | `#EE9CC4` | CHECKボタン・年号ラベルのピンク | 2% | 推定 | | `on-cta` | `#FFFFFF` | ピンクボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#8C6A5E` | 日付ラベルのココアブラウン | 2% | 推定 | | `accent-2` | `#85CBCD` | ミントのラベル | 1% | 画素の実測 | | `accent-3` | `#AAD1ED` | 大きなハートの濃い水色 | 4% | 画素の実測 | | `text` | `#F2FDFE` | 見出し・本文の白抜き文字 | 2% | 画素の実測 | | `text-body` | `#ADC7DB` | 白地上の水色本文 | 1% | 画素の実測 | | `marker` | `#EC8DBB` | ハートパネル内の強調ピンク文字 | 0% | 推定 | | `line` | `#8C6A5E` | 目次の点線区切り | 0% | 推定 | | `dark-section` | `#555555` | 応募見出しの濃グレーラベル | 0% | 推定 | | `text-body-accessible` | `#477AA1` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#DA297F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#287ABB` | AA を満たす補正値（計算） | | 計算 | | `text-accessible` | `#085F67` | AA を満たす補正値（計算） | | 計算 | - 地色は水色・淡ピンク・淡水色・白の4種類を切り替えて、内容のまとまりごとに区切る - 水色の地には白文字と白パネルを、白パネルの中には水色とピンクの文字を使う - 日付ラベルはココアブラウン・ピンク・ミントを順番に使い、一つの色に偏らせない - 特典名や金額の強調はピンク、補足は小さな水色にする - 黒は使わない。文字の暗い色はココアブラウンか濃グレーまでにする - `page` は文字 `#ADC7DB` × 背景 `#FDFEFD` のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#477AA1`、4.55:1）を使う。 - `button-check` は文字 `#FFFFFF` × 背景 `#EE9CC4` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DA297F`、4.56:1）を使う。 - `heart-panel` は文字 `#ADC7DB` × 背景 `#FDFEFD` のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#477AA1`、4.55:1）を使う。 - `section-pill-heading` は文字 `#ABD0ED` × 背景 `#FDFEFD` のコントラスト比が 1.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#287ABB`、4.52:1）を使う。 - `countdown-heart` は文字 `#ABD0ED` × 背景 `#FDFEFD` のコントラスト比が 1.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#287ABB`、4.52:1）を使う。 - `prize-card` は文字 `#F2FDFE` × 背景 `#AAD1ED` のコントラスト比が 1.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#085F67`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風タイトル・英字の大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 64px | 1.0 | 0.0em | | `headline-lg` | ハート内の特典名・割引率 | 丸ゴシック | M PLUS Rounded 1c | 900 | 32px | 1.2 | 0.05em | | `headline-md` | セクションのピル見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.5 | 0.08em | | `headline-sm` | ハート内のリード文 | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.4 | 0.08em | | `body-md` | 中央揃えの本文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 11px | 2.2 | 0.12em | | `note` | ※注釈 | 丸ゴシック | M PLUS Rounded 1c | 700 | 9px | 1.5 | 0.05em | | `accent` | 日付ラベル・英字ラベル | 欧文サンセリフ | Fredoka | 700 | 18px | 1.1 | 0.0em | | `label-button` | CHECKボタン | 装飾・ディスプレイ | Fredoka | 700 | 18px | 1.0 | 0.0em | - 文字はすべて太めの丸ゴシックにし、細い文字は使わない - 本文は字間を広め、行間を約2.2倍にして中央揃えにする - 日付は数字を大きく、曜日の英字を小さくして並べる - 英字の見出しはコンデンス系の極太書体を白抜きで使う - 注釈は※付きで、本文より一段小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、商品は 2 列グリッドか散らし配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクションごとに地色を切り替え、全幅の帯にする - セクションの冒頭に、横長ピル見出しとキャラクターのイラストを重ねる - ハートパネルは画面幅いっぱいに大きく置き、日付ラベルは斜めにはみ出させる - 商品の切り抜き写真は少し傾けて左右交互に散らす - 目次は番号＋項目名を点線で区切ったリストにする ## Elevation & Depth - 影は使わず、すべてフラットにする - 奥行きは、パネル・ラベル・キャラの重なりと傾きだけで表す ## Shapes - **角丸**: 小 8px ／ 中 24px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き。人物写真は全幅の矩形。プレゼント写真は角丸を大きく取った傾いたスクエアに収める - **セクション境界**: 直線で地色を切り替える。最後のセクションだけアーチ型にする - ラベルとボタンはすべてピル型にする - ラベルは-5〜-10度ほど傾けて置くことがある - ハート・アイス・カップの線画は白の太い線で描く - 白カードの角丸は40px程度 ## Components - **CHECKボタン**（`button-check`）: ピンクのピル型に、白の英字を太く入れた小さめのボタン。中央に置く - **ハート型特典パネル**（`heart-panel`）: 大きな白か水色のハートの中に、リード文・特典名・注釈を中央揃えで入れる - **日付ラベル**（`date-pill`）: ブラウン・ピンク・ミントのいずれかのピル型。数字を大きく、曜日を小さく入れ、傾けて配置する - **ピル見出し**（`section-pill-heading`）: 横長の白か水色のピルに見出しを入れ、端にキャラクターを重ねる - **カウントダウンハート**（`countdown-heart`）: 白いハートの中に、水色の文字で残り日数と時間を表示する - **番号付き目次**（`toc-list`）: 白抜きの大きな番号と項目名を並べ、茶色の点線で区切る - **プレゼント賞品カード**（`prize-card`）: 傾けた角丸スクエアに賞品を切り抜きで載せ、ピンクの丸バッジで当選人数を示す - **応募要項ラベル**（`label-dark`）: 濃グレーのピルに白文字で、応募方法・期間などの小見出しを入れる ## Do's and Don'ts **Do** - 白いハートのモチーフを繰り返し使う - 日付ラベルは傾けて、パネルからはみ出すように重ねる - キャラクターやマスコットはパネルの角から顔を出すように置く - 地色はパステルの範囲だけで切り替える - 本文は短く改行し、中央揃えにする **Don't** - 黒や原色の濃いベタ面を使わない - 細い明朝や細いゴシックを使わない - 影・グラデーション・立体表現を入れない - 四角く硬いボタンを使わない - 左揃えの長文を続けない（応募要項は除く） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベント名と期間を伝える）: 水色の地に極太の白い英字ロゴを置き、キャラクターを横一列に並べる。下にカウントダウンハートと日付ピルを置く 2. **イントロ**（企画の概要を伝える）: 白抜きの中央揃え本文を2段落にし、その下に参加ブランド名の白抜きテキストを横に流す 3. **目次**（コンテンツの全体像を見せる）: 白い線画アイコンの上に英字見出しを置き、番号付きリストを点線で区切る 4. **参加ブランド**（信頼感と幅広さを示す）: キャラ顔とハート線画を散らしたビジュアルの下に、白ロゴを4列で並べる 5. **キャンペーン特典**（クーポンやポイント還元を訴求する）: ハートパネルを縦に連ね、それぞれに日付ピルとCOMING SOONラベルを付ける 6. **コラボ商品**（限定商品を見せる）: 白地に人物写真、ピンク文字のリード、2列の商品写真を置き、CHECKボタンで締める 7. **アプリ限定商品**（アプリ限定のアイテムを訴求する）: 水色の地に、切り抜き商品を傾けて散らし、白抜きの英字キャプションを添える 8. **限定アイテムスライダー**（一点ずつ商品を紹介する）: ピンクの地に白い角丸カードのスライダーと左右の矢印を置く 9. **ノベルティ**（購入特典を伝える）: 淡い水色の地に、水色のハートと白いカップの線画、ピンクの強調文字を使う 10. **ポップアップ店舗**（会場と期間を案内する）: ピンクの地に、パフェの線画、簡易地図カード、箇条書きの開催情報を置く 11. **アプリ連動・壁紙メーカー**（参加型コンテンツへ誘導する）: アイスの線画とスマホ画面を横に並べ、CHECKボタンで誘導する 12. **SNSプレゼント**（投稿を促す）: 白地に傾けた賞品カードと人数バッジを並べ、濃グレーラベルで応募要項を示す 13. **メディア掲載**（話題性を示す）: 掲載誌の表紙画像にブラウンの日付ピルと本文を添える 14. **エンディング**（余韻を残して締める）: 動画の下に、アーチ型の水色面にキャラ顔とハートを散らし、著作権表記を入れる ## Imagery - キャラクターは太い濃グレーの輪郭線で描き、パステル塗りにする - 白と濃グレーのハート線画を、ランダムな角度で散らす - アイス・パフェ・カップを白の太い線画で描き、見出しの台にする - 商品は背景を抜いた切り抜き写真を少し傾けて置く - 人物写真は明るい白背景で撮り、キャラのイラストを周りに重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではSPの縦長レイアウトを中央に幅約480px固定で表示し、左右をブラウンの細い線で区切る - PCの左側の余白には、水色の地にキービジュアルを固定表示する - PCの外側の背景はメインの水色で塗りつぶす - 要素の配置は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-11d052de`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/260722_summerweek/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。