DESIGN.md — 青×オレンジの猫用品キャッシュバックLP（Bright Blue and Orange Pet Cashback Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、清潔・爽やか、情報量多め・訴求型
• キーワード: キャッシュバック・乗り換え訴求・猫モチーフ・淡い水色地・手順説明・角丸カード
• 地の質感: グラデーションや質感は使わない。フラットな塗りと、少しだけ影を付けた白い角丸カード
• 形: 大きめの角丸カード、猫耳付きの番号バッジ、ゆるい波線のセクション境界、斜めストライプの帯
• 温度感: 明るく温かい。ネイビーで信頼感、オレンジで楽しさを出す

Colors

• 白・淡い水色・クリーム色の3色の地をセクションごとに切り替える
• ネイビーは帯・見出し・サブボタンの枠線に使い、大きな面にはFVだけで使う
• オレンジは大見出しと番号バッジ、矢印にだけ使う
• 注意書きは赤い小さな文字でまとめる
• 黄色は猫耳型ハイライトとラベルに少しだけ使う
• 応募ボタンは同意前はグレー、同意後はブランド色にする
• number-badge は文字 #FFFFFF × 背景 #F79828 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B06207、4.57:1）を使う。

Typography

• 見出しは中央揃え。その下にオレンジの点線を引く
• 見出しの一部の文字の後ろに黄色の猫耳型の図形を重ねる
• 金額の数字は大きく、単位は小さくする
• 本文は中央揃えの短い段落、説明カードの中は左揃え
• 注意書きは※で始め、赤や小さいグレーの文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。手順と商品は 2 列のグリッドも可
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは淡い色の角丸パネルで囲む
• 乗り換えの比較は『今の商品→矢印→新しい商品』を横に並べる
• 手順は4つのカードを横に並べ、間に三角の矢印を入れる
• 悪い例は2列の箇条書きを濃い水色の帯にまとめる
• 規約はスクロールする枠に入れ、同意のチェックボックスとボタンを中央に置く

Elevation & Depth

• カードはほぼフラットで、うっすら影を付ける程度にする
• 手順カードは水色の太い枠線で立体感を出す
• 規約の枠は薄いグレーの線と角丸にする

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージは切り抜きで置く。円形の吹き出しや注目用の楕円で囲む
• セクション境界: ゆるい波線と、大きく角を丸めたパネルで区切る
• 番号バッジは猫耳付きのオレンジの円にする
• キャッシュバック金額の帯には斜めストライプを入れる
• ラベルはネイビーのピル型にする
• 肉球アイコンを見出しの左右に散らす

Components

• 応募ボタン（button-primary）: ピル型の大きなボタン。右に矢印。同意前はグレーで押せない
• 詳細リンクボタン（button-outline）: 白地にネイビーの細い枠線を付けたピル型の小さいボタン
• 猫耳番号バッジ（number-badge）: 猫耳付きのオレンジの円に白い番号を入れる
• 点線付き見出し（heading-dotted）: オレンジの見出しの下に点線、背後に黄色の猫耳図形
• 手順カード（step-card）: 上部にSTEP番号、中央にイラスト、下に短い説明文。水色の枠線付き
• ネイビーラベル（label-pill）: 期間や条件を示すネイビーのピル型ラベル
• 円形吹き出し（circle-bubble）: ネイビーやオレンジの円に白文字で商品名や補足を入れる
• 金額帯（amount-band）: 斜めストライプの帯にネイビーのラベルと大きな金額を置く
• 悪い例ボックス（ng-box）: ×付きの小見出しと2列の箇条書きを入れた水色の帯

Do's and Don'ts

Do - 淡い水色とクリーム色の地を交互に切り替える - 数字・金額・番号はオレンジかネイビーで大きく見せる - 猫耳や肉球のモチーフを見出しまわりにさりげなく入れる - 手順は番号付きカードと簡単なイラストで見せる - 注意事項は赤い※で漏れなく書く

Don't - 暗い背景や黒い大きな面を使わない - 角の尖ったカードや直線だけの区切りにしない - オレンジを本文や広い面に使わない - 写真の上に長い文章を重ねない - 強調色を4色以上に増やさない

Page Structure

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

1. ファーストビュー（キャンペーンの内容・金額・期間をひと目で伝える）: 猫の写真と商品を左右に置き、中央にオレンジの大見出しを配置。下部のネイビー帯に金額カードと期間ラベルを置く
2. 導入（キャンペーンの趣旨を説明する）: クリーム色の地に肉球を散らし、中央揃えの見出しと短い文章を置く。下は波線で区切る
3. 特典内容（特典の条件パターンを比べて見せる）: 番号バッジ付きの水色パネルに乗り換え前後の商品と矢印を並べ、下に金額帯を置く。1つは全幅、2つは2列
4. 応募の流れ（手順を4ステップで説明する）: STEP番号付きのカードを4つ横に並べ、間に矢印を入れる
5. 撮影方法の説明（書類の撮り方と悪い例を伝える）: 淡い水色のパネルで、左に説明文、右に図解。下に悪い例の帯を置く
6. 対象商品（対象となる商品を示す）: クリーム色と水色のパネルに商品パッケージを並べ、サイズラベルと詳細ボタンを付ける
7. 対象条件の補足（対象となる今の商品を示す）: 白い角丸の枠にグレーのラベルとイラストを2列で並べる
8. 応募要項・申込（規約への同意と応募を促す）: スクロールする規約枠、同意のチェックボックス、ピル型の応募ボタンを中央揃えで置く

Imagery

• 猫は明るい背景で撮ったナチュラルな写真を切り抜いて使う
• 商品パッケージは正面から撮った切り抜き
• 今使っている商品は顔のないシンプルなフラットイラスト（黄緑・黄色）
• 手順はスマホ・レシート・ハサミなどを描いたシンプルなフラットイラスト
• 肉球アイコンはネイビーで小さく散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは手順カードを2列×2段か縦並びにする
• 特典パターンの2列は、SPでは縦に積む
• FVは猫の写真を上、見出しと金額カードを下に縦に並べる
• 悪い例の2列の箇条書きは、SPでは1列にする
• PCでは本文の幅を最大960px程度で中央に置く

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