--- version: alpha name: Chocolate Pink Valentine Campaign LP description: 濃いチョコ茶色とピンクを交互に重ねた、お菓子メーカーの投稿キャンペーンLP。板チョコ柄やハート、リボン、ギフト箱で甘くてかわいい世界観を作る。丸ゴシックの白抜き文字と赤ピンクのピル型CTAで応募まで案内する。 colors: primary: '#7C3030' dark-section: '#551E1A' background: '#FFBEC5' background-alt: '#FEDFDA' surface: '#FEF4E8' tint-1: '#F5F2C9' cta: '#DB2C4A' on-cta: '#FEFBFA' accent-1: '#B82941' text: '#551E1A' on-dark: '#FFFFFF' line: '#E0D8C6' accent-2: '#F9DFD4' secondary: '#591F1E' typography: display: fontFamily: Zen Maru Gothic fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em body-md: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Kosugi Maru fontSize: 15px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em label-button: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 64px 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: 64px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.tint-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px button-toggle: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 44px chocolate-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 600px step-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 40px example-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 340px gift-box-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 560px heading-label: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px terms-box: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 560px --- # DESIGN.md — チョコ茶×ピンクのバレンタイン投稿キャンペーンLP（Chocolate Pink Valentine Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感 - **キーワード**: 板チョコ柄・ハート・リボン・ギフト箱・チョコ茶×ピンク・投稿キャンペーン - **地の質感**: 板チョコのブロックを敷いたパターンと、ピンクの三角・半円の幾何柄。光沢のあるチョコ片やリボンを立体イラストで添える。 - **形**: ハート形のタイトル枠。面取りした板チョコ風の額縁カード。溶けたチョコ風の波形でセクションを区切る。 - **温度感**: 暖色寄り。甘く柔らかい温かさ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7C3030` | チョコ茶の主色（板チョコ風カード・帯の面） | 19% | 画素の実測 | | `dark-section` | `#551E1A` | 板チョコ柄セクションの地 | 10% | 画素の主要色に補正 | | `background` | `#FFBEC5` | ピンクの幾何柄の地 | 15% | 画素の実測 | | `background-alt` | `#FEDFDA` | 淡ピンクの格子地（賞品セクション） | 7% | 画素の実測 | | `surface` | `#FEF4E8` | 生成りのカードの面 | 13% | 画素の実測 | | `tint-1` | `#F5F2C9` | 左右余白の淡いクリーム地 | 9% | 画素の実測 | | `cta` | `#DB2C4A` | 応募ボタンの赤ピンク | 2% | 画素の実測 | | `on-cta` | `#FEFBFA` | CTAボタン上の白文字 | 1% | 画素の実測 | | `accent-1` | `#B82941` | 強調文字・STEPのリボン帯の赤 | 2% | 画素の実測 | | `text` | `#551E1A` | 見出しと明るい地の本文に使う濃い茶 | 3% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | チョコ地の上の白文字 | 2% | 画素の主要色に補正 | | `line` | `#E0D8C6` | カードの細い枠線・罫線 | 1% | 画素の主要色に補正 | | `accent-2` | `#F9DFD4` | ハート型ボタンの淡ピンク | 1% | 画素の主要色に補正 | | `secondary` | `#591F1E` | サブボタンのチョコ茶の面 | 1% | 画素の実測 | - 地の色はチョコ茶とピンクを交互に置き、セクションごとに切り替える。 - チョコ茶の地には白文字を置く。生成りやピンクの地には濃い茶の文字を置く。 - 主なCTAは赤ピンクの面に白文字とし、白い縁取りを付けて目立たせる。 - サブCTAはチョコ茶の面にクリーム黄の文字で、主CTAと区別する。 - 赤は数字・賞品名・キーワードの強調と、STEPのリボンだけに使う。 - 端末の外側はクリーム地にして、本文の柱を浮かせる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのタイトルロゴ | 丸ゴシック | Zen Maru Gothic | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（下に英字の副題を添える） | 丸ゴシック | Zen Maru Gothic | 700 | 30px | 1.3 | 0.05em | | `headline-md` | 賞品の訴求文（数字は大きく表示） | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.5 | 0.03em | | `headline-sm` | カードの見出し・応募例のタイトル | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.8 | 0.05em | | `body-md` | 中央揃えの本文 | 丸ゴシック | Zen Maru Gothic | 500 | 15px | 2.1 | 0.06em | | `note` | 注釈・規約 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.02em | | `accent` | 英字の副題（両側にダッシュを付ける）・STEPの表記 | 欧文サンセリフ | Kosugi Maru | 500 | 15px | 1.3 | 0.02em | | `label-button` | CTAボタンの文字 | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.3 | 0.1em | - 全体を太めの丸ゴシックで統一し、柔らかい印象にする。 - 本文は中央揃えにし、行間は2倍前後と広く取る。 - 見出しの下には「- English -」形式の小さな英字副題を添える。 - 数字やキーワードは赤にし、本文の1.5〜2倍に拡大する。 - 語尾に「♪」や「！」を使い、親しみやすい口調にする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC も中央の柱で、応募例は 2 列、STEPは横長に並べる - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 本文ブロックはカードや額縁の中に入れ、地から浮かせる。 - 左右には約4%のクリーム色の余白を固定で設ける。 - セクション見出しは中央に置き、上に48px程度の余白を取る。 - カード同士の間は32px前後空ける。 - STEPはカードを縦に積み、左上にリボン形のラベルを重ねる。 ## Elevation & Depth - 板チョコ風カードは縁を面取りし、ハイライトと影で立体感を出す。 - 写真や応募例のカードには薄いドロップシャドウを付ける。 - CTAボタンは白い縁取りを付け、軽く浮かせる。 - 装飾のチョコ片には光沢と影を付け、カードの角に重ねる。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 白フチのポラロイド風に角度を付けて切り抜き、上部の2隅をマスキングテープで留める - **セクション境界**: 溶けて垂れるチョコ風の波形、または半円が連なるスカラップ形 - タイトルはハート形の枠に収める。 - カードの上辺はアーチ状に、角はくり抜き形にした額縁にする。 - 応募例カードは対角の2隅を赤いリボン帯で留める。 - 見出しのラベルはリボン形の台形にする。 - ボタンはすべてピル型にする。 ## Components - **応募ボタン**（`button-primary`）: 赤ピンクのピル型ボタン。白い縁取りを付け、両脇に小さなハートを添える。 - **サブCTA**（`button-secondary`）: チョコ茶のピル型ボタンで、文字はクリーム黄にする。2行まで入れられる。 - **開閉ボタン**（`button-toggle`）: 淡ピンクのピル型ボタン。右側に下向きの矢印を置く。 - **板チョコ額縁カード**（`chocolate-card`）: チョコ茶の面を面取りした額縁で囲み、中に白文字の本文を入れる。 - **STEPリボンラベル**（`step-ribbon`）: 赤い帯の下端を切り込んだリボン形のラベル。手書き風の数字を入れる。 - **応募例カード**（`example-card`）: 生成りのカード。罫線入りの見出しの下に手描きイラストを置き、角を赤リボンで留める。 - **ギフト箱型の賞品枠**（`gift-box-panel`）: 上部にストライプの蓋とリボンを付けた、白い賞品パネル。 - **リボン型の小見出し**（`heading-label`）: 淡ピンクの台形のラベル。茶色の枠線を付ける。 - **規約のスクロールボックス**（`terms-box`）: 白い角丸の枠。中身をスクロールさせ、茶色のスクロールバーを付ける。 ## Do's and Don'ts **Do** - チョコ茶とピンクのセクションを交互に配置する。 - ハート・リボン・チョコ片をカードの角にはみ出させて散らす。 - 注釈は「※」で始め、小さな文字で添える。 - 応募手順は3ステップのカードで、入力画面を簡略化した図を示す。 - 投稿写真はポラロイド風にし、傾けて並べる。 **Don't** - 寒色や原色の青・緑を地色に使わない。 - 角張ったゴシックの太字見出しにしない。 - 装飾のないフラットな白背景を長く続けない。 - 主CTAを赤ピンク以外の色にしない。 - 本文を左揃えで長く詰め込まない（規約は例外）。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名、応募期間、賞品を一目で伝える）: チョコ茶の格子地の上に、ピンクのハート形タイトルを置く。左下に期間、右下に円形の賞品バッジを配置し、下端は溶けたチョコの波形にする。 2. **主催者の挨拶・企画背景**（開催の経緯と参加を呼びかける）: ピンクの幾何柄の地に板チョコ額縁カードを置き、白文字の中央揃えの本文と開閉ボタンを入れる。 3. **賞品**（賞品と当選数を訴求する）: 淡ピンクの格子地に置いたギフト箱型パネル。吹き出しラベル、大きな赤い数字、商品イラストで構成する。 4. **キャンペーン概要・応募例**（投稿内容のイメージを伝える）: 板チョコ柄の地に、アーチ形の白い額縁を置く。中に手描きイラスト付きの応募例カードを4枚並べる。 5. **応募方法**（3ステップで手順を示す）: ピンク地に、STEPリボン付きのチョコ茶カードを3枚積む。カード内に入力欄の図と応募ボタンを入れる。 6. **CTA**（応募を後押しする）: 集中線を添えた呼びかけ文と、大きな赤ピンクのピル型ボタンを置き、下に注釈を続ける。 7. **前回の投稿紹介**（実例で参加意欲を高める）: 生成りの額縁カードの中に、テープで留めたポラロイド写真を傾けて縦に並べる。最後にサブCTAを置く。 8. **応募規約**（規約を提示する）: ピンク地に、白い角丸のスクロールボックスを置く。 ## Imagery - 光沢のある板チョコ片を立体イラストにし、傾けて散らす。 - 赤ピンクのリボンが流れる装飾と、白線のハートを散らす。 - 人物は温かみのある線画風の手描きイラストにし、くすんだ色で塗る。 - ギフト箱からお菓子があふれる賞品イラストに、きらめきを添える。 - 投稿写真は家庭で撮った自然な写真を使い、白フチを付けて傾ける。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもコンテンツ幅は約800〜900pxの中央の柱に収め、外側はクリーム地にする。 - FVは横長にし、期間・タイトル・賞品を横に並べる。 - 応募例カードは2列のグリッドにする。 - STEPカードは横長にし、左に説明、右に図やボタンを置く。 - 投稿写真は2〜3枚ずつ互い違いに配置する。 ## 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-a1eec698`（元 LP の URL から採番） - **元 LP**: https://lotte-land.jp/okashi-yokocho/happy_cp/ - **解析に使った画像**: 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/）からご連絡ください。