--- version: alpha name: Festive Pop Character Collab Ice Cream LP description: 赤の集中線背景と黄色の看板風ラベルで祭りのような高揚感を出した季節限定スイーツの告知 LP。後半は黄色のダイヤ柄背景に切り替え、箱入り商品を個数違いで並べて大きな価格表示で見せる。 colors: primary: '#E83E47' secondary: '#016DBB' background: '#F5AE02' background-alt: '#FAD77A' surface: '#FEFDFE' dark-section: '#B70005' accent-1: '#FDF202' cta: '#1E3A8A' on-cta: '#EFFEFF' text: '#712A02' accent-2: '#E8559A' accent-3: '#1E9A6A' marker: '#E60112' on-dark: '#FDFCFA' primary-accessible: '#D21923' accent-2-accessible: '#DD1E78' accent-3-accessible: '#26C386' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.03em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 900 lineHeight: 1.1 headline-sm: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' sign-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 70px burst-badge: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px size-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px price-display: textColor: '{colors.text}' typography: '{typography.accent}' height: 50px pill-banner: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px count-label: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 72px speech-bubble: backgroundColor: '{colors.cta}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px section-title-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 110px --- # DESIGN.md — 赤×黄の集中線ポップなお正月スイーツ LP（Festive Pop Character Collab Ice Cream LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、力強い・インパクト、かわいい、情報量多め・訴求型 - **キーワード**: 集中線・紙吹雪・看板ラベル・太字価格・季節限定・キャラクターコラボ - **地の質感**: 放射状の集中線、紙吹雪、星、雪の結晶、ダイヤ柄の装飾が全面にあるにぎやかな質感 - **形**: 左右にノッチのある看板型ラベル、ギザギザのバッジ、ピル型の価格帯 - **温度感**: とても暖かい。赤と黄が主役で、青を締め色に使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E83E47` | メインの赤い地（集中線背景） | | 画素の実測 | | `secondary` | `#016DBB` | 見出し帯・コピーライト帯の青 | | 画素の実測 | | `background` | `#F5AE02` | 後半の黄色ダイヤ柄の地 | | 画素の実測 | | `background-alt` | `#FAD77A` | モバイル注文帯の淡い黄色 | | 画素の実測 | | `surface` | `#FEFDFE` | 白いピル型の案内帯・価格ボックス | | 画素の実測 | | `dark-section` | `#B70005` | サンデー紹介の濃い赤の地 | | 画素の実測 | | `accent-1` | `#FDF202` | 看板ラベルの黄色 | | 画素の実測 | | `cta` | `#1E3A8A` | モバイル注文ボタンの紺 | | 推定 | | `on-cta` | `#EFFEFF` | ボタン上の白文字 | | 画素の実測 | | `text` | `#712A02` | 価格・見出しのこげ茶文字 | | 画素の実測 | | `accent-2` | `#E8559A` | ピンクの見出し・ラベル | | 推定 | | `accent-3` | `#1E9A6A` | 緑のラベル・バッジ | | 推定 | | `marker` | `#E60112` | おトク・数量限定を示す赤バッジ | | 画素の実測 | | `on-dark` | `#FDFCFA` | 赤地・青地上の白文字 | | 画素の主要色に補正 | | `primary-accessible` | `#D21923` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#DD1E78` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#26C386` | AA を満たす補正値（計算） | | 計算 | - 前半は赤の集中線、後半は黄色のダイヤ柄で、セクションの地色をはっきり変える - 商品名は黄色の看板ラベルに赤や黒の太字で載せる - 赤地では価格を白い太字にし、黄地では価格をこげ茶にする - サイズのバッジ（丸）と個数ラベルは、商品ごとに橙・青・ピンク・緑で色を変える - 注意書きと見出し帯は青で締め、赤と黄の派手さを引き締める - おトク・限定の訴求には赤いギザギザバッジを使う - `sign-label` は文字 `#E83E47` × 背景 `#FDF202` のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D21923`、4.58:1）を使う。 - `size-badge` は文字 `#FDFCFA` × 背景 `#E8559A` のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DD1E78`、4.52:1）を使う。 - `pill-banner` は文字 `#E83E47` × 背景 `#FEFDFE` のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D21923`、4.56:1）を使う。 - `count-label` は文字 `#712A02` × 背景 `#1E9A6A` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#26C386`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し（ポップな題字） | 丸ゴシック | Dela Gothic One | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | 縁取りつきのキャッチ見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 24px | 1.35 | 0.03em | | `headline-md` | 看板ラベル内の商品名 | ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.02em | | `accent` | 大きな価格数字 | 欧文サンセリフ | Montserrat | 900 | 34px | 1.1 | 0.0em | | `headline-sm` | ピル型帯の案内文・個数ラベル | 丸ゴシック | Zen Maru Gothic | 900 | 16px | 1.4 | 0.03em | | `label-button` | ボタン文字・サイズバッジ | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.02em | | `note` | ※の注意書き | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | - 見出しは超太字にして、白や黒の縁取りや影をつける - 大見出しの一部の文字は、上下にずらしたり大きくしたりして弾ませる - 価格は「¥」と数字を同じ大きさの超太字で大きく見せる - 本文の長文は使わない。注意書きだけを小さな通常の太さで書く - 商品名は 2〜3 行で中央揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品画像と看板ラベルを左右に重ねてずらす - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 商品写真は画面幅いっぱい近くまで大きく置く - 看板ラベルは写真の端に重ねて配置する - 価格はサイズ違いの 2 つを横に並べる - 箱入り商品の区切りには破線の横線を使う - 注意書きは各セクションの末尾にまとめる ## Elevation & Depth - 切り抜いた商品写真には床に落ちる影をつけて浮かせる - 看板ラベルには濃い色の縁取りとオフセット影をつける - 白いピル帯は影なしのフラットにする ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き写真。トランプなどの付属品は角丸の四角に入れる - **セクション境界**: 直線で地色を切り替える。境目に看板型のタイトル帯をかぶせる - 看板ラベルは左右がノッチ状に欠けた形にする - 限定・おトクのバッジはギザギザの円か星形にする - サイズ表示は塗りの正円バッジにする - 案内帯とボタンは完全なピル型にする ## Components - **看板型商品名ラベル**（`sign-label`）: 黄色地に赤い縁取り。左右がノッチ状に欠けた形で、中に商品名を 2〜3 行で入れる - **ギザギザ限定バッジ**（`burst-badge`）: ギザギザの円形に、数量限定やおトク量を 2 行で入れる - **サイズ丸バッジ**（`size-badge`）: 小さな正円にサイズ名を入れ、価格の左に添える - **大価格表示**（`price-display`）: サイズバッジと超太字の価格を 2 つ横に並べる - **白ピル案内帯**（`pill-banner`）: 白いピル型の帯。選び方の案内を太字で入れる - **モバイル注文ボタン**（`button-primary`）: 紺のピル型ボタン。左にスマホのアイコン、右に矢印をつける - **個数ラベル**（`count-label`）: 色付きの角丸枠に、白地で「〇個の値段で△個入」と入れる - **紺の吹き出し**（`speech-bubble`）: 紺の吹き出しに、デザインのポイントを白と黄の文字で書く - **青の見出し帯**（`section-title-band`）: 青の全幅帯に、縁取りつきの白文字キャッチを 2 行で入れる。星を散らす ## Do's and Don'ts **Do** - 赤の地には集中線と紙吹雪を必ず重ねる - 価格は画面の中で最も大きい要素の一つとして扱う - 商品ごとにラベルとバッジの色を変えて区別する - おトク量は具体的な数字で、バッジに入れて示す - 切り抜き写真とラベルを重ね、動きを出す **Don't** - 余白の多いミニマルなレイアウトにしない - 細い明朝体や淡い色を使わない - 長い説明文の段落を入れない - 価格を小さく、または本文と同じ太さにしない - 寒色だけでセクションを組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節とコラボを一目で伝える）: 赤の集中線を背景に、縁取りつきの見出しと商品写真を寄せ集めて配置し、看板ラベルを添える 2. **見出し帯**（楽しさを訴える）: 青の全幅帯に白の太字コピーを 2 行で入れ、星を散らす 3. **主力セット紹介**（限定セットを大きく見せる）: 看板ラベルと限定バッジの下に、箱を大きく見せる写真とカップを並べ、吹き出しでポイントを添える 4. **付属品紹介**（おまけの価値を見せる）: トランプなどの付属品をタイル状に 4 列で並べ、吹き出しを添える 5. **価格**（おトク感と価格を伝える）: 斜線で挟んだ見出しにピルを重ね、2 サイズの価格を白の太字で示し、白いピル帯と注意書きを続ける 6. **サブ商品紹介**（単品商品を紹介する）: 濃い赤の地に、商品写真 2 点を左右互い違いに配置し、看板ラベルを重ね、白い価格ボックスを置く 7. **コピーライト帯**（権利表記を示す）: 青の帯に白の小さな文字で書く 8. **別シリーズ大見出し**（後半の商品群へ切り替える）: 黄色のダイヤ柄の地に、ピンクの大きな題字を置き、限定パッケージの説明を吹き出しで添える 9. **CTA**（モバイル注文へ誘導する）: 淡い黄の帯に、▼で挟んだ案内文と紺のピル型ボタンを置く 10. **個数別商品一覧**（個数ごとの価格を比べさせる）: 箱の写真、おトクバッジ、色違いの個数ラベル、2 サイズの価格を 1 セットにし、破線で区切って繰り返す 11. **注意事項**（条件を明示する）: 青の地に、白の※付きの箇条書きで並べる ## Imagery - 商品は真上から斜めに見下ろす角度で撮り、背景を抜いた切り抜きにする - アイスは色とりどりのフレーバーが見えるよう、箱に詰めた状態で撮る - 背景装飾は集中線、紙吹雪、星、雪の結晶をフラットなイラストで描く - 後半の背景は、黄色の濃淡によるダイヤ（アーガイル）柄にする - 季節感を出すため、雪だるまや手袋などの小さなイラストを添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に 480〜600px 程度の幅で SP と同じレイアウトを置き、左右には背景柄を延長する - 価格や個数別の一覧は、PC で 2 カラムのグリッドにしてもよい - 集中線の背景は全幅に広げ、中心を見出しに合わせる - 文字サイズは PC で 1.2 倍程度に拡大する ## 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-7f6c92d6`（元 LP の URL から採番） - **元 LP**: https://www.31ice.co.jp/contents/topics/251227_02.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。