--- version: alpha name: Peach Pink Seasonal Dessert Promo LP description: 淡いピーチピンクのグラデーション地に、桃の写真を浮かべて配置するコンビニ季節デザートの告知 LP。紅赤（クリムゾン）の帯と波形の境界でリズムを作り、丸ゴシックの赤文字見出しとブラシストローク風の下敷きでやわらかく甘い印象にまとめている。 colors: primary: '#E40139' background: '#FFDBDB' background-alt: '#FCDDC1' surface: '#FEFEFD' text: '#341112' secondary: '#CB0738' accent-1: '#FAC9B8' tint-1: '#FFCBCC' tint-2: '#FCCF99' cta: '#DA7A2D' on-cta: '#FDFCFD' line: '#C2375A' text-muted: '#5A4A46' cta-accessible: '#B05F1F' primary-accessible: '#B9012E' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 56px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Noto Sans JP fontSize: 36px fontWeight: 900 lineHeight: 1.0 label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' date-band: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' height: 70px price-block: textColor: '{colors.text}' typography: '{typography.accent}' height: 80px circle-badge: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 100px heading-swoosh: textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 60px brush-text: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 110px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px button-primary: backgroundColor: '{colors.on-cta}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px related-banner: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 170px --- # DESIGN.md — 桃色グラデと紅赤帯の季節スイーツ LP（Peach Pink Seasonal Dessert Promo LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、やさしい・柔らかい、ポップ・元気 - **キーワード**: ピーチピンク・グラデーション・浮遊する果物・波形の帯・丸ゴシック・季節限定 - **地の質感**: ふんわりした淡いグラデーションに、水彩・ブラシ風の筆跡を下敷きとして重ねる - **形**: 波形のセクション境界、円形バッジ、ピル型ボタン、曲線のスウッシュ下線 - **温度感**: 暖色寄り。桃色〜アプリコットの甘い暖かさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E40139` | 発売日帯・強調セクションの紅赤 | | 画素の実測 | | `background` | `#FFDBDB` | 全体の淡いピンク地 | | 画素の実測 | | `background-alt` | `#FCDDC1` | アプリコット寄りの地 | | 画素の実測 | | `surface` | `#FEFEFD` | 白いボタン面・カード | | 画素の実測 | | `text` | `#341112` | 見出し・本文の濃い焦げ茶 | | 画素の実測 | | `secondary` | `#CB0738` | 見出し文字の赤 | | 画素の実測 | | `accent-1` | `#FAC9B8` | 強調セクション上の淡ピンク大見出し | | 画素の主要色に補正 | | `tint-1` | `#FFCBCC` | ブラシ下敷きのサーモン | | 画素の実測 | | `tint-2` | `#FCCF99` | ブラシ下敷きのアプリコット | | 画素の実測 | | `cta` | `#DA7A2D` | 主ボタンのオレンジ矢印アイコン・文字 | | 画素の実測 | | `on-cta` | `#FDFCFD` | 主ボタン地 | | 画素の実測 | | `line` | `#C2375A` | ボタン枠線の赤・ベージュ | | 画素の実測 | | `text-muted` | `#5A4A46` | 注釈の小文字 | | 推定 | | `cta-accessible` | `#B05F1F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#B9012E` | AA を満たす補正値（計算） | | 計算 | - 地は淡ピンク〜アプリコットの縦グラデーションで、セクションごとに少しずつ色相をずらす - 紅赤は発売日帯・増量版セクション・関連商品見出し帯の面に限定して使う - 紅赤面の上の見出しは白ではなく淡ピンクで柔らかく抜く - 本文は黒ではなく焦げ茶で甘さを保つ - 見出し文字の赤はブランド赤と同系で揃える - ボタンは白地に色付き枠と円形アイコンで、塗りの強いボタンは避ける - `button-primary` は文字 `#DA7A2D` × 背景 `#FDFCFD` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B05F1F`、4.56:1）を使う。 - `related-banner` は文字 `#FAC9B8` × 背景 `#E40139` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B9012E`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の商品名 | ゴシック | Dela Gothic One | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | 紅赤セクションの大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 56px | 1.2 | 0.05em | | `headline-md` | 導入・特長の赤見出し | 丸ゴシック | Zen Maru Gothic | 700 | 32px | 1.3 | 0.04em | | `headline-sm` | 見出し前後の小リード | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.4 | 0.05em | | `body-md` | 中央揃えの説明文 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.8 | 0.04em | | `accent` | 価格の大きな数字 | ゴシック | Noto Sans JP | 900 | 36px | 1.0 | 0.0em | | `label-button` | ボタン文言 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.03em | | `note` | 税・取扱注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | - 見出しは丸ゴシックで赤、本文は焦げ茶の太めゴシック - 本文はすべて中央揃えで短く改行する - 商品名には難読字にルビを振る - 価格は税抜を大、税込を括弧付きで併記し小数部を小さく - キャッチの一部は少し斜体・傾けて躍動感を出す - 見出し下に赤い曲線スウッシュを敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム中央揃え - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は画面幅いっぱいに近い大きさで中央配置 - 桃の写真を画面端から半分はみ出させて浮遊感を出す - 見出し→写真→説明文→ボタンの縦積みを繰り返す - 注釈はセクション末尾に左揃えでまとめる ## Elevation & Depth - 基本はフラット、影なし - 写真の背後に白いぼかしグローで浮かせる - 円形バッジに淡いドロップシャドウ ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 切り抜き写真（背景なし）を基本とし、果物は端でトリミング - **セクション境界**: ゆるやかな波形カーブ - セクション境界は直線を避け波形にする - 強調は円形バッジで示す - ボタンはピル型か角丸の白地 - 見出し下に曲線スウッシュ ## Components - **発売日帯**（`date-band`）: 紅赤の全幅帯に白文字で日付を表示し、下端は波形 - **価格表示**（`price-block`）: 税抜を大きく、税込を括弧で併記する黒太字価格 - **増量円形バッジ**（`circle-badge`）: 白〜淡ピンクの円に赤文字で倍量を訴求 - **スウッシュ見出し**（`heading-swoosh`）: 赤い丸ゴシック見出しの下に赤い曲線ライン - **ブラシ下敷き本文**（`brush-text`）: サーモンやアプリコットの筆跡の上に中央揃え本文 - **詳細リンクボタン**（`button-secondary`）: 白いピル型、右に黒三角 - **店舗検索ボタン**（`button-primary`）: 白地にベージュ二重枠、左にオレンジ円矢印、右に店舗アイコン - **情報リンクボタン**（`button-outline`）: 白地に赤枠のピル型、左に赤円矢印 - **関連商品バナー**（`related-banner`）: 紅赤帯見出しの下に全幅商品バナーを縦積み ## Do's and Don'ts **Do** - 地は淡い桃色グラデーションを保つ - 果物写真を端にはみ出させて浮かべる - 見出しは赤い丸ゴシック＋曲線下線 - 強調セクションだけ紅赤面に切り替える - 価格は税抜・税込を併記する **Don't** - 純黒の文字や無彩色グレー地を使わない - 直線的な区切りや角張った箱組みにしない - 紅赤を本文や広い背景に多用しない - 寒色系を主役ゾーンに入れない - 塗りつぶしの重いボタンを並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品名・ビジュアル・価格を一目で伝える）: ルビ付き太字商品名、中央に商品写真、縦書きコピーと右下に価格 2. **バリエーション帯**（増量版の存在と価格を伝える）: 紅赤帯に小写真・円形バッジ・商品名・価格を横並び 3. **発売日告知**（発売日を明示）: 紅赤全幅帯に白文字、下端は波形 4. **導入**（今年も登場を告知）: 小リード＋赤い大見出し＋スウッシュ、周囲に桃を浮遊 5. **素材のこだわり1**（果物の品質を説明）: 果物写真→赤見出し→ブラシ下敷き本文 6. **素材のこだわり2**（ソフトクリームとの相性を説明）: 商品写真→赤見出し→本文→白ピルの詳細ボタン 7. **増量版訴求**（倍量商品を印象づける）: 紅赤面に淡ピンクの大見出し、大きな商品写真と円形バッジ、桃を並べ波形で終える 8. **来店CTA**（店舗への来店を促す）: 傾いた赤見出し、商品2つの写真、店舗検索ボタンと情報ボタン 9. **注釈**（税率・取扱条件の説明）: 小さな左揃えの注釈を箇条で 10. **関連商品**（他の季節商品へ回遊）: 紅赤見出し帯の下に全幅バナーを縦積み ## Imagery - 商品は背景を抜いた切り抜き写真で、明るく柔らかい光 - 産毛の見える丸い果物写真を大小散らして浮かべる - 一部の果物はぼかして奥行きを出す - 水彩・筆ストロークの淡色テクスチャを文字の下敷きにする - 関連商品は鮮やかな背景付きのバナー写真 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央寄せの固定幅で、背景グラデーションを全幅に伸ばす - FV は商品写真中央、左に増量版、右に価格とコピーを配置 - 素材のこだわり2項目は PC で 2 カラム横並び - 増量版は写真左・見出し右の横組み - 関連商品バナーは PC で 3 カラム横並び ## 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-1660d829`（元 LP の URL から採番） - **元 LP**: https://www.ministop.co.jp/syohin/sweets/parfait/hakutou_parfait2025/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。