--- version: alpha name: Japanese Festive Pattern Campaign LP description: 生成りの地に梅・青海波・雲の和柄を敷き、朱オレンジと深緑で引き締めた、お正月らしい縁起物の食品プレゼントキャンペーンLP。白い角丸カードに朱色の枠線を付けて情報を区切り、波形の緑ラベルを見出しにしている。 colors: primary: '#FC5202' secondary: '#1E7A3A' cta: '#FC5302' on-cta: '#FFFFFF' background: '#F5E7C2' surface: '#FFFFFF' tint-1: '#FCECE5' accent-1: '#D9B44B' accent-2: '#F59604' accent-3: '#F4977A' background-alt: '#F6F6F3' text: '#343433' tint-2: '#F7EDCE' cta-accessible: '#D14502' primary-accessible: '#D44502' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.15em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 800 lineHeight: 1.1 rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px heading-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 36px card-section: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' badge-number: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 260px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 48px nav-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px scroll-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 320px --- # DESIGN.md — 生成り和柄×朱と緑の縁起物キャンペーンLP（Japanese Festive Pattern Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 和風、ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: お正月・縁起物・和柄・朱と緑・抽選プレゼント・キャラクター - **地の質感**: 生成り地に梅花・七宝・雲・ドットの和柄をフラットに散らす。グラデーションや陰影は使わない。 - **形**: 角丸のカード、ピル型ボタン、波形の見出しラベル、丸い番号バッジ - **温度感**: 暖色寄り。生成りと朱で温かく、深緑で締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FC5202` | 朱オレンジ（ナビ・カード枠・番号バッジ） | 4% | 画素の実測 | | `secondary` | `#1E7A3A` | 深緑（見出しラベル・サブボタン） | 4% | 推定 | | `cta` | `#FC5302` | 主CTA応募ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#F5E7C2` | 和柄を敷く生成りの地 | 30% | 画素の実測 | | `surface` | `#FFFFFF` | 情報カードの白地 | 35% | 画素の実測 | | `tint-1` | `#FCECE5` | STEPカードの淡いピンク地 | 7% | 画素の実測 | | `accent-1` | `#D9B44B` | ファーストビューの金和柄 | 6% | 画素の実測 | | `accent-2` | `#F59604` | ハガキ応募ボタンの山吹色 | 0% | 画素の実測 | | `accent-3` | `#F4977A` | 柄の梅花ピーチ | 2% | 推定 | | `background-alt` | `#F6F6F3` | W チャンス内のグレージュ面 | 3% | 画素の主要色に補正 | | `text` | `#343433` | 本文・見出しの墨色 | 2% | 画素の実測 | | `tint-2` | `#F7EDCE` | 雲柄の淡い生成り | 2% | 画素の主要色に補正 | | `cta-accessible` | `#D14502` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D44502` | AA を満たす補正値（計算） | | 計算 | - ページの地は生成りにして、和柄を全面に敷く - 情報はすべて白いカードに載せる。カード枠は朱色か深緑の線にする - 主CTAは朱オレンジ、詳細リンクは深緑、ハガキ用は山吹色と役割で色を分ける - 見出しラベルは深緑の地に白文字 - 番号バッジ・STEPラベル・Qアイコンは朱オレンジで統一する - 手順カードの面は淡いピンクにして白と区別する - `button-primary` は文字 `#FFFFFF` × 背景 `#FC5302` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D14502`、4.6:1）を使う。 - `badge-number` は文字 `#FFFFFF` × 背景 `#FC5202` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D44502`、4.51:1）を使う。 - `nav-tab` は文字 `#FFFFFF` × 背景 `#FC5202` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D44502`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャンペーン名ロゴ（縁取り付き極太） | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.0em | | `headline-md` | 緑ラベルの見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.15em | | `headline-sm` | 景品名・カード内の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em | | `note` | 注釈・応募要項 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.2 | 0.1em | | `accent` | 当選人数などの数字 | 欧文サンセリフ | Montserrat | 800 | 22px | 1.1 | 0.0em | - 見出しとボタンは太い丸ゴシックで字間を広くとり、親しみを出す - 本文は中太のゴシックで行間を広めにする - 当選人数や日付の数字は大きく太くする - ロゴ見出しは白フチと影の付いた極太文字にする - 注釈は11pxで、カードの下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。手順カードは縦積み、または横スクロールの3枚 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは白いカード1枚に収め、上辺に緑の見出しラベルをかぶせる - カードの間は40px前後あけ、その隙間に和柄を見せる - 景品は番号バッジ・名前・写真・人数バッジ・詳細ボタンを1単位にする - 景品の単位どうしは緑の点線で区切る - CTAは各ブロックの終わりにボタン幅を中央揃えで置く ## Elevation & Depth - 影は基本的に使わず、フラットにする - カードは2px前後の朱線または緑線で浮かせる - FAQの白い行は枠線も影もなしで地から浮かせる ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は白背景の角版か、切り抜きで置く - **セクション境界**: 直線の区切りは使わない。和柄の地の上に白カードを並べて区切る - ボタンはピル型で、右端に白丸の矢印アイコンを付ける - 見出しラベルは上下が波打つ緑の帯 - 番号バッジは朱色の円に、緑の葉の飾りを添える - 当選人数バッジは葉の形の緑タグ ## Components - **応募CTA**（`button-primary`）: 朱オレンジのピル型ボタン。右端に白丸の矢印を付ける - **詳細リンクボタン**（`button-secondary`）: 深緑のピル型ボタン。白文字と白丸の矢印 - **波形見出しラベル**（`heading-label`）: カード上辺にかぶせる緑の波形帯。脇にキャラクターを添える - **セクションカード**（`card-section`）: 白地に朱色の枠線を付けた角丸カード - **ポイント番号バッジ**（`badge-number`）: 朱色の円の中に数字とコース名を入れ、緑の葉を添える - **STEPカード**（`step-card`）: 淡いピンクの縦長カード。上に朱色のピル型STEPラベル、中央に白丸に入れた緑の線画アイコン - **FAQアコーディオン**（`faq-item`）: 白い角丸の行。左に朱丸のQアイコン、右に緑の丸いプラスアイコン - **アンカーナビ**（`nav-tab`）: 朱オレンジの帯を5つに区切ったタブ - **応募要項スクロール枠**（`scroll-box`）: 白いカード内の固定高さのテキスト枠。緑のスクロールバーを付ける ## Do's and Don'ts **Do** - 地には和柄（梅・七宝・雲・ドット）を必ず敷く - 情報は白カードにまとめ、緑の波形ラベルで見出しにする - 朱・緑・山吹をボタンの役割で使い分ける - 縁起物のキャラクターを見出しの脇に小さく添える - 手順はSTEP番号・アイコン・短文の3段で組む **Don't** - 寒色や黒を基調にしない - グラデーションや強い影を使わない - 角の立った四角いボタンにしない - 写真を全面背景にして和柄を隠さない - 明朝体で堅くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と当選総数を伝える）: 金の和柄の地に極太ロゴとキャラクターを置く。緑の吹き出しで総当選数、縦帯で応募条件を示す 2. **アンカーナビ**（各セクションへ移動させる）: 朱色のタブを5つ横に並べる 3. **応募期間**（期間と締切を伝える）: グレーの帯の上に、朱ラベル付きの日付を並べ、その上に緑のCTAを置く 4. **豆知識**（縁起の由来を伝える）: 朱枠のカードに、テキストと丸い写真を左右に並べる 5. **景品**（コース別の景品を見せる）: 番号バッジ・写真・人数タグ・緑のボタンを1単位にし、点線で区切る 6. **Wチャンス**（外れた人への追加抽選を伝える）: グレージュの面に景品2点を並べる 7. **対象商品**（購入対象を示す）: 商品写真を3列+2列で並べ、緑のレシピボタンを置く 8. **応募方法**（WEB応募とハガキ応募の手順を示す）: STEPカードを3つ並べて2系統分示し、それぞれの下にCTAを置く 9. **応募要項**（規約を詳しく載せる）: スクロール枠に小さい文字で入れる 10. **よくある質問**（疑問を解消する）: 白いQ行のアコーディオンを和柄の地に直接並べる 11. **お問い合わせ・最終CTA**（窓口を案内し、応募へ誘導する）: ロゴ・電話番号・受付時間ラベルのカードの下に朱色のCTAを置く ## Imagery - 縁起物（だるま・梅・扇・金の雲）のフラットなキャラクターイラストを使う - 背景の和柄は生成り・金・ピーチの3色程度で、細い線の入らない面だけで描く - 商品写真は白背景で、真上か斜め上から撮る - 手順のアイコンは緑の細い線画にし、白丸の中に入れる - 金色のきらめき（四芒星）を散らして華やかにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約480px幅相当の固定カラムを置き、左右に和柄の地を広げる - SPではカード幅を90%にし、STEPカードは縦に積む - ナビは2段にするか横スクロールにする - FVのロゴとキャラクターは縦に積み直す - 対象商品はSPで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-6bd4fb18`（元 LP の URL から採番） - **元 LP**: https://www.fujicco.co.jp/kombu/fujicconi/campaign/yorokonbu_cp2025/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。