DESIGN.md — 茶×クリームのカフェ飲料キャンペーンLP（Warm Cafe Latte Brown Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル、情報量多め・訴求型
• キーワード: カフェオレ色・クリーム地・額縁見出し・手順カード・吹き出し・投票マップ
• 地の質感: フラットな単色面。紙のような生成り地に、茶の太い線とプレートで温かみを出す
• 形: 角丸の太線カード、ピル型ボタン、角が内側にえぐれた額縁プレート、円形の人物切り抜き
• 温度感: 暖色中心。投票セクションだけ水色で涼やかな変化をつける

Colors

• 地はクリームとベージュを交互に使いセクションを区切る
• 見出しプレートとナビは茶の単色、文字は白
• 強調したい数字・SNS名・注意は赤一色に限定
• 投票企画だけ水色地に切り替え、上下を濃茶帯で挟む
• カードは白地＋茶の太枠で統一
• 外部SNS誘導ボタンのみ黒を使う

Typography

• 本文も太めのウェイトで柔らかく見せる
• 字間は広め（0.05〜0.12em）
• リード文は中央揃えで短く改行
• 手順番号は大きな赤の斜体数字＋ピリオド
• 日付は数字を大きく、曜日を小さく括弧で
• 吹き出し内は縦書きや手書き風で親しみを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品は 2 列グリッド、エリアボタンは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション冒頭に額縁プレート見出しを中央配置
• 手順カードは▼矢印でつなぐ縦フロー
• カード内は画像→番号タイトル→区切り線→本文→ボタンの順
• 人物は円形背景で切り抜き、吹き出しを添える
• ナビは茶帯に2列のアンカーリンク

Elevation & Depth

• 影はほぼ使わず、太枠と色面で階層を作る
• 見出しプレートは二重線の額縁で立体感を演出
• QUOカード画像のみ軽いドロップシャドウ

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は円形背景上の切り抜き、商品は透過切り抜き、写真は角丸なしの矩形
• セクション境界: 直線の色切替と濃茶の太帯。斜めのリボン見出しも使用
• カード枠は茶の3px線＋角丸24px
• 見出しプレートは角を内側にえぐった額縁形
• ボタンは完全なピル型
• 選択肢ボタンは角丸16pxの太枠
• 吹き出しは細い手描き線

Components

• 額縁見出しプレート（heading-frame-plate）: 茶のグラデーション風の板に二重線の額縁、白文字の見出し
• 応募期間ボックス（period-box）: 白地に茶枠の角丸ボックス、期間を大きな数字で
• アンカーナビ（anchor-nav）: 茶帯に白い細線で区切った2列の▼付きリンク
• 手順カード（step-card）: 白地・茶太枠の角丸カード。画像、赤番号タイトル、区切り線、本文、ボタン
• 主ボタン（button-primary）: 茶のピルボタン、白文字に矢印
• SNS誘導ボタン（button-sns）: 黒のピルボタン
• 人物吹き出し（speech-bubble）: 細い茶線の手描き風吹き出しと円形人物
• 地域選択ボタン（area-select）: 淡いベージュ地に茶太枠、右に▼
• 手順矢印（flow-arrow）: カード間の濃茶の下向き三角

Do's and Don'ts

Do - 茶とクリームの暖色を主役に保つ - 見出しは必ず額縁プレートで統一 - 強調語だけ赤にしてメリハリをつける - 手順は番号付きカードと▼で一目でわかる流れに - 人物には吹き出しで一言コメントを添える

Don't - 鮮やかな原色を多用しない - 影の強いカードやグラデーション背景を乱用しない - 細い文字で本文を組まない - 角張ったボタンにしない - 赤を見出し全体に使わない

Page Structure

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

1. ファーストビュー（キャンペーン主題と出演者・商品を印象づける）: キャラメル色背景に人物2名と商品、紙吹雪、大きな日付キャッチ
2. 応募期間（期間を明示）: 白地茶枠の角丸ボックスに大きな日付
3. アンカーナビ（各セクションへ誘導）: 茶帯に2列の▼リンク
4. キャンペーン概要（参加方法と賞品数を短く伝える）: 中央揃えのリード文、強調は赤、下に動画埋め込み
5. プレゼント紹介（賞品の魅力を見せる）: ベージュ地、商品2列グリッド、円形人物＋吹き出し、カード画像
6. 出演者紹介（起用タレントの説明）: 写真の下に見出し・区切り線・説明文
7. 応募方法（手順を順に説明）: 4枚の手順カードを▼でつなぐ
8. 投票企画（投票への参加を促す）: 水色地にロゴ、斜めリボン見出し、キャラメル帯に商品とハート、茶ボタン
9. 投票状況（結果をリアルタイムで見せる）: 日本地図イラスト、凡例ボタン、地域選択グリッド
10. 同時キャンペーン（関連施策への誘導）: 赤の見出しに集中線、バナー画像、期間を赤で

Imagery

• 人物は明るい自然光の笑顔、商品を手に持つポーズ
• 人物の背景に淡いキャラメル色の円を置く
• 商品は透過切り抜きで並べ、間にハートを配置
• 地図や手順図は茶線のフラットイラスト
• 紙吹雪や光の粒でお祝い感を出す
• 吹き出しは手描き風の細線
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで最大幅約900px
• ナビは横1列5項目に
• 手順カードは左テキスト・右画像の横組み
• 商品は4列横並び、人物吹き出しを横に配置
• 地域選択は3列
• 出演者紹介は写真と文章を左右2カラム

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