--- version: alpha name: French Navy and Rose Pink Sweets Campaign LP description: 淡いピンクのグラデーション地に濃紺のパネルとリボン見出しを重ね、金の細線で飾ったフレンチ調のプレゼントキャンペーンLP。エアメール柄の縁取りやきらめき装飾で、少女らしい華やかさと上品さを両立している。 colors: primary: '#133476' background: '#FEF4F5' secondary: '#2A5277' accent-1: '#E4CC8C' accent-2: '#EA649E' cta: '#0A2171' accent-3: '#E8293C' on-cta: '#FEFEFE' background-alt: '#E4E4F0' tint-1: '#D4A5B9' surface: '#C9C9CA' marker: '#F1C573' text: '#11306F' dark-section: '#06171F' accent-2-accessible: '#DE1E71' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.2em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Great Vibes fontSize: 12px fontWeight: 400 lineHeight: 1.4 label-button: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 6px md: 12px lg: 40px 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}' ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 56px button-primary: backgroundColor: '{colors.on-cta}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px prize-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 900px prize-label: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 70px airmail-badge: backgroundColor: '{colors.on-cta}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 96px headline-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.display}' height: 90px step-card: backgroundColor: '{colors.on-cta}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 480px accordion-note: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 56px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 26px --- # DESIGN.md — 紺×ローズピンクのフレンチ菓子キャンペーンLP（French Navy and Rose Pink Sweets Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 上品・高級、かわいい、情報量多め・訴求型 - **キーワード**: フレンチ・リボン見出し・金の細線・エアメール柄・ピンクグラデーション・きらめき - **地の質感**: ピンクから藤色へのなめらかなグラデーション地に、細い弧線と星形のきらめきを散らす。紺のパネルには金の二重線の額縁を付ける。 - **形**: 上辺だけ角が丸い紺のパネル、両端が燕尾形のリボン見出し、紅白紺のエアメール柄縁の丸バッジ、ピル型CTA。 - **温度感**: 暖かいピンクと冷たい紺の対比。金色で甘さと高級感を足している。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#133476` | パネル・セクション地の濃紺 | 15% | 画素の実測 | | `background` | `#FEF4F5` | 淡いピンクの地 | 20% | 画素の実測 | | `secondary` | `#2A5277` | 賞品カードのくすみ紺 | 10% | 画素の主要色に補正 | | `accent-1` | `#E4CC8C` | 金色の見出し文字・飾り線 | 2% | 画素の実測 | | `accent-2` | `#EA649E` | 帯見出しのローズピンク | 2% | 画素の実測 | | `cta` | `#0A2171` | CTAの紺（左半分は赤） | 1% | 画素の実測 | | `accent-3` | `#E8293C` | CTA枠の赤 | 1% | 推定 | | `on-cta` | `#FEFEFE` | CTAの白地 | 14% | 画素の実測 | | `background-alt` | `#E4E4F0` | 下層の淡いラベンダー地 | 12% | 画素の実測 | | `tint-1` | `#D4A5B9` | 藤色グラデーションの地 | 11% | 画素の実測 | | `surface` | `#C9C9CA` | 撮影例ボックスのグレー | 8% | 画素の主要色に補正 | | `marker` | `#F1C573` | 注意ラベル・アコーディオンの黄 | 2% | 画素の実測 | | `text` | `#11306F` | 白地上の紺文字 | 3% | 画素の主要色に補正 | | `dark-section` | `#06171F` | フッターの黒紺 | 4% | 画素の実測 | | `accent-2-accessible` | `#DE1E71` | AA を満たす補正値（計算） | | 計算 | - 地は淡いピンクのグラデーションにし、後半で藤色、ラベンダーへ移していく。 - 情報パネルは濃紺か、くすみ紺の面。その上の見出しは金、本文は白にする。 - 白い地の上の見出しと本文は紺で書き、黒は使わない。 - CTAは白地のピル型にし、枠を左半分は赤、右半分は紺に塗り分けてトリコロール風にする。 - 黄色は注意ラベルとアコーディオンだけに使う。 - 金の細線は額縁・区切り・ドットなどの装飾だけに使う。 - `headline-band` は文字 `#FEFEFE` × 背景 `#EA649E` のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DE1E71`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 帯で示す当選人数（大きな数字） | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | 期間など大きな日付表示 | 明朝 | Shippori Mincho | 700 | 30px | 1.3 | 0.02em | | `headline-md` | 賞品名（金文字） | 明朝 | Shippori Mincho | 700 | 24px | 1.4 | 0.04em | | `headline-sm` | リボン見出し（白抜き） | 明朝 | Shippori Mincho | 700 | 22px | 1.3 | 0.2em | | `body-lg` | セクションのリード文（中央揃え） | ゴシック | Noto Sans JP | 700 | 16px | 1.7 | 0.02em | | `body-md` | 賞品の説明・規約本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.0em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 写真に添える仏語の筆記体 | 欧文スクリプト | Great Vibes | 400 | 12px | 1.4 | 0.0em | | `label-button` | CTAボタンの文字 | 明朝 | Shippori Mincho | 700 | 24px | 1.2 | 0.15em | - 見出し・賞品名・ボタン文字は明朝体にして、フレンチの上品さを出す。 - リード文・説明文は太めのゴシックで中央揃えにし、短く改行する。 - リボン見出しは字間を0.2em前後まで広げる。 - 当選人数などの数字は、周りの文字の2倍以上の大きさにする。 - 規約の本文は明朝体の左揃えで、詰めて組む。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。応募手順は横スワイプのカルーセルにする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - パネルは左右に約16pxの余白を取って中央に置く。 - リボン見出しはパネルの上辺にまたがるように重ねる。 - 賞品パネルは、ラベル・人数バッジ・賞品名・額縁写真・説明の順に縦に並べる。 - リード文は中央揃え、説明文は左揃えにする。 - CTAは手順説明の後と規約の後に置き、計2回出す。 ## Elevation & Depth - 影は基本的に付けず、金の線と色面の差で階層を見せる。 - 写真の額縁には、ごく薄い内側の影で奥行きを付ける。 - 手順カードは白地にし、下辺だけ金色の太めの縁を付ける。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 賞品写真は金の二重線の額縁に収めた四角形にする。ビジュアルは斜めに傾けたエアメール柄縁のポラロイド風フレームに入れる。 - **セクション境界**: 背景はグラデーションで切り替える。紺のセクションの下端は、緩やかな弧のカーブにする。 - 賞品パネルは上辺を大きく丸め、下は小さい角丸にする。 - 人数バッジは正円にし、紅白紺の斜めストライプの縁を付ける。 - 見出しは両端が燕尾形にカットされたリボン形にする。 - 手順カードは上辺がアーチ状に丸い形にする。 ## Components - **リボン見出し**（`ribbon-heading`）: 紺のリボンに金の縁取りと燕尾形の端を付け、白い明朝体を字間広めで中央に置く。 - **応募CTA**（`button-primary`）: 白地のピル型。枠は左が赤、右が紺に分かれ、紺の明朝体の文字と右端に紺の三角を置く。 - **賞品パネル**（`prize-panel`）: くすみ紺の面に金の賞品名、金の飾り罫、額縁写真、白い説明文を並べる。 - **賞ラベル**（`prize-label`）: 金の縁取りの紺い四角に、賞のランクと応募条件を縦の飾り罫で区切って並べる。 - **当選人数バッジ**（`airmail-badge`）: 白い円にエアメール柄の縁を付け、中に紺の明朝体で人数を大きく入れる。 - **当選訴求帯**（`headline-band`）: ローズピンクの全幅の帯に、白い太ゴシックで大きな人数を入れる。 - **手順カード**（`step-card`）: 上辺がアーチ形の白いカード。番号を書いたピンクの旗を左上に立て、紺の明朝体で見出しを付ける。 - **注意アコーディオン**（`accordion-note`）: 黄色の全幅バーに紺の太字を入れ、右端に下向きの三角を置く。 - **情報ラベル**（`pill-label`）: 紺の小さなピル型に、白文字で項目名を入れる。項目の間は金の3点ドットで区切る。 ## Do's and Don'ts **Do** - 見出しには必ずリボン形と明朝体を使い、トンマナをそろえる。 - 紺のパネルには金の細い二重線か飾り罫を添える。 - 地のグラデーションに白いきらめきと細い弧線を散らす。 - 賞品ごとに同じ型のパネルを繰り返して見比べやすくする。 - 撮影の良い例と悪い例は、イラストを並べて視覚的に示す。 **Don't** - 原色の鮮やかなピンクを広い面に使わない。 - 見出しをゴシックだけで済ませない。 - CTAを単色の塗りボタンにしない（赤と紺の枠の白ピルを守る）。 - 金色を本文に使わない。 - 濃い影や立体的なボタン表現を加えない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名・期間・キャラクターを印象づける）: ピンクの地に、金の円形背景に置いたキャラクター写真、紺の円形タイトル、商品パッケージ、散らしたフルーツを配置する。 2. **当選訴求帯**（当選人数を一目で伝える）: ローズピンクの全幅の帯に、白い大きな数字を入れる。 3. **コンセプト**（世界観を伝える）: 紺のパネルに、傾けたエアメール柄フレームの写真と白い中央揃えの文を置く。 4. **応募期間**（期間を明示する）: リボン見出しの下に、紺の明朝体の大きな日付と飾り罫を置く。 5. **賞品**（賞品と応募条件を見せる）: リード文の後に、ラベル・人数バッジ付きの紺のパネルを賞の数だけ繰り返す。 6. **対象商品**（購入対象を示す）: 濃紺の全幅地に、金の角飾りを付けたパッケージ画像と白い商品名を縦に並べ、最後に店舗検索の白いボタンを置く。 7. **応募方法**（手順を案内する）: 藤色グラデーションの地に、番号旗付きのアーチ型カードのカルーセルを置き、その下にアカウント情報のパネルとCTAを続ける。 8. **撮影方法**（不備を防ぐ）: 白いカードの中に、グレーの良い例と悪い例のボックスを置く。黄色のピル型ラベルとレシートのイラストで説明する。 9. **応募規約**（規約を示す）: 白いカードの中に、スクロールする明朝体の本文を置き、項目を細線で区切る。最後にCTAを再び置く。 10. **お問い合わせ・フッター**（窓口を示す）: 濃紺の地に白文字の連絡先とバナーを置き、その下に黒紺の企業フッターを続ける。 ## Imagery - 人形やキャラクターを、柔らかい光で正面から上品に撮る。 - 苺とブルーベリーを、ぼかしも交えて画面の四隅に散らす。 - パリの名所などフランスを思わせる写真に、筆記体のメモと消印風のスタンプを添える。 - 賞品は無地のグレーかピンクのグラデーション背景で撮った物撮り。 - 説明図は線画のフラットなイラストにし、手書き風の吹き出しを添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央約1000px幅にまとめ、背景のグラデーションは全幅に広げる。 - 賞品パネルは左にラベルとバッジ、右に写真と説明を並べた横長のレイアウトにする。 - 応募手順のカードは3枚を横に並べ、カルーセルをやめる。 - アカウント情報は3列を横に並べる。 - PCでは右上に、応募へ飛ぶ円形の固定ボタンを置く。 ## 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-8ea0e4de`（元 LP の URL から採番） - **元 LP**: https://www.meiji.co.jp/products/brand/meiji-savencia/stmoret/cmp/close2606/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。