--- version: alpha name: Valentine Berry Red Sweets Campaign LP description: 深い苺レッドとローズピンクを地にした、バレンタイン向けの食品メーカー懸賞LPです。白い装飾枠のカード、明朝体の見出し、テーブル上のお菓子や花の切り抜き写真をページ端に散らし、華やかで上品な「おうちカフェ」の空気を作ります。 colors: primary: '#D65866' secondary: '#C03E4A' dark-section: '#A41B2D' surface: '#FEFDFD' background-alt: '#FFFFFF' tint-1: '#E8AFA9' accent-1: '#C4333B' on-primary: '#FFFFFF' cta: '#FEFCFC' on-cta: '#C03E4A' text: '#222222' accent-2: '#595959' background: '#C13D4A' background-accessible: '#D06973' primary-accessible: '#D14453' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Playfair Display fontSize: 26px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 20px full: 999px spacing: unit: 8px card: 16px 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.sm}' height: 48px section-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px ribbon-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 64px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 320px count-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px step-card: textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 260px product-circle: textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 200px point-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 32px example-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 28px --- # DESIGN.md — 苺レッド×白枠の洋菓子プレゼントキャンペーンLP（Valentine Berry Red Sweets Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 上品・高級、かわいい、情報量多め・訴求型 - **キーワード**: 苺レッド・ローズピンク・白い装飾フレーム・明朝見出し・スイーツ切り抜き・テーブルコーディネート - **地の質感**: ほぼフラットな赤い面です。四隅に、お菓子・花・食器の写真と軽い影を散らします。 - **形**: 上辺が丸くえぐれた白枠カード。中央が膨らむ弓形のタブで区切ります。 - **温度感**: 暖色寄りで甘く華やかな印象です。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D65866` | メインのセクション地（ローズレッド） | 30% | 画素の実測 | | `secondary` | `#C03E4A` | 濃い苺レッドの帯セクション | 18% | 画素の実測 | | `dark-section` | `#A41B2D` | リボン見出し・強調ラベルの深紅 | 3% | 画素の実測 | | `surface` | `#FEFDFD` | カード・説明パネルの白 | 15% | 画素の実測 | | `background-alt` | `#FFFFFF` | 写真帯周辺の淡いグレージュ | 6% | 画素の実測 | | `tint-1` | `#E8AFA9` | サブ面の淡いピンク（チェックボタン・番号ラベル） | 5% | 画素の主要色に補正 | | `accent-1` | `#C4333B` | カード内の賞名・見出しの赤文字 | 2% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 赤地の上の白文字 | 3% | 画素の主要色に補正 | | `cta` | `#FEFCFC` | 参加ボタンの白い面 | 1% | 画素の実測 | | `on-cta` | `#C03E4A` | 参加ボタンの赤文字 | 0% | 画素の主要色に補正 | | `text` | `#222222` | 白パネル内の本文の黒 | 2% | 推定 | | `accent-2` | `#595959` | 悪い例の見出しバーのグレー | 0% | 画素の実測 | | `background` | `#C13D4A` | ページ下部の基調の深紅 | 12% | 画素の実測 | | `background-accessible` | `#D06973` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D14453` | AA を満たす補正値（計算） | | 計算 | - 地はローズレッドと濃い苺レッドの2段にします。セクションごとに交互に切り替えます。 - 情報カードは白地にして、見出しを赤文字にします。 - 主CTAは白地に赤文字です。細い赤の二重線の枠を付けます。 - 当選人数バッジと見出しリボンは深紅の塗りに白文字にします。 - 白パネル内では、黒文字と淡いピンクのラベルで情報を整理します。 - 良い例・悪い例は赤とグレーのバーで区別します。 - `page` は文字 `#222222` × 背景 `#C13D4A` のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#D06973`、4.51:1）を使う。 - `section-tab` は文字 `#FFFFFF` × 背景 `#D65866` のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D14453`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーンタイトル | 明朝 | Shippori Mincho | 800 | 34px | 1.2 | 0.05em | | `headline-lg` | 応募期間などの大きな数字 | 欧文セリフ | Playfair Display | 600 | 26px | 1.3 | 0.02em | | `headline-md` | セクション見出し・リボン見出し | 明朝 | Noto Serif JP | 600 | 20px | 1.5 | 0.08em | | `headline-sm` | 賞名・商品名・カード見出し | 明朝 | Noto Serif JP | 700 | 16px | 1.4 | 0.04em | | `body-md` | リード文・カード説明 | 明朝 | Noto Serif JP | 400 | 14px | 1.9 | 0.06em | | `note` | 注意書き・規約 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `accent` | Recipe・STEP などの欧文ラベル | 欧文セリフ | Playfair Display | 400 | 12px | 1.2 | 0.2em | | `label-button` | 参加ボタン | 明朝 | Noto Serif JP | 700 | 16px | 1.0 | 0.1em | - 見出しと本文は明朝で統一します。注釈だけゴシックにします。 - 日付や数字は欧文セリフで大きく見せます。 - 赤地の文字は白にして、中央揃えにします。 - STEP・Recipe などの欧文ラベルは字間を広くとり、小さく添えます。 - リード文は短い行で改行し、中央揃えで詩のように並べます。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは2列または横スクロールにします。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは、上辺中央の弓形タブに見出しを載せて始めます。 - 装飾写真は画面の左右端にはみ出させて配置します。 - セクションの末尾ごとに参加ボタンを繰り返し置きます。 - 応募方法は STEP カードを矢印でつなぎます。 - 撮影方法は大きな白パネルにまとめます。 ## Elevation & Depth - カードとボタンには、薄い影（0 2px 6px rgba(0,0,0,.15)）を付けます。 - 切り抜き写真には、やわらかい落ち影を付けます。 - 白パネルはほぼフラットにして、角丸で浮かせます。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 料理は角丸の縦長枠に入れます。商品パッケージと装飾は切り抜きにします。 - **セクション境界**: 上辺中央が膨らむ弓形のカーブで区切ります。 - カードの上辺の角を内側に丸くえぐった装飾枠にします。 - ボタンは小さな角丸の長方形です。内側に細い二重線を入れます。 - 当選人数は深紅の円バッジにします。 - 見出しには、両端が切れ込んだリボン形を使います。 ## Components - **参加ボタン**（`button-primary`）: 白地に赤文字の明朝で、二重線の枠を付けます。右端に「〉」を置きます。 - **弓形見出しタブ**（`section-tab`）: セクションの上辺中央に、膨らんだ半円状のタブを付けて、小見出しを載せます。 - **リボン見出し**（`ribbon-heading`）: 深紅のリボン帯に白い明朝の2行コピーを入れます。 - **賞品カード**（`prize-card`）: 上辺をえぐった白枠カードです。条件ラベル・賞名・写真・説明の順に並べ、右下に人数バッジを置きます。 - **当選人数バッジ**（`count-badge`）: 深紅の円に、白い数字と「名様」を入れます。 - **応募ステップカード**（`step-card`）: 白線で囲んだ透過カードです。STEP番号・説明・線画のイラストを入れ、矢印でつなぎます。 - **対象商品**（`product-circle`）: 白い細線の円の中にパッケージの切り抜きを置き、下に商品名と容量を添えます。 - **番号付きラベル**（`point-label`）: 淡いピンク地に、丸数字と項目名を4つ並べます。 - **良い例・悪い例バー**（`example-bar`）: 全幅のバーです。良い例は深紅、悪い例は濃いグレーにして、白文字を中央に置きます。 ## Do's and Don'ts **Do** - 地は苺レッドとローズの濃淡2色に限定します。 - 見出しと本文は明朝で、上品さを保ちます。 - ページの端に、お菓子・花・苺・食器の切り抜きを散らします。 - 参加ボタンは各セクションの末尾に繰り返し置きます。 - 情報量の多い説明は白パネルにまとめます。 **Don't** - ネオン系やビビッドな青緑を使わないでください。 - ボタンをピル型や赤のベタ塗りにしないでください。 - 太いゴシックで見出しを組まないでください。 - 装飾写真を本文の上に重ねて、読みにくくしないでください。 - セクションの区切りを直線だけにしないでください。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーンの主題と賞品数を伝えます。）: テーブルに並ぶ紅茶・お菓子の写真の上に、ピンクの装飾ロゴ枠と白帯の告知を置きます。 2. **応募期間**（期間を明示し、参加を促します。）: 濃赤の帯に、大きな欧文セリフの日付と参加ボタンを置きます。 3. **オリジナルメニュー紹介**（商品を使う楽しさを伝えます。）: リボン見出しと中央揃えのリード文の下に、角丸縦長の動画カードを横スクロールで並べます。 4. **レシピ一覧**（レシピページへ誘導します。）: 白枠の小カードを4つ並べます。中身は写真・料理名・チェックボタンです。 5. **監修者プロフィール**（信頼性を補います。）: 細線で区切り、左に人物の切り抜き、右に名前と経歴を置きます。 6. **おすすめレシピ**（商品の使い道を広げます。）: 白線枠の透過カードを4つ並べます。中身は番号・写真・説明です。 7. **SNS誘導**（公式アカウントへ誘導します。）: 写真のコラージュの中央に、白いボタンを置きます。 8. **賞品**（賞品と応募条件を示します。）: 装飾枠の白カードを3つ並べ、それぞれに人数バッジを付けます。 9. **対象商品**（購入対象を明確にします。）: 円の中にパッケージの切り抜きを置いて4つ並べ、注意書きを添えます。 10. **応募方法**（手順を理解させます。）: STEPカードを4つ、矢印でつないで並べます。 11. **撮影方法の説明**（応募不備を防ぎます。）: 大きな白パネルに、確認項目のラベル、良い例・悪い例の線画イラストを並べます。 12. **フッター**（規約の表示と最終CTAを置きます。）: 参加ボタン、小さな注釈、ページトップへのリンクを並べ、薔薇の写真で飾ります。 ## Imagery - 料理写真は、ピンクのテーブルクロスに白い皿をのせて自然光で撮ります。 - 苺・薔薇・チョコ・紅茶・カトラリーを切り抜いて、四隅に散らします。 - ハートのクッキーやリボン付きの箱など、バレンタインのモチーフを入れます。 - 説明図は白黒の線画にします（レシートやスマホ操作など）。 - レースペーパーやギンガムチェックの布を、差し色として端に入れます。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せで約70%幅です。SPは90%幅の1カラムにします。 - 賞品カード・STEPカードは、PCの3〜4列からSPでは1列または2列にします。 - 動画カードはSPで横スクロールのカルーセルにします。 - 装飾写真はSPで縮小し、端に一部だけ見せます。 - 大きな日付やタイトルはSPで26〜34pxにします。 ## 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-fa96f248`（元 LP の URL から採番） - **元 LP**: https://showa.ms-cp.jp/valentine-campaign2026/lp - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。