--- version: alpha name: Bright Yellow Festive Snack Campaign LP description: 黄色の地にきらめき装飾を散らし、赤と紺の2コースを色で分けたお菓子のレシート応募キャンペーンLP。白カードと濃いえんじの帯で情報を整理している。 colors: primary: '#BE0109' secondary: '#1E2A78' background: '#FFF79A' background-alt: '#FFDE21' tint-1: '#FFFCD6' surface: '#FDFEFD' dark-section: '#45090B' on-dark: '#FBEBEC' text: '#2D0708' accent-1: '#F29A1E' tint-2: '#FBE5E7' accent-2: '#E4F5FC' cta: '#440A0D' on-cta: '#FFFFFF' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em 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}' section-label-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 56px course-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 320px prize-number: textColor: '{colors.primary}' typography: '{typography.display}' height: 60px period-box: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 60px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 160px band-header: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 44px accordion: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px good-ng: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 110px anchor-nav: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 44px --- # DESIGN.md — 黄色×赤×紺の菓子レシート応募キャンペーンLP（Bright Yellow Festive Snack Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 黄色ベース・きらめき装飾・2コース比較・白カード・えんじのアコーディオン・大きな数字 - **地の質感**: フラットな黄色の地に、半透明の円・斜線・ドットと白いキラ星を散らして祝祭感を出す - **形**: 角丸が小さめの白カード、色付きの枠線ボックス、太い角丸の帯 - **温度感**: 暖色中心で明るく元気。紺で信頼感を少し足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BE0109` | ブランド赤（ナビ帯・コース見出し・強調文字） | 4% | 画素の実測 | | `secondary` | `#1E2A78` | 抽選コースの紺 | 2% | 推定 | | `background` | `#FFF79A` | メイン地の淡い黄色 | 22% | 画素の実測 | | `background-alt` | `#FFDE21` | ヒーロー・対象商品の濃い黄 | 10% | 画素の実測 | | `tint-1` | `#FFFCD6` | 規約セクションのクリーム地 | 11% | 画素の実測 | | `surface` | `#FDFEFD` | 白カード | 28% | 画素の実測 | | `dark-section` | `#45090B` | えんじの見出し帯・アコーディオン | 8% | 画素の実測 | | `on-dark` | `#FBEBEC` | 濃色帯上の白文字 | 1% | 画素の実測 | | `text` | `#2D0708` | 見出し・本文のこげ茶 | 3% | 画素の実測 | | `accent-1` | `#F29A1E` | ステップ・ポイント番号と枠のオレンジ | 1% | 推定 | | `tint-2` | `#FBE5E7` | 応募期間の淡いピンク面 | 1% | 画素の実測 | | `accent-2` | `#E4F5FC` | Good例の水色面 | 1% | 画素の実測 | | `cta` | `#440A0D` | 詳細ボタンの濃えんじ | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上文字 | 0% | 画素の主要色に補正 | - 地は黄色系3段（濃黄・淡黄・クリーム）でセクションを切り替える - 必ずもらえる系は赤、抽選系は紺と色でコースを分ける - 情報は白カードに載せ、黄色の上に直接長文を置かない - 見出し帯・アコーディオン・ボタンは濃えんじで締める - 注意喚起は赤枠、手順やポイントはオレンジ枠 - OK例は水色、NG例はピンクの面で対比させる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローの大見出し・金額数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.3 | 0.04em | | `headline-md` | カード見出し・コース名 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `headline-sm` | ステップ・ポイント見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 米印の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字のセクションラベル（斜めの赤タグ） | 欧文サンセリフ | Montserrat | 700 | 10px | 1.0 | 0.1em | | `label-button` | ボタン・アコーディオン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em | - 金額・人数・個数の数字は本文の3〜4倍にし、赤か紺で塗る - 見出しには白フチや影をつけてポップに仕上げる - セクション見出しの上に英字の斜めタグを添える - 本文は中央揃えを基本にし、カード内の説明は左揃えにする - 注釈は小さく灰茶色で、米印を付けて並べる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。2コース・Good/NGは2列でもよい - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは中央の幅広ボックスに収める - 2コースは左右に並べて対比させる - 手順・ポイントはSPで1列に積む - アコーディオンは12px間隔で縦に並べる - 見出しの下に16px空けてリード文を置く ## Elevation & Depth - 白カードには淡いソフトシャドウ（0 2px 6px rgba(0,0,0,.1)） - アコーディオンは影なしのフラット - ヒーローの賞品カードはやや強めの影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜きで縦に並べ、写真は角丸の四角に入れる - **セクション境界**: 直線で切り替え、背景色だけを変える - 枠線は2px程度の色線にする - コース見出しは上辺に重ねた色帯タブにする - サブボタンはピル型にする - 番号付きの吹き出しバッジは丸く小さく ## Components - **英字斜めタグ付き見出し**（`section-label-tag`）: 赤い斜めの英字ラベルの下に太い見出しを置く - **コース別カード**（`course-card`）: 上辺に赤または紺の帯見出しが付いた枠線付きの白カード - **特大数字の賞品表示**（`prize-number`）: 金額や人数を特大の数字で見せ、単位を小さく添える - **応募期間ボックス**（`period-box`）: 淡いピンク面に、ラベル列と日付を並べる - **ステップ・ポイントカード**（`step-card`）: オレンジ枠の白カード。番号はオレンジ、見出しはこげ茶 - **えんじ見出し帯**（`band-header`）: カード上部に置く全幅の濃色帯。右側に開閉記号を付ける - **規約アコーディオン**（`accordion`）: 濃えんじの角丸帯。中央に白文字、右に＋を置く - **詳細ピルボタン**（`button-primary`）: 濃えんじのピル型ボタン。白文字に矢印を添える - **Good/NG比較**（`good-ng`）: 水色とピンクの面を並べ、丸とバツの記号で例を示す - **ページ内ナビ帯**（`anchor-nav`）: 赤い帯に白文字のリンクを等幅で並べ、下矢印を付ける ## Do's and Don'ts **Do** - 背景を黄色系にしてキラ星を散らす - コースごとに赤と紺で色分けを徹底する - 数字は極端に大きくする - 注意点は枠付きカードに分けて整理する - 見出しには英字タグを必ず添える **Don't** - 黒やグレーの地を広く使わない - 寒色を主役にしない（紺はコース識別だけに使う） - 長文を黄色の地に直置きしない - 装飾をカードの内側に入れない - 細い明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランド表示とサイト内の移動）: 白地にロゴとSNSアイコン、その下に赤いグローバルナビ帯 2. **ファーストビュー**（キャンペーン内容と賞品規模を一目で伝える）: 濃黄の地に放射光とキラ星。大見出し、商品の切り抜き、2コースの白カード、応募期間の帯を置く 3. **ページ内ナビ**（各セクションへ誘導する）: 赤帯に4項目を等分して並べる 4. **キャンペーン概要**（2コースの違いを要約する）: 淡黄の地に、赤枠と紺枠の小カードを2つ並べる 5. **賞品紹介**（コース別に賞品と条件を詳しく示す）: 帯見出し付きの大カードを縦に2枚。特大数字と応募期間ボックスを入れる 6. **併用の注意**（応募ルールを補足する）: オレンジ枠の白カードにチェックアイコンと赤文字の強調 7. **ポイント交換先**（賞品の使い道を伝える）: 白カードの左に交換先ロゴのグリッド、右に説明と詳細ボタン 8. **対象商品**（対象のラインナップを示す）: 濃黄の地に白カード。商品の切り抜きを4列のグリッドで並べ、下に品名 9. **応募方法**（手順をステップで説明する）: えんじの帯見出し付きカードの中に、Step1〜3をオレンジ枠のカードで並べる 10. **注意事項・撮影ポイント**（無効応募を防ぐ）: 赤枠の注意カード、Good/NG比較、2列のポイントカード、NG例の写真グリッド 11. **利用規約**（規約を折りたたんで掲載する）: クリーム地に、えんじのアコーディオンを縦に10本 12. **お問い合わせ・フッター**（問い合わせ先と関連リンクを示す）: 茶枠のクリーム色ボックスに電話番号。下に赤ナビ、灰色地のブランドロゴ列 ## Imagery - 商品は白背景の切り抜きで、縦向きに斜めに重ねる - 背景に白い4点キラ星、半透明の円、斜線、ドットを散らす - スマホやレシートはフラットな写真かイラストで見せる - 紙吹雪やプレゼント箱で当選の楽しさを出す - NG例の写真には赤いバツ線を重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約700px幅のカードを置き、両端の背景装飾を見せる - SPでは2コースのカードを縦積みにするか、小さく2列で並べる - 商品グリッドはPCで4列、SPで2列 - ページ内ナビはSPで2×2または横スクロール - 特大数字はSPで40px前後に抑える ## 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-b628c4ee`（元 LP の URL から採番） - **元 LP**: https://cp.glico.com/giant-2025wtr/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。