DESIGN.md — 赤×黄×青のポップなキャラコラボ菓子 LP（Pop Red Yellow Character Candy LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト
• キーワード: 原色ポップ・キャラクター・ポラロイド枠・黒の太線イラスト・ドット罫線・丸ゴシック
• 地の質感: ベタ塗りの平面。方眼紙柄と白い紙片の質感
• 形: 大きな円弧の切り替え、ピル型ラベル、傾けた白枠
• 温度感: 暖かく明るい。赤と黄が主役で、青で締める

Colors

• 地は黄色が基本。冒頭は方眼ピンク、中盤の UGC ゾーンは赤の面に切り替える。
• 英字見出しは濃い青。重要な見出しだけ赤と青を 1 文字ずつ交互にする。
• 赤い面の上では文字・カードとも白にする。
• 青はラベル・リンクカード・数字バッジに絞って使う。
• イラストの輪郭はすべて黒の太線で統一する。
• グラデーションは使わず、ベタ塗りの原色だけで構成する。
• ticker-band は文字 #E9FCFF × 背景 #F90022 のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E5001F、4.56:1）を使う。

Typography

• 英字見出しは丸みのある極太サンセリフにする。
• 日本語は丸ゴシックに統一し、角ゴシックは使わない。
• 本文は中央揃えにして、1 行を短く改行する。
• 英字見出しの下に小さな日本語の訳を添える。
• 数字はピル型の青いバッジに入れて目立たせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 要素はすべて中央揃えにする。
• 写真カードは左右に少しずらし、交互に配置する。
• カードの横に、縦に積んだりんごのイラストを交互にはみ出させる。
• 小見出しは左右をりんごイラストで挟む。
• セクションの間は大きく空けて、ゆったり見せる。

Elevation & Depth

• 影はほぼ使わない。平面の重なりで奥行きを出す。
• ポラロイド枠にはごく薄い影を付けてもよい。
• カルーセルの矢印は白丸にし、薄い影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 白枠ポラロイド風に正方形〜縦長で切り抜き、数度傾ける
• セクション境界: 大きな円弧（ドーム型）での色切り替え、リボン列の帯
• セクションの切り替えは、画面幅を超える大きな半円で行う。
• ラベルは完全なピル型にする。
• ノートカードは角を切り欠いたチケット形にし、紙を重ねて見せる。
• SNS アイコンは赤い円にする。

Components

• 流れるテキスト帯（ticker-band）: 赤の帯に、コラボ名を白の太字で横に繰り返し流す。
• 発売日の吹き出し（date-bubble）: 黄色のピル型の吹き出しに、青い太字で日付を入れる。
• ドット罫見出し（dotted-heading）: 英字の小見出しを赤と青のドット線で上下に挟み、左右にりんごを置く。
• ポラロイド写真（polaroid-card）: 白枠の写真を少し傾ける。下余白に赤のキャプションを入れ、角にリボンを重ねる。
• 青いピル型ラベル（pill-label）: カルーセルの上に置く案内ラベル。白文字で入れる。
• 豆知識カード（trivia-carousel）: 白いチケット形のカードを、黒線で枠取りする。左右に白丸の矢印を付ける。
• UGC 動画カード（ugc-video-card）: 赤地の上に白枠の縦長動画を置き、再生ボタンを付ける。投稿者名とコメントを赤字で添える。
• 関連商品リンク（product-link-card）: 黒枠の横長カード。左を白地の商品画像、右を青地にし、発売日・商品名と白丸の矢印を入れる。

Do's and Don'ts

Do - 黄・赤・青の原色 3 色と白黒だけで組む。 - イラストは黒い太線で輪郭を描き、ベタ塗りで仕上げる。 - 写真は白枠に入れて傾け、手作りのスクラップ感を出す。 - りんごやリボンのモチーフを余白に散らす。 - 見出しは英字の極太丸系サンセリフと日本語訳のペアにする。

Don't - グラデーションや淡いくすみ色を使わない。 - 明朝体や細い書体を使わない。 - 写真を角丸で四角くそのまま並べない。 - 影を強くしたり立体的に見せたりしない。 - 本文を左揃えの長文にしない。

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 黄色地に商品を並べた俯瞰写真を敷き、青の極太英字ロゴを重ねる。
2. テキスト帯（コラボ名を繰り返して印象付ける）: 赤い帯に白文字を横に流す。
3. コンセプト（発売日と想いを伝える）: 方眼ピンク地に日付の吹き出しとキャラを置き、大きな白い円の中に中央揃えの青い文章を入れる。
4. リボン区切り（セクションの転換）: 赤いリボンのイラストを横一列につなげた帯にする。
5. パッケージ紹介（デザインの種類を見せる）: 赤青の英字見出しと数字バッジの下に、商品画像を中央に大きく置く。
6. 味の紹介（フレーバーを伝える）: ドット罫見出しの下にポラロイド写真と味バッジを置き、サブキャラを添える。
7. 形の紹介（中身の形の楽しさを伝える）: ポラロイドの横に、形ごとの切り抜き写真と赤い小さなラベルを散らす。
8. 豆知識カルーセル（パッケージ裏の楽しみを見せる）: 青いピル型ラベルの下に、チケット形の白いカードをスライドで並べる。
9. ファンの声（SNS の口コミで共感を広げる）: キャラの下で赤いドームに切り替え、白枠の縦長動画カードを左右交互に並べる。
10. 関連商品（他の商品へ回遊させる）: 黄色地に、黒枠・青面の横長リンクカードを縦に並べる。
11. SNS・バナー（公式アカウントと関連キャンペーンへ誘導する）: 赤青の英字見出しの下に赤丸アイコンを並べ、横長バナーを 2 枚置く。
12. フッター（権利表記を載せる）: 黄色地に小さな文字で中央揃えにする。

Imagery

• 商品写真は黄色や赤の単色背景で撮る。真上からの俯瞰で、小物を散らす。
• りんご・リボン・ハートは、黒い太線とベタ塗りのアイコン調で描く。
• 果物の写真は明るく彩度を高めにする。
• UGC は縦長の自撮りや商品の手持ち写真にし、再生ボタンを重ねる。
• キャラクターは顔だけや上半身を出し、セクションの縁から覗かせる。
• 方眼紙柄やドット罫で文具っぽさを足す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 360px）のカラムを固定し、左右を赤のベタ面にする。
• PC の左サイドには、キャラアイコン付きのセクションナビを縦に並べる。
• PC の右サイドにはブランドロゴを置き、左右に白抜きの英字ロゴを配置する。
• 中央カラムの中身は SP と同じ構成のままにする。

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