--- version: alpha name: Blue and Cream Dual Product Campaign LP description: 濃い青とクリーム色で2つの商品を左右に対比させた、アイス菓子のプレゼントキャンペーンLP。中央に細いスマホ幅のカラムを置き、金色の枠で囲んでいる。明朝系の見出しに飾り罫を添え、上品で親しみやすい雰囲気にまとめた。応募手順は線画イラストで丁寧に説明する。 colors: primary: '#2E4167' secondary: '#438ACF' background: '#F9F0E0' background-alt: '#FAE4B3' surface: '#FDFDFD' line: '#CEBB83' tint-1: '#F9F0E0' cta: '#EF8383' on-cta: '#FFFFFF' accent-1: '#0A1E96' accent-2: '#9CCBEB' tint-2: '#FDB5B3' text-body: '#333333' marker: '#C9A04A' cta-accessible: '#E32929' secondary-accessible: '#3179C0' typography: display: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 2px md: 6px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px 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.sm}' height: 48px button-register: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 48px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 36px heading-ornament: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 48px badge-round: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px step-ribbon: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 24px list-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.primary}' typography: '{typography.note}' height: 20px product-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px --- # DESIGN.md — 青×クリームの二択型菓子キャンペーンLP（Blue and Cream Dual Product Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型 - **キーワード**: 二択の対比・青とクリーム・金の額縁・飾り罫・レシート応募・中央カラム - **地の質感**: グラデーション背景とマットな生成り面。紙のような柔らかい質感 - **形**: 四角を基本に、角丸は小さめ。巻物風の紙カードとリボン型のラベルを使う - **温度感**: 青の涼しさとクリームの温かさを半分ずつ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2E4167` | ブランドの濃紺。見出しと商品ラベルに使う | 5% | 画素の主要色に補正 | | `secondary` | `#438ACF` | 鮮やかな青の面・グラデーション | 20% | 画素の主要色に補正 | | `background` | `#F9F0E0` | 中央カラムの生成り地 | 10% | 画素の主要色に補正 | | `background-alt` | `#FAE4B3` | 左側のクリーム色グラデーション | 18% | 画素の実測 | | `surface` | `#FDFDFD` | 白いカードの面 | 8% | 画素の実測 | | `line` | `#CEBB83` | 中央カラムを囲む金の枠 | 3% | 画素の実測 | | `tint-1` | `#F9F0E0` | 手順説明の囲みに使うベージュ | 4% | 画素の主要色に補正 | | `cta` | `#EF8383` | 規約ボタンや強調文字のコーラルピンク | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#0A1E96` | 新規登録ボタンのロイヤルブルー | 0% | 推定 | | `accent-2` | `#9CCBEB` | NG項目に敷く水色の帯 | 1% | 画素の実測 | | `tint-2` | `#FDB5B3` | OK項目に敷くピンクの帯 | 0% | 画素の実測 | | `text-body` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `marker` | `#C9A04A` | 本文中のキーワードに使う金色の文字 | 0% | 推定 | | `cta-accessible` | `#E32929` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#3179C0` | AA を満たす補正値（計算） | | 計算 | - 左はクリーム、右は青のグラデーションにして、2商品の対比を背景で表す - 中央カラムの地は生成り色。白いカードを重ねて情報をまとめる - 見出しは濃紺で統一し、強調したい数字だけコーラルピンクにする - OKはピンク、NGは水色の帯で色分けする - 主ボタンはコーラル。会員登録だけロイヤルブルーで区別する - 金色は枠線と飾り罫、キーワードの文字に限って使う - `button-primary` は文字 `#FFFFFF` × 背景 `#EF8383` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E32929`、4.55:1）を使う。 - `badge-round` は文字 `#FFFFFF` × 背景 `#438ACF` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3179C0`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャンペーン名ロゴ | 明朝 | Shippori Mincho | 800 | 32px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 22px | 1.4 | 0.05em | | `headline-md` | 賞品名・訴求見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.4 | 0.02em | | `headline-sm` | 小見出し・OK/NGの見出し | 明朝 | Noto Serif JP | 700 | 16px | 1.4 | 0.03em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.05em | | `note` | 注釈・期間表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | STEPラベル・英字の小見出し | 欧文セリフ | Playfair Display | 500 | 13px | 1.2 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.05em | - 見出しは明朝、本文はゴシックで使い分ける - FVのリード文は中央揃えにし、短い行で改行して詩のように読ませる - 数字や「第◯弾」は大きくして目立たせる - 応募期間などの日付は、上下を細い罫線で挟んで中央揃えにする - 注釈は「※」から始め、小さい文字で書く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品紹介だけ 2 カラムで左右に対比させる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - PC でも中央 375px 前後の縦長カラムを保つ - 見出しのすぐ下に飾り罫を入れ、その後に内容を続ける - 手順は縦に並べ、STEPラベル→説明→線画の順で繰り返す - 応募方法は白いカードにまとめ、影を付けて浮かせる - 問い合わせ欄は上下を濃紺の太線で挟む ## Elevation & Depth - 白いカードには薄い影（0 2px 8px rgba(0,0,0,0.1)）を付ける - 中央カラム全体の左右に金の太い枠線を引く - ボタンは影なしのフラットにする ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は角丸の長方形。商品は切り抜きで配置する - **セクション境界**: 直線のまま。セクションの切り替えは飾り罫と地色の変化で表す - ボタンは角丸が小さい長方形にする - 「第◯弾」は円形バッジにする - STEPラベルはリボン型の枠に入れる - プロフィールは上下を丸めた巻物風の紙カードにする ## Components - **規約確認ボタン**（`button-primary`）: 全幅のコーラル色ボタン。文字は白 - **会員登録ボタン**（`button-register`）: ロイヤルブルーのボタン。2行の文字を入れる - **ブランドサイトへのボタン**（`button-outline`）: 白地に細い枠線と矢印を付けた小さいボタン - **飾り罫の見出し**（`heading-ornament`）: 明朝の見出しの下に、渦巻き模様の細い罫線を入れる - **第◯弾の円形バッジ**（`badge-round`）: 青い円の中に白文字で数字を入れる。左右に罫線を伸ばす - **STEPリボン**（`step-ribbon`）: 白地に濃紺の枠線を付けたリボン型のラベル - **OK/NGの帯リスト**（`list-band`）: 細い色帯を1項目ずつ縦に並べる - **商品の丸ラベル**（`product-label`）: 商品ごとに、濃紺または金の円形ラベルを付ける ## Do's and Don'ts **Do** - 左右の色を対にして、二択の楽しさを出す - 見出しには必ず飾り罫を添える - 手順は白黒の線画イラストでわかりやすく描く - 期間や条件は罫線で区切り、中央揃えで見せる **Don't** - 原色の赤や黄を広い面に使わない - 中央カラムを PC で広げすぎない - 見出しをポップな丸ゴシックにしない - 影を強くしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーンの告知と、2商品の世界観を伝える）: 上部にロゴ枠、続いて円形バッジ2つ。濃紺の地に詩のようなリード文を中央揃えで置く 2. **動画**（CMで興味を引く）: 縦長の動画を全幅で置き、下に横長の動画を2本並べる 3. **出演者プロフィール**（起用タレントに親近感を持ってもらう）: 巻物風の白いカードに、写真・名前・経歴を入れる 4. **商品情報**（2商品を対比して見せる）: 左右2カラムで、青とクリームの地を分ける。丸ラベル・商品写真・説明・ボタンの順に並べる 5. **キャンペーン概要**（応募条件と賞品を伝える）: 大きな強調文字、枠囲みの補足、第1弾バッジ、賞品画像、期間を順に置く 6. **応募方法**（手順を説明する）: 白いカードの中にSTEP1〜3。ベージュの地の上に線画イラストを入れる 7. **撮影の注意点**（不備による応募を減らす）: OKはピンク帯、NGは水色帯で並べ、レシートの図解を添える 8. **応募フォーム**（応募へ導く）: 規約ボタン、同意チェック、無効状態のボタン、会員登録ボタンを縦に並べる 9. **お問い合わせ**（事務局の連絡先を示す）: 上下を濃紺の線で挟み、中央揃えでテキストを並べる ## Imagery - 人物は明るい自然光で撮り、商品を手に持って笑顔の構図にする - 写真の背景は青系かベージュ系にそろえ、2商品と色を対応させる - 商品は切り抜いて大きく見せる - 手順は黒の線画で、グレーを少し使ったイラストにする - 写真に手書き風の白文字を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央にスマホ幅のカラムを置き、左右を背景エリアにする - 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-cbb2f799`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/sandice_2025cp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。