--- version: alpha name: Playful Picnic Meadow Campaign LP description: 若草色のファーストビューから、クリーム地の賞品紹介、芝生グリーンの応募方法、水色のお問い合わせへと、地色を季節の野外風景のように切り替えていくキャンペーンLP。赤いリボン見出しと赤いピル型CTA、白い角丸カード、手描き風キャラクターと花畑のイラストで、子ども連れ家族向けの楽しいおでかけ感を出している。 colors: primary: '#50B33D' cta: '#E60012' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FEF8D8' tint-1: '#E4FEB6' tint-2: '#96D5F8' secondary: '#034492' accent-1: '#FDF202' accent-2: '#F5B9D2' accent-3: '#96D1DC' dark-section: '#02713F' text: '#333333' marker: '#E60012' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.12em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 800 lineHeight: 1.0 rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px 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.full}' height: 56px heading-ribbon: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 44px period-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px prize-card: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 420px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 520px point-badge: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px warning-bar: backgroundColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px ng-card: backgroundColor: '{colors.background}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px terms-scroll: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 800px contact-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 560px --- # DESIGN.md — 芝生グリーンと赤リボンの食品プレゼントキャンペーンLP（Playful Picnic Meadow Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: ピクニック・芝生と花畑・赤リボン見出し・白カード・家族向け・抽選プレゼント - **地の質感**: フラットな塗りに手描き風イラストを重ねる。斜めストライプや草のギザギザ輪郭で絵本のような質感を出す - **形**: 大きめ角丸の白カード、ピル型ボタン、六角形のステップ番号、両端に切り込みが入ったリボン帯の見出し - **温度感**: 明るく暖かい。黄・クリームに赤と緑の原色アクセント ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#50B33D` | 応募方法セクションの芝生グリーン地 | 15% | 画素の実測 | | `cta` | `#E60012` | 応募ボタン・リボン見出しの赤 | 2% | 推定 | | `on-cta` | `#FFFFFF` | 赤ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | カードや導入部の白地 | 29% | 画素の主要色に補正 | | `background-alt` | `#FEF8D8` | 賞品・対象商品セクションのクリーム地 | 14% | 画素の実測 | | `tint-1` | `#E4FEB6` | ファーストビューの若草色地 | 4% | 画素の実測 | | `tint-2` | `#96D5F8` | お問い合わせセクションの水色地 | 9% | 画素の実測 | | `secondary` | `#034492` | お問い合わせの濃い青（リボン・枠・文字） | 2% | 画素の実測 | | `accent-1` | `#FDF202` | 緑地上の黄色リボン見出し・期間帯のストライプ黄 | 2% | 画素の実測 | | `accent-2` | `#F5B9D2` | 上位コース賞品カードのピンク地 | 3% | 画素の実測 | | `accent-3` | `#96D1DC` | 下位コース賞品カードの水色地 | 3% | 画素の主要色に補正 | | `dark-section` | `#02713F` | STEP六角形番号の深緑 | 1% | 画素の実測 | | `text` | `#333333` | 本文・見出しの濃いグレー | 2% | 推定 | | `marker` | `#E60012` | 導入文の赤い強調テキスト | 0% | 推定 | - セクションごとに地色を若草→白→クリーム→芝生緑→水色と切り替え、野外の風景を下へ進む構成にする - 主CTAと見出しリボンは赤一色で統一し、他の要素に赤の面を使いすぎない - 緑地の上では見出しリボンを黄色に変え、文字は緑で載せる - 賞品カードはコースごとにピンク・水色で色分けし、バッジもそれぞれ赤・青に揃える - 情報カードは必ず白地にして緑や水色の地から浮かせる - お問い合わせ部は青系で統一し、枠線・ラベル帯・文字すべて同じ濃い青を使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャンペーン名 | 丸ゴシック | M PLUS Rounded 1c | 900 | 32px | 1.2 | 0.02em | | `headline-lg` | リボン帯のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.2 | 0.12em | | `headline-md` | 賞品名・導入の赤字強調 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.5 | 0.05em | | `headline-sm` | STEPカードの説明見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.6 | 0.05em | | `body-md` | 規約・説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | ※注釈・賞品サイズ表記 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.02em | | `label-button` | 赤いピル型ボタン | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.2 | 0.1em | | `accent` | STEP表記・ポイントバッジ | 欧文サンセリフ | Montserrat | 800 | 28px | 1.0 | 0.0em | - 見出し・ボタンは太い丸ゴシックで弾む印象にする - 規約・注釈は普通のゴシックで小さく、行間を広めに取る - セクション見出しは字間を広げて3〜5文字程度にまとめる - 強調したい一文だけを赤字にし、前後の文は黒で挟む - 日付・数字は太字にして読みやすくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。対象商品は 3 列グリッド、NG例は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右に約 6% の余白を取って中央に置く - セクションの合間に花畑や人物のイラストを左右どちらかに寄せて入れ、空白を作る - リボン見出しは中央揃えにし、下に 24px 前後の間隔をあけてカードを置く - STEPカードは六角形番号をカード上端にまたがせて縦に並べる - 注釈はカード外の直下に小さい文字で並べる ## Elevation & Depth - 影はほぼ使わず、地色との差でカードを浮かせる - 賞品カードは淡い色面だけで立体感をつけない - コースバッジはカードの左上に重ねて少しはみ出させる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品・賞品は切り抜きにして背景になじませ、NG例は白い角丸の枠に入れる - **セクション境界**: 芝生のギザギザ輪郭や、ゆるい波線で地色を切り替える - 見出しは両端がV字に切れたリボン帯にする - STEP番号は濃緑の六角形に白抜き文字で入れる - コースバッジは赤や青のギザギザ円と、斜めに切った旗形の組み合わせにする - 期間表示は白いピル型の帯を黄色のストライプ地に重ねる ## Components - **赤ピル型応募ボタン**（`button-primary`）: 赤地に白い太字、右端に小さな三角矢印。幅は画面の約75% - **リボン帯見出し**（`heading-ribbon`）: 両端が切れ込んだ赤い帯に白文字。緑地の上では黄帯に緑文字にする - **期間表示の白ピル**（`period-pill`）: 黄色ストライプ地の上に白いピル。上に赤ラベル、下に黒字の日付 - **コース別賞品カード**（`prize-card`）: ピンクまたは水色の角丸カード。左上にコースバッジ、中央に下線マーカー付きの賞品名 - **STEPカード**（`step-card`）: 白い角丸カードの上端に濃緑の六角形番号。説明文とイラストを中央に置く - **ポイント換算ラベル**（`point-badge`）: 白地に赤または青の枠線を引いたピル。2行で換算を表示 - **注意見出しの黒帯**（`warning-bar`）: 黒に近い濃色のピル帯に白文字で2行。下にNG例カードを並べる - **NG例カード**（`ng-card`）: 白角丸の中にレシート図、左上に赤い×印、カードの下に白字でキャプション - **規約スクロールボックス**（`terms-scroll`）: 白角丸の固定高さボックスに、緑のスクロールバー。小見出しは【】付きの緑字 - **問い合わせカード**（`contact-card`）: 濃い青の太枠を引いた白カード。電話・メールは青枠のピル、受付期間は青帯ラベルで示す ## Do's and Don'ts **Do** - セクションの地色を風景のように変えて、スクロールに物語性を持たせる - 主CTAは赤ピルに統一し、応募方法の中と後に繰り返し置く - キャラクターや花のイラストを余白に散らして、楽しさを保つ - 数字（ポイント・当選人数・日付）は太字かバッジで目立たせる - 注意事項は箇条書きにし、白文字を緑地の上に載せる **Don't** - 写真の背景やリアルな人物写真を使わない - 暗い色やくすんだ色でセクションを塗らない - 見出しを普通の帯や下線だけで済ませない - 赤をCTAと見出し以外の面に多用しない - カードの角を直角にしない - 細い明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と賞品をひと目で伝える）: 若草色の地に緑の看板風タイトルを置き、白い角丸パネルに賞品切り抜きと当選人数を並べる。左右にキャラクターのイラスト 2. **応募期間**（対象期間と締切を示す）: 黄色の斜めストライプ地に白いピルを2本重ね、赤ラベルと日付を入れる 3. **導入メッセージ**（キャンペーンの仕組みを一文で伝える）: 白地の中央揃え。黒字の前置きに続けて赤い太字を3行、左右に草花のイラスト、下に赤い下向き矢印 4. **賞品紹介**（コースごとの賞品と必要ポイントを見せる）: クリーム地に赤リボン見出し。ピンクと水色の角丸カードにバッジを重ね、賞品の切り抜きとサイズ注釈を入れる 5. **対象商品**（ポイント対象の商品を一覧で示す）: 白い角丸カードにポイント換算のピルを置き、パッケージを3列グリッドで並べる。その下に注釈と赤い外部リンクボタン 6. **応募方法**（3ステップで応募の手順を説明する）: 芝生のギザギザ輪郭から緑地に切り替え、黄リボン見出しの下にSTEPカードを縦に並べる。STEP2の中に応募CTAを置く 7. **注意事項・NG例**（無効になる応募を防ぐ）: 緑地に白字の箇条書き、黒いピル帯の見出し、2列のNG例カード、最後に応募CTAを置く 8. **応募規約**（規約の全文を載せる）: 黄リボン見出しの下に、白いスクロールボックスを置く 9. **お問い合わせ**（事務局の連絡先と受付時間を示す）: 波線で水色地に切り替え、青リボン見出しと青枠の白カードを置く。下に青字の注釈と、アヒルのイラスト ## Imagery - 太い輪郭線の手描き風キャラクター（子ども・犬・食べ物の擬人化）を余白に置く - 白と黄色の花が咲く緑の小島状の芝生イラストを、左右に飛び出させて配置する - チョウや鳥などの小さなモチーフを散らし、動きを出す - 商品・賞品は白背景の切り抜きで、少し上から見下ろす角度にする - 手順の説明はスマホやカメラを単純な線画アイコンで表す - NG例はモノクロのレシート図を、ぼかし・歪み・しわで表現する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では本文を中央 約60% 幅に収め、両脇の地色とイラストを広く見せる - PC の STEP カードは 3 列で横に並べる - PC の NG 例は 4 列で横一列に並べる - PC の期間表示は横長のピルにし、ラベルと日付を1行にまとめる - PC の問い合わせはラベル帯と内容を横に並べ、カードを小さくする - 見出しリボンや CTA のサイズは 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-103df1aa`（元 LP の URL から採番） - **元 LP**: https://www.ciscorn.jp/campaign25/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。