--- version: alpha name: Strawberry Red Gradient Frozen Dessert LP description: 濃い苺赤から淡いピンクへ縦にグラデーションする地に、白抜きの苺シルエットを散らした季節限定の冷菓 LP。大きな赤い円の中にポイントを入れ、欧文スクリプトの番号とクリーム色の小見出しで甘くシズル感のある見せ方にしている。 colors: primary: '#CC1315' secondary: '#D54239' background-alt: '#EE978D' tint-1: '#F9C8C3' background: '#FDFDFD' dark-section: '#C81823' on-primary: '#FCFAF5' accent-1: '#FFE9A6' cta: '#CA0615' on-cta: '#FCFAF5' marker: '#FDEC8B' text: '#A3101A' accent-2: '#F2F9FC' text-muted: '#772E28' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.08em accent: fontFamily: Great Vibes fontSize: 40px fontWeight: 400 lineHeight: 1.0 headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 24px 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: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px button-pill-small: backgroundColor: '{colors.marker}' textColor: '{colors.dark-section}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px point-circle: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 360px script-heading: textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 70px badge-round: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px date-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 56px note-list: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 200px --- # DESIGN.md — 苺赤グラデの季節限定氷スイーツ LP（Strawberry Red Gradient Frozen Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト - **キーワード**: 苺赤・縦グラデーション・円形パネル・シズル写真・スクリプト番号・季節限定 - **地の質感**: ベタ塗りの赤とグラデーションの上に、半透明の白い苺の線画を壁紙のように散らす - **形**: 大きな正円や半円のパネル、ミルクが垂れる形の曲線、角丸のボタン - **温度感**: 暖色中心。ひんやり感はアイスブルーの斜めの帯で少しだけ足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CC1315` | ブランドの苺赤（FV地・円パネル） | 24% | 画素の実測 | | `secondary` | `#D54239` | 中盤の朱がかった赤グラデーション | 10% | 画素の実測 | | `background-alt` | `#EE978D` | 終盤の淡いサーモンピンク地 | 15% | 画素の実測 | | `tint-1` | `#F9C8C3` | 注釈エリアの薄ピンク地 | 8% | 画素の実測 | | `background` | `#FDFDFD` | 発売日帯・見出し帯の生成り白 | 9% | 画素の実測 | | `dark-section` | `#C81823` | 円パネル内側の深い赤 | 8% | 画素の実測 | | `on-primary` | `#FCFAF5` | 赤地の上の白文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#FFE9A6` | 小見出し・強調語のクリーム黄 | 1% | 画素の実測 | | `cta` | `#CA0615` | 店舗検索ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FCFAF5` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#FDEC8B` | サブボタンの黄色ピル・矢印丸 | 0% | 画素の実測 | | `text` | `#A3101A` | 白地上の見出し・注釈の赤茶文字 | 2% | 画素の実測 | | `accent-2` | `#F2F9FC` | ひんやり感のアイスブルー帯 | 2% | 画素の実測 | | `text-muted` | `#772E28` | ブラウン系の補助色 | 1% | 画素の主要色に補正 | - ページの上から下へ、深い苺赤→朱赤→サーモン→淡いピンクと少しずつ明るくしていく - 赤地の上の本文は白、小見出しと強調語はクリーム黄にする - 商品写真は大きな深赤の円で囲み、地のグラデーションから浮き立たせる - 白地は発売日の帯と関連商品の見出し帯だけに使い、区切りとして効かせる - 主 CTA は赤地に白文字。淡ピンク地の上に置いて目立たせる - 寒色はアイスブルーの斜めの帯 1 か所だけにして、冷たさを補う程度にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の商品名（白抜き・太字） | ゴシック | Zen Kaku Gothic New | 900 | 36px | 1.2 | 0.02em | | `headline-lg` | コンセプトのコピー（白とクリーム黄を混ぜる） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.9 | 0.08em | | `accent` | 欧文のセクション見出しとポイント番号 | 欧文スクリプト | Great Vibes | 400 | 40px | 1.0 | 0.0em | | `headline-md` | 各ポイントの小見出し（クリーム黄） | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.4 | 0.04em | | `headline-sm` | 白い帯や締めの赤文字見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.5 | 0.06em | | `body-md` | ポイントの説明文 | 丸ゴシック | Zen Maru Gothic | 500 | 14px | 2.0 | 0.1em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.08em | - 欧文スクリプトの数字を和文の小見出しより大きく置き、手書きのような装飾として見せる - 説明文は字間を広め・行間を 2.0 にし、短く改行して 4〜5 行に収める - コピーの中で強調したい語だけクリーム黄に変える - 商品名は太字のゴシックにし、難しい漢字にはルビを振る - 価格は欧文の数字を極太にして大きく、税込価格は括弧で囲む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ポイントは写真と円パネルを左右交互に重ねる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算） - ポイントの円パネルは画面の端からはみ出させ、左寄せと右寄せを交互にする - 商品写真は円パネルの反対側に重ねて置く - テキストは円の中に左揃えで入れる - CTA は中央に縦に 2 段で並べる - 関連商品のバナーは全幅で縦に積む ## Elevation & Depth - 影はほぼ使わない。写真の切り抜きに柔らかい落ち影を付ける程度 - 主 CTA は白い細枠を内側に入れた二重枠で厚みを出す - 奥行きは円パネルと散らした苺シルエットの重なりで作る ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き写真。円パネルに重ねるか、はみ出させて配置する - **セクション境界**: 大きな円弧や、ミルクが垂れる形の曲線。FV の下は直線の白い帯 - 円パネルは画面幅の 70〜80% の正円にする - サブボタンは小さな黄色のピル型で、右に三角の矢印を付ける - 主 CTA は角を少し落とした長方形に二重枠を付ける - 角張った硬い四角の箱は使わない ## Components - **店舗検索 CTA**（`button-primary`）: 赤地に白い細い内枠。左に黄色い丸矢印、右に小さなアイコンを置く - **情報リンクボタン**（`button-secondary`）: 白地に赤枠のピル型。左に赤い丸矢印を付ける - **詳しくはピル**（`button-pill-small`）: 円パネル内に置く小さな黄色のピル。右に赤い三角を付ける - **ポイント円パネル**（`point-circle`）: 深赤の大きな正円の中に、スクリプトの番号・黄色の小見出し・白の本文を入れる - **欧文スクリプト見出し**（`script-heading`）: 白い欧文の筆記体を波線ではさみ、その下に小さな和文のサブ見出しを添える - **丸バッジ**（`badge-round`）: クリーム色の円に、赤文字で素材の特長を 2〜3 行で入れる - **発売日帯**（`date-band`）: 白い全幅の帯に、赤茶の太字で発売日を入れる。数字を大きくする - **注釈リスト**（`note-list`）: 淡ピンク地に、赤茶の小さな文字で※注釈を並べる ## Do's and Don'ts **Do** - 地の色は必ず上から下へ赤→ピンクのグラデーションにする - 白い苺の線画を半透明にして背景全体に散らす - ポイントは円パネルと切り抜き写真を交互に組む - 強調はクリーム黄の文字と、欧文スクリプトで行う - シズル感のある果物の写真をフレームの外にはみ出させる **Don't** - 青や緑の面を大きく使わない（冷たさの演出は帯 1 か所まで） - 四角いカードをグリッドに並べない - 赤地の上に黒い本文を置かない - スクリプト体を本文に使わない - 影を重くしたり立体的なボタンにしたりしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品名・価格・特長を一目で伝える）: 赤地に苺のシルエットを散らし、上部に白い太字の商品名。中央にカップの切り抜き写真、右に丸バッジと縦書きのコピー、右下に大きな価格を置く 2. **発売日の告知**（いつから買えるかを伝える）: 白い全幅の帯に赤茶の太字で日付を入れる 3. **コンセプト**（商品の魅力をひと言で伝える）: 赤地の左に 3 行の白いコピー（一部はクリーム黄）。右に商品写真と、ミルクが垂れる形の白い曲線を置く 4. **ポイント見出し**（特長のパートが始まる合図）: 欧文スクリプトを波線ではさみ、和文のサブ見出しを添える。左右に苺の写真 5. **特長（3 ポイント）**（素材・クリーム・食べ方を説明する）: 深赤の円パネルを左右交互に置き、スクリプトの番号・黄色の小見出し・白の本文を入れる。写真を円に重ねる 6. **CTA**（店舗へ誘導する）: 淡ピンク地に赤文字の呼びかけ、円の中に商品写真。主 CTA とサブボタンを縦に並べる 7. **注釈**（価格や取り扱いの注意事項を示す）: 淡ピンク地に、赤茶の小さな文字で※を列挙する 8. **関連商品**（ほかの商品へ回遊させる）: 白い帯に赤い見出しを置き、その下に全幅の商品バナーを縦に積む ## Imagery - 商品は透明なカップの切り抜き写真。白いソフトクリームの渦と、赤い果肉の層を明るく写す - 生の苺は葉付きで、つやを強めて切り抜き、浮遊感が出るように配置する - カットした果実やスプーンなど、シズルを感じる小物を添える - 背景の苺は白の線画やハーフトーンにして、半透明（20〜40%）で散らす - ミルクが垂れる形の白い曲線で、なめらかさを表現する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 960px の幅で、地のグラデーションと苺の散らしは全幅に広げる - PC の FV は商品名を左下、写真を中央、価格を右に置く横長の構図にする - PC のポイントも円パネルと写真の左右交互配置を保ち、円は約 300px に縮める - PC の CTA セクションはボタンを左、商品写真を右に置く 2 カラムにする - SP では円を画面の端からはみ出させてダイナミックに見せる ## 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-c01e3dcf`（元 LP の URL から採番） - **元 LP**: https://www.ministop.co.jp/syohin/sweets/halohalo/koori-rennyuichigo2026/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。