DESIGN.md — 夜の紺×レンガ壁の謎解きコラボ菓子 LP（Midnight Navy Mystery Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ラグジュアリー・ダーク、ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 夜の紺・レンガ壁・円形スポット・黄色マーカー・明朝見出し・破れ紙
• 地の質感: 青いレンガ壁と雪山の写真テクスチャ。星座図のような細い線と星を地に薄く敷く
• 形: 円形の商品窓、破れ紙の帯、角の立った白ボタン、角丸なしの半透明パネル
• 温度感: 寒色が中心。黄色・赤のアクセントで暖かさとにぎやかさを足す

Colors

• 地は濃紺とレンガの青で統一し、白は文字とボタンにだけ使う
• 本文の強調は黄色の文字色だけにして、下線や背景色は付けない
• 商品はベージュの円形窓の中に置き、暗い地から浮かび上がらせる
• 赤・黄・緑はロゴ見出しや商品パッケージに任せ、UI の部品には使わない
• 規約や電話番号はさらに濃い紺のボックスに収めて目立ちすぎないようにする

Typography

• 見出しと日付は明朝にしてミステリーらしい格調を出す
• 説明文は太いゴシックを中央揃えにし、行間を約 2.2 と広く取る
• 強調したい語句だけ黄色にして、1 行に 1 か所までにする
• ポップな見出しはロゴ画像として作り、テキストでは再現しない
• 日付は数字を大きくし、曜日を括弧付きで小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央揃え。PC は円形の商品と説明文を左右交互に並べる 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 円形の商品窓は画面幅の約 88% にして中央に置く
• 円の下に説明文 3〜4 行、その下に白ボタンを置く流れを繰り返す
• ブランドごとのブロックの間は 60〜70px 空ける
• キャラクターはパネルの端から少しはみ出させて立体感を出す
• 電話番号はボックスの全幅を使い、大きな数字で中央揃えにする

Elevation & Depth

• 影はほぼ使わず、地の明暗差で前後関係を作る
• 白ボタンには 1〜2px の紺の縁取りか、ごく薄い影を付ける
• 期間パネルは半透明の紺を写真に重ねて奥行きを出す
• 円形窓はふちを周囲の光でぼかし、スポットライトのように見せる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品群は正円の中に収め、キャラクターは輪郭で切り抜く
• セクション境界: 破れ紙のギザギザ帯、弧を描く境界、写真を上下でぼかしてつなぐ
• ボタンとボックスは角丸なしの長方形にする
• 円形はベージュのレンガで塗った窓にだけ使う
• キャッチの帯は上下を破れ紙の形にする
• 日付の区切りは白い点線にする

Components

• 詳細ボタン（button-detail）: 白い長方形で、紺の文字を中央に、右端に「›」の矢印を置く
• 円形の商品窓（circle-product-window）: ベージュのレンガで塗った正円。上部にブランドロゴ、中に商品パッケージを 2 段で並べる
• 黄色強調の説明文（text-highlight-copy）: 白い太字を中央揃えにし、キーワードだけ黄色にする
• 破れ紙のキャッチ帯（torn-paper-band）: 黄色と商品写真の帯の上下を破れ紙の形にし、明朝の白いキャッチとキャラクターを重ねる
• 実施期間パネル（period-panel）: 半透明の紺の面に開始日・点線・終了日を明朝で大きく書く
• 規約のスクロール枠（terms-scroll-box）: 濃紺の枠の中で規約本文を縦にスクロールさせる。白い細いスクロールバーを付ける
• 電話番号ボックス（tel-box）: 濃紺の面に受話器アイコンと大きな電話番号を置く
• 条件の説明タブ（speech-tab）: 紺の帯に小さなロゴマークと 2 行の条件文を書き、下向きの三角を付けて吹き出し風にする

Do's and Don'ts

Do - 地は濃紺・レンガ・雪山の写真でつないで、夜のミステリーの世界観を保つ - ブランドのブロックは「円・説明文・ボタン」の同じ型で繰り返す - 強調は黄色の文字だけにとどめる - キャラクターを各セクションの端に配置して導線にする - 期間や規約などの事務的な情報も明朝の見出しで格調をそろえる

Don't - 白や明るい色をページの地にしない - ボタンを角丸やピル型にしない - 黄色以外の強調色を本文に足さない - 円形窓の中に文字をたくさん詰め込まない - 見出しを丸ゴシックにしない

Page Structure

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

1. ファーストビュー（作品の世界観とキャンペーンを一目で伝える）: キャラクターが集合した縦長のキービジュアルに、作品ロゴを重ねる
2. キャンペーンロゴ（企画の名前を印象付ける）: 紺の星座図の地に、多色のポップなロゴを大きく中央に置く
3. 関連バナー（関連作品や提携企画へ誘導する）: 横長のバナーを 2 本縦に並べる
4. キャッチ帯（参加を呼びかける）: 破れ紙の黄色い帯に明朝のキャッチを重ね、右に主人公を立たせる
5. 参加条件（対象商品を買えば参加できることを示す）: 吹き出し型のタブで条件を書き、雪山の地にコラージュ風の見出しを置く
6. ブランド別の特典（3 回繰り返し）（商品ごとのクイズ特典を紹介する）: レンガ壁の地に円形の商品窓、黄色強調の説明文、白い詳細ボタンを並べる
7. 施策の概要（実施期間と注意点を示す）: 英字の明朝見出しの下に半透明の期間パネルを置き、左にキャラクターを重ねる
8. 利用規約（規約をコンパクトに見せる）: 濃紺のスクロール枠に収める
9. お問い合わせ（問い合わせ先を伝える）: 電話番号ボックスの下に受付時間を小さな文字で添える
10. フッター（ページ上部へ戻る導線と権利表記）: 明朝で「トップへ戻る」と書き、その下に小さな権利表記を置く

Imagery

• キャラクターはアニメ塗りのイラストを輪郭で切り抜き、パネルの端からはみ出させる
• 背景は雪山や夜空の写真を青く色調補正し、雪の粒を散らす
• 壁は青いレンガのテクスチャで、中央を少し明るくしてスポットライトの効果を出す
• 商品パッケージは正面から撮り、影を付けずに整列させる
• 装飾として星座図の細い線や星を地に薄く敷く
• 見出しはコラージュ風に、色違いの四角い枠に一文字ずつ入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長にし、ロゴとバナーを画像の中に重ねる
• PC のブランド別特典は円と説明文を左右交互に並べるジグザグ配置にする
• PC の白ボタンは幅約 280px に縮め、説明文の下にそろえる
• PC の期間パネルは日付を 1 行にまとめ、横に広げる
• 規約枠と電話番号ボックスは PC で最大幅約 1000px にして中央に置く

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