--- version: alpha name: Hazard Stripe Dinosaur Show Ticket Campaign LP description: 左右の黄黒ストライプの帯がページ全体を囲むキャンペーンLPです。冒険感のある暗い写真の世界から始まり、白いカードで協賛企業の特長を見せ、最後に緑の表で応募できる公演を並べます。太いポップ体の見出しと黄色のマーカーで、子ども連れの家族にも親しみやすい楽しさを出しています。 colors: primary: '#FECD02' dark-section: '#000000' on-dark: '#FFFFFF' background: '#FFFFFF' background-alt: '#E6E6E6' secondary: '#01520D' accent-1: '#66A06E' tint-1: '#E6F2E8' cta: '#FDCC02' on-cta: '#130400' marker: '#FDD83F' text: '#222222' accent-2: '#08490B' accent-3: '#ED9B44' surface: '#F4F8F7' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.75 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 accent: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 900 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hazard-frame: backgroundColor: '{colors.primary}' campaign-title-plate: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.display}' height: 170px section-heading-underline: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 600px marker-catch: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.accent}' height: 28px ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px schedule-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 330px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px button-outline-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 46px icon-link-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 120px --- # DESIGN.md — 黒×黄の警告帯で包む恐竜ショー招待キャンペーンLP（Hazard Stripe Dinosaur Show Ticket Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 警告テープ・恐竜・ステージショー・招待キャンペーン・黄黒コントラスト・家族向け - **地の質感**: 左右の黄黒斜めストライプはかすれたグランジ調。上部は暗い都市と写真の合成、中盤以降は白とライトグレーのフラットな面。 - **形**: 四角いカードと表が基本。角丸はボタンだけで、ピル型にしている。下側を三角に尖らせた黄色いリボン見出しを使う。 - **温度感**: 上部は暗く冷たい夜の色。下部は黄と緑で明るく温かい。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FECD02` | 警告帯・応募見出し帯の黄 | 9% | 画素の実測 | | `dark-section` | `#000000` | 動画・紹介セクションの黒地 | 12% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の白文字 | 2% | 画素の主要色に補正 | | `background` | `#FFFFFF` | カードと応募エリアの白地 | 20% | 画素の実測 | | `background-alt` | `#E6E6E6` | ポイント紹介セクションのグレー地 | 6% | 画素の実測 | | `secondary` | `#01520D` | 表の見出し行（濃い緑） | 2% | 画素の実測 | | `accent-1` | `#66A06E` | 表の小見出し行（中間の緑） | 2% | 画素の実測 | | `tint-1` | `#E6F2E8` | 表のセル（淡い緑） | 10% | 画素の実測 | | `cta` | `#FDCC02` | 応募ボタン | 0% | 画素の実測 | | `on-cta` | `#130400` | 応募ボタンの文字 | 0% | 画素の実測 | | `marker` | `#FDD83F` | キャッチ下の黄色マーカー | 1% | 画素の主要色に補正 | | `text` | `#222222` | 見出し・本文の黒文字 | 2% | 推定 | | `accent-2` | `#08490B` | ポイントの番号に使う濃い緑 | 0% | 画素の実測 | | `accent-3` | `#ED9B44` | 間取り図に重ねるオレンジの円ラベル | 1% | 画素の実測 | | `surface` | `#F4F8F7` | フッター導線エリアの薄いグレー | 5% | 画素の実測 | - 画面の左右には常に黄黒の斜めストライプ帯（片側約12px）を置く - 上部の紹介エリアは黒〜濃い青緑の写真地にして、白文字に影を付ける - 特長エリアはグレー地に白カードを並べる - 応募エリアは白地にし、表は濃緑・中緑・淡緑の3段で組む - 黄は警告帯・見出しリボン・ボタン・マーカーに限って使い、強調色として統一する - 日付の曜日は土曜を青、日曜を赤で色分けする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの企画タイトル（ロゴ風） | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.2 | 0.0em | | `headline-lg` | セクション見出し（白黒のポップ体に下線） | 装飾・ディスプレイ | Dela Gothic One | 400 | 24px | 1.5 | 0.05em | | `headline-md` | カードの番号付き見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.0em | | `headline-sm` | 表の見出しと会場名 | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.0em | | `body-lg` | 暗い背景の上に中央揃えで置く紹介文 | ゴシック | Noto Sans JP | 700 | 14px | 1.75 | 0.0em | | `body-md` | カード内の説明文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.0em | | `accent` | カード内のキャッチ（黄マーカー付き）とポイント番号 | 丸ゴシック | Zen Maru Gothic | 900 | 18px | 1.6 | 0.05em | | `label-button` | 応募ボタンの文字 | ゴシック | Noto Sans JP | 900 | 14px | 1.2 | 0.02em | - 見出しは極太のポップ体にし、下に細い線を引く - 暗い背景の上の本文は太字・中央揃え・短い改行にして、ドロップシャドウを付ける - カード内のキャッチは黄マーカーの上に乗せ、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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-3f772ae8`（元 LP の URL から採番） - **元 LP**: https://www.ichijo.co.jp/lp/kyoryulabo/?yclid=YJAD.1769905550.A46dfmkAAGAuoIr4byQMbECB1D-00wo_tm5yXxSB7ZdGyX0I7O3uah4oWNCMo8MG9su4y1H_uEMC1T6Miuqsn8vAEDV54nm7ZL3tLg79X1JnJ2AYzbR54jPsAeHbqQntKG2GB706br0XJzYttUoM5fh7jqMdC7YXXQxFW2ywnMoWxwbCHfGuJ4rO1qcbsm-QPA - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。