--- version: alpha name: Festive Red and Gold Japanese Snack Vote Campaign LP description: 朱赤の地に金の市松と金雲をあしらった、祝祭感の強い和風キャンペーン LP。白いカードに要項を載せ、商品パッケージを並べて投票に導く。 colors: primary: '#C01C03' background: '#FDFDFD' cta: '#D92001' on-cta: '#FFFFFF' secondary: '#D2A54D' accent-1: '#E5C24A' dark-section: '#2C0102' on-dark: '#FFFFFF' text: '#222222' accent-2: '#D10902' accent-3: '#03632C' line: '#FBFAFC' background-alt: '#FFFFFE' secondary-accessible: '#967026' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px 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-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px heading-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px heading-gold-bar: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 48px badge-count: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px card-prize: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 500px brand-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 420px terms-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 2000px gold-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 64px --- # DESIGN.md — 朱赤×金の和柄お菓子投票キャンペーン LP（Festive Red and Gold Japanese Snack Vote Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 和風、力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 朱赤・金箔・市松模様・金雲・祝祭・投票 - **地の質感**: 金箔風グラデーションと市松・雲の和柄。紙吹雪状の金の粒を散らす - **形**: 角丸小さめの白カードと横長の赤ボタン。見出し下に三角の吹き出し - **温度感**: 暖かい。赤と金でお祝い感を強く出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C01C03` | ブランドの朱赤（セクション地） | 30% | 画素の実測 | | `background` | `#FDFDFD` | 白い地 | 40% | 画素の実測 | | `cta` | `#D92001` | 投票ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#D2A54D` | 金（帯・枠・強調） | 8% | 画素の主要色に補正 | | `accent-1` | `#E5C24A` | 明るい金（強調円・バッジ） | 4% | 画素の実測 | | `dark-section` | `#2C0102` | こげ茶の紹介パネル・見出し帯 | 6% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗地上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#222222` | 本文・見出しの黒文字 | 3% | 推定 | | `accent-2` | `#D10902` | 赤の強調テキスト | 0% | 画素の主要色に補正 | | `accent-3` | `#03632C` | 深緑の数量バッジ | 0% | 画素の実測 | | `line` | `#FBFAFC` | 要項の区切り線 | 0% | 画素の主要色に補正 | | `background-alt` | `#FFFFFE` | 淡いグレーの地 | 4% | 画素の実測 | | `secondary-accessible` | `#967026` | AA を満たす補正値（計算） | | 計算 | - 中盤以降の地は朱赤で塗り、金の市松と金雲を端に置く - 情報は白カードに載せ、カードの縁を金で囲む - 主ボタンは赤地に白文字。キーワード 1 文字だけ黄金の円で強調する - 導入とフォームの部分は白地に切り替えて読みやすくする - 強調したいフレーズは本文中で赤文字にする - こげ茶は見出しの帯とブランド紹介パネルだけに使う - `gold-ribbon` は文字 `#FFFFFF` × 背景 `#D2A54D` のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#967026`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し・縦書きコピー | ゴシック | Dela Gothic One | 900 | 40px | 1.15 | 0.02em | | `headline-lg` | セクション見出し（白抜き＋縁取り） | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.05em | | `headline-md` | 金文字の明朝見出し | 明朝 | Shippori Mincho | 700 | 36px | 1.2 | 0.05em | | `headline-sm` | 見出し帯・カード内のリード | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.03em | | `body-md` | 本文・要項 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em | | `accent` | 欧文の小見出し | 欧文サンセリフ | Montserrat | 700 | 18px | 1.2 | 0.08em | - 見出しは極太ゴシックで、白文字に影や縁取りをつける - ブランド見出しは金グラデーションの明朝体にする - 本文は中央揃えで 3〜4 行の短い文にまとめる - 要項は左揃えで、項目名を太字、内容を通常の太さにする - 強調する数字は大きくして金の円バッジに入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品画像は 2 列のグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは画面幅の 92% で、左右に赤地を少し見せる - セクションの間に金雲や市松の装飾を重ねて境目をつなぐ - 要項は項目ごとに細い線で区切る - フォームの商品選択は 2 列に大きく並べる ## Elevation & Depth - 白カードには弱い影と金の縁をつける - ボタンには下方向の影を小さくつけて少し浮かせる - 商品パッケージ画像は影つきの切り抜きにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品パッケージは背景を切り抜いて傾けずに並べる。ポテトや海老も切り抜きで散らす - **セクション境界**: 直線で地の色を切り替え、金雲・市松の装飾を境目に重ねる - ボタンは角丸小さめの横長長方形にする - 見出し帯の下に逆三角の吹き出しをつける - 数量バッジは円形にする ## Components - **投票ボタン**（`button-primary`）: 赤地に白文字。キーワード 1 文字だけ金の円に入れ、両端に小さな装飾をつける - **カード内の横長ボタン**（`button-bar`）: カード幅いっぱいの赤ボタン。右端に白い丸矢印をつける - **吹き出し見出し帯**（`heading-band`）: こげ茶の帯に白文字。下に三角の吹き出しをつける - **金二重線の見出し**（`heading-gold-bar`）: 白い極太文字の左右に金の二重線を置く - **数量の円バッジ**（`badge-count`）: 深緑または金の円に、セリフ体の数字と人数を入れる - **賞品カード**（`card-prize`）: 白カードに赤字のリード文と賞品写真。シークレット品は金地に「？」で見せる - **ブランド紹介パネル**（`brand-panel`）: 赤みのあるこげ茶パネルに金の明朝見出しと白い本文 - **要項リスト**（`terms-list`）: 金縁の白カード内に、太字の項目名・本文・区切り線を繰り返す - **金の見出しリボン**（`gold-ribbon`）: 金の横帯の中央に白い極太文字。両側に梅の花のアイコンを置き、下に三角をつける ## Do's and Don'ts **Do** - 朱赤と金を主役にして、和柄（市松・金雲・梅）で祝祭感を出す - 情報は白カードにまとめて、読みやすさを保つ - ボタンを複数の位置に置いて、投票へ導く - 商品パッケージを大きく並べて、選ぶ楽しさを見せる - 注釈は小さい文字の※書きでまとめる **Don't** - 寒色を主役にしない（緑はバッジ程度にとどめる） - 赤地の上に小さい本文を直接置かない - フラットすぎる単色の金にしない。グラデーションで箔らしさを出す - ボタンをピル型や細い線だけのボタンにしない - 装飾を本文の上に重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と賞品数を一目で伝える）: 赤地に金の市松の大きな円を置き、極太見出しを入れる。右に縦書きコピー、下に商品を横一列に並べる 2. **企画の説明**（投票した結果どうなるかを伝える）: 白地にこげ茶の吹き出し帯、中央揃えの本文、赤い投票ボタン。ポテトの写真を散らす 3. **ブランド紹介**（商品シリーズの世界観を伝える）: 赤地の上にこげ茶パネルを置き、金の明朝見出しを入れる 4. **デザイン案の一覧と制作者**（候補の作品と作った人を紹介する）: 商品を 3 列×2 段に並べ、その下に白カードで制作者の情報とボタンを置く 5. **賞品**（当選者数と賞品を訴求する）: 斜線で挟んだ白抜きの大見出しと金の円の強調。白カードに賞品写真とシークレット枠 6. **投票要項**（応募条件と注意事項を示す）: 金二重線の見出しと、金縁の白カードに入れた項目リスト 7. **投票フォーム**（パッケージを選んで投票してもらう）: 金のリボン見出しの下に白地で案内文を置き、商品画像を 2 列に並べる ## Imagery - 商品パッケージは正面から撮って切り抜き、影をつけて並べる - ポテトチップスや海老などの食材を切り抜いて四隅に散らす - 金箔風の雲・市松・梅の花を装飾に使う - 赤地に金の紙吹雪の粒を散らして祝祭感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は横長にし、左に見出しの円、右に商品を 3 列×2 段で並べる - PC の作品一覧は左に 3 列×2 段の商品、右に制作者カードを置く 2 カラムにする - PC の要項は左に項目名、右に内容を置く表組みにする - PC のフォームの商品は 6 個を横一列に並べる - PC のコンテンツ幅はおよそ 1000px で中央に寄せる ## 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-a0e20d07`（元 LP の URL から採番） - **元 LP**: https://koikeya.co.jp/campaign/kanazawa2025/ - **解析に使った画像**: 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/）からご連絡ください。