DESIGN.md — 黄×ティールのアニメコラボ食品キャンペーンLP（Yellow Teal Anime Collab Food Campaign LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: アニメコラボ・黄色ストライプ・ティール帯・白カード・キャラ吹き出し・レシピ
• 地の質感: 黄色の斜めストライプ地と淡いグレー地。白カードはフラットで、細いティール枠がつく
• 形: 角丸カード、台形のリボン見出し、黒いピルボタン、丸い番号バッジ
• 温度感: 明るく暖かい。ティールで清潔感と落ち着きを足している

Colors

• 外側は黄色ストライプかグレー地にし、内容は必ず白カードに載せる
• セクション見出しはティールの帯に白文字
• サブコピーは黄色のラベル帯に濃いティール文字
• 赤は抽選数やクリック誘導だけに使う
• 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

• 見出しは極太にして中央揃え
• 日付や数字は前後の文字より一回り大きくする
• 強調したい語はティールの面に白抜きで載せる
• 本文は左揃えで行間を広めにとる
• セリフは丸ゴシックの太字にしてティールで組む
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。