--- version: alpha name: Golden Meadow Dairy SNS Campaign LP description: 草原ジオラマ写真のFVに、金のグラデーション帯と紺の告知帯を重ねた乳製品のSNS投稿キャンペーンLP。応募方法は金地の上に波形の白カードを縦に並べ、金色の太い丸ゴシックでSTEP番号を示す。 colors: primary: '#D5C156' secondary: '#284459' accent-1: '#B79D3F' background: '#F5F3EE' surface: '#FFFFFF' text: '#222222' marker: '#C2B66D' on-dark: '#FFFFFF' accent-2: '#7B9663' tint-1: '#D4E5DD' dark-section: '#B79D3F' dark-section-accessible: '#88742F' accent-1-accessible: '#88742F' marker-accessible: '#817736' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 20px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.5 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 22px section: 36px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' period-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 46px prize-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 42px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 200px pill-label: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 180px tag-marker: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 18px step-arrow: backgroundColor: '{colors.accent-1}' height: 18px fv-badge: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 50px --- # DESIGN.md — 金×紺の牧場系乳製品投稿キャンペーンLP（Golden Meadow Dairy SNS Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ナチュラル、親しみ・手作り感、ポップ・元気、やさしい・柔らかい - **キーワード**: 金グラデーション・草原ジオラマ・紺の告知帯・波形白カード・STEP縦並び - **地の質感**: 金地は上下で明暗が変わる光沢グラデーション。カードはフラットな白 - **形**: ふちが波打つ白カード、ピル型のラベル、下向き三角の矢印 - **温度感**: 暖かく明るい。牧場の爽やかさと金の華やかさを合わせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D5C156` | 金の地とSTEP見出しの色 | 30% | 画素の主要色に補正 | | `secondary` | `#284459` | 告知帯の紺 | 4% | 画素の主要色に補正 | | `accent-1` | `#B79D3F` | STEP番号と見出しの濃い金 | 3% | 画素の主要色に補正 | | `background` | `#F5F3EE` | 対象商品エリアの生成り地 | 9% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | カードとラベルの白 | 26% | 画素の主要色に補正 | | `text` | `#222222` | 本文テキスト | 2% | 推定 | | `marker` | `#C2B66D` | アカウント名とハッシュタグの帯マーカー | 0% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 紺の帯と金の帯にのる白文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#7B9663` | 草原写真の緑 | 10% | 画素の主要色に補正 | | `tint-1` | `#D4E5DD` | FVの空の淡い青緑 | 5% | 画素の主要色に補正 | | `dark-section` | `#B79D3F` | 会期帯の暗い金 | 3% | 画素の主要色に補正 | | `dark-section-accessible` | `#88742F` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#88742F` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#817736` | AA を満たす補正値（計算） | | 計算 | - 地の色は3種類だけ。上は写真、中は生成り、下は金のグラデーション - 紺は告知帯1本だけに使い、ページを引き締める - STEP見出しは金色の文字を白カードにのせる - SNSアカウント名とハッシュタグには金色の帯マーカーを敷く - 黒文字は本文と注釈だけに使う - `period-band` は文字 `#FFFFFF` × 背景 `#B79D3F` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#88742F`、4.58:1）を使う。 - `pill-label` は文字 `#B79D3F` × 背景 `#FFFFFF` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#88742F`、4.58:1）を使う。 - `step-card` は文字 `#B79D3F` × 背景 `#FFFFFF` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#88742F`、4.58:1）を使う。 - `tag-marker` は文字 `#FFFFFF` × 背景 `#C2B66D` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#817736`、4.54:1）を使う。 - `fv-badge` は文字 `#B79D3F` × 背景 `#FFFFFF` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#88742F`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 会期の日付 | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.2 | 0.0em | | `headline-lg` | STEPの見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.4 | 0.08em | | `headline-md` | 紺の帯の賞品告知 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.3 | 0.02em | | `headline-sm` | ピル型ラベルの見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.1em | | `accent` | STEPの英字番号 | 欧文サンセリフ | Montserrat | 800 | 20px | 1.0 | 0.05em | | `body-md` | 手順の本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.03em | | `note` | 注釈と商品名 | ゴシック | Noto Sans JP | 500 | 8px | 1.5 | 0.0em | - 見出しは太い丸ゴシックで親しみを出す - STEPの番号は欧文を大きくし、英字は小さめにする - 日付は数字を大きく、曜日はかっこ付きで小さく組む - 本文も太字寄りにして写真に負けないようにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内は文字が左、写真が右上にはみ出す - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 36px、基本単位 8px、カード内 22px（375px 幅換算） - STEPカードは下向き三角の矢印でつなぐ - カード右上に丸角写真と商品写真を重ねてはみ出させる - 見出しのピル型ラベルはセクション上端にかぶせる - 会期帯と告知帯はFVの直下に全幅で置く ## Elevation & Depth - カードに影はほとんど付けない - 商品カードはごく淡い影で生成り地から少し浮かせる - 重ねた写真には薄い影を付ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の四角に切り抜き、少し傾けて重ねる - **セクション境界**: 帯は直線で区切る。カードのふちは手描き風の波形 - STEPカードは上下のふちを緩く波打たせる - ラベルは白のピル型にする - 矢印は濃い金の下向き三角にする ## Components - **会期帯**（`period-band`）: 金のグラデーションの帯。左に白のピル型の回数バッジを置き、白文字で日付を大きく組む - **賞品告知帯**（`prize-band`）: 紺の全幅帯に白文字で賞品を一行で告知する - **対象商品カード**（`product-card`）: 白い角丸カード。上辺にピル型ラベルを置き、商品2つを横に並べて下に商品名を添える - **ピル型見出しラベル**（`pill-label`）: 白いピル型に濃い金の太い丸ゴシック - **STEPカード**（`step-card`）: ふちが波打つ白カード。金のSTEP番号と見出しを置き、右上に写真を重ねる - **アカウント名の帯マーカー**（`tag-marker`）: アカウント名やハッシュタグに金色の帯を敷き、白文字でのせる - **STEP間の矢印**（`step-arrow`）: 濃い金の下向き三角 - **当選数の吹き出しバッジ**（`fv-badge`）: FV写真の上に置く白い丸角の吹き出し。中に金文字 ## Do's and Don'ts **Do** - 金の地には上下で明暗をつけたグラデーションを使う - STEPは番号・見出し・本文・注釈の順に組む - SNSアカウント名は帯マーカーで目立たせる - 写真はミニチュア人形と牛を置いた牧場ジオラマ風にする **Don't** - 紺を帯以外で多用しない - カードを角張らせない - 黒地や濃い影で重くしない - 金と競合する彩度の高い赤やピンクを入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーンと賞品を写真で見せる）: 草原の写真の上に賞品を置き、左上に金色のロゴ、右に当選数のバッジを重ねる 2. **会期**（応募期間を伝える）: 金のグラデーション帯に回数バッジと大きな日付を置く 3. **賞品告知**（賞品を一行で示す）: 紺の全幅帯に白文字で組む 4. **対象商品**（購入する商品を示す）: 生成り地に白カードを置き、商品2つを並べる 5. **応募方法**（投稿の手順を案内する）: 金地にピル型ラベルを置き、波形のSTEPカード3枚を矢印でつなぐ 6. **応募完了・当選通知**（当選後の流れを伝える）: 最後のSTEPカードに本文を短く添える ## Imagery - 芝生の上にミニチュアの人形と牛を置き、ジオラマ風に撮る - 被写界深度を浅くし、背景は山と空をぼかす - 料理写真は屋外の芝生の上で自然光で撮る - 商品パッケージは切り抜いて写真に重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV 写真を全幅で表示し、ロゴとバッジの配置は SP と同じにする - 会期帯と告知帯は全幅のまま、文字を中央に寄せる - 対象商品カードと STEP カードは中央に約480px幅で置く - 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-709e64b6`（元 LP の URL から採番） - **元 LP**: https://cp.kirin.jp/story/36067 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（0/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。