--- version: alpha name: Pop Lemon Summer Dessert LP description: レモンイエローの地に白い爆発型の吹き出しと斜めストライプを重ねた夏向けデザートの告知 LP。焦茶の太字と斜体のオレンジ見出しに、水色・赤の星や丸を散らして、炭酸がはじける感じを出している。 colors: primary: '#FCED8C' background: '#FFFFFF' secondary: '#FEBE02' cta: '#FDC103' on-cta: '#FFFFFF' text: '#3A1E14' accent-1: '#F4B311' accent-2: '#3BB4E8' accent-3: '#C94430' tint-1: '#FEDD02' background-alt: '#D5C690' text-muted: '#5A4A40' surface: '#FFFCE4' cta-accessible: '#947101' secondary-accessible: '#946F01' accent-1-accessible: '#986E07' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em accent: fontFamily: Fredoka fontSize: 22px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em body-lg: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.75 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 rounded: sm: 8px md: 16px lg: 999px full: 999px spacing: unit: 8px card: 24px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 48px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px release-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 44px burst-heading: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 180px point-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.full}' height: 300px point-label: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 64px price-tag: textColor: '{colors.text}' typography: '{typography.display}' height: 110px confetti: textColor: '{colors.accent-2}' height: 30px --- # DESIGN.md — レモン黄×白のはじけるポップなデザート LP（Pop Lemon Summer Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、清潔・爽やか、かわいい - **キーワード**: レモンイエロー・はじける吹き出し・斜めストライプ・紙吹雪の星と丸・シズル写真 - **地の質感**: フラットな黄色の面に、白い雲形・爆発形と黄色の斜線ストライプを重ねる。写真は水しぶきつきの切り抜き。 - **形**: ギザギザの爆発形、もこもこの雲形、レモン形の吹き出し、丸いピル型ボタン。 - **温度感**: 明るく暖かい夏の色に、白と水色で涼しさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FCED8C` | ブランドを代表するレモンイエローの地 | 30% | 画素の実測 | | `background` | `#FFFFFF` | 白い吹き出しとセクションの地 | 29% | 画素の実測 | | `secondary` | `#FEBE02` | 発売日の帯とボタンの濃い黄色 | 6% | 画素の実測 | | `cta` | `#FDC103` | 店舗検索ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#3A1E14` | 商品名・本文・価格の焦茶 | 2% | 推定 | | `accent-1` | `#F4B311` | 斜体見出しのオレンジ | 2% | 画素の実測 | | `accent-2` | `#3BB4E8` | 強調の文字と星の水色 | 1% | 推定 | | `accent-3` | `#C94430` | 強調の文字・ポイントラベル・星の赤 | 1% | 画素の実測 | | `tint-1` | `#FEDD02` | ストライプと淡い黄色の面 | 4% | 画素の実測 | | `background-alt` | `#D5C690` | フッターの木目調ベージュ | 4% | 画素の主要色に補正 | | `text-muted` | `#5A4A40` | 注釈の小さな文字 | 0% | 推定 | | `surface` | `#FFFCE4` | サブボタンの淡いクリーム色 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#947101` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#946F01` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#986E07` | AA を満たす補正値（計算） | | 計算 | - 地はレモンイエローと白を交互に置き、境目は雲形やギザギザにする - 本文・価格・商品名は焦茶で読みやすくする。黒は使わない - 見出しは白縁取りのオレンジ斜体にし、キーワード 1 語だけを水色か赤にする - 星や丸の紙吹雪は水色・赤・黄の 3 色だけで、縁取り線の形で散らす - CTA は濃い黄色に白文字と白い丸矢印。サブボタンはクリーム地に黄色の枠 - 斜めストライプは濃い黄色と淡い黄色の 2 色で、吹き出しの縁にだけ使う - `button-primary` は文字 `#FFFFFF` × 背景 `#FDC103` のコントラスト比が 1.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#947101`、4.54:1）を使う。 - `release-band` は文字 `#FFFFFF` × 背景 `#FEBE02` のコントラスト比が 1.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#946F01`、4.63:1）を使う。 - `burst-heading` は文字 `#F4B311` × 背景 `#FFFFFF` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#986E07`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の商品名 | ゴシック | Dela Gothic One | 900 | 34px | 1.2 | 0.02em | | `headline-lg` | 斜体のキャッチ見出し（白縁取り） | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.5 | 0.04em | | `headline-md` | セクション見出し（爆発型の吹き出しの中） | 丸ゴシック | M PLUS Rounded 1c | 900 | 24px | 1.4 | 0.03em | | `accent` | ポイント番号の欧文ラベルと数字 | 欧文サンセリフ | Fredoka | 700 | 22px | 1.1 | 0.02em | | `body-lg` | 吹き出し内の中央揃えの本文 | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.75 | 0.05em | | `headline-sm` | 発売日の帯と価格 | ゴシック | Noto Sans JP | 900 | 17px | 1.3 | 0.02em | | `label-button` | CTA ボタンのラベル | ゴシック | Noto Sans JP | 700 | 19px | 1.3 | 0.05em | | `note` | 税率や取扱いの注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | - 見出しは右上がりの斜体にし、白い太縁と薄い影をつける - キーワード 1 語だけを大きくして色を変え、リズムを出す - 本文は太い丸ゴシックの中央揃えで、1 行 10〜13 字で改行する - 価格は数字を特大、税込の小数点以下を小さくする - 注釈は左揃えで小さく、行頭に米印をつける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と吹き出しを左右に互い違いに重ねる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算） - FV は商品写真を全幅で見せ、商品名を上、価格を右下に置く - FV の直下に全幅の発売日帯を置く - ポイントは吹き出しと切り抜き写真を交互に重ねて、段差のある構図にする - 紙吹雪は見出しの周りと余白にだけ散らす - 最後に写真の上へ CTA を 2 段で重ね、その下に注釈を置く ## Elevation & Depth - 影はほとんど使わない。立体感は白縁取りとストライプで出す - 見出し文字に薄いオレンジの落ち影をつける - CTA は外側に一回り淡い黄色の枠をつけて、浮いて見せる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 商品とレモンを背景から切り抜き、水しぶきを添えて斜めに配置する - **セクション境界**: 雲形やギザギザの爆発形で白と黄色を切り替える - 吹き出しはレモン形や大きな円で、縁の一部に斜めストライプを添える - 見出しの台座はギザギザの爆発形 - ボタンはすべてピル型 - 直線の四角いカードは使わない ## Components - **店舗検索 CTA**（`button-primary`）: 濃い黄色のピル型に白文字。左に白い丸矢印、右に店舗アイコン。淡い黄色の外枠つき。 - **情報リンクボタン**（`button-secondary`）: クリーム地に黄色の枠のピル型。焦茶の文字で、左に黄色い丸矢印。 - **発売日帯**（`release-band`）: FV の下の全幅の濃い黄色の帯。白い太字で日付を中央に置く。 - **爆発型見出し**（`burst-heading`）: 白いギザギザ形の中に、オレンジ斜体の 2 行見出し。周りに斜めストライプ。 - **ポイント吹き出し**（`point-bubble`）: 白いレモン形の吹き出し。上に欧文ラベルと大きな数字を置き、中に中央揃えの本文。 - **ポイント番号**（`point-label`）: 赤または水色の欧文ラベルと大きな数字。白縁取りで、葉形の台座にのせる。 - **価格表示**（`price-tag`）: 焦茶の特大数字に白縁取り。税込価格は丸括弧でくくり、小数点以下を小さくする。 - **紙吹雪装飾**（`confetti`）: 水色・赤・黄色の星、丸、輪を線で描き、見出しの周りに散らす。 ## Do's and Don'ts **Do** - 黄色と白の 2 色を地の主役にする - 見出しは斜体＋白縁取りで勢いを出す - 商品写真は大きく切り抜き、レモンと水しぶきを添える - セクションの境目は雲形かギザギザにする - 紙吹雪は 3 色に絞り、余白に散らす **Don't** - 黒や寒色の暗い面を使わない - 四角いカードや直線の区切り線を多用しない - 本文を長文にしない。1 ポイント 4〜6 行まで - ストライプを全面に敷かない - 細い明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と価格を一目で伝える）: 黄色背景に商品とレモンの写真。上に太字の商品名と星形バッジ、右下に価格、左下に周年ロゴ。 2. **発売日告知**（発売日を伝える）: 全幅の濃い黄色の帯に白い太字。 3. **キャッチコピー**（味の魅力を短く伝える）: 白地に 2 行の斜体見出し。キーワードは水色と赤で大きくし、紙吹雪で囲む。 4. **特長の見出し**（ポイント紹介に入る）: 黄色地に雲形の境目。白い爆発形の中にオレンジの斜体見出し。 5. **ポイント 1**（素材のこだわりを伝える）: 番号つきの白い吹き出しを右に置き、左下に斜めに傾けた商品写真を重ねる。 6. **ポイント 2**（味の組み合わせを伝える）: 吹き出しを左に置き、右側にストライプと紙吹雪を添える。 7. **来店の呼びかけ**（購入への行動を促す）: 白地にギザギザの境目。斜体のオレンジ見出しと紙吹雪。 8. **CTA**（店舗検索と詳細情報へ誘導する）: 木目テーブル上の商品写真に、黄色の主ボタンとクリーム色のサブボタンを重ねる。 9. **注釈**（税率や取扱いの条件を示す）: ベージュ地に小さな焦茶の文字で、米印つきの箇条書き。 ## Imagery - 商品は明るい自然光で撮り、白背景から切り抜く。結露やシャーベットの質感を見せる - 丸ごとのレモンと半分に切ったレモンを添え、手前をぼかす - 白い水しぶきを合成して、冷たさと爽快感を出す - FV は黄色の背景に金の額縁をぼかして入れ、木のテーブルにのせる - 装飾の星や丸は線画のフラットな図形にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 960px の固定幅を置き、SP と同じ黄色の世界観を保つ - PC の FV は写真を横長にし、商品名を左下、価格を右に置く - PC ではポイント 1 と 2 の吹き出しを横に並べ、右に商品写真を置く - 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-34214d9d`（元 LP の URL から採番） - **元 LP**: https://www.ministop.co.jp/syohin/sweets/halohalo/pachipachi-lemonsquash/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。