DESIGN.md — 紺×黄色のポップなキャラコラボ販促 LP（Pop Navy Yellow Character Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 紺×黄・リボン見出し・マスキングテープ・キャラが顔出し・太丸ゴシック・白カード
• 地の質感: ベタ塗りのフラット面に、斜線ストライプのテープや付箋紙、クリップなど文具モチーフの質感を少し足す
• 形: 大きめ角丸の白カード、ピル型ボタンとラベル、両端が折れたリボン帯
• 温度感: 明るく暖かい。紺で締め、黄色で賑やかさを出す

Colors

• 前半の賞品紹介は黄地、後半の施策紹介は紺地に切り替える
• カードは白地に紺または施策色の太枠。紺地上のカードは黄色の枠にする
• 施策の種類ごとに紺・ティール・オレンジ・ピンクを割り当て、ボタンと見出しで色をそろえる
• 紺地の文字は黄色か白。黄地の文字は紺にする
• 赤は主 CTA ボタンにだけ使う
• カード内の情報ブロックは淡い青グレーの面で区切る

Typography

• 全体を太めの丸ゴシックで統一し、細い字は使わない
• 日付は年を小さく、月日を大きく置き、曜日は丸囲みにする
• 見出しは字間を広めに取って中央揃えにする
• もっと見るリンクは欧文スラブ体の大文字に、破線の下線と丸矢印を付ける
• 本文は短く改行して中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。一覧ボタンだけ 3 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の約 88% で中央に置く
• カード内の情報ブロックは幅約 75% の淡い面で入れ子にする
• セクション見出しの上にキャラが枠から顔を出す
• 日付の下に黄色の破線を引いて区切る
• 店舗リンクは破線の下線付きで縦に並べる

Elevation & Depth

• 基本はフラットにし、影は使わない
• ボタンには下に濃い色のずれ影を付けて立体感を出す
• 付箋紙はわずかに傾け、紙の陰影を付ける

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: グッズは切り抜きで白地に並べる。キャラは切り抜いて枠からはみ出させる
• セクション境界: 直線で色を切り替える。フッター境界だけゆるい弧にする
• リボン見出しは両端を折り返した形にする
• カテゴリ見出しは斜めのマスキングテープ風にする
• 一覧ボタンは横長の楕円ピル型にし、右に白丸の下矢印を付ける
• ラベルは小さなピル型の紺地に白文字

Components

• リボン帯見出し（ribbon-heading）: 両端が折れた黄色の帯に、紺の大見出しを載せる
• テープ風見出し（tape-heading）: 淡いストライプのテープに、カテゴリ色の文字を載せる。左上に濃い色のテープ片を添える
• 施策一覧ボタン（nav-pill-grid）: 3列に並べたピル型ボタン。施策ごとに色を変え、ずれ影を付ける
• 賞品カード（prize-card）: 白地に太い色枠のカード。上部にリボン見出しを重ね、グッズを並べる
• もっと見るリンク（view-more-link）: 欧文大文字に、破線の下線と丸矢印を付ける
• 期間ラベルと日付（date-badge）: 黄色のピルに実施期間を書き、その下に大きな数字の日付を置く
• 付箋メモ（memo-paper）: クリップ付きのクリーム色の紙。タイムラインや案内を載せる
• 限定バッジ（circle-badge）: カードの角に重ねる白丸と紺枠のバッジ
• 主CTAボタン（button-primary）: 赤のピルに白文字と右矢印を付け、濃い赤のずれ影を入れる

Do's and Don'ts

Do - 地色は紺と黄の2色を軸にして切り替える - キャラクターや立体小物を枠からはみ出させて動きを出す - 施策ごとの色をボタン・見出し・枠でそろえる - テープ・クリップ・付箋など文具モチーフで手作り感を足す - 日付は数字を大きく強調する

Don't - 細い明朝体や細ゴシックを使わない - グラデーションやリアルな影を多用しない - 赤を CTA 以外に使わない - カードを角ばらせない - くすんだ色で配色しない

Page Structure

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

1. ファーストビュー（コラボ企画の世界観を一目で伝える）: 紺の外枠と黄の内枠に、キャラと商品が飛び出すコラージュとロゴを置く
2. 期間表示（実施期間を伝える）: 黄色のピル帯に大きな数字の日付を載せる
3. 施策一覧ナビ（施策へページ内リンクで移動させる）: ミント地にリボン見出しを置き、3列の色別ピルボタンを並べる
4. 抽選賞品（応募方法ごとの賞品を見せる）: 黄地にテープ見出しを置き、紺枠のカードとリボン見出しで賞品とリンクを並べる
5. 先着特典（購入でもらえる特典を見せる）: ティールの見出しと枠のカードでグッズを並べる
6. 販売グッズ（店頭で買える限定グッズを見せる）: オレンジの見出しと枠のカードに、丸い発売日バッジを付ける
7. 店内施策（放送などのスケジュールを伝える）: 紺地に黄枠の白カードを置き、付箋のタイムラインと期間ブロックを並べる
8. 店舗装飾（装飾店舗とフォトスポットを案内する）: 白カード内の写真枠と、破線下線付きの店舗リンクリストを並べる
9. 動画（コラボ動画へ誘導する）: 公開日の表示と埋め込み動画を置く
10. アプリ案内・CTA（アプリのダウンロードを促す）: 黄枠のビジュアルの下に赤いピル CTA を置く
11. フッター（シェアと問い合わせ先を示す）: 弧で切り替えたクリーム地に、ハッシュタグ・SNSの丸アイコン・白い問い合わせカードを置く

Imagery

• 毛糸のパペット風キャラを切り抜き、手を広げるポーズで配置する
• 日用品や小物を立体的に散らしたコラージュにする
• グッズは正面から撮った切り抜きを白地に整列させる
• マスキングテープ・クリップ・付箋紙の装飾を添える
• 放射状の線で強調する手描き風アクセントを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はこの SP レイアウトを中央に固定幅（約480px）で置き、左右を紺や黄の地色で埋めることを推奨
• 一覧ボタンは PC で 4〜5 列に広げてもよい
• グッズのグリッドは PC で列数を増やす
• キャラのはみ出し演出は 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 行書くと起動時に読み込まれる。