DESIGN.md — 深紅×金の仮面舞踏会風コラボキャンペーンLP（Dark Velvet Gold Masquerade Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型、力強い・インパクト
• キーワード: 仮面舞踏会・ゴシック装飾・金箔ライン・深紅のベルベット・ゲームコラボ
• 地の質感: 背景は細い縦ストライプのベルベット調の暗赤。カードは細い金の二重枠で、角に装飾を付ける
• 形: 四角いカードに金の細線枠を付け、帯見出しは両端を細く絞る。ボタンはピル型
• 温度感: 暖色寄りで暗い。金とクリームで温かい光を足す

Colors

• 地は暗赤黒で統一し、縦ストライプの質感を入れる
• 見出し・日付・枠線は金。グラデーションで光沢を出す
• 情報の区切りにクリーム帯を入れて明暗のリズムを作る
• 朱赤は受付日などの重要な文字と強調帯だけに使う
• 深緑は手順見出しと関連作品の紹介パネルだけに使う
• ボタンは黒地に白文字。クリーム地のボタンは濃茶の文字にする

Typography

• 見出しは中央揃えで、金のグラデーションをかけた太字にする
• 日付・価格の数字は大きなセリフ体にし、単位は小さく添える
• 曜日は数字の右上に小さな斜めの帯で添える
• 注釈は左揃えで小さく、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内の交換方法などは SP では縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• すべてのブロックを中央の金枠カードに収める
• セクションの頭に金の紋章飾りと見出しを置く
• 商品は写真を左、価格と内容を右に並べる（SP では縦）
• 手順は Step 番号のタグ付きカードを縦に並べる
• FAQ は Q アイコン付きの行を細線で区切る

Elevation & Depth

• 影はほぼ使わず、金の細線枠で奥行きを出す
• クリームのカードには、ごく薄いドロップシャドウを付ける
• 見出し帯には中央が明るい赤のグラデーションをかける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 商品写真やアイテムは切り抜きで配置。キャラクターは円形か切り抜き
• セクション境界: 直線で切り替える。クリーム帯には建物シルエットを入れ、末尾は宮殿シルエットで締める
• カードは角丸なしかごく小さい角丸にし、金の二重線を付ける
• 帯見出しは両端がフェードする横長の帯にする
• アーチ型の金線で特典セクションを囲む
• ボタンだけを完全なピル型にする

Components

• 期間表示ブロック（date-band）: 赤い帯のラベルの下に、金の大きな日付を矢印でつなぐ。下は金の装飾線
• 帯見出し（ribbon-heading）: 深紅のグラデーション帯に、白か金の見出しを載せる
• 金枠カード（gold-frame-card）: 暗い地に金の細い二重枠を付け、角に装飾を置く
• 黒ピルボタン（button-primary）: 黒地に白文字。右端に白丸の矢印アイコンを付ける
• 手順カード（step-card）: クリーム地のカード。左上に金の Step タグ、上部に深緑の見出し帯とアイコンを置く
• FAQ行（faq-row）: 深紅地にクリームの Q アイコン、白い質問文、右端に開閉の矢印
• 番号丸（number-badge）: 赤か緑の丸に白い数字を入れて手順に付ける
• 告知帯（notice-banner）: クリーム地に建物シルエットを敷き、濃茶と朱赤の太字を中央に置く

Do's and Don'ts

Do - 金の装飾線や紋章で見出しを飾る - 暗い地とクリーム帯を交互に入れて読みやすくする - 数字は大きなセリフ体で目立たせる - 注釈は※付きで各カードの末尾にまとめる - キャラクターのデフォルメイラストを見出しの脇に添える

Don't - 白一色の背景にしない - 彩度の高いポップな色を増やさない - 大きな角丸やふわっとした影を使わない - 金を太いベタ塗りで使わない（細線とグラデーションで使う） - ボタンの色を何種類にも増やさない

Page Structure

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

1. ファーストビュー（世界観を伝え、題字を見せる）: 豪華な館の階段に立つキャラクターのイラストを全幅で敷く。下部に金のロゴ風の題字を置く
2. 期間告知（予約期間とキャンペーン期間を知らせる）: 赤い帯のラベルと金の大きな日付を2段で並べ、赤い強調帯と注釈を続ける
3. 開催告知帯（第二弾であることを伝える）: クリーム地に建物シルエットを敷き、中央に太字の見出しを置く
4. 商品紹介（コラボ商品と特典アイテムを見せる）: 金枠カードの中に商品写真・価格・アイテムアイコンを並べる
5. 交換方法（特典を受け取る手順を示す）: 深紅のカードに2列の番号付き手順を置き、各列の見出しはクリーム色のラベル
6. 抽選プレゼント（抽選で当たる景品を訴求する）: アーチ型の金枠の中に、グレージュ地のパネルで景品写真と当選人数を並べる
7. Wチャンス（追加の抽選特典を見せる）: クリームのカードに景品のサムネイルを並べ、黒いピルボタンを置く
8. アプリ限定配布（アプリへ誘導する）: クリームのカードにアイテムのイラストを並べ、黒ボタンを2つ横に並べる
9. よくある質問（疑問を解消する）: クリーム色の見出し帯の下に、深紅地の Q アコーディオンを並べる
10. 注文手順（注文の流れを説明する）: Step タグ付きのクリーム色カード4枚と、朱赤の完了カードを縦に並べる
11. 作品紹介（コラボ相手を紹介する）: 深緑のパネルに上下の文様帯を付け、白文字とクリーム色のピルボタンを置く
12. 問い合わせ・フッター（問い合わせ先とサイト導線を示す）: 宮殿シルエットの上に問い合わせ先を置き、チャコール地のリンク一覧で締める

Imagery

• キャラクターは豪華な洋館の中で、ドラマチックな照明を当てた厚塗りのイラストにする
• 見出し脇には小さな二頭身キャラクターを添える
• 商品写真は白背景で切り抜き、斜め上から撮る
• 装飾は仮面・アラベスク・紋章を金の線画で描く
• シルエットはドームのある宮殿の街並みを使う
• キラッとした四芒星をアクセントに散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅の 1 カラムで、両側に暗いストライプの地を見せる
• SP ではカードを画面幅の 90% に広げる
• 交換方法の2列やボタンの横並びは、SP では縦に積む
• 日付の数字は SP で 36〜40px 程度に縮める
• ヘッダーは細い白帯で、右上に丸いメニューボタンを固定する

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