DESIGN.md — 黒×黄の警告帯で包む恐竜ショー招待キャンペーンLP（Hazard Stripe Dinosaur Show Ticket Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 警告テープ・恐竜・ステージショー・招待キャンペーン・黄黒コントラスト・家族向け
• 地の質感: 左右の黄黒斜めストライプはかすれたグランジ調。上部は暗い都市と写真の合成、中盤以降は白とライトグレーのフラットな面。
• 形: 四角いカードと表が基本。角丸はボタンだけで、ピル型にしている。下側を三角に尖らせた黄色いリボン見出しを使う。
• 温度感: 上部は暗く冷たい夜の色。下部は黄と緑で明るく温かい。

Colors

• 画面の左右には常に黄黒の斜めストライプ帯（片側約12px）を置く
• 上部の紹介エリアは黒〜濃い青緑の写真地にして、白文字に影を付ける
• 特長エリアはグレー地に白カードを並べる
• 応募エリアは白地にし、表は濃緑・中緑・淡緑の3段で組む
• 黄は警告帯・見出しリボン・ボタン・マーカーに限って使い、強調色として統一する
• 日付の曜日は土曜を青、日曜を赤で色分けする

Typography

• 見出しは極太のポップ体にし、下に細い線を引く
• 暗い背景の上の本文は太字・中央揃え・短い改行にして、ドロップシャドウを付ける
• カード内のキャッチは黄マーカーの上に乗せ、2〜3行に分ける
• 数字は大きく太くする（招待人数、番号01〜04など）
• 説明文は12px程度に抑えて、ビジュアルを主役にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では特長カードを 2×2 に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の警告帯の内側に、全幅のセクションを積み重ねる
• 特長カードは白地に薄い影を付け、カード同士を約8px離して縦に並べる
• カードの中は番号付き見出し→説明文→写真→キャラクターとマーカー付きキャッチの順に並べる
• 応募の表は会場ごとに1ブロックにまとめ、最後に応募ボタンを中央に置く
• フッターの導線はアイコン画像を2列のグリッドで並べる

Elevation & Depth

• 特長カードには弱いドロップシャドウ（0 2px 4px rgba(0,0,0,.15)）を付ける
• 応募ボタンの下には濃い影を付けて、立体的に見せる
• 暗い背景の上の白文字には黒のテキストシャドウを付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 恐竜と建物は背景を切り抜いてカードからはみ出させる。動画とスライドは角丸なしの矩形にする
• セクション境界: 黒・グレー・白の面を直線で切り替える。応募見出しだけ、下側が三角に尖った黄色リボンにする
• カードと表は角丸なしにする
• ボタンはピル型の黄色にし、右端に黒い三角の矢印を付ける
• 番号の背後には黄色の爪痕のような斜線を3本入れる
• SNSのアイコンは黒い角丸の正方形にする

Components

• 警告テープの枠（hazard-frame）: 画面の左右に固定する、黄黒の斜めストライプ（グランジ調）
• 緑の大理石調タイトル板（campaign-title-plate）: 斜めに傾けた緑のプレート。金色のリボンを添え、金色の縁取り文字で賞品名とキャンペーン名を載せる
• 下線付きポップ見出し（section-heading-underline）: 極太の手書き風ポップ体を中央揃えにし、下に細い線を引く
• 番号付き特長カード（feature-card）: 白いカードの中に、緑の大きな番号と爪痕装飾、見出し、説明文、写真、恐竜、黄マーカーのキャッチを入れる
• 黄マーカーのキャッチ（marker-catch）: 1行ずつ黄色の帯を敷いた、太字の短い言葉
• 黄色リボン見出し（ribbon-heading）: 全幅の黄色い帯で、下が三角に尖る。中央に黒字と緑字の大見出しを置き、小さな英字を添える
• 緑の公演表（schedule-table）: 濃緑の見出し行、中緑の小見出し行、淡緑のセルの3層で組み、会場・公演日・開演時間・応募期間を載せる
• 応募ボタン（button-primary）: 黄色のピル型ボタン。黒字に黒い三角の矢印を付け、下に影を落とす
• 黒地の枠線リンク（button-outline-dark）: 黒地に黄色の細い枠と黄色の文字を使い、外部リンクのアイコンを付ける。上に斜線で挟んだ導入文を置く
• アイコン導線グリッド（icon-link-grid）: 切り抜いたイラストの下に、矢印付きのラベルを置いて2列で並べる

Do's and Don'ts

Do - 左右の黄黒警告帯は、ページの最初から最後まで途切れさせない - 切り抜いたキャラクターをカードや写真からはみ出させて、躍動感を出す - 大きな数字と太いポップ体で、賞品の規模をひと目で伝える - 応募情報は表にまとめ、会場ごとにボタンを付ける - 黄・黒・緑の3色を軸にして配色をまとめる

Don't - 細い明朝体や淡いパステル色は使わない - カードに大きな角丸を付けない - 黄を本文の文字色に使わない - 暗い背景の上に影のない細字を置かない - ボタンの色を黄色以外に変えない

Page Structure

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

1. ファーストビュー（招待キャンペーンを強く印象づける）: 時空ゲートから恐竜が飛び出すキービジュアルの下に、傾けた緑のタイトル板を置く。続けて、黄色の数字で会場数と当選人数を入れる
2. 企画ロゴ（協賛と企画名を示す）: 夜の都市写真を背景にして、中央にロゴを置く
3. ショーの紹介（イベントの魅力を伝える）: 暗い青緑のグラデーションの上に、白字の太字を中央揃えで短く改行して並べる。左右に恐竜の切り抜きを配置する
4. 公演写真スライダー（実際の舞台を見せる）: 中央に写真、左右に次の写真を少し見せる。下に黄色のバー型インジケーターを置く
5. 過去公演の動画（迫力を体感させる）: 黒地に下線付き見出しと埋め込み動画を置き、黄色枠の公式サイトリンクを添える
6. 協賛企業の4つのポイント（協賛企業の商品の強みを伝える）: グレー地に番号付きの白カードを4枚並べる。各カードに恐竜と黄マーカーのキャッチを入れる
7. 応募エリア（応募できる公演の案内と応募の受付）: 黄色リボン見出しの後に注意書きを置く。会場ごとに緑の表と黄色ボタンを並べる
8. 締めのメッセージとSNS（応募を後押しし、公式SNSへ誘導する）: 舞台写真を背景にして、白字のメッセージを置く。下に半透明のパネルでSNSアイコンとバナーを載せる
9. 企業への導線（資料請求や来場予約につなげる）: 薄いグレー地に、斜線で挟んだ見出しと、2列のアイコンリンクを置く
10. フッター（規約と著作権を表示する）: 黒地に小さなロゴ、テキストリンク、SNSアイコンを置く

Imagery

• 恐竜はリアルなCG・造形物を背景から切り抜き、口を開けた威嚇ポーズで配置する
• ファーストビューはネオンの光るゲートと夜の都市を合成し、SF的な世界観を作る
• 建物は白背景で切り抜いた外観写真を使い、横に恐竜を並べて遊び心を出す
• 間取り図にはオレンジの円ラベルを散らして配置し、部屋名を載せる
• 導線のアイコンは立体的なイラスト（家・風船・冊子・地図ピン）にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも左右の黄黒帯を維持し、中身は中央寄せにする
• PC のファーストビューは左にビジュアル、右にタイトル板とロゴを並べる2分割にする
• 特長カードは PC では2×2のグリッドにする
• 応募の表は PC では会場・公演日・開演時間・応募期間を横一列に並べた1つの表にまとめる
• アイコン導線は PC では4列にする

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