--- version: alpha name: Spring Sakura Pink Snack Gift Box LP description: 水色の空と桜のイラストで囲んだファーストビューから、淡いピンク地に商品セットのカードを縦に積む季節限定の通販 LP。セットごとにピンクとオレンジで色を分け、ピル型の購入ボタンへつなぐ。後半は赤地の会員登録キャンペーン帯とスタッフの声で締める。 colors: primary: '#FB4A7B' secondary: '#FE6D2B' cta: '#FB4A7B' on-cta: '#FEF4FB' background: '#FFF0ED' background-alt: '#FFC8CB' accent-1: '#A3E5E2' dark-section: '#E42E3D' on-dark: '#FEFCFA' surface: '#FCF8EF' text: '#4A3530' accent-2: '#533C3C' tint-1: '#F3E6DB' cta-accessible: '#E20542' primary-accessible: '#E20542' dark-section-accessible: '#CC1A29' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 64px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.1em headline-sm: fontFamily: Zen Maru Gothic fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 6px md: 12px lg: 18px full: 999px spacing: unit: 8px card: 20px section: 24px 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: 56px product-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1000px set-title-plate: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 90px badge-sakura: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px period-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 90px price-display: textColor: '{colors.text}' typography: '{typography.accent}' height: 50px coupon-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 110px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 60px accordion-link: textColor: '{colors.primary}' typography: '{typography.body-md}' height: 28px --- # DESIGN.md — 桜ピンク×水色の春限定お菓子福箱 LP（Spring Sakura Pink Snack Gift Box LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 桜・春限定・福箱・ピンクグラデーション・丸みのある太字・セット比較 - **地の質感**: 水彩風の桜イラストと淡いグラデーション地。商品写真はパッケージの切り抜きを密に並べる - **形**: 角丸カード、ピル型ボタン、花形バッジ、装飾縁の見出しプレート - **温度感**: 暖かく華やか。ピンクを主軸に水色で春の空気を加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FB4A7B` | メインのピンク（セット1のカード枠・見出し） | 5% | 画素の実測 | | `secondary` | `#FE6D2B` | セット2のオレンジ（枠・ボタン） | 4% | 画素の実測 | | `cta` | `#FB4A7B` | 購入ボタン（ピンク） | 2% | 画素の実測 | | `on-cta` | `#FEF4FB` | ボタン上の文字 | 1% | 画素の実測 | | `background` | `#FFF0ED` | カード内・スタッフの声の淡いピンク地 | 24% | 画素の実測 | | `background-alt` | `#FFC8CB` | セット一覧の外側ピンク地 | 10% | 画素の実測 | | `accent-1` | `#A3E5E2` | FV の空の水色 | 9% | 画素の実測 | | `dark-section` | `#E42E3D` | 会員登録キャンペーンの赤帯 | 10% | 画素の実測 | | `on-dark` | `#FEFCFA` | 赤帯上の白文字 | 1% | 画素の主要色に補正 | | `surface` | `#FCF8EF` | 白カード・説明ボックス・サブボタン地 | 6% | 画素の実測 | | `text` | `#4A3530` | 濃いブラウンの本文・見出し文字 | 3% | 推定 | | `accent-2` | `#533C3C` | キャンペーンの濃茶ラベル面 | 1% | 画素の実測 | | `tint-1` | `#F3E6DB` | クーポン面のベージュ | 2% | 画素の実測 | | `cta-accessible` | `#E20542` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E20542` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#CC1A29` | AA を満たす補正値（計算） | | 計算 | - 地は淡いピンク系で統一し、白に近い面をカード内側に使う - セットごとにテーマ色（ピンク／オレンジ）を決め、枠・見出しプレート・購入ボタンを同じ色にする - FV だけ水色の空を使い、桜のピンクと対比させる - 会員登録の訴求は彩度の高い赤の全幅帯で切り替え、文字は白 - クーポン金額は赤文字をベージュ面に置いて強調する - 本文は黒ではなく濃いブラウンで柔らかく見せる - `button-primary` は文字 `#FEF4FB` × 背景 `#FB4A7B` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E20542`、4.51:1）を使う。 - `set-title-plate` は文字 `#FEF4FB` × 背景 `#FB4A7B` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E20542`、4.51:1）を使う。 - `period-box` は文字 `#FB4A7B` × 背景 `#FCF8EF` のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E20542`、4.5:1）を使う。 - `coupon-panel` は文字 `#E42E3D` × 背景 `#F3E6DB` のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#CC1A29`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大タイトル（文字ごとの多色グラデーション） | 丸ゴシック | M PLUS Rounded 1c | 900 | 64px | 1.1 | 0.02em | | `headline-lg` | セット名のプレート見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 34px | 1.2 | 0.05em | | `headline-md` | キャンペーン帯の見出し | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.1em | | `headline-sm` | スタッフの声などの小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 19px | 1.4 | 0.05em | | `body-md` | 商品説明・本文 | 丸ゴシック | Zen Maru Gothic | 700 | 14px | 1.8 | 0.04em | | `accent` | 価格の数字 | 欧文サンセリフ | Montserrat | 800 | 34px | 1.1 | 0.02em | | `note` | 注意書き・期間の補足 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.02em | | `label-button` | 購入ボタン | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.2 | 0.06em | - 本文も太めの丸ゴシックにして親しみやすくする - 価格は数字だけ大きくし、単位と税込表記は小さく添える - 見出しは字間を広めにとる - 注意書きは小さく、色付き地の上に左揃えで置く - 本文は中央の 1 ブロックで左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 24px、基本単位 8px、カード内 20px（375px 幅換算） - 商品セットは太い色枠の角丸カードにし、縦に積む - カードの上半分に商品写真、下半分に説明・価格・CTA を置く - セット名プレートは写真とテキストの境目に重ねる - キャンペーン帯は全幅で、左にラベル、右に特典の 2 分割 - スタッフの声は丸いアバターを中央に置き、下に本文 ## Elevation & Depth - カードは影をつけず、太い色枠で区切る - セット名プレートに少し濃い縁取りを重ねて立体感を出す - ボタンはフラットで影は弱め ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 18px。ボタンはピル型。 - **写真の切り抜き**: 商品パッケージを切り抜いて密に重ね並べる。人物はイラストを円形に切り抜く - **セクション境界**: 直線で切り替え。FV の境界は桜イラストで縁取る - 購入ボタンは完全なピル型 - 数量限定バッジは白い桜の花形 - セット名は装飾的な縁の付いたプレート型 - 会員登録ボタンは角丸の長方形で白地 ## Components - **購入ボタン**（`button-primary`）: セットのテーマ色で塗ったピル型。文字の右に小さな三角 - **商品セットカード**（`product-card`）: テーマ色の太い枠の角丸カード。写真、プレート、説明、価格、詳細リンク、CTA の順 - **セット名プレート**（`set-title-plate`）: 装飾縁の横長プレート。上に小さなキャッチ、下に大きなセット名 - **数量限定の花形バッジ**（`badge-sakura`）: 白い桜形に濃茶で 2 行の短い文字 - **販売期間ボックス**（`period-box`）: ピンクのピルラベルの下に、白い帯で日付をピンク文字で表示 - **価格表示**（`price-display`）: 小さなラベル＋大きな太い数字＋小さな単位 - **クーポン訴求パネル**（`coupon-panel`）: 左は濃茶の面に白文字、右はベージュの面に赤い大きな金額 - **会員登録ボタン**（`button-secondary`）: 赤帯の上に置く白地の角丸ボタン。文字は濃茶 - **セット詳細の開閉リンク**（`accordion-link`）: 下向き矢印付きの小さなテキストリンク。色はテーマ色 ## Do's and Don'ts **Do** - 季節モチーフ（桜）をFVと写真の背景に必ず入れる - セットごとにテーマ色を変え、枠とボタンの色をそろえる - 商品は数の多さが伝わるよう密に並べる - 各カードの最後に購入ボタンを置く - 本文は濃いブラウンの丸ゴシックで書く **Don't** - 本文に純黒や細い明朝体を使わない - 寒色を FV 以外で大きく使わない - ボタンを四角い角や枠線だけのデザインにしない - カードに強い影をつけない - 商品写真に余白を広くとりすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節の限定企画であることを伝える）: 水色の空の地を桜イラストで囲み、ロゴ、多色の大タイトル、販売期間ボックス、4 行の中央揃えリードを置く 2. **商品セット 1**（上位のセットの中身と価格を見せ、購入へ誘導する）: ピンク枠のカード。花形バッジ、商品写真、ピンクのプレート見出し、説明、大きな価格、発送のお知らせボックス、詳細リンク、ピンクの CTA 3. **商品セット 2**（手頃なセットを比較して選べるようにする）: 同じ型のカードをオレンジに色替えして並べる 4. **会員登録キャンペーン**（クーポン特典で会員登録を促す）: 赤い全幅帯。アイコン付き見出し、2 分割のクーポンパネル、期間ラベル、点線の下に注意書き、白いボタン 5. **スタッフの声**（作り手の思いで親しみを出す）: 淡いピンク地に、ピンクの小見出し、円形の人物イラスト、左揃えの本文と署名 6. **フッター**（ページを締める）: ベージュの無地帯 ## Imagery - 桜の枝と花びらは水彩風のイラスト。画面の四隅から内側に向けて配置する - 商品パッケージは切り抜いて少しずつ重ね、ひし形柄や桜柄の背景にのせる - 人物はフラットな線のない似顔イラストで、白い円に収める - 大タイトルは文字ごとにピンク・黄・緑のグラデーションをかけ、白い縁取りをつける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に 480〜600px 程度の SP レイアウトを置き、左右を淡いピンクで埋める - PC 化する場合は商品カードを 2 列に並べてもよいが、色分けは維持する - FV の桜イラストは PC では左右に広げて配置する - ボタンは PC でも最大幅 400px 程度のピル型にする ## 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-7f76aa1a`（元 LP の URL から採番） - **元 LP**: https://shop.calbee.jp/marche/shop/pages/lp-spring2025.aspx - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。