DESIGN.md — 青スポットライト×紙ラベルの投票キャンペーンLP（Spotlight Blue Comedy Battle Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: スポットライト・舞台・紙ラベル見出し・投票・履歴書・カルーセル
• 地の質感: 中央が明るく周辺が暗い青のビネット光。青灰の面には細い方眼グリッドを薄く重ね、撮影スタジオの壁のように見せる
• 形: 少し傾けた白い紙ラベル、角丸12px前後のカード、ピル型ボタン、円形の番号バッジ
• 温度感: 寒色の青が主役。金色と白で舞台の照明のような華やかさを足す

Colors

• スポットライト青のセクションと青灰のセクションを交互に置き、区切りをはっきりさせる
• 青の背景は中央を明るく、周辺を暗くする放射グラデーションで舞台の照明のように見せる
• 見出しは白い紙に黒文字。背景の色に関係なく、同じ紙ラベルで統一する
• 金色は会期、賞品名、主要ボタンなど最も重要な情報だけに使う
• SNSの導線は黒いピルにして、各サービスのアイコン色を添える
• 期間の日付は黒い帯に白文字で載せ、少し傾ける

Typography

• 見出しは太い欧文を大きく置き、その下に小さな和訳を添える二段構成にする
• リード文は中央揃えで短く改行し、行間を広めにとる
• 日付や数字は欧文の太字で大きくし、曜日だけ小さく添える
• 強調したい語句は金色、または一段大きい白文字にする
• 「＼ ／」の記号で語句を挟み、ポップな小見出しにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。投票カードは1列に縦積みし、カルーセルは1枚＋次の一部が見えるように組む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは紙ラベル見出し→中央揃えのリード→本体の順に並べる
• 出場者、作品、履歴書はすべて横スクロールのカルーセルにし、左右に青丸の矢印を置く
• カルーセルの下にドットのインジケーターを置く
• 手順は番号付きのカードを横に並べ、間を矢印でつなぐ
• 応募要項は高さ固定の枠内でスクロールさせる

Elevation & Depth

• 紙ラベルとカードに、薄く柔らかい影を落とす
• 履歴書は紙らしく、少しだけ影を付ける
• ボタンは影なし、またはごく薄い影にとどめる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は証明写真風の四角に切り抜き、手書き風の名札を付ける。動画サムネイルは角丸8px前後の16:9
• セクション境界: 直線で区切り、背景色とグラデーションの切り替えで境界を示す
• 見出しの紙ラベルは-3〜-5度傾け、ギザギザ紙の質感を出す
• 「VOTE NOW」などの斜めの帯を、セクションの角に配置する
• 番号は黒丸に白い数字で示す
• 賞品は大きな円の中に配置する

Components

• 紙ラベル見出し（label-heading）: 白いちぎり紙に太い欧文の黒文字を載せ、下に小さな和訳を添える。全体を傾けて配置する
• 期間の黒帯（date-band）: 黒い帯に白い太字で日付を入れ、少し傾ける
• 金色のピル型CTA（button-primary）: 金の面に濃紺の文字。右端に丸い矢印アイコンを付ける
• SNSへの黒いピル（button-sns）: 黒い面にロゴと白い文字を置き、外部リンクのアイコンを添える
• 投票方法カード（vote-card）: グレーの角丸カード。左上に番号の黒丸、左にSNSアイコン、右に見出しと説明を置き、下にボタンを付ける
• カルーセルの矢印（carousel-arrow）: 青い丸に白い山形の矢印を入れる
• 回次の切り替えタブ（tab-switch）: 選択中のタブは金の面、未選択のタブは青地に白文字で「近日公開」の小さな注記を添える
• 応募ステップカード（step-card）: 濃い青の角丸パネルに番号の黒丸と短い説明を置き、横に並べて矢印でつなぐ
• 応募要項のスクロール枠（terms-box）: 白い面の中に小さな文字の要項を入れ、内部でスクロールさせる

Do's and Don'ts

Do - 見出しはすべて同じ紙ラベルの形で統一する - 青の背景には必ずスポットライトの光ムラを付ける - 人物には手書き風の名札やメモを添え、手作り感を出す - 日付は太い数字で大きく示す - 1つのセクションの中で、主要な導線は1つに絞る

Don't - フラットな単色の青だけで背景を作らない - 金色を本文に多用しない - 見出しを角丸のカードやボタンのような形にしない - 暖色の背景を使わない - グリッドを濃く描いて、写真や文字の邪魔をしない

Page Structure

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

1. ファーストビュー（出演者の顔ぶれでイベントの規模を伝える）: 証明写真風の人物写真を青地にタイル状に敷き詰め、中央に大会ロゴを置く
2. コンセプト（大会の趣旨を詩的に伝える）: スポットライト青の背景に、中央揃えの白文字で短い行を積み、最後に一言を大きく置く
3. オープニング動画（世界観を体験させる）: 黒い枠の動画プレーヤーに金色の再生ボタンを置き、角に紙ラベルを付ける
4. 出場者紹介（出場者を一覧で見せる）: 青灰の背景に、欧文の名前と写真2枚を組みにしたカルーセルを置く
5. 投票方法（参加の手順を示す）: 番号付きのSNS別カードを2×2で並べる
6. バトル投票（作品を見て投票させる）: 動画サムネイルのカルーセルにVOTEラベルとSNSピルを付け、次回の日程とCTAを添える
7. 履歴書ギャラリー（出演者の人柄を伝える）: 履歴書の紙を横に並べ、未公開分には「近日公開」の判を押す
8. キャンペーン（プレゼントで参加を促す）: 回次タブ、金色の大見出し、円形の賞品画像A・B、全員プレゼントの動画、ステップ、CTA、要項の順に並べる
9. 過去大会（大会の歴史を見せる）: 年号と動画サムネイルを3つ横に並べる
10. ブランドへの誘導（本業サービスへ送客する）: 暗めの写真コラージュの上に、ロゴと検索フォームを置く
11. 公式SNS（フォローを促す）: 明るいグレーの背景に紙ラベルと丸いSNSアイコンを並べる

Imagery

• 人物は無地の青背景で正面から撮り、証明写真風に四角く切り抜く
• 写真には手書きの名札や付箋を添え、少し傾ける
• 動画サムネイルは演劇的なセットの場面写真にし、中央に金色の丸い再生ボタンを置く
• 書類の小道具（履歴書など）を紙の質感のまま見せる
• 背景の質感はスポットライトの光ムラと薄い方眼グリッドで出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約900px幅で組み、SPでは幅90%の1カラムにする
• 投票カードはPCの2×2を、SPでは1列の縦積みにする
• 応募ステップはPCの4つ横並びを、SPでは2×2か縦並びにし、矢印を下向きにする
• 過去大会の3列は、SPでは横スクロールにする
• カルーセルの矢印はSPでは28pxに縮め、画面端に重ねる

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