DESIGN.md — 紺×赤×金のホリデー絵本風キャンペーンLP（Navy Holiday Illustrated Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 親しみ・手作り感、かわいい、信頼・誠実、情報量多め・訴求型
• キーワード: ホリデー・絵本調イラスト・夜空の濃紺・クリスマスレッド・金の星・ステップ型の参加案内
• 地の質感: フラットな単色面に、紙のかすれやノイズ感のあるイラストを重ねる。雪の丘の曲線で地色を切り替える
• 形: 角丸8px前後のカードとボタン、丸いSTEPバッジ、丸い吹き出しバッジ、雪の丘のような波形の境界
• 温度感: 冬の夜の冷たい紺に、赤・金・窓明かりの暖色を差して温かい

Colors

• 地は濃紺と生成りを交互に切り替え、境界は雪の丘イラストで隠す
• 紺地では見出しを金、本文を白にする
• 生成り地では見出しを深緑または赤、本文をチャコールにする
• 赤は面として使うのはアコーディオンとSTEPバッジ、タイトル枠に限る
• 主CTAは金、会員登録など外部導線は深緑、詳細ボタンは赤で役割を分ける
• 金の星アイコンで特典数値を飾る
• badge-step は文字 #CEAA72 × 背景 #C80000 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 見出しは日本語ゴシック太字＋下に欧文セリフのサブタイトル
• 導入文と説明文は中央揃え、要項と注釈は左揃え
• 特典数値は大きめの太字で星アイコンと並べる
• 注釈は※で始めて2文字目からぶら下げインデント
• 条件見出しは数字だけを一段大きくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードとボタンは左右16px程度の余白を取り、幅いっぱいに置く
• ステージカードの間は縦3点リーダーでつなぐ
• セクション冒頭は全幅イラスト＋見出しで始める
• STEPは丸バッジ→見出し→説明→ボタンの順で中央揃え
• 注釈群はカードの直後に小さく並べる

Elevation & Depth

• アコーディオンとボタンは下方向に軽い影（0 3px 6px 程度）
• ボタンは内側に細い明るい縁取りを入れて立体感を出す
• 白カードは影なしのフラット

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは切り抜きで背景に溶け込ませる。カード画像は角丸の長方形
• セクション境界: 雪の丘の波形の曲線と街並みイラストで地色を切り替える
• ボタンは角丸8pxの横長長方形で右端に＞
• STEPと抽選数は正円バッジ
• アコーディオンは右端に細い＋
• 見出しの下線は細い1px線

Components

• 金の主CTAボタン（button-primary）: 幅いっぱいの金ボタン、内側に細い淡色の縁、右に＞
• 緑の登録ボタン（button-secondary）: 会員登録など外部導線用の深緑ボタン
• 赤の詳細ボタン（button-detail）: カード内で詳細を見るための短めの赤ボタン
• 赤のミッションアコーディオン（accordion-mission）: 左にイラストアイコン、中央に白太字項目名、右に＋。縦に4つ並べる
• ステージ特典カード（card-stage）: 白カードに赤のステージ番号、赤下線付き条件、星アイコン＋数値
• STEP丸バッジ（badge-step）: 赤の正円に金の縁、STEPと数字を金色で2段
• 吹き出し丸バッジ（badge-bubble）: 商品画像の横に置くミントまたは紺の円形バッジで補足を3行
• 金区切りの条件リスト（list-payment）: 生成りのカードに赤い十字星マーク、各行を金線で区切る
• 要項アコーディオン（accordion-terms）: 緑太字の項目名と右端の金の＋、下に金の細線

Do's and Don'ts

Do - 紺と生成りの切り替えは必ずイラストの丘で行う - 見出しには日本語と欧文セリフを2段で入れる - 特典は段階ごとにカードを分け、点線のつなぎで進行を見せる - ボタンの色は役割ごとに金・緑・赤で使い分ける - 注釈は小さく※付きでまとめる

Don't - グラデーションや写真背景を使わない - ピル型ボタンにしない - 赤を本文の地に広く使わない - セクション境界を直線で切らない - 装飾フォントを本文に使わない

Page Structure

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

1. ファーストビュー（キャンペーン名と期間を伝え世界観に引き込む）: 紺の夜空に赤枠のタイトル、緑のリボン、右上に金の丸バッジ、下に街並み全景イラスト
2. 導入（企画の趣旨を物語風に説明）: 生成り地に中央揃えの短い文を3段落
3. ミッション概要（挑戦できる内容を分類して見せる）: 家のイラストに見出しを載せ、紺地に赤アコーディオンを4つ並べる
4. 特典概要（達成段階ごとの特典を示す）: 生成り地に白のステージカードを縦に並べ、点でつなぐ。商品画像と吹き出しバッジを添える
5. 注釈（付与時期などの補足）: ※付きの小さな文を左揃えで列挙
6. 参加方法（手順を段階的に案内）: 紺地にSTEP丸バッジ、金の見出し、白本文、各段に緑または金ボタン
7. 対象条件リスト（支払い方法などの条件を明示）: 生成りカード内に十字星マークのリストを金線で区切る
8. 応募要項（詳細条件を折りたたんで提示）: 生成り地に緑見出しと金線のアコーディオン、注意事項を列挙
9. 最終CTA（ミッションページへ誘導）: 幅いっぱいの金ボタンと最後の注釈

Imagery

• 紙のかすれ質感のあるフラットな絵本調イラストで冬の街並みを描く
• 赤レンガの家、雪の屋根、窓の黄色い明かり、ツリーを配色の主役にする
• 人物は顔を簡略化し、チェック柄や小物で楽しさを出す
• 背景の夜空に小さな星の点を散らす
• 商品は白背景の切り抜きに金の星を散らす
• アイコンは単色の細線ピクトグラム
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも中央に約420px幅のSPレイアウトを置く
• PCの左右余白は濃紺の夜空で埋め、最下部に街のシルエットを敷く
• 文字サイズや部品構成はSPと同じに保つ
• 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 行書くと起動時に読み込まれる。