--- version: alpha name: Multi-Color Festival App Campaign LP description: 黄色い地に紙吹雪と集中線を散らした、にぎやかなアプリ会員向けキャンペーン LP。企画ごとに青・ピンク・緑・オレンジと地の色を切り替え、紺の太い縁取り文字と白フチの極太見出しでお祭り感を出す。 colors: primary: '#FFF101' secondary: '#43337D' cta: '#F30C8C' on-cta: '#FFFEFD' background: '#FEFEFE' background-alt: '#FDFDE3' accent-1: '#468CE4' accent-2: '#FE91C2' accent-3: '#66C834' tint-1: '#FF7127' tint-2: '#1DA77E' marker: '#EA127F' text: '#232462' dark-section: '#002090' cta-accessible: '#E20B82' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 900 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 14px section: 48px 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: 44px store-buttons: backgroundColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 46px campaign-index-card: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 70px badge-ribbon: backgroundColor: '{colors.secondary}' typography: '{typography.accent}' height: 32px bubble-label: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 40px coupon-card: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 170px period-pill: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 34px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 160px sticker-grid: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' --- # DESIGN.md — 黄×ピンク×紺のお祭り系アプリキャンペーン LP（Multi-Color Festival App Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、かわいい - **キーワード**: お祭り・紙吹雪・集中線・企画ごとの色替え・極太縁取り文字・アプリ誘導 - **地の質感**: ベタ塗りの原色の上に、薄い放射状の集中線と紙吹雪・星を散らす。グラデーションはほぼ使わない - **形**: 角丸の矩形カード、紺の角ばったリボン型バッジ、ギザギザのスタンプ型ラベル - **温度感**: 高彩度でとても暖かい。紺の締め色でまとめる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFF101` | メインの地色（FV・会員特典） | 15% | 画素の実測 | | `secondary` | `#43337D` | 締め色の紺（バッジ・縁取り・帯） | 6% | 画素の主要色に補正 | | `cta` | `#F30C8C` | 主ボタンのマゼンタ | 2% | 画素の実測 | | `on-cta` | `#FFFEFD` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | カード・吹き出しの白 | 9% | 画素の実測 | | `background-alt` | `#FDFDE3` | ステッカー一覧の淡いクリーム面 | 10% | 画素の実測 | | `accent-1` | `#468CE4` | 第1弾セクションの青 | 9% | 画素の実測 | | `accent-2` | `#FE91C2` | 第2弾セクションのピンク | 8% | 画素の実測 | | `accent-3` | `#66C834` | 第3弾セクションの黄緑 | 9% | 画素の実測 | | `tint-1` | `#FF7127` | 第4弾セクションのオレンジ | 10% | 画素の実測 | | `tint-2` | `#1DA77E` | クーポン帯の濃い緑 | 4% | 画素の主要色に補正 | | `marker` | `#EA127F` | 強調語のマゼンタ文字 | 1% | 画素の実測 | | `text` | `#232462` | 本文・見出しの紺文字 | 3% | 画素の実測 | | `dark-section` | `#002090` | セクション境界の紺帯 | 2% | 推定 | | `cta-accessible` | `#E20B82` | AA を満たす補正値（計算） | | 計算 | - FV と締めの会員特典は黄色地。企画セクションは青→ピンク→緑→オレンジと一色ずつ地を変える - 各企画の見出し・カードは、そのセクションの地色を濃くした色でまとめる - 文字と縁取りは紺で統一し、多色でも散らからないようにする - 強調語はマゼンタか黄色の文字にし、白い角丸ラベルに乗せる - セクションの境目には紺の帯か、白ドットを打ったマゼンタの帯を入れる - 主 CTA はマゼンタのピル型、アプリストアのボタンは黒 - `button-primary` は文字 `#FFFEFD` × 背景 `#F30C8C` のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E20B82`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 企画名の極太見出し（白フチ＋紺の影） | 装飾・ディスプレイ | Dela Gothic One | 900 | 48px | 1.15 | 0.0em | | `headline-lg` | リード見出し・価格の大きな数字 | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.1 | 0.0em | | `headline-md` | 白い吹き出しに入れる小見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.3 | 0.02em | | `headline-sm` | カード見出し・期間表示 | ゴシック | Noto Sans JP | 900 | 17px | 1.4 | 0.02em | | `body-md` | 説明文（太字・中央揃え） | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 第○弾・○週目のバッジ文字 | ゴシック | Noto Sans JP | 900 | 14px | 1.2 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.02em | - 見出しは極太にし、白フチと紺の影を重ねて立体的に見せる - 本文もほぼ太字にし、中央揃えにする - 曜日は小さな丸の中に一文字で入れる - 説明文の上下に斜めの短い線（＼ ／）を付けて注目させる - 価格は数字を特大にし、OFF の文字は小さめに並べる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。企画一覧は 2×2、特典カードは 3 列、商品一覧は 4 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算） - セクションは端まで色で塗り、中のカードは左右 4% 程度の余白を取る - 各企画の冒頭は左上に第○弾バッジ→白い吹き出し→特大見出し→期間の順に並べる - クーポンは週ごとの横長カードを縦に積む。左に文字、右に商品写真 - 注釈はセクションの最後に左揃えで置く - 一覧は角丸のクリーム色パネルにまとめる ## Elevation & Depth - カードの下に濃い同系色の厚いベタ影（ぼかしなし、4〜6px）を付ける - 見出し文字は白フチ＋紺の影で浮かせる - 商品写真には白と淡い色の二重フチを付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 背景を抜いた商品写真。ステッカー風の波形フチで丸く切り抜く - **セクション境界**: 直線で区切り、紺の帯やドット入りのマゼンタ帯を挟む - バッジは紺の角ばった形で、カードの左上にはみ出させる - カードは角丸 12px 前後 - スタンプ型のギザギザラベルを右上に重ねる - 主ボタンは完全なピル型 ## Components - **主 CTA ボタン**（`button-primary`）: マゼンタのピル型。右端に白い丸の再生アイコン - **アプリストアボタン**（`store-buttons`）: 黒い角丸ボタンを 2 つ横に並べる。白文字 - **企画目次カード**（`campaign-index-card`）: 2×2 に並べた色違いのカード。白文字の企画名と下向き矢印の丸、左上に紺のバッジ - **第○弾バッジ**（`badge-ribbon`）: 紺地に白文字。角ばったリボン型で、セクションの左上に置く - **白い吹き出しラベル**（`bubble-label`）: 白い角丸の面に紺の太字。見出しの前振りに使う - **週替わりクーポンカード**（`coupon-card`）: 上に白い期間の帯、下に色の面。左に特大の価格、右に商品写真 - **期間ピル**（`period-pill`）: 紺のピル型に白文字で期間を書く。曜日は丸で囲む - **特典カード**（`benefit-card`）: 白い角丸カードを 3 列に並べる。紺のラベル、マゼンタの強調語、下にイラスト - **ステッカー一覧**（`sticker-grid`）: クリーム色のパネルに、波形フチの丸い商品写真を 4 列に並べる ## Do's and Don'ts **Do** - 企画ごとに地の色を変え、区切りがひと目でわかるようにする - 文字・縁取り・バッジは紺で統一する - 見出しは白フチ付きの極太にし、紙吹雪や星を周りに散らす - 価格や数字はとにかく大きくする - アプリダウンロードの導線をページ上部と最後の 2 か所に置く **Don't** - 細い明朝体や繊細な書体は使わない - くすんだ色やパステルだけの配色にしない - 黒い文字を多用しない（紺を使う） - 1 つのセクションの中に複数の地色を混ぜない - 写真に暗い背景を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名・期間・会員規模を伝える）: 黄色地に集中線と紙吹雪。上に吹き出し、中央にロゴと極太タイトル、下に紺の期間ピル。左右に手に持ったスマホのイラスト 2. **リード文**（感謝の気持ちと内容を短く伝える）: 紺の太字を中央揃えにする。数字は白いピルに入れ、強調語はマゼンタ 3. **企画の目次**（4 つの企画へ誘導する）: 色違いのカードを 2×2 に並べ、各カードに下向き矢印を付ける 4. **アプリダウンロード帯**（アプリのインストールを促す）: ドット入りのマゼンタ帯に、黒いストアボタンを 2 つ並べる 5. **企画1 抽選会**（抽選の参加条件と景品を伝える）: 青地。右上にスタンプラベル、特大の見出し、期間を 2 段組のパネルにする 6. **企画2 週替わりクーポン**（週ごとの割引を伝える）: ピンク地。週番号バッジ付きの色違いクーポンカードを 4 枚縦に積む 7. **企画3 期間限定アップグレード**（追加料金で量が増える特典を伝える）: 黄緑地。左に大きな商品写真、右に濃い緑の価格カードを 2 枚 8. **企画4 ステッカープレゼント**（全種類のノベルティを見せる）: オレンジ地。クリーム色のパネルに丸いステッカー写真を 4 列に並べ、最後に注釈 9. **会員特典・CTA**（アプリの価値を伝えてダウンロードへ誘導する）: 黄色地にロゴ、白い特典カード 3 枚、マゼンタのピル CTA、ストアボタン ## Imagery - 商品写真は背景を抜き、真上か斜め上から明るく撮る - 丸い商品は白＋淡い色の波形フチでステッカー風にする - 紙吹雪・星・リボンをフラットなイラストで散らす - セクションの背景には薄い放射状の集中線を入れる - スマホやコインなどのアイコンは、太い線のポップなイラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に 750px 前後の SP と同じ幅の列を置き、左右は地色や柄で埋める - 企画目次は PC で 4 列横並びにしてもよい - クーポンカードは PC で 2 列にできる - ステッカー一覧は PC で 6〜8 列に増やす - 見出しの文字サイズは最大で 1.5 倍までに留める ## 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-9fa0222d`（元 LP の URL から採番） - **元 LP**: https://www.31ice.co.jp/contents/topics/250901_01.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。