DESIGN.md — 赤×黄×青のキャラコラボ菓子 LP（Bold Red Yellow Blue Character Collab Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、力強い・インパクト
• キーワード: 原色トリコロール・キャラクター・コレクション・水玉と三角柄・図鑑カード・クラフト手順
• 地の質感: 赤地に薄い三角形の幾何柄、黄地にギンガムチェック、白い大きな水玉。フラットな面に柄を重ねている
• 形: 六角形・斜めカットのボタン、丸いステップ画像、角丸 16px のパネル、ピル型ボタン
• 温度感: 暖色の赤黄が主役で、青の帯が引き締める。明るく賑やかな印象

Colors

• 赤・黄・青の3原色をセクション単位で切り替える
• 赤地には薄い濃淡の三角形柄を敷く
• 黄やクリームの地にはギンガムチェックを使う
• 見出しの文字はこげ茶。強調語は赤か青にして大きくする
• 赤地・青地の上の文字は白にする
• カードは白地にして、黄色の枠と帯を付ける

Typography

• 全体を太字にして子ども向けの元気さを出す
• 大見出しは強調語を約1.4倍に拡大し、色も変える
• 大見出しには白フチやドロップシャドウを付けて立体感を出す
• STEP番号は黄色の欧文で斜めに置く
• 注釈は※で始め、小さな文字で中央または右に寄せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品やカードは 2〜3 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• キーとなるコンテンツは、角丸の白やクリームのパネルに入れて、色地の上に浮かせる
• 商品パッケージは3列で並べ、下に〔〕付きのラベルを置く
• 手順は2列の丸画像で示し、行の間を白の点線で区切る
• 図鑑カードは2列にして、カード同士の間隔を約16pxにする
• セクションの頭には、リボン型や斜めカット帯の見出しを置く

Elevation & Depth

• 影はほとんど使わず、フラットに仕上げる
• 大見出しの文字にだけ、白フチと薄い影を付ける
• キャラクター画像はパネルの端からはみ出させて奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: キャラクターは切り抜き。手順画像は白い円の中に入れる。商品は切り抜きの立体パッケージ
• セクション境界: 直線で色を切り替え、境目に黄色の細い線を入れる。パネルは角丸で浮かせる
• ナビボタンは両端を斜めに切った六角形にする
• カードは左上に黄色の三角を置き、そこに番号を入れる
• 数量限定バッジは青の六角形にする

Components

• 六角形アンカーナビ（nav-hex-button）: 青い六角形のボタンで、右に白丸と赤い下向き矢印を付ける。2×2 で並べる
• 白ピルのもっとみるボタン（button-pill-outline）: 白地にこげ茶の太い枠を付けたピル型ボタン。右に＋や赤い矢印を置く
• 黄色の小ボタン（button-primary）: 黄色のピル型ボタンで、こげ茶の文字と赤い矢印を付ける
• リボン型見出し（ribbon-heading）: 黄や青の帯で、両端を矢羽根のように切り欠く。右端に丸い商品画像を重ねることもある
• 図鑑風キャラカード（zukan-card）: 白地に黄色の枠を付ける。左上に番号三角、上部に分類名、下部に黄色帯とこげ茶のタイプラベルと名前を置く
• 数量限定六角バッジ（badge-limited）: 青の六角形に白の太字を2行で入れる
• 手順丸画像（step-circle）: 白い円の中に図解を入れ、左上に黄色の STEP 番号を斜めに置く。下に白文字の説明を付ける
• 赤枠の情報パネル（info-panel）: 白地に赤い枠を付けた角丸パネル。上部に赤い見出しタブを置く

Do's and Don'ts

Do - 赤・黄・青をセクションごとに切り替えてリズムを作る - 強調語は色を変え、サイズも上げる - キャラクター画像は大きく切り抜いて、パネルの外に飛び出させる - 商品のバリエーションはグリッドで網羅して、集めたくなる気持ちを出す - 地には三角柄やギンガム柄を薄く敷く

Don't - くすんだ色や中間色を主役にしない - 細い明朝体を使わない - 余白だけの静かなミニマル構成にしない - 見出しの文字を黒一色にしない（こげ茶を使う） - 写真を角丸の四角い枠に閉じ込めない

Page Structure

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

1. ファーストビュー（コラボの華やかさを一目で伝える）: 赤地に白い大きな水玉を散らす。中央にロゴと商品の立体画像、周りにキャラを配置する
2. アンカーナビ（各コンテンツへ誘導する）: 薄いグレー地に、青い六角形のボタンを 2×2 で並べる
3. ラインナップ紹介（デザインの種類を見せる）: 黄色の三角柄の地に、強調入りの大見出しを置く。商品を横スクロールで並べ、白ピルのボタンを付ける
4. 遊び方の訴求（商品で遊べる体験を伝える）: 赤地の上にギンガム柄のパネルを置き、数量限定バッジと商品画像、赤い吹き出しボックスを入れる
5. 動画（作り方を動画で見せる）: 黄色のリボン見出しを置き、フィルム枠風のフレームに動画を埋め込む
6. 種類別デザイン（味やデザインの違いを見せる）: 青地にする。色分けした味のラベル帯を置き、商品を3列で並べる
7. 限定パッケージとおまけ（レア要素で購買意欲を高める）: クリームのギンガム地にする。レアデザインは青いパネルに、おまけは楕円の吹き出しで見せる
8. 答え合わせ（遊びの答えへ誘導する）: 赤い枠の白いパネルに商品を並べ、それぞれに黄色の小ボタンを付ける
9. クラフト手順（作り方を段階的に説明する）: 青地に丸い手順画像を2列で並べ、STEP番号と白の点線区切りを入れる
10. キャラクター図鑑（登場キャラをコレクションとして見せる）: 赤い三角柄の地に、リボン見出しと図鑑カードを2列で並べ、もっとみるボタンを付ける
11. 関連商品バナー（他商品へ回遊させる）: 濃い青の地に、横長のバナーを縦に積む
12. シェアとフッター（SNSでの拡散を促す）: 赤地に白い見出しと大きな丸いSNSアイコンを置く。下部に固定のタブバーを付ける

Imagery

• キャラクターは公式風のアニメ塗りイラストを切り抜き、元気なポーズで使う
• 商品パッケージは斜め上からの立体の切り抜き写真にする
• 手順の図解は線画に赤と白の塗りを入れたシンプルなイラストにする
• 背景の装飾は、白い水玉・三角形の幾何柄・ギンガムチェック・星形の集中線で作る
• ボール型の大きな円モチーフを背景に薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約900pxのコンテンツ幅をとり、左右に赤や青の柄の地を広げる
• PC のファーストビューは、左にロゴ、右に商品を置く横構図にする
• PC のナビは4つを横一列に並べる
• 商品ラインナップは PC で全種類を横一列、図鑑カードは4列にする
• 手順は PC で4列にする
• SP は下部に固定タブバーを置き、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 行書くと起動時に読み込まれる。