DESIGN.md — 黄緑×深緑のポップな謎解きキャンペーンLP（Pop Green Puzzle Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 謎解き・ゲーム感・黄緑グラデ・紙吹雪・エンブレムバッジ・手描き人物
• 地の質感: ベタ塗りの面に細い斜線ストライプと薄い方眼、大きな水玉を淡く重ねた平面的な質感
• 形: 角丸カード、波形の縁取りボックス、両端が切れ込んだリボン見出し、盾型バッジ
• 温度感: 明るく暖かい黄緑が中心。赤とオレンジで熱量を加える

Colors

• 外周は黄緑、中身は生成りカードの2層構造にする
• セクション見出しは深緑の帯かリボンに白文字で載せる
• 見出し内の重要語は黄色、本文内の重要語は赤で太字にする
• CTAボタンだけ赤オレンジを使い他の要素と被らせない
• 下部の注意・問い合わせは深緑地に濃緑ボックスで沈める
• 青は入力パネルと告知帯に限定する
• button-primary は文字 #FEF4EF × 背景 #F24525 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D72C0D、4.56:1）を使う。
• answer-panel は文字 #111110 × 背景 #0173BC のコントラスト比が 3.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0181D3、4.57:1）を使う。
• faq-card は文字 #E83A1E × 背景 #FCFEEC のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DB3216、4.58:1）を使う。

Typography

• 全体を太めのゴシックで統一し、細字は使わない
• 説明文は中央揃えにし、1行を短く改行する
• 本文中の重要語は赤で、少し大きいサイズにする
• FVのタイトルロゴは立体の縁取りがある太い装飾書体にする
• 注釈は※を付けた小さい文字で控えめに入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジ一覧だけ 5 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 黄緑の外周の中に、幅90%の生成りカードを置く
• 手順は番号見出し、画像、本文の順に縦へ積み、点線で区切る
• セクションの切り替えに下向き三角の矢印を置く
• FAQは白い角丸カードを縦に並べ、右端に＋アイコンを付ける
• イラストはカードの端からはみ出すように配置する

Elevation & Depth

• 影はほとんど使わずフラットに見せる
• バッジとイラストだけに、ずらした青紫のベタ影を付ける
• FVのタイトルは白と青の太い縁取りで浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品と人物は切り抜き。四角い写真枠は使わない
• セクション境界: 直線で色を切り替え、下向き三角の矢印と斜線ストライプの帯を添える
• 見出しリボンは両端をV字に切り込む
• 吹き出しボックスは波形の縁にする
• レベル表示は盾型エンブレムにする
• 問題パネルは木枠のような黄色い太枠で囲む

Components

• 判定ボタン（button-primary）: 赤オレンジのピル型ボタンに白い太字。白い縁取りを付ける
• 解答入力パネル（answer-panel）: 淡い青の角丸パネルに、白い入力欄と判定ボタンを縦に並べる
• ヒント開閉バー（accordion-bar）: 青い帯に白い内枠を付け、中央に白文字、右に＋を置く
• 深緑の見出し帯（section-header-band）: 斜線ストライプ入りの深緑の帯に2行の白文字。キーワードは黄色にする
• リボン見出し（ribbon-heading）: 両端がV字に切れ込んだ深緑のリボンに白文字
• 番号付き手順見出し（step-number）: 深緑の丸に白い数字を入れ、右に緑の太字見出しを置く
• 波形吹き出し（wavy-callout）: 淡黄の波形の縁のボックスに中央揃えのコピー。下端に人物イラストを重ねる
• レベルの盾バッジ（level-badge）: 黄色の盾に青い縁。茶色の大きな数字と、星付きのリボンを付ける
• FAQカード（faq-card）: 白い角丸カード。左に赤いQ番号、中央に赤い質問文、右に緑の丸い＋アイコン
• 注意事項ボックス（notice-box）: 濃緑の面に、白いラベル帯と白文字の箇条書きを置く

Do's and Don'ts

Do - 黄緑の外周と生成りカードの2層構造を守る - 見出しは深緑の帯かリボンでそろえる - 説明文は中央揃えにし、重要語だけを赤にする - 紙吹雪と手描き人物を余白に散らして遊び心を出す - 数字は盾型バッジで見せてゲーム感を出す

Don't - 写真を四角く大きく敷き詰めない - くすんだ色や寒色を地の色に使わない - 細い明朝体を使わない - 赤をCTAと強調文字以外に広げない - ドロップシャドウを多用しない

Page Structure

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

1. ファーストビュー（企画名と期間を伝える）: 黄緑の放射グラデーションに、立体ロゴ、商品パッケージ、人物イラスト、紙吹雪を配置する
2. 告知帯（最新の状況を強く伝える）: 青い帯に白い極太文字で1行
3. 問題と解答入力（その場で参加させる）: 方眼の地に、盾バッジと吹き出し、黄色い木枠の問題パネル、入力パネル、開閉バーを置く
4. 遊び方（参加手順を説明する）: 深緑の見出し帯とリボンの下に、番号付きの3ステップを点線で区切って並べる
5. 共感コピー（楽しむ気分を高める）: 波形吹き出しに中央揃えのコピーと人物イラストを置く
6. 対象商品（参加に必要な商品を示す）: リボン見出しの下に切り抜きパッケージを3＋2で並べ、手書き風の注目マークを付ける
7. 問題選択（各問題へ誘導する）: 下向き三角のあとに深緑の見出し帯を置き、白い枠の中に盾バッジを5列×2段で並べる
8. よくある質問（不安を解消する）: 淡黄緑のカードの中に白いアコーディオンを6つ並べる
9. 注意事項・問い合わせ（利用条件と連絡先を示す）: 深緑の地に濃緑ボックスを置き、白文字で箇条書きと電話番号を大きく載せる
10. フッター（ブランドサイトへ誘導する）: 白い地にバナー、リンク、コピーライト。右下に丸い追従ボタンを置く

Imagery

• 人物は太い輪郭線の手描き風イラストにする。黄・赤・ピンク・緑のベタ塗りで、青紫のずらし影を付ける
• 読書や絵画、料理など、趣味を楽しむ日常のシーンを描く
• 商品パッケージは切り抜きで、少し傾けて重ねる
• 背景に赤・青・黄のリボン状の紙吹雪を散らす
• 地には斜線ストライプ、方眼、大きな淡い円を薄く敷く
• 虫眼鏡や？マークで謎解きらしさを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約60%幅のカードを置き、外周に黄緑の水玉背景を広げる
• PCの問題エリアは2カラムにし、左に問題と入力、右にヒント一覧を開いた状態で並べる
• PCの遊び方は、テキストとイラストを左右交互に並べる
• PCの商品は5つを横1列に並べる
• PCのFAQは回答を開いた状態で表示する

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