DESIGN.md — 深緑×赤×金のクリスマス家電キャンペーンLP（Christmas Red & Forest Green Camera Campaign LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: クリスマス・深緑と赤・金色の見出し・雪の粒・白カードの商品一覧・インスタント写真の枠
• 地の質感: 深緑の地に白い小さな雪の粒を散らす。赤い地は斜めストライプの帯で区切り、全体にフラットで光沢は使わない
• 形: 角丸の白いカード、ピル型の黄色ボタン、両端に斜線の飾りがある細長い帯見出し
• 温度感: 温かい。華やかでお祝いの雰囲気

Colors

• 地色は深緑と赤を交互に切り替え、セクションの区切りがはっきりわかるようにする
• 深緑の地には白い雪の粒を散らし、見出しは白か金色にする
• 商品一覧は赤い地に白いカードを並べ、カードの中は白地に黒い文字にする
• 押せるボタンはすべて黄色にする。ただし黄色い地の上では深緑のボタンにする
• プレゼントの告知は暗い赤のボックスに入れ、当選数の数字は金色で大きく書く
• 赤を使うのは地色と NEW バッジだけにし、文字の色には使わない

Typography

• 見出しはすべて太いゴシックにし、字間を 0.1em 前後広げる
• 帯見出しは小さいリード文と大きい分類名の 2 段にし、どちらも金色にする
• 数字で訴える部分は、数字だけを周りの約 1.5 倍の大きさにする
• カード内のキャッチは 1〜2 行の短い一言にとどめる
• 注釈は白い小さな文字で、箇条書きにしてページ下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ファーストビューは写真を 2〜3 列のタイル状に並べ、分類ボタンは 2×2 に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 商品カードは画面幅の 92% で、縦に 10px 間隔で並べる
• カードの中は、左上にキャッチと色見本の四角、中央に商品写真、その下に型番とボタンを中央揃えで置く
• 帯見出しは画面幅いっぱいの深緑の帯にする
• 告知ボックスは画面幅の 92% で、細い枠線で囲む
• セクション見出しは左右に白い横線を伸ばし、中央に置く

Elevation & Depth

• 影はほとんど使わず、色の面だけで分ける
• インスタント写真の枠にだけ、ごく薄い影をつけて紙の厚みを出す
• カードは影なしの白い面にし、地色との差で浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を切り抜いて白地に置く。人物写真は四角に切り、インスタント写真の白い枠に入れる
• セクション境界: 直線で区切る。赤い地の上下には斜めストライプの細い帯を入れ、帯見出しは両端に斜線を重ねた飾りをつける
• ボタンはピル型で、右端に矢印をつける
• 商品カードは角丸 10px 前後にする
• NEW バッジは赤い正円に白い文字
• 色見本は角丸 2px の小さな正方形を横に並べる

Components

• 黄色いピル型ボタン（button-primary）: 中央に文字、右に矢印を置く。カードと告知ボックスで使う
• 深緑のピル型ボタン（button-dark）: 黄色い地の上で使う。白い文字と矢印
• 分類のジャンプボタン（category-nav）: 大きな黄色いピル型ボタンを 2×2 に並べ、右に丸い下向きの矢印をつける
• 帯見出し（band-heading）: 深緑の帯に金色の文字を 2 段で置き、上下に金色の細い線、両端に斜線の飾りをつける
• 商品カード（product-card）: 白い角丸のカード。キャッチ、色見本、本体とプリント見本の写真、型番、ボタンの順に並べる
• NEW バッジ（badge-new）: カードの右上に置く赤い正円
• プレゼント告知ボックス（campaign-box）: 暗い赤の地を細い枠線で囲む。白い見出し、金色の当選数、日時の行、キービジュアル、ボタンの順に並べる
• インスタント写真の枠（instant-photo）: 白い紙の枠の中に写真を入れ、下側の余白を広くとる
• オーナメントの飾り（ornament）: 赤い地の上端から細い線で黄色い丸のオーナメントを吊り下げる

Do's and Don'ts

Do - 深緑と赤を交互に使い、クリスマスらしさを保つ - 押せるものはすべて黄色いピル型にする - 商品はすべて同じ型のカードに入れ、要素の並び順をそろえる - 深緑の地には雪の粒を散らす - 金色の文字は暗い地の上でだけ使う

Don't - パステルや青系を地の色にしない - ボタンを角張った四角にしない - カードに強い影やグラデーションをつけない - 赤い地の上に赤い文字を置かない - 見出しに細い書体や明朝体を使わない

Page Structure

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

1. ファーストビュー（季節のキャンペーンと出演人物を印象づける）: 緑・赤・深緑の背景で撮った人物写真をタイル状に組み、1 マスを金色の縦書き風キャッチ、別の 1 マスをロゴとキャンペーン名にする
2. プレゼント告知（購入者向けの抽選特典を伝える）: 深緑の地に暗い赤の枠付きボックスを置き、当選数を金色で大きく書き、キービジュアルと黄色いボタンを添える
3. 動画（CM で季節の気分を高める）: 白い角丸の枠に動画のサムネイルを入れ、再生アイコンと字幕を重ねる
4. 写真ギャラリー（出演人物の撮影写真で楽しさを見せる）: 左右に線を伸ばした白い見出しの下に、インスタント写真の枠を大 1 枚、小 2 枚で並べる
5. 製品ラインアップの目次（分類ごとに移動できるようにする）: 赤い地にストライプの帯と吊り下げオーナメントを飾り、黄色いピル型ボタンを 2×2 に並べる
6. 分類別の商品一覧（商品を分類ごとに見せる）: 深緑の帯見出しのあと、白い商品カードを縦に並べる。分類の数だけ繰り返す
7. 関連商品（フィルムやアクセサリーを一緒に買ってもらう）: 深緑の地に、左に写真、右に黄色い地の文章と深緑のボタンを置いたカードを 2 枚並べる
8. プレゼント告知（再掲）（ページの最後で特典をもう一度伝える）: 冒頭と同じ告知ボックスを繰り返す
9. 注釈（注意事項と商標を表記する）: 深緑の地に、白い小さな文字の箇条書きで書く

Imagery

• 人物は緑や赤の単色背景の前で、ニットなどの冬服を着せ、商品を手に持って笑顔で撮る
• サンタクロース、ツリー、リボンを掛けたギフト箱などのクリスマス小物で季節感を出す
• 商品は背景を切り抜き、本体の横にプリント見本を添える
• 写真はインスタント写真の白い枠に入れて、手作りの温かさを出す
• PC では赤い地の余白に、金色の葉や雪の結晶のイラストを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約 900px でまとめ、背景色は画面幅いっぱいまで広げる
• PC のファーストビューは写真のタイルを横長に組み直し、左右に分ける
• PC では商品カードを 2 列に並べ、カードが奇数のときは最後の 1 枚を中央に置く
• PC の分類ボタンは 4 つを横 1 列に並べる
• PC の写真ギャラリーは 3 枚を横 1 列に並べる
• PC の関連商品カードは 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 行書くと起動時に読み込まれる。