--- version: alpha name: Yellow Teal Anime Collab Food Campaign LP description: 黄色のストライプ地に白カードを重ね、ティールの帯見出しでまとめた食品メーカーのアニメコラボキャンペーンLP。SNS応募・同封当たり・アレンジレシピの3部構成。レシピの手順はデフォルメキャラの吹き出し会話で進む。 colors: primary: '#15A4B3' secondary: '#FCE433' background: '#FEFEFE' background-alt: '#FCFEFC' cta: '#020202' on-cta: '#EEEEEE' text: '#222222' accent-1: '#E8242B' tint-1: '#EBF9F6' line: '#87CBC4' marker: '#23A5B0' accent-2: '#E0C060' primary-accessible: '#0E707A' accent-1-accessible: '#D5161D' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Montserrat fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 56px label-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 32px step-ribbon: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 32px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px badge-lottery: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px chat-bubble: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 64px step-number: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px ingredient-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px keyword-marker: backgroundColor: '{colors.marker}' typography: '{typography.headline-sm}' height: 28px --- # DESIGN.md — 黄×ティールのアニメコラボ食品キャンペーンLP（Yellow Teal Anime Collab Food Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: アニメコラボ・黄色ストライプ・ティール帯・白カード・キャラ吹き出し・レシピ - **地の質感**: 黄色の斜めストライプ地と淡いグレー地。白カードはフラットで、細いティール枠がつく - **形**: 角丸カード、台形のリボン見出し、黒いピルボタン、丸い番号バッジ - **温度感**: 明るく暖かい。ティールで清潔感と落ち着きを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#15A4B3` | 見出し帯・ティール文字 | 6% | 画素の実測 | | `secondary` | `#FCE433` | 黄色のストライプ地・ラベル帯 | 7% | 画素の主要色に補正 | | `background` | `#FEFEFE` | カードの地 | 32% | 画素の実測 | | `background-alt` | `#FCFEFC` | ページ外側の淡いグレー地 | 11% | 画素の実測 | | `cta` | `#020202` | フォロー・リポストの黒ボタン | 1% | 画素の実測 | | `on-cta` | `#EEEEEE` | 黒ボタン上の文字 | 0% | 画素の実測 | | `text` | `#222222` | 見出し・本文の濃い文字 | 3% | 推定 | | `accent-1` | `#E8242B` | 抽選バッジ・クリック誘導の赤 | 0% | 推定 | | `tint-1` | `#EBF9F6` | 吹き出し・材料ボックスの淡いミント地 | 3% | 画素の主要色に補正 | | `line` | `#87CBC4` | カード枠・吹き出し枠 | 2% | 画素の主要色に補正 | | `marker` | `#23A5B0` | 本文中のキーワード強調に使うティールの面 | 0% | 画素の主要色に補正 | | `accent-2` | `#E0C060` | 見出し帯の金色の飾り | 0% | 推定 | | `primary-accessible` | `#0E707A` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D5161D` | AA を満たす補正値（計算） | | 計算 | - 外側は黄色ストライプかグレー地にし、内容は必ず白カードに載せる - セクション見出しはティールの帯に白文字 - サブコピーは黄色のラベル帯に濃いティール文字 - 赤は抽選数やクリック誘導だけに使う - SNS系のボタンは黒地に白文字 - キャラの吹き出しは白またはミント地にティール枠、文字はティール - `label-ribbon` は文字 `#15A4B3` × 背景 `#FCE433` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0E707A`、4.5:1）を使う。 - `step-ribbon` は文字 `#FCE433` × 背景 `#15A4B3` のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0E707A`、4.5:1）を使う。 - `badge-lottery` は文字 `#EEEEEE` × 背景 `#E8242B` のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D5161D`、4.57:1）を使う。 - `chat-bubble` は文字 `#15A4B3` × 背景 `#FEFEFE` のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0E707A`、4.64:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 賞品名・当選数などの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.3 | 0.02em | | `headline-lg` | ティール帯に載せる白い見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.35 | 0.04em | | `headline-md` | レシピ名（ティールの太字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.3 | 0.02em | | `headline-sm` | 小見出し・期間ラベル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `body-md` | 手順・材料などの本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.0em | | `accent` | キャラ吹き出しのセリフ | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.6 | 0.02em | | `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | | `label-button` | 黒ボタン・STEPラベル | 欧文サンセリフ | Montserrat | 700 | 15px | 1.2 | 0.04em | - 見出しは極太にして中央揃え - 日付や数字は前後の文字より一回り大きくする - 強調したい語はティールの面に白抜きで載せる - 本文は左揃えで行間を広めにとる - セリフは丸ゴシックの太字にしてティールで組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは中央に置き、左右に地を少し見せる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 大セクションごとに白い角丸カードを置く - カード上端にティール見出し帯を全幅で付ける - 応募手順はSTEPのリボン見出しで縦に積む - レシピは料理写真、材料ボックス、作り方カードの順に並べる - 吹き出しはキャラを左右交互に置く - 応募要項はスクロール枠に入れる ## Elevation & Depth - 影はほぼ使わず、枠線と地の色で層を分ける - 賞品の画像にだけごく薄いドロップシャドウ - カードはフラットに置き、細いティール枠で囲む ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 料理写真は角丸の長方形で、右下に所要時間のラベル。キャラは切り抜きで配置 - **セクション境界**: 黄色ストライプとグレー地の切り替え、ティールの帯 - STEP見出しは両端を斜めにカットしたリボン形 - 番号は塗りつぶしの丸に白数字 - 番号の右にドットの点線を引く - レシピ名の枠は左右に斜線を入れる - 吹き出しは角丸で、キャラ側に三角のしっぽ ## Components - **ティール見出し帯**（`section-band`）: カード上端の帯。白の極太文字で、左右に金色の飾りを付ける - **黄色ラベル帯**（`label-ribbon`）: サブコピーやキャッチを載せる黄色の帯 - **STEPリボン**（`step-ribbon`）: 斜めカットのティール帯に、黄色でSTEP番号を入れる - **黒ピルボタン**（`button-primary`）: SNSのフォロー・投稿を開くボタン。右端に外部リンクのアイコン - **抽選数バッジ**（`badge-lottery`）: 赤い角丸四角に白文字で当選数を入れる - **キャラ吹き出し**（`chat-bubble`）: ティール枠の白い吹き出しにティール文字。脇にデフォルメキャラを置く - **手順番号**（`step-number`）: ティールの丸に白数字を入れ、右へ黄色とティールの点線を延ばす - **材料ボックス**（`ingredient-box`）: 淡い地に細い枠。材料リストを左に、商品写真を右に置く - **キーワード白抜き**（`keyword-marker`）: 本文の重要語だけをティールの面に白文字で抜く ## Do's and Don'ts **Do** - 内容はすべて白カードに収め、外側は黄色またはグレーの地にする - 見出しはティール帯か黄色ラベルのどちらかで統一する - 手順と手順の間にキャラのセリフを挟み、会話調で進める - 日付・数量・当選数は大きな太字で目立たせる - 注釈は※付きの小さい文字でまとめる **Don't** - 強い影やグラデーションを多用しない - 赤を見出しや広い面に使わない - 細い明朝体を使わない - キャラを左右の片側だけに偏らせない - 白カードを外して地の上に直接本文を置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボであることを一目で伝える）: 黄色の地にキャラ3体を並べ、ロゴを「×」でつなぎ、帯の見出しを置く 2. **キャンペーン一覧**（3つの企画をまとめて見せ、各セクションへ誘導する）: 枠付きのバナーを3つ縦に並べる 3. **SNS応募キャンペーン**（賞品と応募期間を伝える）: ティール帯の見出し、大きな期間表示、赤バッジ、賞品写真の順に並べる 4. **応募方法**（手順を迷わせない）: STEPリボンを3段重ね、それぞれに黒ボタンとアイコンを付ける 5. **応募要項**（規約を開示する）: スクロールする枠に小さな文字で入れる 6. **同封当たりキャンペーン**（商品を買う動機をつくる）: ティール帯の見出し、景品カードの画像、キーワードの白抜き、対象商品3つの横並び 7. **アレンジレシピ導入**（商品の楽しみ方を提案する）: 黄色ラベルの下に、ティールの極太見出しを置く 8. **レシピ詳細**（作り方を楽しく見せる）: レシピ名の枠、料理写真、材料ボックス、作り方カードを並べ、手順の間にキャラの吹き出しを挟む ## Imagery - キャラはSDのデフォルメ調で、商品を食べたり持ったりしているポーズにする - 料理は真上か斜め上から撮り、白い器と赤チェックや布の背景を合わせる - 商品パッケージは切り抜いて横に並べる - SNSのアイコンは黒丸に白線のシンプルな形 - 飾りは金色の小さな星やきらめき - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC版も幅560px前後の中央1カラムで、SPと同じ構成 - PCでは左右の余白に黄色またはグレーの地を広げる - SPではカードの左右に約4%ずつの余白をとる - 対象商品の3つ並びはSPでも3列のまま縮める ## 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-ccdb5939`（元 LP の URL から採番） - **元 LP**: https://www.maruchanseimen.jp/frieren/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。