--- version: alpha name: Strawberry Red Chocolate Collaboration Sweets LP description: 赤からサーモンピンクへ続くグラデ地に、淡いピンクのカードを重ねた期間限定スイーツの LP。綿雲・きらめき・ハートの装飾と、金のリボン見出し、明朝の見出し文字で、華やかで甘いご褒美感を出している。商品は白抜きの切り抜き写真で、価格を点線で挟んで縦に並べる。 colors: primary: '#E7433A' secondary: '#F7BAB4' background: '#FFE6E3' surface: '#FFF1F0' background-alt: '#FFFFFF' accent-1: '#E83B38' text: '#311712' accent-2: '#FEECBB' tint-1: '#F1BDB4' dark-section: '#EA3335' on-dark: '#FEFCFB' accent-3: '#E8C27A' accent-1-accessible: '#D41C19' dark-section-accessible: '#E71A1C' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em headline-md: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Zen Maru Gothic fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em accent: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Zen Maru Gothic fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em rounded: sm: 6px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-detail: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px accordion-nav: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px ribbon-heading: backgroundColor: '{colors.accent-2}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 40px product-frame: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.md}' price-block: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 52px limited-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 140px notice-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 84px slash-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 30px app-banner: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 76px --- # DESIGN.md — 苺赤×桜色グラデの限定スイーツ LP（Strawberry Red Chocolate Collaboration Sweets LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい、ポップ・元気 - **キーワード**: 苺赤グラデーション・綿雲・きらめき装飾・金リボン見出し・切り抜き商品写真・限定コラボ - **地の質感**: なめらかなグラデーションと柔らかな光のぼかし。綿雲とハートは半透明。 - **形**: 角丸カード、ピル型ボタン、隅を内側にえぐった額縁型の枠、帯状のリボン - **温度感**: 暖色。赤〜ピンクのみでまとめた甘く温かい印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E7433A` | ブランド赤・セクション地 | 10% | 画素の実測 | | `secondary` | `#F7BAB4` | 下部へ向かうサーモン地 | 8% | 画素の実測 | | `background` | `#FFE6E3` | 導入部の淡ピンク地 | 18% | 画素の実測 | | `surface` | `#FFF1F0` | 商品カードの地 | 20% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白ボタン・注意書きボックス | 6% | 画素の実測 | | `accent-1` | `#E83B38` | 商品名・本文の赤文字 | 2% | 画素の主要色に補正 | | `text` | `#311712` | ボタン文字の焦げ茶 | 1% | 画素の実測 | | `accent-2` | `#FEECBB` | リボン見出しの金クリーム | 1% | 画素の実測 | | `tint-1` | `#F1BDB4` | 綿雲・枠線の淡ピンク | 4% | 画素の主要色に補正 | | `dark-section` | `#EA3335` | 限定告知帯の濃赤 | 2% | 画素の実測 | | `on-dark` | `#FEFCFB` | 赤帯上の白文字 | 1% | 画素の主要色に補正 | | `accent-3` | `#E8C27A` | きらめき装飾の金 | 0% | 推定 | | `accent-1-accessible` | `#D41C19` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#E71A1C` | AA を満たす補正値（計算） | | 計算 | - 地は上から赤→サーモン→ピーチへ縦グラデーションで変化させる - 導入部は淡ピンク地、商品ゾーンは赤グラデ地に淡ピンクのカードを載せる - 文字は赤（本文・商品名）と焦げ茶（ボタン）の 2 色だけ。黒は使わない - 金は見出しリボンときらめき装飾だけに使う - 白はボタンと注意書きボックスに限定する - 限定情報は濃赤の帯に白文字で目立たせる - `ribbon-heading` は文字 `#E83B38` × 背景 `#FEECBB` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D41C19`、4.51:1）を使う。 - `product-frame` は文字 `#E83B38` × 背景 `#FFF1F0` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D41C19`、4.54:1）を使う。 - `limited-band` は文字 `#FEFCFB` × 背景 `#EA3335` のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#E71A1C`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦組み風キャッチ | 明朝 | Shippori Mincho | 500 | 36px | 1.2 | 0.05em | | `headline-lg` | リボン上のセクション見出し | 明朝 | Shippori Mincho | 500 | 28px | 1.2 | 0.04em | | `headline-md` | 商品名 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.5 | 0.08em | | `headline-sm` | スラッシュで挟んだ小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.4 | 0.1em | | `body-md` | 商品説明・リード文 | 丸ゴシック | Zen Maru Gothic | 500 | 12px | 2.0 | 0.1em | | `accent` | 価格の数字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 12px | 1.6 | 0.05em | | `label-button` | ボタン文字 | 丸ゴシック | Zen Maru Gothic | 700 | 11px | 1.4 | 0.12em | | `note` | ※注意書き | ゴシック | Noto Sans JP | 400 | 9px | 1.7 | 0.03em | - 見出しは明朝、本文とボタンは丸ゴシックにする - 本文は中央揃えで短い行を重ね、行間は 2.0 と広く取る - 字間は 0.08〜0.12em と広めにする - 価格は『区分【税込】:¥数字』の形で 2 行に揃える - 注意書きは※付きの小さい文字にし、白ボックスか赤帯の中に入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - カードは画面幅の約 88% で中央に置く - 商品ブロックは写真→商品名→点線→価格→点線→説明→ボタンの順にする - 商品の間は 48px ほど空ける - 見出しリボンはカード上辺に半分重ねる - ナビの開閉ボタンは縦に 3 つ並べ、間を 12px にする ## Elevation & Depth - カードは影をほぼ付けず、淡い光彩で浮かせる - 限定カードには柔らかなドロップシャドウを付ける - ボタンは白地に極薄の影か淡い線を付ける ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き、人物とキービジュアルは角丸 16px の矩形 - **セクション境界**: 直線で色を切り替え、境目に綿雲やハートを半分はみ出させる - 商品カードは隅を内側にえぐった額縁型にし、二重線で囲む - 見出しリボンは両端を切り欠いた帯形にする - 価格は点線の水平罫で上下を挟む ## Components - **詳細ピルボタン**（`button-detail`）: 白地のピル型。中央に焦げ茶の文字、右端に › を置く - **開閉ナビボタン**（`accordion-nav`）: 赤地の上に置く白いピル。カテゴリ名と右端の下向き矢印 - **金リボン見出し**（`ribbon-heading`）: クリーム〜金グラデの帯に赤い明朝の文字。カード上辺に重ねる - **額縁型商品カード**（`product-frame`）: 淡ピンク地で隅をえぐった枠。中に商品を縦に並べる - **価格ブロック**（`price-block`）: 点線で挟み、区分ごとの税込価格を 2 行で中央揃えにする - **限定告知帯**（`limited-band`）: 濃赤の帯に白文字で商品名と期間を入れ、白い四角のラベルを添える - **注意書きボックス**（`notice-box`）: 白地に淡い線で囲み、※の注記を左揃えで並べる - **スラッシュ小見出し**（`slash-heading`）: 両側を斜線で挟んだ赤い短い見出し - **アプリ誘導バナー**（`app-banner`）: 白地の角丸枠。左にアイコン、右に太字のサービス名 ## Do's and Don'ts **Do** - 赤〜ピンクのグラデ地に綿雲・きらめき・ハートを散らす - 商品は白背景を抜いた切り抜きで大きく中央に置く - 見出しは金リボン＋明朝で特別感を出す - 本文は赤の丸ゴシックで、中央揃えのゆったりした行間にする - 価格は点線で挟んで整える **Don't** - 寒色や黒の面を使わない - 角張ったボタンや塗りつぶしの強いボタンにしない - 本文を黒文字や詰めた行間にしない - 商品写真を四角い背景付きのまま並べない - 金を本文や面に広く使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観と限定感を一目で伝える）: 赤グラデの空に浮かぶ綿雲に商品を載せ、右上に明朝のキャッチ、下部に両社ロゴを × でつなぐ 2. **注意書き**（販売条件を先に示す）: 淡ピンク地に白い角丸ボックスを置き、※の注記を並べる 3. **ネット注文誘導**（予約注文の導線をつくる）: スラッシュ小見出しの下に白いアプリバナーを置く 4. **コンセプト文**（商品の背景と魅力を語る）: 雲ときらめきの区切り飾りの下に赤文字を中央揃えで置き、その下に角丸の人物写真を入れる 5. **カテゴリナビ**（商品群へ移動させる）: 赤地に白ピルの開閉ボタンを縦に 3 つ並べる 6. **動画**（CM で世界観を補強する）: 金リボン見出し付きの淡ピンクカードに動画を埋め込む 7. **商品一覧**（各商品の価格と特長を伝える）: ロゴの下に額縁型カードを置き、切り抜き写真・商品名・価格・説明・詳細ボタンを繰り返す 8. **限定商品**（ネット注文限定品を訴求する）: 赤地に戻してリボン見出しを付け、キービジュアル＋濃赤の告知帯＋商品詳細＋注文ボタンを置く 9. **セット商品**（数量限定セットで単価を上げる）: グラデのバナーに価格の丸バッジと吹き出し状の内訳を入れ、白文字の注記を続ける ## Imagery - 商品は真上やや斜めから撮り、背景を抜いた切り抜きにして柔らかい影を付ける - キービジュアルは赤〜オレンジのグラデ空に、ピンクの綿雲を立体的に浮かべる - 小さな人形のイラストやリボンを雲に添えて遊び心を出す - 金・白の四芒星のきらめきと、吊り下げた点の飾りを散らす - 半透明のハートや雲を画面端に半分はみ出させる - 人物写真は赤い暖色背景で、商品を手に持った笑顔にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅約 900px で中央に置き、両側にグラデ地を見せる - PC のコンセプト文は左にテキスト、右に人物写真の 2 カラムにする - PC のナビボタンは横に 3 つ並べる - PC の商品カードは上段 2 列、下段 3 列のグリッドにする - PC の限定告知とセットのバナーは横長にし、情報を 1 行にまとめる ## 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-0a477b6d`（元 LP の URL から採番） - **元 LP**: https://www.misterdonut.jp/m_menu/new/260109_godiva/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。