DESIGN.md — コーラ赤×山吹のレトロポップ冷菓 LP（Retro Cola Red Pop Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、レトロ、力強い・インパクト、親しみ・手作り感
• キーワード: コーラ赤・山吹アクセント・水しぶき・はじける星・白抜き太字・駄菓子レトロ
• 地の質感: 赤地に白や薄紅の水しぶきテクスチャ。平塗りの面に写真の切り抜きを重ねる
• 形: ギザギザの吹き出し、星形のスパーク、波形のスカラップ境界、角丸ボタン
• 温度感: 暖色。赤と山吹でにぎやかで温かい

Colors

• 地色はコーラ赤にして、白地は説明と注釈のエリアだけに使う
• 山吹は発売日帯、セクション見出し帯、主 CTA に限って使う
• 赤地上の文字は白にして、最重要の語だけオレンジで大きくする
• 白地の文字は黒ではなくこげ茶赤にして、暖色のトーンを保つ
• 星の装飾は山吹・水色・薄紅を散らして使う
• date-band は文字 #FDFCF1 × 背景 #FEAC0B のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9D6801、4.61:1）を使う。
• button-primary は文字 #FDFCF1 × 背景 #FDAC0B のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9E6A01、4.51:1）を使う。
• tag-pill は文字 #FDFCF1 × 背景 #FEAC0B のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9D6801、4.61:1）を使う。
• section-band は文字 #FDFCF1 × 背景 #FEAC0B のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9D6801、4.61:1）を使う。

Typography

• 見出しは中央揃えにして、改行で語のかたまりを区切る
• 強調語は文字サイズを 1.5 倍、色をオレンジにする
• 赤地の白文字には薄い影を付けて浮かせる
• 素材名には引き出し線を添え、左寄せで写真に重ねる
• 注釈は左揃えの小さな文字で、白地にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品写真を中央か右寄せに大きく置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• ファーストビューは商品写真を主役にし、商品名を上、価格を右下に置く
• 発売日は全幅の山吹帯にする
• 写真の引き出し線で素材を説明するセクションを作る
• CTA は中央に縦に並べ、主 CTA の下にサブボタンを置く
• 関連商品は全幅のバナーを縦に並べる

Elevation & Depth

• 主 CTA には右下へ濃い影をずらして付け、立体的なボタンに見せる
• 見出しの白文字にはごく薄い影を付ける
• カードの影は使わない。写真の重なりで奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品カップを背景ごと切り抜き、水しぶきと重ねる
• セクション境界: 白地との境界は波形のスカラップ。斜めの切り替えもある
• 説明ブロックはギザギザの爆発形吹き出しで囲む
• サブボタンは白地に枠線のピル型
• 主 CTA は角丸の山吹ボタンに二重の縁を付ける
• 星形のスパークを周りに散らす

Components

• 発売日帯（date-band）: 全幅の山吹帯に白い太字で発売日を示す
• 店舗検索ボタン（button-primary）: 山吹地に白文字。左に丸矢印、右に店舗アイコン。濃い影付き
• 情報リンクボタン（button-secondary）: 白地にこげ茶の枠と文字のピル型。左に丸矢印
• ギザギザ吹き出し（burst-bubble）: 白い爆発形の中に、小見出しと説明文を中央揃えで置く
• 手書き風タグ（tag-pill）: 見出しの左上に斜めに置く、山吹のギザギザタグ
• 素材の引き出しラベル（callout-label）: 白文字の素材名と、写真へ伸びる白い線
• 価格表示（price-block）: 本体価格と税込価格を黒の太字で 2 段に積む
• セクション見出し帯（section-band）: 全幅の山吹帯に白文字の見出し

Do's and Don'ts

Do - 赤地の面積を広く取り、白地は説明のブロックだけに使う - 商品写真は大きく切り抜き、水しぶきを重ねる - 星のスパークを周りに散らして、はじける楽しさを出す - 強調語はオレンジの特大文字にする - CTA は山吹の立体的なボタン 1 つに絞る

Don't - 寒色を地色に使わない - 細いゴシックの見出しにしない - 白地の文字を真っ黒にしない - 直線的なカードや格子のレイアウトを多用しない - 山吹を本文の色に使わない

Page Structure

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

1. ファーストビュー（商品と価格をひと目で伝える）: 赤地に水しぶき、切り抜いた商品写真、極太の商品名、右側に縦書きのコピー、右下に価格
2. 発売日帯（発売時期を告知する）: 全幅の山吹帯に白文字
3. コンセプト（味と食感の魅力を伝える）: 赤地にタグ付きの 3 行見出し。強調語はオレンジの特大文字。下に中央揃えの説明文
4. 商品の解説（商品ジャンルを説明する）: 波形の境界の白地、またはギザギザ吹き出しに、小見出しと説明文
5. 素材の紹介（構成素材を見せる）: 大きな商品写真に引き出し線で素材名を付ける。詳細へのタグボタン付き
6. CTA（来店を促す）: 誘導見出し、商品写真、山吹の主ボタン、枠線のサブボタン
7. 注釈（価格・税率・取り扱いの注意）: 白地に※付きの小さな文字を並べる
8. 関連商品（ほかの商品へ回遊させる）: 山吹の見出し帯の下に、全幅の商品バナーを縦に並べる

Imagery

• 商品は正面からやや見下ろす角度で撮り、背景を切り抜く
• 赤地に白〜薄紅の水しぶき素材を大胆に重ねる
• 星形・爆発形のスパークを手描き風に散らす
• 関連商品のバナーはテーマ色の背景と果物などの素材を組み合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 960px の 1 カラムを維持し、両脇まで赤地にする
• PC のファーストビューは商品を中央、商品名を左下、価格を右に置く
• PC の見出しは 1 行にまとめる
• PC は素材ラベルを写真の左右に振り分ける
• PC の関連商品は 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 行書くと起動時に読み込まれる。