--- version: alpha name: Autumn Yellow Dot Food Campaign LP description: 黄色の水玉地に紅葉を散らした秋の食品プレゼントキャンペーン LP。赤・緑・オレンジの太枠ボックスで情報を区切り、コース別の賞品カード、対象商品グリッド、LINE 応募ステップ、応募要項を縦に積み上げる。親しみやすく、情報が多い告知型の作り。 colors: primary: '#FFD901' background: '#FFFFFF' background-alt: '#FCF3C8' accent-1: '#D7000F' cta: '#31A744' on-cta: '#FCFDFC' secondary: '#DC4E02' accent-2: '#F7B52B' tint-1: '#EAFCEC' tint-2: '#B4E8FE' accent-3: '#10AB0E' text: '#592105' text-body: '#222222' marker: '#BE3D73' cta-accessible: '#278536' accent-1-accessible: '#A1000B' secondary-accessible: '#CD4902' accent-2-accessible: '#9A6A06' accent-3-accessible: '#0D880B' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em accent: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.2 rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-line: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 78px course-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px prize-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 230px period-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 240px section-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 86px product-tile: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.body-md}' height: 240px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 180px subhead-bar: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 40px speech-bubble: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 60px --- # DESIGN.md — 黄色ドット×紅葉の食品プレゼントキャンペーン LP（Autumn Yellow Dot Food Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 黄色ドット地・紅葉の散らし・太枠ボックス・コース別賞品・LINE応募・和惣菜 - **地の質感**: フラットな塗りに白や薄黄の水玉パターンを重ねる。紅葉のイラストを画面端に半分だけ見せて散らす - **形**: 白いカードは中くらいの角丸＋うすい影。見出しはピル型や上辺だけ角丸のラベル。情報ブロックは 3px 前後の太い単色枠で囲む - **温度感**: 暖色寄り。黄・赤・オレンジで秋の食卓を出し、緑で LINE と応募導線を示す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFD901` | FV の黄色地 | 9% | 画素の実測 | | `background` | `#FFFFFF` | カード・ボックス内の白地 | 45% | 画素の実測 | | `background-alt` | `#FCF3C8` | FV 以降のクリーム色ドット地 | 10% | 画素の実測 | | `accent-1` | `#D7000F` | A コースラベル・応募期間枠の赤 | 5% | 画素の実測 | | `cta` | `#31A744` | LINE 応募ボタン・B コースの緑 | 6% | 画素の主要色に補正 | | `on-cta` | `#FCFDFC` | 緑ボタン上の白文字 | 0% | 画素の実測 | | `secondary` | `#DC4E02` | 対象商品の見出しピル・枠のオレンジ | 2% | 画素の実測 | | `accent-2` | `#F7B52B` | コースラベルの黄文字・小見出しの山吹色帯 | 2% | 画素の実測 | | `tint-1` | `#EAFCEC` | LINE ステップ枠内の薄緑地 | 5% | 画素の実測 | | `tint-2` | `#B4E8FE` | 賞品セクションの水色地 | 4% | 画素の実測 | | `accent-3` | `#10AB0E` | LINE ステップ見出しの明るい緑 | 1% | 画素の実測 | | `text` | `#592105` | 日付など強調の焦げ茶文字 | 1% | 画素の実測 | | `text-body` | `#222222` | 本文の黒文字 | 3% | 推定 | | `marker` | `#BE3D73` | 本文中の強調ピンク文字 | 0% | 画素の実測 | | `cta-accessible` | `#278536` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#A1000B` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#CD4902` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#9A6A06` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#0D880B` | AA を満たす補正値（計算） | | 計算 | - FV だけ黄色の水玉地、それ以降はクリームの水玉地に切り替える - 情報ボックスはセクションごとに枠の色を変える。オレンジ＝対象商品、赤＝賞品、緑＝応募要項 - A コースは赤ラベル、B コースは緑ラベルにして、どちらもラベル文字は黄色にする - LINE まわりは明るい緑と薄緑の地でまとめる - 日付は焦げ茶の太字、本文中の強調はピンクにする - 要項内の小見出しは山吹色の角丸帯に白文字 - `button-line` は文字 `#FCFDFC` × 背景 `#31A744` のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#278536`、4.58:1）を使う。 - `course-label` は文字 `#F7B52B` × 背景 `#D7000F` のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A1000B`、4.6:1）を使う。 - `section-pill` は文字 `#FCFDFC` × 背景 `#DC4E02` のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#CD4902`、4.53:1）を使う。 - `product-tile` は文字 `#31A744` × 背景 `#FFFFFF` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#278536`、4.55:1）を使う。 - `subhead-bar` は文字 `#FCFDFC` × 背景 `#F7B52B` のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#9A6A06`、4.64:1）を使う。 - `speech-bubble` は文字 `#FCFDFC` × 背景 `#10AB0E` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#0D880B`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し（立体感のある多色ロゴ風） | 装飾・ディスプレイ | Dela Gothic One | 900 | 48px | 1.1 | 0.0em | | `headline-lg` | FV のリード（赤と緑の 2 色） | ゴシック | Noto Sans JP | 900 | 30px | 1.4 | 0.08em | | `headline-md` | セクション見出しのピル・帯 | ゴシック | Noto Sans JP | 700 | 24px | 1.35 | 0.1em | | `headline-sm` | 賞品名・ステップの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `accent` | 日付・当選人数の数字（大きくする） | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.0em | | `body-md` | 本文・応募方法の説明 | ゴシック | Noto Sans JP | 500 | 15px | 1.75 | 0.06em | | `note` | ※ や ◉ で始まる注意書き | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.05em | | `label-button` | コースラベル・LINE ボタンの文字 | ゴシック | Noto Sans JP | 900 | 24px | 1.2 | 0.0em | - 見出しはすべて太いゴシックにし、明朝は使わない - 数字は前後の文字の約 1.5 倍に大きくする - 注意書きは記号でぶら下げインデントにする - 商品名のラベルは緑文字にし、頭にオレンジの丸を付ける - 字間は少し広め（0.05〜0.1em）にして、やわらかい印象にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（対象商品のみ 2 列グリッド） - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションを太枠の白ボックスにして、ドット地の上に置く - 見出しのピルはボックス上辺にまたがるように重ねる - 賞品カードは縦に積み、上辺にコースラベルを半分重ねる - 応募ステップは白カードを縦に並べ、間に下向きの三角を入れる - 要項は小見出し帯→本文→注意書きの順に繰り返す ## Elevation & Depth - 白い賞品カードにはうすい灰色のぼかし影（0 2px 6px rgba(0,0,0,.15)）を付ける - 枠付きボックスは影なしのフラットにする - FV のロゴ見出しは白フチと影で立体的に見せる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品パッケージは切り抜きか、白背景の矩形で見せる。賞品写真は角丸の矩形にする - **セクション境界**: セクション境界は直線で背景色を切り替える。賞品セクションの下端には丘と木のイラストを置く - セクション見出しはピル型か大きな角丸にする - 枠線は 3px ほどの単色にする - ステップ枠は角丸 20px の緑枠にする ## Components - **LINE 応募ボタン**（`button-line`）: 緑の横長ボタン。左にアプリアイコン、右にスマホを持つ手のイラストを入れる - **コースラベル**（`course-label`）: 赤か緑の角丸矩形に黄色の太字。カードの上辺に重ねて置く - **賞品カード**（`prize-card`）: 白い角丸カード。写真→賞品名→色付き下線→当選人数の順に並べる - **応募期間ボックス**（`period-box`）: 赤い見出し帯と赤枠の白箱。日付を縦に並べ、間に▼を入れる - **セクション見出しピル**（`section-pill`）: オレンジか赤のピル型に白の太字。枠ボックスの上辺にまたがせる - **対象商品タイル**（`product-tile`）: パッケージ画像を 2 列に並べ、下にオレンジの丸と緑の商品名を置く - **応募ステップ**（`step-card`）: 薄緑の枠の中に白カードを置き、ステップ番号・緑の見出し・説明を入れる。カードの間は緑の三角でつなぐ - **要項の小見出し帯**（`subhead-bar`）: 山吹色の角丸帯に白の太字を左寄せで置く - **吹き出し**（`speech-bubble`）: 緑の楕円の吹き出しに白文字を入れ、二次元コードの上に置く ## Do's and Don'ts **Do** - 地には必ず水玉パターンを敷く - 季節のモチーフ（紅葉など）は画面端に半分はみ出させて置く - セクションごとに枠の色を変え、色で情報を区別する - 数字と賞品名を大きく太くして、ひと目で分かるようにする - 注意書きは省略せず、小さな文字で全部載せる **Don't** - 暗い背景や黒の大きな面は使わない - 細い明朝や欧文セリフを見出しに使わない - グラデーションの多用は避け、塗りはフラットにする - 賞品カードを横スクロールのカルーセルにしない - LINE の緑と賞品 B コースの緑以外に寒色を広く使わない（水色地は賞品セクションだけ） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と季節感を伝える）: 黄色の水玉地に紅葉を散らす。多色の立体ロゴ見出しを置き、下に 2 色のリードを配置 2. **賞品の概要**（もらえるものを即座に示す）: A・B コースのラベル付き白カードを縦に 2 枚並べ、最後に画像イメージの注記を入れる 3. **応募導線と期間**（応募方法と締切を伝える）: 斜線で挟んだ小見出し→緑の LINE ボタン→赤枠の応募期間ボックスの順に置く 4. **対象商品**（購入対象を示す）: オレンジのピル見出しとオレンジ枠のボックス。商品を 2 列グリッドで並べ、末尾に注記 5. **賞品詳細**（賞品と期間を再確認させる）: 赤のピル見出しと赤枠の水色地。賞品カード 2 枚と LINE 応募期間を置き、下端に丘のイラスト 6. **応募要項（応募方法）**（手順を説明する）: 緑の見出し帯と緑枠の白ボックス。山吹色の小見出し、強調文、本文、LINE の 3 ステップ、二次元コードの順 7. **アカウント情報と注意**（アクセス先と注意点を伝える）: 緑の帯ラベルと緑文字の値を交互に置き、続けて※の注意リストを並べる 8. **応募締切・注意事項・問い合わせ**（規約と連絡先を示す）: 山吹色の小見出し帯ごとに、緑の大きな日付・◉ のリスト・太字の電話番号を置く ## Imagery - 商品はパッケージの正面を白背景で撮った写真を整列させる - 賞品は白背景の物撮りと、料理を盛り付けた使用シーンを組み合わせる - 紙幣や手・スマホなどはフラットなイラストで描く - 紅葉はオレンジ〜赤のフラットなイラストにする - 丘・木・雲のやさしい風景イラストをセクションの下端に添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 1000px 幅の 1 カラムにし、ドット地を全幅に敷く - PC の FV はロゴを左、リードと賞品カード 2 枚を右に置く 2 カラム - PC では LINE ボタンと応募期間を横一列にまとめる - PC の対象商品は 5 列グリッドにする - PC の応募ステップは横 3 列にし、二次元コードを右端に置く - 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-f85fcf47`（元 LP の URL から採番） - **元 LP**: https://www.kanehatsu.co.jp/cam/autumn/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。