--- version: alpha name: Retro Candy Pink Collab Sweets LP description: ピンクの花柄地に苺レッドのピル型見出しを重ねた、レトロでかわいい期間限定スイーツコラボの縦長 LP。商品写真を大きく切り抜き、点線区切りの本文と大きな焦げ茶の価格で構成する。 colors: primary: '#CD1A35' dark-section: '#CD1A35' background: '#EE8EB3' background-alt: '#E55392' tint-1: '#F4B1CC' surface: '#FFF9D9' text: '#6F1C23' on-primary: '#FDFBF9' cta: '#FEFADA' on-cta: '#A9171C' accent-1: '#F04E99' accent-2: '#743BBC' line: '#862D41' accent-3: '#6A2430' background-alt-accessible: '#DC2172' accent-1-accessible: '#DF1371' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 700 lineHeight: 2.1 letterSpacing: 0.06em accent: fontFamily: Montserrat fontSize: 36px fontWeight: 800 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 6px md: 14px 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}' pill-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 56px button-detail: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px outline-pill-note: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px flower-badge: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 160px price-block: textColor: '{colors.text}' typography: '{typography.accent}' height: 70px speech-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px notice-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-primary}' typography: '{typography.display}' rounded: '{rounded.md}' height: 860px number-badge: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 40px link-bar: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px --- # DESIGN.md — ピンク×苺レッドのレトロ菓子コラボ LP（Retro Candy Pink Collab Sweets LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、ポップ・元気、レトロ、情報量多め・訴求型 - **キーワード**: 花形シルエット・苺レッド・ミルキーピンク・レトロキャラクター・切り抜き商品写真・点線罫 - **地の質感**: ピンク地に細かな紙のようなノイズ質感。大きな花形モチーフを淡い色で背景に敷く - **形**: 花形・雲形の波打つ輪郭、ピル型見出し、角丸カード - **温度感**: 暖かく甘い。赤とピンクの暖色で統一 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CD1A35` | ピル見出し・ブランドの苺レッド | 6% | 画素の主要色に補正 | | `dark-section` | `#CD1A35` | 新作フレーバー紹介の赤地 | 11% | 画素の主要色に補正 | | `background` | `#EE8EB3` | メインのピンク地 | 45% | 画素の実測 | | `background-alt` | `#E55392` | 予告ボックス内の濃いピンク | 5% | 画素の実測 | | `tint-1` | `#F4B1CC` | 背景の花形モチーフ・薄ピンク面 | 8% | 画素の実測 | | `surface` | `#FFF9D9` | クリーム色の吹き出し・ボタン面 | 6% | 画素の実測 | | `text` | `#6F1C23` | 本文・価格の焦げ茶 | 3% | 画素の実測 | | `on-primary` | `#FDFBF9` | 赤見出し上の白文字 | 1% | 画素の実測 | | `cta` | `#FEFADA` | 詳細ボタン・リンクの淡クリーム | 0% | 画素の実測 | | `on-cta` | `#A9171C` | ボタン上の赤文字 | 0% | 画素の実測 | | `accent-1` | `#F04E99` | フッターリンクのビビッドピンク | 2% | 画素の実測 | | `accent-2` | `#743BBC` | アプリ導線の紫 | 1% | 画素の実測 | | `line` | `#862D41` | 本文の点線罫・枠線 | 0% | 画素の実測 | | `accent-3` | `#6A2430` | 番号バッジの焦げ茶 | 0% | 推定 | | `background-alt-accessible` | `#DC2172` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#DF1371` | AA を満たす補正値（計算） | | 計算 | - 地はピンク一色で通し、新作紹介だけ苺レッドの地に切り替える - セクション見出しは必ず赤地＋白文字のピル型 - 本文と価格は黒ではなく焦げ茶を使う - クリーム色は吹き出し・補足カード・ボタンに限定 - 濃いピンクは期間限定の予告ボックスのみ - 紫・ビビッドピンクは末尾の外部導線のみ - `flower-badge` は文字 `#FDFBF9` × 背景 `#E55392` のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#DC2172`、4.52:1）を使う。 - `notice-box` は文字 `#FDFBF9` × 背景 `#E55392` のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#DC2172`、4.52:1）を使う。 - `link-bar` は文字 `#FDFBF9` × 背景 `#F04E99` のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DF1371`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 限定特典の大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 36px | 1.2 | 0.02em | | `headline-lg` | ピル型セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.04em | | `headline-sm` | 吹き出し・注目ラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.4 | 0.02em | | `body-md` | 点線区切りの商品説明 | 丸ゴシック | Zen Maru Gothic | 700 | 13px | 2.1 | 0.06em | | `accent` | 大きな価格表示 | 欧文サンセリフ | Montserrat | 800 | 36px | 1.1 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | 枠付きボタン・リンク | 丸ゴシック | M PLUS Rounded 1c | 700 | 12px | 1.2 | 0.04em | - 見出しは太い丸ゴシックで統一 - 価格は円記号ごと特大の極太で、サイズ名を上に小さく添える - 本文は太めで行間を広く取り、1行ごとに点線で区切る - 装飾見出しは白フチ＋赤や影付きでポップに - 欧文の小見出しはイタリック丸ゴシックで和文の上に添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - 商品写真は画面幅いっぱい近くに大きく配置 - 見出し→写真→説明→価格→選択案内の順を全商品で繰り返す - 写真の周囲に吹き出し注記を点線矢印で付ける - 注釈は価格ブロックの直後にまとめる ## Elevation & Depth - 写真の切り抜きにうっすら落ち影 - カードや吹き出しは影なしのフラット - 装飾文字は白フチと濃色シャドウで立体感を出す ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 背景を抜いた切り抜き写真。丸いキャラクター画像は円形切り抜き - **セクション境界**: 雲形・花形の波状カーブ、FVの下端はストライプ帯 - 花形を見出し台座と背景モチーフに使う - 見出しはピル型の赤 - 番号は焦げ茶の円バッジ - 吹き出しにはしっぽを付ける ## Components - **ピル型見出し**（`pill-heading`）: 赤地に白い太文字で商品名を1〜2行で入れる横長のピル - **詳細ボタン**（`button-detail`）: クリーム地に赤文字、右に花アイコン - **選択案内ピル**（`outline-pill-note`）: 焦げ茶の細線で囲んだ透明ピル。選び方の案内文を入れる - **花形タイトル台座**（`flower-badge`）: ピンクの花形に欧文の小見出しと和文フレーバー名 - **価格ブロック**（`price-block`）: サイズ名を小さく上に、価格を特大で横並び - **クリーム吹き出しカード**（`speech-card`）: おまけ・付属品をしっぽ付きのクリーム色カードで説明する - **期間限定予告ボックス**（`notice-box`）: 濃ピンクの枠付きボックス。角にリボン型ラベル、日付帯、白フチの大見出し - **番号バッジ**（`number-badge`）: 焦げ茶の円にアルファベットを白で - **フッターリンクバー**（`link-bar`）: ビビッドピンクの角丸帯に白文字、右端に矢印 ## Do's and Don'ts **Do** - 全商品セクションの並びを揃える - 背景に大きな淡い花形を散らす - 小さなキラキラを余白に配置する - 本文は点線罫で1行ずつ区切る - 価格は焦げ茶の特大数字で強調する **Don't** - 黒文字や寒色を本文に使わない - 角張った四角い見出しにしない - 写真を四角いまま枠に入れない - ピンク地に細い文字を置かない - 見出しを赤以外の色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボと期間を一目で伝える）: ピンク地中央にクリームの花形、ロゴ、キャラクター。周囲に商品写真、右上に日付バッジと斜め帯 2. **新作フレーバー**（限定フレーバーの魅力訴求）: 苺レッド地に大きなスクープ写真、花形のタイトル台座、斜めの白コピー 3. **詳細ボタン**（フレーバー詳細への導線）: クリームの角丸ボタンを赤地の上に配置 4. **商品紹介1**（カップ商品の紹介）: 雲形カーブでピンク地へ。ピル見出し、番号付き写真、点線本文、価格 5. **期間限定特典の予告**（短期間の特典で来店を促す）: 濃ピンクのボックスにリボン型ラベル、日付帯、白フチの大見出し、アレルギー表 6. **商品紹介2〜4**（その他のコラボ商品を順に紹介）: 同じ型を繰り返し、付属品はクリーム吹き出しで補足 7. **セット商品**（まとめ買いとおまけの訴求）: 箱の写真を大きく、入数の円バッジ、付属ポーチの吹き出しカード 8. **注意事項**（法的注記と販売条件）: 横線で区切り、重要な注記は薄ピンク帯でハイライト 9. **外部導線**（一覧・店舗検索・アプリ誘導）: 白地にピンクのリンクバー3本、下にピンクと紫の2分割アプリバナー ## Imagery - 商品は白背景で撮って切り抜き、やや上から撮って立体感を出す - レトロなキャラクターイラストを大きく使う - 背景は花形と雲形のフラット図形で、写真は使わない - 白い十字キラキラと点線の矢印で注記をつなぐ - 苺やケーキの小物写真を浮かせてにぎやかにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP と同じ 1 カラムを中央 480〜600px 幅で見せ、左右をピンクの柄地で埋める - 商品の写真と説明は PC で 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-1c66625b`（元 LP の URL から採番） - **元 LP**: https://www.br31.jp/contents/topics/260901_02.html/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。