--- version: alpha name: Cacao Color-Coded Character Campaign LP description: クリーム地にカカオの実と葉を散らし、赤・オレンジ・緑のチェック柄でキャンペーンごとに背景を塗り分けたLP。白い角丸カードにこげ茶の太い影を付け、アニメ調キャラをカードの縁からはみ出させて親しみやすさを出している。 colors: primary: '#E00027' background: '#FFECB4' surface: '#FEFEFE' dark-section: '#6D2F2D' cta: '#EA7601' on-cta: '#FEFBEE' secondary: '#01A344' background-alt: '#D5523D' tint-1: '#D9EEDF' tint-2: '#F7DFB9' text: '#3A1A14' accent-1: '#E0408A' marker: '#FFD23C' text-muted: '#D1D1D1' cta-accessible: '#B55B01' typography: display: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.4 accent: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.0 body-lg: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 60px 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 button-accordion: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 46px campaign-header: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 160px period-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 56px badge-new: backgroundColor: '{colors.primary}' rounded: '{rounded.full}' height: 90px prize-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 44px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 56px member-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 110px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 140px --- # DESIGN.md — カカオ色×チェック柄のキャラ協賛キャンペーンLP（Cacao Color-Coded Character Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: カカオモチーフ・チェック柄背景・色分けキャンペーン・白カード+茶影・キャラはみ出し - **地の質感**: 斜めチェックのギンガム柄と、散らしたカカオの実・葉のイラスト - **形**: 角丸の白カード、上が山型に盛り上がる見出しタブ、ピル型ボタン - **温度感**: 暖色寄りで明るい。チョコの茶色で全体を締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E00027` | ブランド赤・見出し文字・主ボタン | 6% | 画素の実測 | | `background` | `#FFECB4` | ストーリー部のクリーム地 | 12% | 画素の実測 | | `surface` | `#FEFEFE` | コンテンツカードの白 | 33% | 画素の実測 | | `dark-section` | `#6D2F2D` | カード影・帯・最下部ボタンのこげ茶 | 5% | 画素の主要色に補正 | | `cta` | `#EA7601` | キャンペーン1のオレンジ・詳細ボタン | 6% | 画素の実測 | | `on-cta` | `#FEFBEE` | ボタン上の白文字 | 1% | 画素の実測 | | `secondary` | `#01A344` | キャンペーン2の緑・枠線と帯 | 7% | 画素の実測 | | `background-alt` | `#D5523D` | Movie部の赤チェック地 | 10% | 画素の実測 | | `tint-1` | `#D9EEDF` | 賞品エリアのミントグリーン地 | 7% | 画素の主要色に補正 | | `tint-2` | `#F7DFB9` | キャンペーン3のベージュ地 | 5% | 画素の実測 | | `text` | `#3A1A14` | 本文・見出しのこげ茶文字 | 2% | 推定 | | `accent-1` | `#E0408A` | キャラ名・期間ラベルのピンク | 2% | 推定 | | `marker` | `#FFD23C` | 強調語の黄マーカー | 1% | 推定 | | `text-muted` | `#D1D1D1` | 注釈グレー・無効ボタン | 2% | 画素の実測 | | `cta-accessible` | `#B55B01` | AA を満たす補正値（計算） | | 計算 | - キャンペーンごとに赤・オレンジ・緑・ベージュのチェック地へ切り替える - 各セクションの見出し帯・枠線・ボタンはその背景と同じ色で揃える - 白カードの右下にこげ茶のずらし影を付ける - 数字や賞品名は黄マーカーか太字の色文字で強調する - Storyはクリーム地。見出しの英字を赤・橙・緑・茶の多色にする - 最後の注意事項ボタンはこげ茶にしてページを締める - `button-primary` は文字 `#FEFBEE` × 背景 `#EA7601` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B55B01`、4.54:1）を使う。 - `campaign-header` は文字 `#FEFBEE` × 背景 `#EA7601` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B55B01`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | Story/Movie/Campaignの英字見出し | 欧文サンセリフ | Montserrat | 800 | 34px | 1.2 | 0.04em | | `headline-lg` | キャンペーン帯の白抜き見出し | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.4 | 0.02em | | `headline-md` | 賞品名・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.0em | | `accent` | キャンペーン番号の大きな数字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.0 | 0.0em | | `body-lg` | Storyの中央揃え本文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.9 | 0.02em | | `body-md` | カード内説明文 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.2 | 0.05em | - 見出しは太いゴシックで中央揃えにする - 英字の見出しは文字ごとに色を変えて楽しさを出す - 数字は一段大きくして色文字やマーカーで強調する - 日付・期間は太字にして枠の中に入れる - 注釈は※付きの小さな文字で左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。メンバーや賞品は5列・3列のグリッドで並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - 背景の上に白カードを1枚置き、そこへ情報をまとめる - カードの上辺に山型タブを付け、Campaign番号を載せる - 期間は角丸の枠で囲み、上端に色ラベルを重ねる - 手順はStep番号付きの横スクロールカードで見せる - キャラ立ち絵はカードの角からはみ出させて配置する ## Elevation & Depth - 白カードには右下に4〜6pxずらした、ぼかしなしのこげ茶影を付ける - ボタンにも同色系の濃い影を下にずらして付ける - 吹き出し型の注記にもこげ茶の縁と影を付ける ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: メンバーはアーチ型（上が半円）枠、賞品は角丸の長方形 - **セクション境界**: 直線で背景色を切り替え、境界にキャラやカカオを重ねる - 見出しタブは上が山型の台形にする - NEWバッジは円形 - ラベルはピル型にする - 吹き出しは角丸四角に三角の尾を付ける ## Components - **詳細リンクボタン**（`button-primary`）: ピル型。右端に丸矢印アイコンを付け、こげ茶影を付ける - **規約アコーディオンボタン**（`button-accordion`）: 幅いっぱいの角丸ボタン。右端に▼か▶を置く - **キャンペーン見出しタブ**（`campaign-header`）: 山型の白タブに英字と大きな番号を載せ、下に色帯で白抜きの見出しを置く - **期間ボックス**（`period-box`）: 色枠の角丸ボックス。上端中央にピル型の色ラベルを重ねる - **NEW丸バッジ**（`badge-new`）: 円の中に黄色のNEWと白文字の説明、下向き矢印を入れる - **賞品帯**（`prize-label`）: 丸い賞バッジ、白地の賞品名、右に当選数の色ブロックを並べた横帯 - **吹き出し注記**（`speech-bubble`）: クリーム地の角丸吹き出し。こげ茶の縁を付け、条件を書く - **メンバーアイコン**（`member-card`）: アーチ型枠に顔の画像を入れ、右下に＋の円を付け、下に名前を置く - **参加手順カード**（`step-card`）: 矢印形で区切った横並びの手順。アイコンと説明を入れ、下にStepラベルを付ける ## Do's and Don'ts **Do** - キャンペーンごとにテーマ色を決め、背景・帯・ボタンをすべてその色で揃える - 白カードにはこげ茶のずらし影を必ず付ける - カカオの実と葉のイラストを背景に散らす - キャラをカードの縁からはみ出させて動きを出す - 期間・人数・条件は枠やマーカーで目立たせる **Don't** - 背景を平坦な単色だけにしない（チェック柄にする） - 寒色を主役にしない - 影をぼかした柔らかいシャドウにしない - 見出しを左揃えにしない - 細い明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の世界観とキャラを一目で伝える）: クリーム地に5人の集合絵とロゴを置き、下端に3つのNEW丸バッジを並べる 2. **ストーリー**（取り組みの背景と想いを伝える）: 多色の英字見出しと中央揃えの太字本文。周りにカカオを散らす 3. **メンバー紹介**（キャラへの導線を作る）: アーチ型のアイコンを5つ横に並べる 4. **動画**（動画コンテンツを見せる）: 赤チェック地に白カードを置き、丸ラベル付きの動画サムネを並べる 5. **SNS参加企画**（フォロー＆リポストで参加してもらう）: こげ茶帯で特典を伝え、動画カルーセル・期間カード・手順カード・赤ボタンを続ける 6. **キャンペーン1**（メッセージを募集する）: オレンジチェック地に山型タブ付きカード。期間ボックス・吹き出し・ピル型CTAを入れる 7. **キャンペーン2**（レシート応募の賞品を見せる）: 緑チェック地。ミント地の賞品グリッドと賞品帯、当選数を置く 8. **対象商品・応募方法**（応募の手順を説明する）: 緑枠のボックスに商品3列、Step、レシートの撮り方の良い例・悪い例を入れる 9. **応募フォーム導線**（応募させる）: 同意チェックボックスと、グレーの応募ボタン2つを置く 10. **キャンペーン3**（店頭でのプレゼントを告知する）: ベージュチェック地にファイル5種を横に並べ、最後にこげ茶の注意事項ボタンを置く ## Imagery - アニメ調の制服キャラの立ち絵を使い、手を広げるなど元気なポーズにする - カカオの実と葉をフラットなイラストで描き、ランダムな角度で散らす - 賞品は白背景の切り抜きか、ピンクのグラデーション背景のモックにする - サンプル画像には大きくSAMPLEの透かしを入れる - 背景は斜めのギンガムチェック柄にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約700px幅のカードを置き、左右にチェック柄背景とカカオを大きく見せる - PCでは手順カードを3つ横並びにして全部見せる（SPは横スクロール） - PCではレシートの撮り方を画像と説明の2カラムにする - PCでは応募ボタンを2つ横に並べる - 文字サイズは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-8bb8a944`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/1choco-1smile/shinycolors2025/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。