DESIGN.md — 金×黄×水色のポップなおもちゃ懸賞 LP（Pop Gold Toy Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、親しみ・手作り感
• キーワード: 金色の輝き・極太ロゴ見出し・白い吹き出し・色面ブロック・STEP カード・子ども向け
• 地の質感: 金貨が舞うボケ光の写真背景と、フラットな単色面の対比
• 形: 雲形・円形の吹き出し、角丸の白カード、斜めに区切った色面
• 温度感: 暖色中心で明るく賑やか。水色がアクセントで抜けをつくる

Colors

• ブランド帯はえんじ一色で、ロゴは白・黄色で抜く
• 特長セクションは水色・朱赤・黄の色面を大きなブロックで切り替える
• 手順セクションは黄色地に白カードを置き、各カードの上部に水色の STEP 帯
• 見出しの文字はえんじに白フチ＋影をつけ、金色写真の上でも読めるようにする
• ボタンは朱・黄緑・青の3色で役割を分ける
• 吹き出しは白地とし、強調語は朱・水色・黄緑で色を変える
• step-label は文字 #FFEFE4 × 背景 #24B6CF のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#187989、4.53:1）を使う。
• button-primary は文字 #FFEFE4 × 背景 #E0481F のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C53F1B、4.56:1）を使う。
• button-sub は文字 #FFEFE4 × 背景 #81B536 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#567824、4.56:1）を使う。

Typography

• 大見出しは画像化した極太ロゴにし、白フチと濃い影をつける
• 見出しの文字はサイズをわざとそろえず、一部を大きく傾けて弾む感じを出す
• 本文は太めの丸ゴシックで中央揃え、短い行で区切る
• 語尾にはキャラクターの口調を入れて親しみを出す
• 吹き出しの強調語は色を変え、少し大きくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、STEP は縦に積む
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 主役の商品写真は画面幅いっぱいに、中央へ大きく配置
• 吹き出しは商品の左右に2つずつ、互い違いに配置
• STEP カードの間に朱色の下向き三角を置き、流れを示す
• カード内は左にテキスト、右に画像の2分割
• ナビボタンは3つを横に等幅で並べる

Elevation & Depth

• カードは影なしのフラットな白面
• 見出しロゴにだけ濃い落ち影をつける
• 商品写真の背後に光のにじみ（グロー）を入れる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで配置し、背景は金色ボケ写真を全面に敷く
• セクション境界: 直線で色面を切り替え、特長セクションは斜めや段差の色ブロックにする
• 吹き出しは円形か雲形のもくもく輪郭
• ボタンは角丸8px程度の長方形で、右端に小さな三角を付ける
• STEP 帯は角のない水色の帯

Components

• 金色ファーストビュー（hero-gold）: 金貨が舞う写真に大きなロゴ見出しと商品を重ね、角に丸いバッジを置く
• ブランド帯（brand-band）: えんじの全幅帯に白いロゴとキャンペーンのロゴを中央で縦に並べる
• 特長吹き出し（speech-bubble）: 白い円形・雲形に2〜3行の短い特長と色付きの強調語を入れる
• STEP カード（step-card）: 白い角丸カードの上部に水色の STEP 帯。左に説明、右に画像
• STEP 帯（step-label）: 水色の帯に白い英字で STEP と番号
• 下向き三角（step-arrow）: カードの間に朱色の小さな逆三角
• 主ナビボタン（button-primary）: 朱色の角丸ボタンに白太字。右端に小さな三角
• サブナビボタン（button-sub）: 黄緑と青の同じ形のボタンを横に並べる

Do's and Don'ts

Do - 見出しは極太ロゴにし、白フチと影をつける - 特長は短いフレーズに分けて吹き出しで見せる - 手順は番号付きのカードで縦に流す - 暖色の強い色面の中に水色を入れて抜けをつくる - 商品は切り抜きで大きく、光の演出を添える

Don't - 細い明朝や淡いグレーなど落ち着きすぎた書体・色を使わない - 長い文章のブロックを置かない - カードに強い影やグラデーションを付けない - 写真の上に縁取りのない細い文字を載せない - ピル型の丸すぎるボタンにしない

Page Structure

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

1. ファーストビュー（賞品の魅力を一目で伝える）: 金色の背景写真に大きなロゴ見出しと商品写真、角に丸い別賞品バッジ
2. ブランド帯（ブランドとキャンペーン名を示す）: えんじの全幅帯にロゴ2段を中央配置
3. 賞品Aの紹介（1つ目の賞品の特長を見せる）: 金色背景に装飾見出しを置き、商品の左右に白い吹き出しを4つ
4. 賞品Bの紹介（2つ目の賞品の特長を見せる）: 水色・朱赤・黄の色面ブロックに見出しと商品、雲形の吹き出しを3つ
5. 応募手順（応募の流れを説明する）: 黄色地に見出しを置き、STEP1〜4の白カードを三角でつなぐ
6. ナビボタン（応募方法や Q&A へ誘導する）: 白地に朱・黄緑・青の3ボタンを横に並べる
7. シェア（SNS で広めてもらう）: 黄色地に太字の呼びかけと SNS の丸アイコン

Imagery

• 商品はスタジオで撮った切り抜き写真で、つやを強調する
• 背景は金貨や光の粒が舞う、ボケの強い金色の合成写真
• キャラクターの目や顔を大きく見せ、親しみを出す
• 手順の画像はパッケージや応募はがきをシンプルに切り抜く
• 見出しの周りにキラキラや宝箱などの小さな装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央の約 480px 幅で SP と同じ構成を見せる
• PC では STEP カードを4列の横並びにし、カードの間を右向き三角でつなぐ
• PC ではナビボタン3つを中央にまとめ、幅を広げる
• 背景色の帯は 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 行書くと起動時に読み込まれる。