DESIGN.md — 紺×金の額縁風チョコ菓子キャンペーンLP（Royal Blue and Gold Confectionery Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、力強い・インパクト、情報量多め・訴求型
• キーワード: ロイヤルブルー・金の額縁・斜体欧文見出し・動画中心・クリーム色パネル・クラシック菓子
• 地の質感: 青地に細かい和柄の地紋をうっすら入れる。帯部分は金地に織物風の柄を重ねる。
• 形: 四角い額縁、ネイビーの細いピル型ボタン、角丸の小さいパネル
• 温度感: クールな紺と温かい金色の対比。高級感がありつつ、親しみやすさも残す

Colors

• 地は青か濃紺を基本にする。濃紺はヒーロー下とプロフィールの帯に使う。
• 金色は額縁・帯・レシピパネルの3つに限って使う。
• 商品が多いエリアはクリーム色のパネルに切り替え、文字を紺にする。
• 青地の文字はすべて白にする。
• 朱色は新商品バッジだけに使う。
• news-band は文字 #FFFFFB × 背景 #A87F3E のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#947036、4.52:1）を使う。

Typography

• セクション見出しは太い斜体の欧文にし、白か紺で入れる。
• 欧文見出しには、薄い影か水色の縁取りを付けてもよい。
• 本文も太字で、小さめのサイズで中央揃えにする。
• 欧文見出しの横か下に、小さな和文の見出しを添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。料理動画は3列の縦長カード
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは中央に寄せ、左右の青地を広めに残す。
• 動画サムネイルは本文の幅いっぱいに置き、右下にキャプションを付ける。
• 商品一覧はクリーム色のパネルに1列で並べる。
• 最後の袋商品だけは2列にする。
• プロフィールは濃紺のパネルにまとめる。人物写真・名前・区切り線・本文・リンクの順に縦に並べる。

Elevation & Depth

• 影はほとんど使わない。
• 面の切り替えは色の差と金の額縁で表す。
• 浮いて見せるのは、右下に固定した丸いバッジだけにする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は長方形のまま使う。キービジュアルは金の二重額縁で囲む。
• セクション境界: 金色の二重線と点線の帯で区切る。上下は直線にする。
• ボタンはピル型か、角丸の小さい長方形にする。
• キャンペーン画像は四隅に飾りの付いた金の額縁で囲む。
• 新商品バッジは細線の円形にする。

Components

• 金の額縁（gold-frame）: キービジュアル・動画・キャンペーン画像を、角飾り付きの金の二重枠で囲む
• ネイビーの細いピル型ボタン（button-primary）: 白文字の右に矢印を付けた、紺のピル型ボタン
• 白いピル型ボタン（button-white）: 金色のパネルの上に置く、横幅いっぱいの白いピル型ボタン。紺の文字と矢印
• 斜体の欧文見出し（section-title）: 太い斜体の欧文に、小さな和文の見出しを添える
• 動画サムネイル（video-card）: 中央に丸い再生ボタン、右下に作品名のキャプションを置く
• 金色のお知らせ帯（news-band）: 金地に、日付と下線付きリンクを並べた一覧
• 商品一覧パネル（cream-panel）: クリーム色の地に、商品画像と2行の商品名を縦に並べる
• 出演者プロフィール（profile-panel）: 濃紺のパネルに写真・名前・白い区切り線・本文・右寄せの公式リンクを並べる
• 固定の丸いバッジ（floating-badge）: 右下に固定する、紺地に金文字の円形キャンペーンバッジ

Do's and Don'ts

Do - 紺と金の2色を軸にして、高級感を保つ。 - セクションごとに斜体の欧文見出しを入れる。 - 動画は額縁と再生ボタンでそろえる。 - 商品が多いエリアはクリーム色の地に切り替える。 - 青地に地紋を薄く敷き、のっぺりさせない。

Don't - パステル色やビビッドな赤を地に使わない。 - 角丸の大きいポップなカードにしない。 - 金色を本文の文字色に使わない。 - ドロップシャドウを多用しない。 - 細い明朝の本文にしない。

Page Structure

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

1. ヘッダー（ブランドを示し、メニューへ導く）: 濃紺の帯に白いロゴとハンバーガーメニューを置く
2. ファーストビュー（キャンペーンの世界観を伝える）: 金の額縁の中に、人物と商品のキービジュアルを入れる
3. お知らせ（新商品の告知）: 金色の柄地の帯に、日付とリンクの一覧を並べる
4. コンセプト（テーマを打ち出す）: 濃紺の地に大きなロゴ見出しを置き、下にハッシュタグを添える
5. TVCM・動画（CMやWEB動画を見せる）: 青地にリード文と額縁付きの動画を置く。縦長の動画も並べる
6. キャンペーン（応募を促す）: 額縁の中に賞品の画像を入れ、下に紺のピル型ボタンを置く
7. 料理動画（アレンジの楽しみ方を伝える）: 縦長の動画を3列に並べ、各カードの下にボタンを付ける
8. レシピ（レシピページへ送客する）: 金色のパネルに3枚の写真を並べ、白いピル型ボタンを置く
9. ラジオCM・インタビュー（追加のコンテンツを見せる）: リード文の下に動画サムネイルを置く
10. 商品ラインナップ（商品を紹介する）: クリーム色のパネルに商品画像を縦に並べ、新商品バッジを付ける
11. 出演者プロフィール（出演者を紹介する）: 濃紺のパネルに写真と経歴のブロックを繰り返す
12. フッター（ブランドサイトへ誘導する）: 青いピル型のバーの下に、白地でリンクとコピーライトを置く

Imagery

• 人物は、温かみのある室内で商品を手に笑顔を見せるカットにする。
• 背景は青い紙吹雪やステージ照明などで、青を基調にする。
• 商品はパッケージを正面から撮った切り抜き写真を使う。
• 料理写真は木目や白い器に置き、自然光の茶系の色味にする。
• 装飾には金の額縁、角飾り、細かい地紋を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも1カラム中心で、コンテンツ幅を約75%に保つ。
• PCではコンセプトに縦書きの説明文を加える。
• レシピは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 行書くと起動時に読み込まれる。