--- version: alpha name: Japanese Tea Green Lottery Campaign LP description: 緑茶ブランドのはがき応募型キャンペーンLP。明るい緑と黄緑を主役に、薄いグレー地へ市松帯・水引の飾り線・朱色の版画風イラストを散らした和モダンな構成。明朝体の見出しと赤い丸スタンプ型の当選数バッジで、賞品を次々と見せていく。 colors: primary: '#32A23B' on-primary: '#FBFEFB' background: '#F0F0F0' surface: '#FFFFFF' background-alt: '#EBEBEB' cta: '#90C416' on-cta: '#3F5A2A' secondary: '#C8DC3C' accent-1: '#E2231A' text: '#333333' accent-2: '#37943E' line: '#31A23B' tint-1: '#D6DF8F' text-muted: '#666666' cta-accessible: '#9FD918' primary-accessible: '#298530' accent-1-accessible: '#B01B14' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Yuji Syuku fontSize: 34px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 20px section: 48px 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: 52px badge-lottery: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px band-course: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 60px heading-checker: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px heading-mizuhiki: textColor: '{colors.accent-2}' typography: '{typography.headline-md}' height: 90px info-period: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 56px tab-switch: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 80px box-terms: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 430px tile-sample: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.note}' height: 56px --- # DESIGN.md — 緑と朱の和モダンな緑茶プレゼント LP（Japanese Tea Green Lottery Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 和風、清潔・爽やか、ポップ・元気、情報量多め・訴求型 - **キーワード**: 緑茶グリーン・市松模様・朱色の版画イラスト・明朝見出し・賞品ショーケース・はがき応募 - **地の質感**: フラットな薄グレー地に、切り抜いた商品写真の柔らかい影と、朱色の判子・版画風の線画を重ねる - **形**: 角は基本的に直角。市松帯・二重線＋水引の飾り罫、円形スタンプのバッジ - **温度感**: 爽やかでやや明るい寒色寄りの緑に、朱赤で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#32A23B` | ブランドの緑（帯・見出し・電話番号帯） | 11% | 画素の実測 | | `on-primary` | `#FBFEFB` | 緑の帯の上の白文字 | 2% | 画素の実測 | | `background` | `#F0F0F0` | ページの薄いグレー地 | 38% | 画素の実測 | | `surface` | `#FFFFFF` | 応募要項・切替タブの白い面 | 16% | 画素の主要色に補正 | | `background-alt` | `#EBEBEB` | 対象商品リストの濃いめグレー帯 | 8% | 画素の実測 | | `cta` | `#90C416` | ダウンロードボタンの黄緑 | 2% | 画素の実測 | | `on-cta` | `#3F5A2A` | ボタン上の濃い緑文字 | 0% | 推定 | | `secondary` | `#C8DC3C` | 黄緑の市松・賞品・おみくじ見本 | 6% | 推定 | | `accent-1` | `#E2231A` | 朱赤の注意書き・バッジ枠・イラスト | 2% | 推定 | | `text` | `#333333` | 見出しの濃い文字 | 2% | 推定 | | `accent-2` | `#37943E` | 賞品コース名の明朝の緑文字 | 1% | 画素の実測 | | `line` | `#31A23B` | 飾り罫の緑二重線 | 0% | 画素の主要色に補正 | | `tint-1` | `#D6DF8F` | ファーストビューの淡い緑の市松地 | 4% | 画素の主要色に補正 | | `text-muted` | `#666666` | 注釈の小さなグレー文字 | 0% | 推定 | | `cta-accessible` | `#9FD918` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#298530` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#B01B14` | AA を満たす補正値（計算） | | 計算 | - 地は薄グレー#F0F0F0、区切りや強調ブロックだけを緑#31A23Bのベタ帯にする - 緑の帯の上の文字は白、明朝で大きく見せる - 黄緑は市松帯・賞品・見本カードに使い、ブランド緑と2トーンで構成する - 朱赤は当選数バッジ・注意書き・版画イラストに限定し、差し色として使う - CTAボタンは黄緑ベタに濃い緑文字。緑の地の上に置いて浮かせる - 本文は濃いグレー。純黒は使わない - `button-primary` は文字 `#3F5A2A` × 背景 `#90C416` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#9FD918`、4.58:1）を使う。 - `band-course` は文字 `#FBFEFB` × 背景 `#32A23B` のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#298530`、4.6:1）を使う。 - `info-period` は文字 `#32A23B` × 背景 `#FFFFFF` のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#298530`、4.56:1）を使う。 - `tab-switch` は文字 `#32A23B` × 背景 `#FFFFFF` のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#298530`、4.56:1）を使う。 - `tile-sample` は文字 `#E2231A` × 背景 `#C8DC3C` のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B01B14`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きキャッチ | 明朝 | Shippori Mincho | 800 | 30px | 1.3 | 0.05em | | `headline-lg` | 人物別コース帯の大見出し・電話番号 | 明朝 | Shippori Mincho | 700 | 26px | 1.3 | 0.08em | | `headline-md` | 賞品コース名（緑の明朝） | 明朝 | Shippori Mincho | 700 | 24px | 1.4 | 0.1em | | `headline-sm` | 応募口数の見出し（数字だけ大きく） | 明朝 | Noto Serif JP | 600 | 19px | 1.4 | 0.05em | | `body-md` | 賞品内容・対象商品リスト | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.02em | | `note` | ※注釈・イメージ表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0em | | `accent` | 朱赤の手書き風キャッチ・バッジ数字 | 手書き・筆 | Yuji Syuku | 400 | 34px | 1.2 | 0em | | `label-button` | CTAボタン文字 | 明朝 | Shippori Mincho | 600 | 17px | 1.4 | 0.1em | - 見出しはすべて明朝で、和の品の良さを出す - 数字（口数・当選数・日付）は周りの文字の約2倍に拡大する - 本文・リストはゴシックの小さめサイズで情報を詰める - 注釈は※付き・右寄せ・小さいグレー文字 - 見出しは中央揃え、字間はやや広め - 朱赤の筆文字は1画面に1か所までのアクセントにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。賞品は 2 列グリッド、見本カードは 2〜5 個を横に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 賞品写真は切り抜きで左右交互にずらして配置する - 人物別コースは全幅の緑帯で区切る - 各ブロックは中央揃えを基本にする - 版画イラストを左右の余白に散らして間を埋める - 応募要項はスクロール枠つきの白いボックスに収める ## Elevation & Depth - 基本はフラットで、影は使わない - 切り抜いた賞品写真の下にだけ柔らかい落ち影を付ける - 当選数バッジは白丸に薄い影を付けて浮かせる ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品・賞品は背景を抜いた切り抜き。人物は四角いエリアいっぱいに配置 - **セクション境界**: 黄緑と白の市松帯、または緑の二重線の中央に水引の結び飾りを置く - ボタン・帯は角を立てた長方形 - バッジは正円で朱赤の細い枠線 - 見本カードは正方形のタイル - 装飾の罫は細い二重線で上品に ## Components - **ダウンロードCTA**（`button-primary`）: 緑のベタ地の上に置く全幅の黄緑ボタン。明朝の文字で、角は直角に近い - **当選数スタンプ**（`badge-lottery`）: 白い正円に朱赤の細い枠。中に朱赤の明朝で「抽選で○名様」。数字を大きくする - **コース見出し帯**（`band-course`）: 全幅の緑帯。左に丸く切り抜いた人物、右に白い明朝の大見出し - **市松付き小見出し**（`heading-checker`）: 見出しの左右に黄緑の市松帯を伸ばす。応募口数の数字だけを大きくする - **水引罫の見出し**（`heading-mizuhiki`）: 上下に緑の二重線。上の線の中央に赤い結び飾りを置き、間に緑の明朝で賞品名 - **応募期間バー**（`info-period`）: 緑の枠付きラベルの右に、緑の明朝で大きく日付を表示する - **2択の切替ナビ**（`tab-switch`）: 白地を縦線で2分割。緑の明朝で2行の見出しを置き、下に赤い三角を付ける - **応募要項ボックス**（`box-terms`）: 緑地の中に白い枠を置き、内部をスクロールさせる。小見出しは緑ベタ帯に白文字 - **見本タイル**（`tile-sample`）: 黄緑の正方形に白抜きの大きな文字と、赤い「見本」の印を重ねる ## Do's and Don'ts **Do** - 緑・黄緑・朱赤・薄グレーの4色に絞る - 見出しは明朝で中央揃えにする - セクションの区切りに市松帯や水引の二重罫を使う - 賞品は切り抜き写真で並べ、全部に当選数スタンプを添える - 余白に朱色の線画イラストを散らして和の遊び心を出す **Don't** - 丸いピル型ボタンやグラデーションのボタンは使わない - 朱赤を面のベタ塗りに使わない - 濃い影やネオンカラーなど現代的すぎる装飾は入れない - 見出しをゴシックの太字にしない - 賞品写真を四角い枠に入れて硬い印象にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（企業・ブランドの表示とナビ）: 白地にロゴ・お問い合わせ・メニュー。2段目にブランドロゴとバナー 2. **ファーストビュー**（キャンペーンのテーマと出演者を伝える）: 淡い緑の市松地に人物2人を左右に置き、中央の緑の縦帯に明朝の縦書きキャッチ 3. **応募期間・問い合わせ先**（期間と窓口を明示する）: 白地に枠付きラベルと大きな日付。その下に緑の全幅帯で電話番号を白い大きな明朝 4. **対象商品**（応募の条件と対象商品を示す）: 朱赤の注意書き、筆文字のキャッチと手の写真、商品の集合写真、グレー帯の商品リスト 5. **コース切替ナビ**（2つの賞品コースへ誘導する）: 白地を2分割したタブ。緑の明朝に赤い下向き三角 6. **賞品コースA**（1つ目の賞品群を見せる）: 緑の人物帯、市松の小見出し、見本タイル、当選数スタンプ付きの賞品写真、水引罫の賞品名、内容のリスト 7. **賞品コースB**（2つ目の賞品群を見せる）: コースAと同じ型を繰り返す。賞品は2列で左右にずらして配置 8. **CTA**（応募はがきをダウンロードさせる）: 緑ベタ地に同意チェックボックスと黄緑の全幅ボタン。下端に市松帯 9. **応募方法の説明**（応募マークの貼り方と口数を説明する）: 白地に朱赤の明朝のリード、はがきの図解、見本タイルのグリッド、朱赤の●付き注意書き 10. **応募要項**（規約を詳しく伝える）: 緑地の中にスクロールする白いボックス。小見出しは緑帯 11. **フッター**（ページ上部へ戻す）: 緑地に白い山形の矢印と欧文の大文字 ## Imagery - 人物は和装・制服などで、正面から明るく均一な光で撮る - 商品・賞品は真上や斜めから撮って背景を抜き、柔らかい落ち影を付ける - 朱赤一色の版画・判子風の縁起物イラスト（招き猫・龍・鶴・亀・人形など）を余白に散らす - 筆文字の書を緑で入れたグッズで和のテーマを統一する - 手で商品を持つ写真は、白い背景に指先まで入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約1000pxの幅で、緑帯・市松帯は全幅に広げる - PCのファーストビューは人物を左右に離し、キャッチを中央に置く横長の構図 - PCの賞品コースは写真を左右に散らし、賞品名とスペックを中央に寄せた1画面の構成 - 対象商品はPCで写真とリストを横並びにする - 応募方法の説明はPCで図解と手の写真を左右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-ca040df2`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/softdrink/iyemon/midori/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。