--- version: alpha name: Pop Summer Snack Campaign LP description: 空色の夏らしいヒーローから、黄緑と濃緑のストライプ地へ切り替わる菓子のキャンペーンLP。白カードに太い縁取り、赤リボンの英字ラベルと縁取り極太見出しを重ね、元気で情報の整理されたプレゼント告知を作る。 colors: primary: '#259830' secondary: '#AFDB22' background: '#FFFFFE' background-alt: '#6CDAFF' tint-1: '#B3ECFE' tint-2: '#F4F7DB' accent-1: '#FEF102' cta: '#D40314' on-cta: '#FFFFFF' accent-2: '#1A3E9A' marker: '#E4007F' text: '#232323' on-dark: '#FFFFFF' line: '#0D832F' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: M PLUS 1p fontSize: 22px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 11px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 90px content-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 400px ribbon-heading: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px pill-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 38px nav-grid: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 75px badge-star: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px contact-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px page-top: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 50px --- # DESIGN.md — 空色×黄緑のポップな菓子キャンペーンLP（Pop Summer Snack Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 夏・ポップ・縁取り極太文字・ストライプ地・白カード・リボン見出し - **地の質感**: ドット柄や斜めストライプ、幾何学の丸・四角を散らしたフラットな地。立体感はベタの縁取りとずらし影で出す - **形**: 角丸の白カードに濃色の太い枠と下方向のずらし影。ラベルはピル型 - **温度感**: 明るく暖かく、夏らしく爽やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#259830` | メイン緑（応募方法・注意事項の地） | 16% | 画素の実測 | | `secondary` | `#AFDB22` | 黄緑（キャンペーン・対象商品の地） | 11% | 画素の実測 | | `background` | `#FFFFFE` | カード・本文の白 | 29% | 画素の実測 | | `background-alt` | `#6CDAFF` | 夏セクションの空色地 | 10% | 画素の実測 | | `tint-1` | `#B3ECFE` | 商品名ラベル・遊び方ボックスの淡い水色 | 5% | 画素の実測 | | `tint-2` | `#F4F7DB` | 仕様・宛先ラベルの淡い黄緑 | 5% | 画素の主要色に補正 | | `accent-1` | `#FEF102` | ナビ帯の黄色・強調文字 | 4% | 画素の実測 | | `cta` | `#D40314` | 英字リボン・トップへ戻るボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 赤地上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#1A3E9A` | 見出しの濃紺リボン・青文字 | 1% | 推定 | | `marker` | `#E4007F` | 本文中の強調（赤・ピンク） | 0% | 推定 | | `text` | `#232323` | 本文の濃いグレー | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | 緑地上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#0D832F` | カードの濃緑枠 | 1% | 画素の実測 | - 地はセクションごとに空色→黄緑→濃緑→黄緑→濃緑と交互に切り替える - 情報は必ず白カードに載せ、地色より濃い色の枠とずらし影をつける - 見出し上の英字ラベルは赤リボン×白文字で統一する - 本文の強調は赤か黄色。緑地では黄色、白地では赤・ピンクを使う - ナビ帯だけは鮮やかな黄色にして目立たせる - 淡い水色・淡い黄緑は小見出しのピル型ラベルに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローのメインコピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.15 | 0.0em | | `headline-lg` | セクション見出し（白文字＋赤縁取り） | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.2 | 0.0em | | `headline-md` | リード大見出し・リボン見出し | ゴシック | M PLUS 1p | 900 | 22px | 1.3 | 0.0em | | `headline-sm` | ピル型ラベル・カード内見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.02em | | `body-lg` | 中央揃えのリード文 | ゴシック | Noto Sans JP | 500 | 15px | 1.9 | 0.03em | | `body-md` | カード内本文・規約 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字リボン（大文字斜体） | 欧文サンセリフ | Montserrat | 800 | 11px | 1.0 | 0.05em | - 見出しは極太ゴシックを白抜き＋濃色縁取り＋ずらし影で立体化する - 見出しは少し斜めに傾けて動きを出してもよい - リード文は中央揃えで短く改行する - 強調語は色を変え、ひと回り大きくする - 規約は左揃えでカード内スクロールにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品画像は 2〜3 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは画面端から約 20px 内側に置く - セクション見出しは英字リボン＋和文見出しの 2 段で中央に置く - 見出しの下に中央揃えのリードを置き、その後にカードを置く - カード内はピル型ラベル→本文→画像の順で積む - ナビは 2 列×3 段のグリッドで点線区切りにする ## Elevation & Depth - カードは影をぼかさず、濃色を 4〜6px 下にずらしたベタ影にする - 宛先などの小カードは薄いぼかし影 - 見出し文字はずらし影で立体感を出す ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品やパッケージは切り抜きを少し傾けて置く。説明図は円形に切り抜く - **セクション境界**: 直線で色を切り替える。地にドット・斜めストライプ・円を散らす - ラベルはピル型 - 英字ラベルは両端を切り欠いたリボン型 - 当選告知は星形バッジ - 注意喚起は赤い吹き出し ## Components - **リボン付きセクション見出し**（`section-title`）: 赤リボンの英字ラベルの下に、白文字＋赤縁取りの極太和文見出しを置く - **ずらし影の白カード**（`content-card`）: 白地に濃色の太枠と下方向のベタ影をつけたカード - **カード上のリボン見出し**（`ribbon-heading`）: カードの上辺にかかる紺か緑の帯に白文字を載せる - **淡色ピルラベル**（`pill-label`）: 商品名や項目名を中央に置く淡色のピル - **黄色アンカーナビ**（`nav-grid`）: 黄色地に 2 列のリンクを点線で区切り、赤い下矢印とSNSアイコンを添える - **星形バッジ**（`badge-star`）: 赤やピンクのギザギザ星に白文字で数量を入れる - **問い合わせボックス**（`contact-box`）: 白地に黒い細枠。大きな電話番号を中央に置く - **トップへ戻るボタン**（`page-top`）: 右下に固定する赤い円形ボタン ## Do's and Don'ts **Do** - セクションごとに地色をはっきり切り替える - 情報は白カードにまとめ、ずらし影をつける - 見出しは極太の縁取り文字で統一する - 地にドットや幾何学の飾りを散らして賑やかにする - 注釈は小さいグレーで必ず入れる **Don't** - くすんだ色や暗いグラデーションを使わない - 細い明朝体で見出しを組まない - 影をぼかした柔らかい影だけで済ませない - 白カードなしで地色の上に長文を直接並べない（規約リードは除く） - 強調色を4色以上混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の内容と期間を一目で伝える）: 青のドット柄地に、傾けた極太コピーと人物写真を置く。商品パッケージを並べ、期限の円バッジと黄緑の帯で告知する 2. **アンカーナビ**（各セクションへ移動させる）: 黄色地に2列×3段のリンクとSNSアイコンを置く 3. **導入メッセージ**（季節感と参加を呼びかける）: 空色の地に夏のイラストを角に置き、白縁取りの紺色大見出しを入れる 4. **パッケージ紹介**（デザインの種類を見せる）: 白カードに、商品名のピルラベルと2列のパッケージ画像＋ひとことを並べる 5. **遊び方**（参加方法を図で示す）: 淡い水色のボックスにイラストと点線区切りの説明文を置く 6. **キャンペーン概要・賞品**（賞品と当選数を訴求する）: 黄緑の地にリボン見出しを置く。カードには寸法線入りの賞品写真、星バッジ、仕様の表を入れる 7. **応募方法**（応募手順と宛先を説明する）: 濃緑の斜めストライプ地。白カード内に宛先ラベル、ハガキの図解、赤い吹き出しを置く 8. **対象商品**（対象になる商品を示す）: 黄緑の地。目印マークの説明図と商品パッケージを3列で並べる 9. **注意事項・問い合わせ**（規約と連絡先を示す）: 緑の地に白文字のリードを置き、スクロールする規約カードと問い合わせボックス、ブランドサイトへのバナーを続ける ## Imagery - 人物写真は明るく、笑顔で顔を寄せ合う構図にする - 商品は切り抜きで少し傾け、白フチと影をつける - 漫画風のキャラクターイラストを多用する - 夏の小物（ビーチボール・葉・スイカ）をフラットなイラストで角に置く - ドット、斜めストライプ、円、四角を地の装飾に使う - 手順は点線の矢印と円形の切り抜きで図解する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 900px 幅のカードを置き、地色は全幅に敷く - パッケージ紹介は PC で 2 グループ×2 列のグリッドにする - 賞品と応募方法は PC で画像と文を左右 2 カラムにする - 対象商品は PC で 5 列に 1 行で並べる - ナビは PC で横一列にし、縦線で区切る - リード文は 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-0837bcfd`（元 LP の URL から採番） - **元 LP**: https://cp.glico.com/pretz-2024smr/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。