DESIGN.md — 苺レッド×桜ピンクのSNS投稿キャンペーンLP（Strawberry Red Pink SNS Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、情報量多め・訴求型
• キーワード: 苺レッド・淡ピンク地・SNSグラデーション・筆記体見出し・丸切り抜き写真・月替わりプレゼント
• 地の質感: ほぼフラットな単色面。FV だけピンクのストライプ地に写真をコラージュしている
• 形: 角丸カード、ピル型ボタン、円形の写真切り抜き、細い斜線の飾り
• 温度感: 暖色寄りで甘く華やか

Colors

• 地の色は白→淡ピンク→苺レッドを交互に入れ替えて、セクションの区切りを色で示す
• 赤地の上では白文字を基本にし、特に強調したい語だけ黄色＋下線にする
• フォロー・投稿系の主ボタンはオレンジ→マゼンタ→紫のSNS風グラデーションにする
• 見出しの小装飾や筆記体の英字は苺レッドの単色にする
• 水色はロゴと公式リンクだけに使い、それ以外には広げない
• 淡ピンク地の規約文は濃グレーの小さい文字で読ませる

Typography

• 見出しは丸ゴシックでやわらかく見せる
• 英字の筆記体と日本語の副見出しを上下に並べてセットにする
• 本文の大事な語には下線を引いて強調する
• 副見出しは字間を広めにとる
• ボタン内では主語を大きく、補足語を小さく組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。関連記事と投稿写真だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の色帯で区切る
• 見出しは中央揃え、規約文だけ左揃え
• プレゼントは赤の角丸カードに、写真・数量バッジ・店舗情報をまとめる
• 応募方法は白い角丸枠に番号付きの手順を書き、▼で次へつなぐ
• セクションの上下には余白を広めにとる

Elevation & Depth

• ほぼフラットに作る
• グラデーションのボタンにだけ、下側へ薄い影または濃い縁取りを付ける
• カードは影なしで、枠線か色面で区切る

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: FVの写真は円形、投稿グリッドは角丸の正方形、主写真は白フチの長方形
• セクション境界: 直線で色を切り替える
• ボタンはピル型
• 数量バッジは黄色の線で描いた円
• 見出しの両脇に細い斜線を置く
• 吹き出しは手描き風の線で描く

Components

• SNSグラデーションボタン（button-sns）: オレンジ→紫のピル型ボタン。左にSNSアイコン、右に▶を置き、下に濃い影を付ける
• 赤のサブボタン（button-red）: 苺レッドのピル型ボタン。店舗アカウントへのリンクに使う
• moreバナー（more-banner）: 赤の帯に白の筆記体 more と日本語の説明を重ねる
• 筆記体見出しセット（script-heading）: 赤の筆記体の英字の下に日本語の副見出しを置き、横に手描きの吹き出しを添える
• CHECKタグ（check-tag）: 斜めに傾けた黄色の小ラベル。赤地の見出しの左上に重ねる
• 応募方法カード（step-card）: 白の角丸枠。赤のピル型見出し、丸数字の手順、▼の矢印、苺アイコンで構成する
• プレゼントカード（prize-card）: 赤の角丸カード。黄色の下線付きタイトル、写真、黄色の円の数量バッジ、店舗情報を入れる
• 関連記事カード（article-card）: 角丸のサムネイルの下に小さい説明を中央揃えで置き、下に赤の細線を引く

Do's and Don'ts

Do - 赤とピンクを交互に使って、テンポよく区切る - 強調語は黄色＋波線や下線で目立たせる - 英字の筆記体見出しで手書きの華やかさを出す - 写真は苺や季節の素材を明るく彩度高めに見せる - 手順は番号と▼で一目でわかるようにする

Don't - 寒色を広い面に使わない - グラデーションを主ボタン以外に乱用しない - 明朝体で硬い印象にしない - 赤地に黒文字を置かない - 角張ったボタンにしない

Page Structure

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

1. ファーストビュー（キャンペーン名とプレゼントを一目で伝える）: ピンクのストライプ地に円形の写真と苺の素材を散らす。中央にロゴ、リボン帯、ハッシュタグの大見出し、黄色の円バッジを置く
2. 今月のテーマ（月替わりのタグと当選率アップを訴える）: 赤の全幅地にCHECKタグを置く。白と黄色の文字に波線を添え、白フチの写真を載せる
3. 応募方法（参加の手順を示す）: 淡ピンク地に白の角丸カードを置き、番号付きの手順とSNSボタンを入れる
4. 投稿のポイント（投稿内容の例を示す）: 白地に筆記体の見出しと吹き出し、下線付きの本文、グラデーションボタン、手描きの指イラストを置く
5. 今月のプレゼント（賞品の魅力を伝える）: 淡ピンク地に赤のカードを置き、写真、数量バッジ、店舗情報、赤ボタンを入れる
6. フォロー誘導（公式アカウントのフォローを促す）: 白地に赤の見出し、短い説明、SNSボタンを置く
7. 関連記事（関連コンテンツへ回遊させる）: 淡ピンク地に斜線飾り付きの見出しを置く。2列の角丸サムネイルを並べ、下に more バナーを置く
8. 実績・投稿ギャラリー（投稿数と雰囲気で参加意欲を高める）: グラデーションの帯で期間を告知し、横長の写真帯と2列の角丸グリッドを置く
9. 応募規約（規約を明示する）: 淡ピンク地に小さい文字を左揃えで組み、番号付きの小見出しで区切る
10. フッター（運営元とリンクを示す）: 白地にロゴ、問い合わせ先、水色の下線リンクを中央揃えで置く

Imagery

• 苺やスイーツを明るい自然光でアップに撮り、彩度を高めにする
• 人物は子どもや家族の笑顔を、体験中のスナップとして撮る
• FVは切り抜いた苺と円形の写真をコラージュする
• 線画の指や吹き出しなど、手描き風のアクセントを添える
• 観光地や季節イベントの写真を角丸のグリッドで並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せの約760px幅で、セクションの色帯は全幅のまま
• PCでは関連記事を3列、投稿グリッドを4列にする
• PCの more バナーは横長の帯で、筆記体と文字を横に並べる
• FVは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 行書くと起動時に読み込まれる。