--- version: alpha name: Sparkling Citrus Orange Frozen Dessert LP description: ページ全体を濃いオレンジから赤のグラデーションと細かい光の粒で埋めた、季節限定フローズンスイーツの告知 LP。白い明朝体の見出しに赤橙の縁取りとグローをかけ、シズル感のある商品写真を中央に大きく置く。白い帯で発売日を見せ、最後に赤いボタンで店舗検索へ誘導する。 colors: primary: '#ED7D12' secondary: '#E34B14' background: '#FDFDFD' background-alt: '#E0B195' cta: '#E33A0C' on-cta: '#F9F5EE' surface: '#FEFDFC' text: '#BE4326' on-dark: '#F9F5EE' accent-1: '#F5C060' accent-2: '#EAAF40' text-muted: '#EFD5C0' tint-1: '#FACCB4' cta-accessible: '#D2360B' secondary-accessible: '#C94212' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 800 lineHeight: 1.45 letterSpacing: 0.04em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 800 lineHeight: 1.1 letterSpacing: -0.02em label-button: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 999px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px release-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 48px glow-headline: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 160px line-subheading: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 32px numbered-point: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 180px price-tag: typography: '{typography.accent}' height: 60px note-block: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 50px --- # DESIGN.md — きらめく橙と赤の柑橘フローズンスイーツ LP（Sparkling Citrus Orange Frozen Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 力強い・インパクト、上品・高級、ポップ・元気 - **キーワード**: 柑橘オレンジ・光の粒・シズル感・明朝の光る見出し・季節限定・暖色一色 - **地の質感**: ラメのような細かい光の粒と、シロップのようなツヤのある波形グラデーション - **形**: 四角い帯と波形の境界。ボタンは角の小さい長方形と、ピル型のサブボタン - **温度感**: とても暖かい。赤〜橙〜ピーチの暖色だけでまとめる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#ED7D12` | メインの地色オレンジ | 30% | 画素の実測 | | `secondary` | `#E34B14` | 深い赤橙のグラデーション地 | 20% | 画素の実測 | | `background` | `#FDFDFD` | 発売日帯の白地 | 5% | 画素の実測 | | `background-alt` | `#E0B195` | 商品写真下のピーチ色の台 | 7% | 画素の主要色に補正 | | `cta` | `#E33A0C` | 店舗検索ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#F9F5EE` | ボタン上の白文字 | 1% | 画素の主要色に補正 | | `surface` | `#FEFDFC` | サブボタンの白地 | 1% | 画素の実測 | | `text` | `#BE4326` | 発売日・サブボタン文字の赤 | 1% | 画素の実測 | | `on-dark` | `#F9F5EE` | オレンジ地上の白い本文 | 3% | 画素の主要色に補正 | | `accent-1` | `#F5C060` | 見出しの強調語の金色 | 0% | 推定 | | `accent-2` | `#EAAF40` | 波形境界の金色ハイライト | 1% | 画素の実測 | | `text-muted` | `#EFD5C0` | 注釈の小さい白文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#FACCB4` | フッター付近の淡いピーチ | 6% | 画素の実測 | | `cta-accessible` | `#D2360B` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#C94212` | AA を満たす補正値（計算） | | 計算 | - 地色はほぼすべてオレンジ〜赤のグラデーション。白い面は発売日の帯とサブボタンだけにする - グラデーションは上が濃い赤、中央が明るいオレンジになるように流す - 見出しは白文字に赤橙の縁取りと外側グローを付ける - 見出しの強調したい 1 文字だけを金色にする - CTA は地色より一段濃い赤にし、薄い金色の枠で囲う - 寒色やグレーは使わない - `button-primary` は文字 `#F9F5EE` × 背景 `#E33A0C` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D2360B`、4.52:1）を使う。 - `numbered-point` は文字 `#F9F5EE` × 背景 `#E34B14` のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#C94212`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の商品名ロゴ（太い白ゴシック） | ゴシック | Dela Gothic One | 900 | 34px | 1.2 | 0.0em | | `headline-lg` | セクションの大見出し（光る明朝） | 明朝 | Shippori Mincho | 800 | 34px | 1.45 | 0.04em | | `headline-md` | ポイント見出しと CTA 前の誘導コピー | 明朝 | Shippori Mincho | 800 | 24px | 1.4 | 0.02em | | `headline-sm` | 罫線で挟んだ小見出し、発売日の帯 | 明朝 | Noto Serif JP | 700 | 19px | 1.4 | 0.04em | | `body-md` | 説明の本文（白い明朝） | 明朝 | Noto Serif JP | 500 | 12px | 1.8 | 0.02em | | `accent` | 価格の数字 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.1 | -0.02em | | `label-button` | ボタンのラベル | 明朝 | Noto Serif JP | 600 | 17px | 1.3 | 0.04em | | `note` | 注釈（※から始まる小さい文字） | ゴシック | Noto Sans JP | 400 | 7px | 1.5 | 0.0em | - 見出しも本文も明朝体を基本にして、上品なシズル感を出す - 大見出しは中央揃えで 2〜3 行に改行し、白文字に赤い縁取りとグローを付ける - 本文は左揃えで短い行で改行し、写真と横並びにする - ポイント見出しは「数字+ピリオド」で始める - 注釈は 7px 前後のゴシックで、最下部か FV の下にまとめる - 価格は太い欧文数字で、税込価格をかっこで添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。説明は本文と写真の 2 分割 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - セクションごとに背景画像を切り替え、余白は背景の上で取る - 大見出しは中央、本文ブロックは左に寄せて右に果物の写真を置く - ポイントは商品写真を左に大きく置き、右側に見出しと本文を縦に 2 つ積む - 発売日は全幅の白い帯で、セクションの区切りを兼ねる - CTA は画面幅の 90% ほどで、商品写真に重ねて配置する ## Elevation & Depth - 見出しの文字に赤橙の外側グローを付けて、浮いて見せる - 商品写真は切り抜きにし、下に柔らかい影を落とす - CTA ボタンはベタ塗りで、薄い金色の枠を付ける - カードの影はほぼ使わない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品と果物は背景を切り抜いて配置し、断面を見せる - **セクション境界**: シロップが滴るような金色の波形の境界と、まっすぐな白い帯 - 主 CTA は角の小さい長方形にする - サブボタンは白いピル型にし、赤い枠線を付ける - 矢印は丸の中に置いたアイコンにする - 小見出しは左右の細い横線で挟む ## Components - **店舗検索ボタン**（`button-primary`）: 赤地に白い明朝のラベル。左に丸い矢印アイコン、右に店舗のアイコン。薄い金色の枠で囲う - **情報リンクのピルボタン**（`button-secondary`）: 白いピル型に赤い枠線と赤い文字。左に赤い丸の矢印 - **発売日の帯**（`release-band`）: 全幅の白い帯に、赤い明朝で日付を大きく書く - **光る明朝の大見出し**（`glow-headline`）: 白文字に赤い縁取りとグロー。強調語 1 文字だけ金色にする - **罫線で挟んだ小見出し**（`line-subheading`）: 中央の明朝の文字を、左右の細い白線で挟む - **番号付きポイント**（`numbered-point`）: 「1.」で始まる白い明朝の見出しと、その下の金色の線。後に白い本文が続く - **価格表示**（`price-tag`）: 本体価格を大きな欧文数字で書き、税込価格をかっこで添える。白地に黒い文字 - **注釈ブロック**（`note-block`）: ※から始まる小さい文字を、複数行まとめて置く ## Do's and Don'ts **Do** - 背景には光の粒の入ったオレンジ〜赤のグラデーションを敷き詰める - 商品の切り抜き写真と果物の断面を、各セクションで大きく見せる - 見出しは明朝体で白く光らせる - セクションの境界にシロップのような金色の波と、垂れるしずくを入れる - 価格と発売日は FV のすぐ近くに置く **Don't** - 白い背景やグレーの背景を広く使わない - 見出しに丸ゴシックやポップな手書き体を使わない - 寒色のアクセントを入れない - 影の強いカード UI を並べない - 本文を長い段落にしない（短く改行する） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品名と価格、商品の姿を一目で伝える）: 上部に白い太字の商品名。中央に商品の切り抜き写真、右に果物。縦書きの短いコピーを添え、右下に価格、左下に周年ロゴと注釈 2. **発売日告知**（発売開始日を伝える）: 全幅の白い帯に、赤い明朝で日付を書く 3. **新登場の訴求**（このシリーズで初めての味であることを打ち出す）: 光の粒の背景に、光る明朝の大見出しを中央で 3 行。強調語 1 文字は金色 4. **素材の説明**（使っている果実の品種の特徴を説明する）: 罫線で挟んだ小見出しの下に、左の白い本文と右の果物断面の写真。下を金色の波形で区切る 5. **おいしさのポイント**（おいしさの理由を 2 つ示す）: しずくの演出の下に大見出し。商品写真を左に大きく置き、右に番号付きの見出しと本文を 2 つ 6. **CTA**（店舗への来店を促す）: 光の粒の背景に誘導コピーを 2 行、その下に商品写真。写真に重ねて赤い主ボタンと白いピルボタン 7. **注釈**（税率や取扱店舗の注意を書く）: 最下部に小さい白文字を左揃えで並べる ## Imagery - 商品は透明なカップの側面から撮り、層と果肉が見えるようにして切り抜く - 果物は断面を見せ、ツヤのある赤とオレンジを強調する - 背景はラメのような細かいボケの光の粒と、暖色のグラデーション - 果汁のしぶきや、果皮をらせん状にむいたものを添えて動きを出す - 金色のシロップの波と、垂れるしずくを装飾に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はおよそ 960px 幅の中央寄せで、背景のグラデーションを全幅に広げる - PC の FV は商品名と価格を写真の下に横 1 列で並べ、周年ロゴは左上に置く - ポイントは PC では商品写真を中央に置き、2 つの説明を左右に振り分ける - CTA セクションは PC では写真を左、コピーを右にした 2 分割にする - 注釈は 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-28f36a04`（元 LP の URL から採番） - **元 LP**: https://www.ministop.co.jp/syohin/sweets/halohalo/koori-bloodorange/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。