--- version: alpha name: Sparkling Red Festive Dessert LP description: 真紅のグラデーション地に光の玉とキラキラを散らした、祝祭感のある期間限定デザートの告知 LP。白抜きに金縁のついたポップ書体で見出しを組み、写真の切り抜きを大きく見せる。 colors: primary: '#DC1115' background: '#E23E39' background-alt: '#FEEDCC' on-primary: '#FCF8F0' accent-1: '#E8C060' accent-2: '#8C2120' text: '#AB0F1C' cta: '#FDFDFD' on-cta: '#A21B26' line: '#FCF8F0' tint-1: '#EFAB93' text-muted: '#F8E0DC' background-accessible: '#F5BCBA' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Kosugi Maru fontSize: 38px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.03em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em accent: fontFamily: Shippori Mincho B1 fontSize: 22px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em label-button: fontFamily: Shippori Mincho B1 fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-title: textColor: '{colors.on-primary}' typography: '{typography.display}' height: 90px vertical-catch: textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 240px price-badge: textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 90px date-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.accent}' height: 50px sparkle-divider: textColor: '{colors.line}' height: 16px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px button-secondary: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 40px footnote: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 40px --- # DESIGN.md — 赤×金のきらめく季節限定スイーツ LP（Sparkling Red Festive Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、力強い・インパクト、かわいい - **キーワード**: 真紅・きらめき・光の玉・金縁文字・切り抜き写真・期間限定 - **地の質感**: 赤の放射グラデーションにボケた光の玉と十字の星の光を重ね、ツヤと輝きを出す - **形**: 角丸を抑えたピル型・角丸ボタン、星飾り付きの細い罫線、切り抜き写真の自由配置 - **温度感**: 暖色一色の高揚した温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DC1115` | ページ全体の真紅の地 | 45% | 画素の実測 | | `background` | `#E23E39` | 明るめの赤の地（グラデ中心部） | 20% | 画素の主要色に補正 | | `background-alt` | `#FEEDCC` | 発売日帯の生成りゴールド地 | 3% | 画素の実測 | | `on-primary` | `#FCF8F0` | 赤地上の本文・見出しの白 | 4% | 画素の主要色に補正 | | `accent-1` | `#E8C060` | 見出しの金縁・小見出しの金 | 2% | 推定 | | `accent-2` | `#8C2120` | 見出し白文字の濃赤の影・縁 | 2% | 画素の主要色に補正 | | `text` | `#AB0F1C` | 発売日帯・ボタンの濃赤文字 | 2% | 画素の実測 | | `cta` | `#FDFDFD` | 店舗検索ボタンの白地 | 2% | 画素の実測 | | `on-cta` | `#A21B26` | ボタン文字と矢印丸の赤 | 1% | 画素の実測 | | `line` | `#FCF8F0` | 星飾り罫線の白 | 1% | 画素の主要色に補正 | | `tint-1` | `#EFAB93` | 光の玉のボケた淡いピンク | 6% | 画素の主要色に補正 | | `text-muted` | `#F8E0DC` | 最下部の注釈の白 | 1% | 推定 | | `background-accessible` | `#F5BCBA` | AA を満たす補正値（計算） | | 計算 | - 地は真紅一色で、中央を明るく周囲を濃くした放射グラデにする - 白は文字・罫線・ボタン地に限定し、赤地で最大のコントラストを作る - 金は見出しの縁取りと小見出し・発売日帯のみに使い高級感を添える - 発売日帯だけ生成りゴールド地に濃赤文字で反転させて目立たせる - 寒色は使わない。写真の苺・プリンの赤と黄が地の色になじむようにする - `page` は文字 `#AB0F1C` × 背景 `#E23E39` のコントラスト比が 1.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#F5BCBA`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインのロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.02em | | `headline-lg` | セクションの大見出し（白に金縁） | 丸ゴシック | Kosugi Maru | 800 | 38px | 1.2 | 0.04em | | `headline-md` | 素材名の見出し（金グラデ文字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.2 | 0.03em | | `headline-sm` | 見出し上の小さなリード（金） | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.05em | | `accent` | 発売日の帯・価格数字 | 明朝 | Shippori Mincho B1 | 800 | 22px | 1.2 | 0.02em | | `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.05em | | `label-button` | ボタンの文字 | 明朝 | Shippori Mincho B1 | 800 | 20px | 1.3 | 0.04em | | `note` | 税・提供時間の注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | - 見出しは白文字に金の縁と濃赤の影を重ね、ツヤのある立体感を出す - 本文は白で中央揃えにし、1行15〜18字で改行する - メインタイトルは斜めに傾けた太いポップ書体にする - 素材名の見出しは金グラデ文字で左右どちらかに寄せる - 価格は数字を大きく、税込の小数点以下は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。素材紹介は写真とテキストを左右交互に重ねる - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - ファーストビューは商品の切り抜き写真を画面幅いっぱいに大きく置く - テキストブロックは星飾りの罫線で上下を挟む - 素材紹介は写真を画面端から少しはみ出させ、文字と少し重ねる - CTAボタンは最下部に縦に2つ並べ、主ボタンを大きくする - セクション同士はカードで区切らず、連続する赤地の上に置く ## Elevation & Depth - 切り抜き写真には地の赤に溶ける柔らかい影を付ける - 見出し文字に濃赤のドロップシャドウを付ける - ボタンには薄い影と細い赤の二重枠を付け、少し浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品・素材は背景を抜いた切り抜き写真で自由に配置する - **セクション境界**: 境界線は作らない。発売日帯だけ横長の帯で区切る - 主ボタンは角丸小の長方形で、赤の内側枠を付ける - サブボタンはピル型の白地 - 左端に赤丸の矢印アイコンを置く - 罫線は中央に星を集めた細い白線にする ## Components - **ロゴ風メインタイトル**（`hero-title`）: 白い太字に赤縁と影を付けたタイトルと副題。上部中央に置く - **縦書きキャッチ**（`vertical-catch`）: 写真の右側に白文字の縦書き2行を置く - **価格表示**（`price-badge`）: 本体価格と税込価格を白い太数字で、カッコ付きで2段に並べる - **発売日帯**（`date-band`）: 生成りゴールドの帯に濃赤の明朝体で日付を入れ、両端に星を置く - **星飾り罫線**（`sparkle-divider`）: 中央に十字の星を並べた細い白線。テキストを上下から挟む - **店舗検索ボタン**（`button-primary`）: 白地に赤の二重枠、赤丸の矢印、濃赤の明朝体文字、右端に小さな店舗アイコン - **情報リンクボタン**（`button-secondary`）: 白のピル型。左に赤丸の矢印、黒〜濃赤のゴシック文字 - **注釈**（`footnote`）: 最下部に米印付きの小さな白文字を数行置く ## Do's and Don'ts **Do** - 赤地全体に光の玉と十字の星を散らして祝祭感を出す - 商品写真は切り抜いて大きく、光が当たっているように見せる - 見出しは白と金で縁取りし、立体感を出す - テキストは中央揃えで短く改行する - CTA は白地にして、赤地から浮き立たせる **Don't** - 寒色や灰色の面を入れない - 白い四角のカードで区切らない - 細い書体だけで見出しを組まない - 長い本文を左揃えで詰め込まない - 写真を四角いまま枠に入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の見た目と価格を一目で伝える）: ロゴ風タイトル、商品と素材の切り抜き写真、縦書きキャッチ、価格をキラキラの赤地に重ねる 2. **発売日告知**（いつから買えるかを伝える）: 生成りゴールドの帯に濃赤の明朝体で日付を入れる 3. **コンセプト紹介**（商品の魅力を短く伝える）: 星罫線で挟み、金の小見出し、白金の大見出し、白い中央揃えの本文3行を置く 4. **素材紹介1**（1つ目の素材のこだわりを伝える）: 左に金の見出しと本文、右に素材の切り抜き写真を置く 5. **素材紹介2**（2つ目の素材のこだわりを伝える）: 左に写真、右に見出しと本文を置き、素材紹介1と左右を入れ替える 6. **締めのメッセージ**（来店をうながす）: 斜めに傾けた白い2行のコピーと、商品と素材の集合写真を置く 7. **CTA**（店舗検索と詳細情報へ誘導する）: 白地の主ボタンとピル型のサブボタンを縦に並べる 8. **注釈**（価格・税・提供時間の補足）: 小さな白文字の米印注記を置く ## Imagery - スイーツは透明カップのまま斜め上から撮り、断面の層が見えるように切り抜く - 素材（果物・プリン）はツヤを強調して撮り、単体で切り抜く - 背景は赤の放射グラデに、ボケた光の玉と十字の星をランダムに散らす - 写真に白いハイライトの星を少し重ね、きらめきを足す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 960px 幅に同じ構成を保ち、縦の流れは変えない - PC のファーストビューは横長にして、タイトルを上部中央、写真を横に並べる - PC の素材紹介はテキストと写真をより広く左右に分ける - PC の本文は1行を長めにして2行にまとめる - 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-f79171df`（元 LP の URL から採番） - **元 LP**: https://www.ministop.co.jp/syohin/sweets/parfait/dreamcombo_5/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。