DESIGN.md — クリーム黄×チョコ茶のキャラコラボ懸賞 LP（Pudding Yellow Character Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: プリンの黄色・カラメルの焦げ茶・斜めストライプ・肉球柄・太い角丸枠・リボン見出し
• 地の質感: 淡い黄色の斜めストライプと肉球・アスタリスク柄のパターン地。フラットな塗りで、ボタンの下にだけ厚みのある色ずらしの影を付ける
• 形: 太い焦げ茶の線で囲んだ角丸カード、ピル型ボタン、波打つスカラップ縁、リボン型見出し
• 温度感: 暖色寄りで甘く明るい

Colors

• 地はクリーム黄の斜めストライプと肉球柄を交互に使い、セクションを分ける
• カードは白か淡いクリームの面に、焦げ茶の3px前後の太枠で囲む
• 見出しはすべて焦げ茶のリボン帯に黄色の文字
• 主 CTA は白地に赤の縁と赤文字、下に赤の厚い影
• サブ導線は白地にオレンジの縁と文字で、主 CTA と色を分ける
• 数字・当選数・購入条件は赤い太字にし、本文の黒茶の中で目立たせる
• 欧文ラベルは見出しの下にオレンジの小さい大文字で置く
• button-secondary は文字 #F37D1B × 背景 #FFFFFF のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BD5B0A、4.5:1）を使う。
• tab-toggle は文字 #F37D1B × 背景 #FBDA72 のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BD5B0A、4.52:1）を使う。

Typography

• 文字は太めのゴシックか丸ゴシックだけを使い、明朝は使わない
• 賞品名はオレンジの文字に白フチと黄色の影を付けた袋文字にする
• 強調したい語だけを赤かオレンジにし、ひとまわり大きくする
• 本文は中央揃えで短く改行し、注釈は左揃えにする
• 決まり文句は「＼ ／」で挟んだ小見出しにする
• 強調する語の上に傍点を付けることがある
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビと商品パッケージだけ 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは見出しリボン、欧文ラベル、白い枠カードの順に並べる
• カードは左右 24px ほど余白を取り中央に置く
• ページ内リンクのナビは茶色ボタンを 2 列×3 段に並べる
• STEP カードは縦に並べ、カード間に下向きの三角矢印を置く
• キャラのイラストはカードの角や見出しの脇にはみ出すように置く

Elevation & Depth

• ボタンは同系色を濃くした色を下に 4〜6px ずらした厚みのある影にする
• カードはぼかし影を使わず、太い線だけで浮かせる
• 動画枠はオレンジの太い縁で囲む
• ナビボタンは茶色の縦グラデに、下向きの小さな三角を付ける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品写真は背景を抜き、白地に置く。説明の図は円の中に収める
• セクション境界: ヒーローの下は波打つスカラップ縁。ほかはストライプ柄から肉球柄へ地の柄を切り替える
• カードは角丸 16〜24px で、焦げ茶の太線を付ける
• STEP の茶色い帯の下端は波形のスカラップにする
• 概要カードは上部をキャラの頭の形に盛り上げる
• バッジは赤い花型やギザギザの円にする
• アコーディオンは白地の角丸に太枠を付け、右端に＋を置く

Components

• 主 CTA ピルボタン（button-primary）: 白地に赤い縁、赤文字。右端に赤丸の再生アイコン、下に赤の厚い影
• サブ導線ボタン（button-secondary）: 白地にオレンジの縁と文字。右端にオレンジ丸の矢印、下にオレンジの影
• 茶色のページ内ナビ（nav-tab）: 茶色の縦グラデのピル型に白文字。下に吹き出しのような三角を付ける
• リボン見出し（ribbon-heading）: 焦げ茶の帯の両端を折り返し、黄色の太字を置く。上にプリンの小アイコン、下にオレンジの欧文ラベル
• 太枠カード（card-outlined）: 白い面を焦げ茶の太線で囲み、角を大きく丸める。上辺に黄色のリボン型ラベルを付ける
• STEP カード（step-card）: 焦げ茶の見出し帯の下端をスカラップにし、淡いクリームの本文面を続ける
• 当選数バッジ（badge-burst）: 赤い花型に白の太字で人数を入れ、カードの右上にはみ出させる
• 期間表示ボックス（period-box）: オレンジのグラデの角丸ボックスに白の太字で日時を書く
• 注意事項アコーディオン（accordion）: 白地の角丸に焦げ茶の太枠。中央に見出し、右に＋
• 賞品の切替タブ（tab-toggle）: 選択中は黄色地にオレンジの縁と文字で、吹き出しの尾を付ける。非選択はグレー地に白文字

Do's and Don'ts

Do - 見出しはすべて茶色のリボン帯に欧文ラベルを添えた同じ型でそろえる - カードには必ず焦げ茶の太い枠線を付ける - キャラのイラストをカードの角や見出しの脇から顔を出すように置く - 当選人数・購入点数・期間などの数字は赤の太字で大きく書く - 背景は斜めストライプと肉球柄を交互に使ってセクションを分ける - ボタンには色ずらしの厚い影を付け、押せることが一目でわかるようにする

Don't - 寒色や彩度の低いグレーをメインの色にしない - 細い線や細い書体で上品に寄せない - ぼかしの大きいドロップシャドウを使わない - 角の尖った四角いカードやボタンを使わない - 赤い CTA をあちこちに増やしすぎない。サブ導線はオレンジにする - 写真に背景を残した四角い切り抜きのまま並べない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（コラボを告知し、楽しい雰囲気を伝える）: 左右で色を分けた背景に商品写真とキャラを大きく配置し、キャンペーン名をロゴ風の文字で置く
2. 当選数と主 CTA（賞品の規模を伝え、応募へ誘導する）: 黄色の帯に赤い太字で当選数を書き、赤枠のピルボタンを置く。賞品写真を脇に添え、下端はスカラップにする
3. ページ内ナビ（長いページの中で各セクションへ飛べるようにする）: 茶色のピル型ボタンを 2 列×3 段に並べる
4. リード文（コラボの価値を伝える）: 白い太枠カードに大きな中央揃えの文を置き、キーワードをオレンジにする
5. キャンペーン概要（応募の条件と賞品の規模を説明する）: 上部をキャラの頭の形にした黄色枠のカードに条件を書き、赤で強調する。オレンジの期間ボックスを置く
6. 賞品紹介（賞品の魅力を見せる）: 切替タブと、赤いバッジ付きの白いカード。賞品名は袋文字、写真は背景を抜いて置き、仕様を箇条書きにする
7. コラボコンテンツ（動画で話題を広げる）: 肉球柄の地に、オレンジ枠の縦長動画とオレンジのサブボタンを置く
8. 応募方法（応募の手順を案内する）: 茶色帯の STEP カードを縦に並べ、イラストとボタンを添える。三角矢印の先に結果通知のカードを置く
9. よくある注意事項（補足を折りたたんで見せる）: 白い太枠のアコーディオンを 2 つ並べる
10. 対象商品（購入の対象になる商品を示す）: 白い大きなカードに商品写真と名前を縦に並べ、オレンジの点線で区切る。限定パッケージは別のカードにする
11. 規約（法的な条件を示す）: ストライプ地に導入文を置き、黄色のボックスの中でスクロールさせる
12. お問い合わせ（問い合わせ窓口を示す）: キャラが上からのぞくクリーム色の太枠カード。茶色のピル見出しを置き、メールアドレスを赤で書く

Imagery

• 商品は背景を抜いた明るい写真にし、白地や黄色の地に置く
• キャラは太い茶色の線で描いたフラットな塗りのイラストにし、カードの端にはみ出させる
• 背景には肉球・アスタリスク・音符を淡い黄色で散らす
• 強調したい写真の周りに集中線のような短い線を添える
• 手順の図は細い線のモノクロイラストを白い円の中に入れる
• 変化を示すときはオレンジの手描き風の曲がった矢印を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px に固定し、中央に置く。背景の柄は全幅に広げる
• ナビは PC では 6 個を 1 行に並べる
• 賞品カードは PC では写真と説明を左右に並べる
• STEP2 と STEP3 は PC では 2 列に並べる
• 対象商品は PC では 2〜3 列のグリッドにする
• ヒーローは PC では横長にし、キャラを横一列に並べる

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 行書くと起動時に読み込まれる。