--- version: alpha name: Pastel Split Baby Sample Campaign LP description: サーモンピンクと水色を左右に分けたパステル調の、赤ちゃん向け商品の無料サンプル抽選 LP。紙吹雪柄の背景の上に白カードを重ね、リボン型の見出し、楕円フレームの写真、黄色いピル型 CTA で、やさしさとお祝いの雰囲気を出している。 colors: primary: '#FED3C7' secondary: '#B6E0DE' background-alt: '#E3ECB6' background: '#FEFEFE' tint-1: '#FEF1EE' tint-2: '#FDFEFE' cta: '#FCED03' on-cta: '#3A3A3A' accent-1: '#E0457E' accent-2: '#0C9ED5' marker: '#E7E285' text-body: '#4A4446' line: '#9F848B' accent-3: '#069152' accent-1-accessible: '#DC2B6C' accent-2-accessible: '#0A7EAA' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.85 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px ribbon-heading: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 64px flag-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.background}' typography: '{typography.note}' height: 36px oval-photo-frame: backgroundColor: '{colors.background}' rounded: '{rounded.full}' height: 180px prize-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 44px review-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 80px pill-callout: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 210px comparison-table: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 260px --- # DESIGN.md — 桃×水色パステルの育児サンプルプレゼント LP（Pastel Split Baby Sample Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、やさしい・柔らかい、ポップ・元気、親しみ・手作り感 - **キーワード**: パステル二色・紙吹雪柄・リボン見出し・楕円フレーム写真・白カード・黄色CTA - **地の質感**: 淡い単色の地に、白い三角・波線・点の紙吹雪を薄く散らす - **形**: 角丸カード、ピル型ボタン、垂れ幕リボン、楕円の額縁 - **温度感**: 暖色ピンクと寒色水色を商品ごとに分けた、明るくやわらかい温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FED3C7` | 商品A側の地色サーモンピンク | 13% | 画素の主要色に補正 | | `secondary` | `#B6E0DE` | 商品B側の地色ミントブルー | 12% | 画素の実測 | | `background-alt` | `#E3ECB6` | 応募の流れセクションの若草色 | 10% | 画素の実測 | | `background` | `#FEFEFE` | ブランド紹介やカードの白地 | 21% | 画素の実測 | | `tint-1` | `#FEF1EE` | ピンク側カード内の淡色地 | 4% | 画素の実測 | | `tint-2` | `#FDFEFE` | 水色側カード内の淡色地 | 9% | 画素の実測 | | `cta` | `#FCED03` | 応募ボタンの黄色 | 1% | 画素の実測 | | `on-cta` | `#3A3A3A` | ボタン文字と縁の濃グレー | 0% | 推定 | | `accent-1` | `#E0457E` | マゼンタピンクの強調文字・STEPバッジ | 2% | 推定 | | `accent-2` | `#0C9ED5` | 水色側の見出し・強調文字の青 | 1% | 画素の実測 | | `marker` | `#E7E285` | 本文中の黄色マーカー | 0% | 画素の主要色に補正 | | `text-body` | `#4A4446` | 本文の濃いグレー | 2% | 推定 | | `line` | `#9F848B` | 楕円フレームや表の罫線 | 1% | 画素の主要色に補正 | | `accent-3` | `#069152` | ブランドロゴの緑 | 0% | 画素の実測 | | `accent-1-accessible` | `#DC2B6C` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#0A7EAA` | AA を満たす補正値（計算） | | 計算 | - 商品ごとにセクションの地色をピンクと水色に分け、見出しや強調文字もその色系統にそろえる - ファーストビューは画面を左右に分け、左ピンク・右水色で二択を見せる - 主 CTA はどの地色でも黄色＋濃グレー縁で統一する - 本文の強調は、ピンク側ならマゼンタ文字、水色側なら青文字か黄色マーカーにする - カードは白か、地色をごく淡くした色にして紙吹雪柄から離す - 最後の手順セクションは若草色にして、前の二色から切り替える - `ribbon-heading` は文字 `#E0457E` × 背景 `#FEFEFE` のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DC2B6C`、4.52:1）を使う。 - `flag-label` は文字 `#FEFEFE` × 背景 `#0C9ED5` のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#0A7EAA`、4.55:1）を使う。 - `prize-badge` は文字 `#E0457E` × 背景 `#FEFEFE` のコントラスト比が 3.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DC2B6C`、4.52:1）を使う。 - `pill-callout` は文字 `#0C9ED5` × 背景 `#FEFEFE` のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#0A7EAA`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン名・商品名の大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 34px | 1.3 | 0.02em | | `headline-lg` | リボン型見出しの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 20px | 1.4 | 0.03em | | `headline-md` | ブランド理念・まとめの強調文 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.03em | | `headline-sm` | 成分名見出し・カプセル見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文・口コミ | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.85 | 0.02em | | `note` | 注釈・出典・応募回数の制限 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 当選数の大きな数字（白縁取り） | 丸ゴシック | M PLUS Rounded 1c | 900 | 30px | 1.1 | 0.0em | | `label-button` | CTAボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.2 | 0.05em | - 見出しは太い丸ゴシックで、やわらかさを出す - 大見出しはセクションの強調色にし、白いフチか影をつける - 当選数は数字だけを特大にして白縁と色フチをつける - 本文は中央揃えで、2〜4行ごとに区切る - 口コミの一部はセクション色の文字で強調する - 注釈は※付きの小さいグレー文字にし、ボタンの直下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ファーストビューの商品二択だけ 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 紙吹雪柄の地の上に、白い大カードを中央に置く - 大カードの上端にリボン見出しを重ねて載せる - 写真3枚を少しずつ傾けて横に並べ、その下に口コミカードを縦に積む - 商品セクションの最後には必ず CTA と注釈を置く - グラフや表は白カードの中に収める - STEP カードは縦に3つ積み、左上に STEP バッジを付ける ## Elevation & Depth - カードは影をつけず、白い面と淡い地色の差で区別する - CTA ボタンは濃グレーの縁と下側のベタ影で立体的なピル型にする - 写真カードはごく薄いドロップシャドウと傾きで、貼った写真風にする - リボン見出しは端を折り返して奥行きを見せる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は細い二重線の楕円の額縁で囲む。スナップ写真は角丸の四角を傾ける - **セクション境界**: 直線で地色を切り替える。上下の帯の端に紙吹雪を散らす - 見出しは両端を折り返したリボン型か、ピル型の枠線カプセルにする - 斜めの旗型ラベルを楕円写真の左上にかける - STEP バッジは下端がV字に切れた縦長の旗にする - 大カードは角を大きく丸め、上下の端は少しギザギザの紙風にしてもよい ## Components - **応募 CTA ボタン**（`button-primary`）: 黄色のピル型に濃グレーの太い縁と影をつける。左にマゼンタの丸い矢印アイコンを置き、下に応募回数の注釈を添える - **リボン型見出し**（`ribbon-heading`）: 白い帯に濃グレーの線を引き、両端を折り返した垂れ幕にする。2行の見出しをセクション色で入れる - **斜め旗ラベル**（`flag-label`）: 写真の左上に斜めにかける小さな旗。対象者を短く書く - **楕円額縁の写真**（`oval-photo-frame`）: 赤ちゃんや親子の写真を二重線の楕円で囲み、手前に商品画像を重ねる - **当選数バッジ**（`prize-badge`）: 丸いバッジに頻度を書き、その横に抽選の人数を特大の縁取り数字で入れる - **口コミカード**（`review-card`）: 淡い色の角丸の箱に口コミを左揃えで書く。一部をセクション色で強調し、末尾に投稿者名を括弧で添える - **枠線カプセル見出し**（`pill-callout`）: 白地に青い枠線のピル型カプセルで、データの要点を2〜3行で示す - **STEP カード**（`step-card`）: 白い角丸カードの左上にピンクの旗型 STEP 番号を付ける。中央にピンクの線画アイコンを置き、下に説明を3行で書く - **成分比較表**（`comparison-table`）: 灰色の罫線の表に●印を打つ。自社の列だけピンクの●で目立たせる ## Do's and Don'ts **Do** - 商品ごとにピンク系と水色系の配色を守る - 紙吹雪柄は白の半透明で薄く散らす - CTA は全セクション同じ黄色のピル型にする - 写真は自然光のやわらかい親子写真を選ぶ - データはグラフで見せ、出典を注釈で添える - セクションの終わりごとに CTA を置く **Don't** - 濃い原色や黒を地色に使わない - 角ばった硬い書体を見出しに使わない - CTA の色をセクションごとに変えない - 紙吹雪柄を文字の下で濃くしない - 1つのセクションにピンクと水色の強調を混ぜない - 過度な影やグラデーションで重く見せない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（2種類のプレゼントから選べることを伝える）: 左ピンク・右水色に分けた地に、ラベル、大見出し、楕円写真2つ、当選数バッジ、CTA、各詳細へのアンカーリンクを置く 2. **ブランド紹介**（研究への姿勢で信頼を得る）: 白地にロゴ、ピンクの太字の理念文、中央揃えの本文 3. **商品A紹介**（商品の特長と根拠を見せる）: ピンク地の白カードにリボン見出し、大きな商品名、写真と商品画像、マーカー付き本文、成分を2グループに分けたイラスト 4. **成分比較表**（他社との違いを示す）: ●印の比較表と、ピンク強調のまとめ文 5. **お客様の声A**（利用者が多いことで安心させる）: 斜線飾りの見出し、傾けた写真3枚、口コミカード3つ、CTA 6. **商品B紹介**（商品の必要性を伝える）: 水色地の白カードにリボン見出し、商品画像と楕円写真、黄色マーカーの本文 7. **データ提示**（栄養が不足しがちなことを数値で示す）: 枠線カプセル見出しに棒グラフと出典注釈を添えた白カードを2枚 8. **お客様の声B**（利用者が多いことで安心させる）: 青系で A と同じ構成の写真と口コミカード、CTA 9. **応募の流れ**（応募の手順を簡単に見せる）: 若草色地に STEP カード3枚を縦に並べ、風船やリボンのイラストを散らす。最後に CTA 10. **フッター**（運営会社を示す）: 白地に短いタグライン、緑のロゴ、紹介文 ## Imagery - 赤ちゃんの笑顔や親子が抱き合う写真を、白っぽい背景とやわらかい自然光で撮る - 商品パッケージは切り抜いて写真の手前に斜めに重ねる - 利用者の投稿風スナップを角丸の四角にして傾けて並べる - 成分は丸い顔のキャラクターイラストで描く - 手順のアイコンはピンク一色の線画にする - 風船・花・リボン・プレゼント箱の水彩風イラストを余白に散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も幅約480px相当の中央カラムで、SP と同じ構成にする - PC では左右の余白を地色と紙吹雪柄で埋める - ファーストビューの左右分割は SP でも2カラムのまま保つ - SP では写真3枚を横並びのまま縮めるか、横スクロールにする - CTA は SP で幅80%程度にし、高さ52px以上を確保する ## 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-59182e68`（元 LP の URL から採番） - **元 LP**: https://www.beanstalksnow.co.jp/lp/2025_2eraberu_insta/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。