DESIGN.md — ピンク×焦げ茶の手描き風キャンペーンLP（Pink Illustrated Ribbon Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、ポップ・元気、親しみ・手作り感、やさしい・柔らかい
• キーワード: 淡ピンク地・焦げ茶の縁取り文字・リボン型カード・定規目盛り装飾・水彩イラスト・赤ピルボタン
• 地の質感: フラットな単色面に、焦げ茶のずらし影と手描きの目盛り線でアナログ感を足す
• 形: 角丸の白カード、下端がV字に切れ込んだ旗型パネル、ピル型ボタン
• 温度感: 暖色寄りでやさしく甘い

Colors

• 地は全面淡ピンク、情報は白カードに載せる
• 文字・縁取り・影は焦げ茶で統一し黒は使わない
• 強調語だけ赤文字にし、1段落で数語までに抑える
• 主CTAは鮮やかな赤＋暗赤の下影
• 朱色の帯はステータス告知1か所だけに使う
• button-primary は文字 #FEFAF9 × 背景 #F40101 のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E70101、4.6:1）を使う。
• status-band は文字 #FEFAF9 × 背景 #E25A4C のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DA3423、4.5:1）を使う。
• prize-card は文字 #EB1A16 × 背景 #FFFFFF のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EA1814、4.53:1）を使う。

Typography

• 本文は太字・中央揃え・短い改行で詩のように組む
• 大見出しは白文字に焦げ茶の太い縁取りと右下ずらし影
• 数字は周囲より大きくして目立たせる
• 規約の文だけ細字の左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カード幅は画面の約85%で中央に置く
• 見出し→本文→カード/ボタンの順に縦に積む
• 賞ごとのカードの上辺に見出しラベルを重ねる
• 長い規約は高さを固定したスクロール枠に入れる

Elevation & Depth

• ぼかしの影は使わない
• カード・パネルは焦げ茶か淡ピンクの影を右下に4〜8pxずらして置く
• ボタンは暗赤の下影4pxで押せそうな厚みを出す

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: イラストは角丸なしの四角か切り抜きで、カードの端からはみ出させて置く
• セクション境界: 直線で切り替え。旗型パネルは下端がV字の切れ込み
• メッセージパネルの上下の縁に定規の目盛り風の線を入れる
• 賞名ラベルは角の丸い焦げ茶の枠で、カードの上に重ねる
• ピルボタンは横幅いっぱいに近く取る

Components

• 赤ピルCTA（button-primary）: 赤い面に白太字と右向き矢印、暗赤の下影
• 告知帯（status-band）: 画面幅いっぱいの朱色帯に白文字で受付状況を示す
• 旗型メッセージパネル（ribbon-panel）: 白地で上下の縁に目盛り線、下端はV字、焦げ茶のずらし影
• 縁取り見出し（outlined-heading）: 白文字に焦げ茶の縁取りとずらし影を付けた大見出し
• 賞品カード（prize-card）: 白の角丸カードに淡ピンクの影。上に焦げ茶枠の賞名ラベル、下隅に賞品画像をはみ出させる
• 焦げ茶ピルラベル（pill-label）: 焦げ茶塗りに白文字の小さな区分ラベル
• 罫線挟み小見出し（line-heading）: 左右の焦げ茶の横線で挟んだ小見出し。穂の飾りを付ける場合もある
• 規約スクロール枠（scroll-terms）: 白い四角の枠を高さ固定にして中で縦スクロールさせ、箇条書きを入れる

Do's and Don'ts

Do - 地は淡ピンク1色で通す - 見出しと影は焦げ茶で統一する - 本文は太字の中央揃えで短く改行する - 強調語だけ赤文字にする - カードには平たいずらし影を付ける

Don't - 黒文字や寒色を使わない - ぼかしの影やグラデーションを多用しない - 角の尖った細いボタンにしない - 写真素材をそのまま使わずイラストで統一する - 赤文字を段落全体に広げない

Page Structure

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

1. ファーストビュー（企画の世界観とタイトルを伝える）: 4コマ割りの水彩イラストの下に、生成りピンクの地と朱色の太字タイトル
2. 告知帯（受付状況を知らせる）: 画面幅いっぱいの朱色帯に白文字
3. お礼メッセージ（参加者への感謝を伝える）: 目盛り装飾の旗型白パネルに中央揃えの太字本文
4. 結果発表（入選作品へ案内する）: 縁取り見出し、賞名の白カード、赤ピルボタンを2組
5. 企画趣旨（キャンペーンの意図を説明する）: 旗型パネルにロゴ風バッジと、赤い強調語を混ぜた本文
6. キャンペーン概要（賞品と当選数を伝える）: 大きな縁取り数字・語を本文に混ぜる
7. 特典（賞ごとの内容を示す）: 焦げ茶ピルラベルの下に賞品カードを3枚並べ、賞品画像をはみ出させる
8. 応募規約（条件を明示する）: 縁取り見出しと高さ固定のスクロール枠
9. 関連サイトバナー（特設サイトへ誘導する）: 赤枠でクリーム地の角丸バナーに、きらめき装飾を付けたポップ文字
10. 問い合わせ（窓口を知らせる）: 縁取り見出しの下に、中央揃えの連絡先と注釈

Imagery

• 人物が商品を囲んで笑う日常の場面を、水彩風の柔らかいイラストで描く
• 線は細い茶色、色は暖色中心の淡い塗り
• コマ割り構図で複数の場面を1枚にまとめる
• 賞品はカードやスマホのイラストを少し傾けて置く
• きらめき・星などの小さな装飾を黄色で散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを横並びにし、左にイラスト、右にタイトル
• PCでもコンテンツは中央の約70%幅に収める
• 旗型パネルはPCで横長になり、本文の改行を減らす
• 賞品カードはPCで横長にし、画像を左右の端に置く
• ボタンはPCで幅約300pxに縮める

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