--- version: alpha name: Festive Red Green Snack Campaign LP description: 和紙のような生成り地に、朱赤と抹茶緑の太枠を使ったスナック菓子の応募キャンペーンLP。2つのコースを色で分けている。紙吹雪と青海波でお祝い感を出し、黄色フチの極太数字とキャラクターイラストで楽しげに見せる。 colors: primary: '#598E35' secondary: '#E4350C' cta: '#E33A0C' on-cta: '#FFFFFF' background: '#FBF2CD' surface: '#FEFFFE' tint-1: '#D7E4D0' tint-2: '#FBDED8' accent-1: '#F5D21C' accent-2: '#E0A010' text: '#231815' accent-3: '#D03915' line: '#A68C67' primary-accessible: '#528331' cta-accessible: '#DC380C' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Yusei Magic fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.3em body-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-secondary-red: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 26px tanzaku-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px prize-number: textColor: '{colors.accent-3}' typography: '{typography.display}' height: 60px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 380px tab-switch: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px scroll-terms: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 220px faq-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px --- # DESIGN.md — 朱赤×抹茶緑の和紙調お菓子キャンペーンLP（Festive Red Green Snack Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、和風、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 和紙テクスチャ・朱赤と緑の2コース・黄フチ極太数字・短冊ラベル・紙吹雪・キャラクター - **地の質感**: 生成りの和紙調ノイズ地。商品型の黄色い線画を地紋として散らす - **形**: 太い色枠で囲んだ大きなコンテナ。中にピル型の帯見出しと角丸カードを入れる - **温度感**: 暖色寄りでにぎやか。お祭りのような温かさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#598E35` | コース1の枠・帯見出し・CTA | 9% | 画素の実測 | | `secondary` | `#E4350C` | コース2の枠・帯見出し | 10% | 画素の実測 | | `cta` | `#E33A0C` | コース2の主ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FBF2CD` | 和紙調の生成り地 | 38% | 画素の実測 | | `surface` | `#FEFFFE` | 手順・規約・FAQカード | 19% | 画素の実測 | | `tint-1` | `#D7E4D0` | 緑コースのステップカード地 | 7% | 画素の実測 | | `tint-2` | `#FBDED8` | 赤コースの図解パネル地 | 2% | 画素の実測 | | `accent-1` | `#F5D21C` | 数字のフチ・マーカー・紙吹雪の黄 | 3% | 推定 | | `accent-2` | `#E0A010` | 見出し帯の山吹色 | 2% | 推定 | | `text` | `#231815` | 見出し・本文の黒 | 3% | 推定 | | `accent-3` | `#D03915` | 強調見出しの赤文字 | 1% | 画素の実測 | | `line` | `#A68C67` | 表罫線・区切り線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#528331` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#DC380C` | AA を満たす補正値（計算） | | 計算 | - 地は生成りの和紙調で統一し、白は中に置くカードにだけ使う - コースごとに緑と朱赤を割り当て、枠・帯見出し・ボタン・表の罫線を同じ色にそろえる - 金額・賞品名は赤文字に黄色の太フチとドロップシャドウをつける - 注釈は黒の小さい文字にし、色はつけない - ヘッダーは朱赤の地に紙吹雪を散らし、下に山吹色の青海波の帯を置く - `button-primary` は文字 `#FFFFFF` × 背景 `#598E35` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#528331`、4.52:1）を使う。 - `button-secondary-red` は文字 `#FFFFFF` × 背景 `#E33A0C` のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DC380C`、4.55:1）を使う。 - `band-heading` は文字 `#FFFFFF` × 背景 `#598E35` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#528331`、4.52:1）を使う。 - `tab-switch` は文字 `#FFFFFF` × 背景 `#598E35` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#528331`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 金額や賞品名の極太数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 52px | 1.1 | 0.0em | | `headline-lg` | コース名などの筆風の大見出し | 手書き・筆 | Yusei Magic | 700 | 28px | 1.2 | 0.02em | | `headline-md` | 賞の名前・強調リード | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.4 | 0.02em | | `headline-sm` | 帯見出しの白文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.3em | | `body-lg` | ステップの説明・日付 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.0em | | `body-md` | 本文・FAQ | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `label-button` | CTAボタン | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.2 | 0.05em | - 帯見出しは字間を0.3em前後に広げ、白い太字で中央に置く - 金額は数字を大きく、単位や助詞は小さくしてメリハリを出す - 強調したい語だけ赤文字にし、下に黄色のマーカーを敷く - ルビ風の小さい読みを数字の上に添えてもよい - 全体は丸みのある太字ゴシックで親しみを出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。賞品と商品写真は左右2分割を許容 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - コースごとに画面幅いっぱいの太い色枠コンテナで囲む - コンテナの左上に短冊ラベルを、右上にキャラクターを置く - 各情報ブロックの頭にピル型の帯見出しを置き、その下に中央揃えで内容を並べる - 規約は高さ固定の白いスクロールボックスにする - ステップは縦に積んだ角丸カードで、イラストの下に説明を置く ## Elevation & Depth - CTAボタンには濃い色の下影をつけて立体感を出す - 数字の装飾文字は黄フチと暗い影を重ねる - カード類は影なしのフラットにする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は切り抜きにする。手順写真は円形に切り抜き、三角矢印でつなぐ - **セクション境界**: 太い色枠の箱で区切る。ヘッダー下は青海波の帯 - 緑の枠は手描き風のガタつく線にする - タブはコンテナの上辺に接して左右に2分割する - 吹き出しは円形で、しっぽをつける ## Components - **主CTAボタン**（`button-primary`）: 幅いっぱいのピル型ボタン。右端に白丸の矢印アイコンを置き、下影をつける - **赤コースのボタン**（`button-secondary-red`）: 主CTAと同じ形の朱赤版 - **帯見出し**（`band-heading`）: コース色のピル型の帯に、字間を広げた白文字を入れる - **短冊ラベル**（`tanzaku-label`）: 傾けた和紙の短冊に筆文字と小さいイラストを入れ、コース名を示す - **賞金の装飾数字**（`prize-number`）: 赤い極太数字に黄色フチと影をつけ、後ろに助詞を小さく続ける - **ステップカード**（`step-card`）: 淡色の角丸カード。中にスマホ線画イラストと太字の説明を入れる - **応募方法タブ**（`tab-switch`）: 選択中はコース色の地に白文字、非選択は白地にコース色の文字 - **規約スクロールボックス**（`scroll-terms`）: 白い箱に小さい文字。高さを固定してスクロールさせる - **FAQカード**（`faq-card`）: 白い角丸カード。質問は赤文字でQ.を頭につけ、回答は黒文字 ## Do's and Don'ts **Do** - コースごとの色分けを枠・帯・ボタンまで徹底する - 生成りの和紙地に商品型の線画を薄く散らす - 金額や数字は極太で大きく見せる - 情報ブロックには必ず帯見出しをつける - キャラクターを要所に置いて親しみを出す **Don't** - 真っ白なフラット地を全面に使わない - 寒色系やモノトーンの配色にしない - 細い明朝体で見出しを作らない - 1つのコンテナに緑と赤を混ぜない - 写真を角丸の四角で大きく敷き詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名を祝祭感とともに伝える）: 朱赤の地に紙吹雪。左に丸ロゴ、中央に白い大コピー、右にキャラクター。下に青海波の帯とタイトル 2. **コース紹介**（2つの応募コースを一目で示す）: 短冊2枚を並べ、両脇に賞品を入れた円形の吹き出しを置く 3. **賞品（コース1）**（賞金の大きさを訴求する）: 緑の枠の中に帯見出し、賞の名前を赤文字にし、装飾数字で金額を見せる 4. **応募期間・応募内容**（条件を明示する）: 帯見出しの下に日付を大きな太字で、注釈を小さく置く 5. **CTA**（応募フォームへ誘導する）: 緑のピル型ボタンを幅いっぱいに置く 6. **応募手順**（応募方法を分かりやすく示す）: タブで方法を切り替え、ステップカードを縦に並べる 7. **結果発表・規約・問い合わせ**（補足情報を載せる）: 帯見出しと中央揃えの文字、規約はスクロールボックス 8. **賞品（コース2）**（もう1つのコースの賞品を訴求する）: 朱赤の枠の中で、左に装飾文字、右に切り抜き商品写真とサイズ表記 9. **アプリ応募手順**（購入から応募までの流れを示す）: 白いカードに丸数字の手順、対象商品の表、写真を円形にして矢印でつなぐ 10. **よくある質問**（不安を解消する）: 白いFAQカードにQ&Aを3つ並べる 11. **フッター**（ブランドの印象を締めくくる）: 和紙地にキャラクターとロゴを横一列に並べる ## Imagery - 太い主線とフラットな塗りのゆるいキャラクターイラスト - 茶色の太線で描いたスマホと手の線画。アクセントは黄と赤 - 商品は切り抜き写真にし、寸法線と手書き風の吹き出しを添える - 地紋は商品形状の黄色い線画を斜めに散らす - ヘッダーは多色の紙吹雪と青海波 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に約70%幅のコンテナを置き、外側は和紙地を見せる - PC ではステップカードを横に2列で並べる - 装飾文字やキャラクターの配置は SP と同じ構成のまま縮小する - 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-5dd61c5b`（元 LP の URL から採番） - **元 LP**: https://www.calbee.co.jp/yametoma2026/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。