--- version: alpha name: Bold Game-Color Collaboration Campaign LP description: 赤の斜めストライプ地に黄色の金属プレート風パネル、太い極太ゴシックを合わせたポップなキャンペーン LP。セクションごとに赤・生成り・白・紺・水色・黄・黒と地色を大きく切り替え、波形や斜めの帯で区切る。ゲームの世界観をそのまま旅行・交通の企画に当てはめた、にぎやかで元気な構成。 colors: primary: '#CC251B' secondary: '#FEDC04' cta: '#EB1A04' on-cta: '#FFF4F0' background: '#FCFCFC' background-alt: '#FDFDE6' accent-1: '#0095D4' accent-2: '#012D5D' accent-3: '#42A432' dark-section: '#3E3A39' text: '#1D1C1C' text-body: '#563D02' marker: '#CD220F' surface: '#F2C81E' cta-accessible: '#DE1904' marker-accessible: '#BF200E' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 400 lineHeight: 1.05 headline-lg: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: M PLUS 1p fontSize: 20px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: M PLUS 1p fontSize: 16px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.02em body-md: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Rubik fontSize: 26px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: M PLUS 1p fontSize: 15px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.04em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-on-red: backgroundColor: '{colors.secondary}' textColor: '{colors.marker}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px nav-chip: backgroundColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 38px riveted-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 90px slanted-band-heading: backgroundColor: '{colors.accent-2}' typography: '{typography.display}' height: 200px pref-label-row: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 60px numbered-list: backgroundColor: '{colors.primary}' typography: '{typography.accent}' height: 40px burst-badge: backgroundColor: '{colors.background}' textColor: '{colors.marker}' typography: '{typography.headline-sm}' height: 80px --- # DESIGN.md — 赤×黄×青のゲーム風コラボキャンペーン LP（Bold Game-Color Collaboration Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 斜めストライプ地・ビス留めプレート・極太ゴシック・原色の色面切替・波形の区切り・キャラクター切り抜き - **地の質感**: 細い斜めストライプのトーン違いで面に質感を出す。生成り地には薄い模様を敷く。白パネルの四隅に小さなビス点を置く - **形**: 角丸ピルボタン、四隅ビス付きの角丸パネル、斜めにカットした帯見出し、上下の波形境界 - **温度感**: 暖色の赤と黄が主役で温度は高い。紺・水色で引き締めて変化をつける ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CC251B` | メインの赤地（ストライプ） | 20% | 画素の実測 | | `secondary` | `#FEDC04` | コイン黄の地・プレート | 11% | 画素の実測 | | `cta` | `#EB1A04` | 主 CTA の赤ボタン | 2% | 画素の実測 | | `on-cta` | `#FFF4F0` | CTA 上の白文字 | 0% | 画素の実測 | | `background` | `#FCFCFC` | 白パネル・白セクション地 | 17% | 画素の実測 | | `background-alt` | `#FDFDE6` | 生成りの模様地 | 9% | 画素の主要色に補正 | | `accent-1` | `#0095D4` | 水色の車両紹介セクション地 | 9% | 画素の実測 | | `accent-2` | `#012D5D` | 紺の斜め帯見出し | 4% | 画素の実測 | | `accent-3` | `#42A432` | 緑の見出し文字 | 1% | 画素の実測 | | `dark-section` | `#3E3A39` | グッズ紹介のチャコール地 | 8% | 画素の実測 | | `text` | `#1D1C1C` | 見出し・本文の濃色、ナビボタン地 | 3% | 画素の実測 | | `text-body` | `#563D02` | 黄地上の茶色見出し・本文 | 2% | 画素の実測 | | `marker` | `#CD220F` | 日付などの強調赤文字 | 0% | 画素の実測 | | `surface` | `#F2C81E` | お知らせカードの黄色面 | 2% | 画素の実測 | | `cta-accessible` | `#DE1904` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#BF200E` | AA を満たす補正値（計算） | | 計算 | - セクションごとに赤→生成り→赤→白→紺/水色→黄→チャコール→赤と地色をはっきり切り替える - 赤・黄・水色の地には同系色の細い斜めストライプを重ねる - 主 CTA は赤のピル型、赤地の上だけは黄色ボタンに赤文字で反転させる - 日付・期間の数字は赤の極太ゴシックで目立たせる - 黄地の文字は黒ではなく濃い茶色、白パネル内の見出しは紺系にする - ナビボタンは黒に近い濃グレー地に白文字で統一 - `button-primary` は文字 `#FFF4F0` × 背景 `#EB1A04` のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DE1904`、4.58:1）を使う。 - `button-on-red` は文字 `#CD220F` × 背景 `#FEDC04` のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#BF200E`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し（2行の極太文字） | 装飾・ディスプレイ | Dela Gothic One | 400 | 52px | 1.05 | 0.0em | | `headline-lg` | パネル内の見出し・期間表示 | ゴシック | Dela Gothic One | 400 | 30px | 1.2 | 0.02em | | `headline-md` | 大見出し上のリード・車両名 | ゴシック | M PLUS 1p | 900 | 20px | 1.3 | 0.03em | | `headline-sm` | 開催地名・動画タイトル | ゴシック | M PLUS 1p | 800 | 16px | 1.35 | 0.02em | | `body-md` | 説明文・ファーストビューのリード | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.7 | 0.04em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 700 | 11px | 1.6 | 0.02em | | `accent` | 日付の大きな数字・番号 | 欧文サンセリフ | Rubik | 900 | 26px | 1.1 | 0.0em | | `label-button` | ボタン・ナビの文字 | ゴシック | M PLUS 1p | 800 | 15px | 1.0 | 0.04em | - 見出しはほぼすべて極太で、細いウェイトは使わない - 大見出しは 2 行に分けて画面幅いっぱいまで大きく組む - 日付は数字を大きく、年月日・曜日を小さくして強弱をつける - 大見出しの上には小さめのリードを 1 行置く - 本文も太め（700）で、黄・白地の上でもつぶれないようにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビボタンは 2〜3 個ずつ中央寄せで折り返す - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白パネルは左右 6% ほど空けて浮かせる - キャラクター画像はパネルの端からはみ出させて動きを出す - 開催地リストは左に県名ラベル、右に会場と日付の 2 段組 - 各セクションの最後に CTA ボタンを中央に 1 つ置く - 大見出しは中央揃えまたは斜め帯の上に左寄せ ## Elevation & Depth - 白パネルとプレートには下方向にやや濃い影を付けて立体的に見せる - CTA ボタンは下側を濃い色にして押せるボタン風にする - お知らせカードは右下に濃い黄色の影 - キャラクター切り抜きは影なしで背景の上に直接置く ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: キャラクターは背景を切り抜いて配置。動画とスマホ画面は角丸なしか小さい角丸の長方形 - **セクション境界**: 上下の波形（スカラップ）と、斜めにカットした帯で区切る - ロゴ・お知らせ・白パネルは四隅にビス点を打ったプレート風にする - 県名ラベルは白地の小さな四角に赤文字 - ナビボタンは小さめの角丸長方形にアイコン＋文字 - 星形の爆発バッジを見出しの横に添える ## Components - **赤ピル CTA**（`button-primary`）: 赤のピル型ボタン。中央に白文字、右端に小さな三角の矢印 - **黄ピル CTA**（`button-on-red`）: 赤地の上で使う黄色のピル型ボタン。文字は赤、右に三角 - **アイコン付きナビボタン**（`nav-chip`）: 濃グレー地に線アイコンと白文字。ページ内の各セクションへのリンク - **ビス留め白パネル**（`riveted-panel`）: 四隅に小さなビス点がある白い角丸パネル。期間・お知らせ・動画をまとめて載せる - **黄色お知らせカード**（`news-card`）: 黄色のプレート。上に赤い日付、下に濃色の本文、右端に三角 - **斜め帯見出し**（`slanted-band-heading`）: 濃い赤や紺の帯を斜めに入れ、白の極太文字で大見出しを置く - **県名ラベル付き日程行**（`pref-label-row`）: 左に白い四角の赤文字ラベル、右に白文字の会場名と日付 - **黄色番号リスト**（`numbered-list`）: 黄色の大きな番号＋ドット、その横に小さなリードと白の項目名 - **星形バッジ**（`burst-badge`）: 白いギザギザの星形に赤文字で地域名などを添える ## Do's and Don'ts **Do** - セクションごとに原色の地色を大胆に切り替える - 地色には同系色の斜めストライプを重ねる - 見出しは極太で大きく、2 行で迫力を出す - キャラクターやアイテムの切り抜きをパネルの端からはみ出させる - 各セクションの最後にピル型 CTA を 1 つ置く - 期間・日付は赤い大きな数字で強調する **Don't** - 細い明朝や繊細な書体を使わない - くすんだ色や淡いパステル中心にしない - セクションの区切りを細い直線だけで済ませない - CTA を四角いボタンや枠線だけのボタンにしない - 余白を広く取りすぎて静かな印象にしない - 黄色の地に黒の細い文字を置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観と高揚感を一目で伝える）: 赤ストライプ地。上部に黄色のビス留めロゴプレート、白文字のリードを数行、下半分にキャラクターの集合切り抜き 2. **期間とナビゲーション**（開催期間を示し、各企画へ案内する）: 生成り模様地の上に白パネル。期間を赤い極太数字で表示し、アイコン付きの濃色ナビボタンを並べる 3. **新着情報**（最新のお知らせを伝える）: 白パネル内に黄色のお知らせカードを縦に並べ、赤い日付と本文を載せる 4. **動画紹介**（動画でキャンペーンの雰囲気を見せる）: 極太見出しの下に動画タイトルと 16:9 の埋め込み動画を縦に並べる 5. **駅前イベント**（巡回イベントの内容と日程を伝える）: 斜めの濃赤帯に白の大見出しと星形バッジ。集合キャラ、黄色番号リスト、地図、県名ラベル付き日程、黄色 CTA の順 6. **駅の装飾**（装飾された駅を紹介する）: 上部を波形にした白地。装飾のイメージ図、緑の極太見出し、短い説明、赤 CTA 7. **ラッピング列車**（特別車両と運行期間を紹介する）: 紺の斜め帯に白の大見出し、水色ストライプ地に車両画像、車両名と左に線を引いた説明・期間、キャラ、赤 CTA 8. **デジタルスタンプラリー**（参加方法と景品抽選を伝える）: 波形で区切った黄色ストライプ地に茶色の大見出し。スマホ画面の画像と白パネルの説明、注釈、赤 CTA 9. **オリジナルグッズ**（グッズ販売へ誘導する）: チャコール地にロゴと白の大見出し、ビス留め白パネルに黒地ラベルの強調、アイテムの飾り、赤 CTA 10. **フッター**（ナビの再表示と権利表記）: 赤ストライプ地にロゴプレート、ナビボタン、白い小さな権利表記 ## Imagery - キャラクターは背景を抜いた 3DCG 風の全身ポーズで、元気な動きのあるものを使う - コイン・星・キノコ・はてなブロックなどの小さなアイテムを余白に散らす - 地図は虹色グラデーションの立体風にし、赤いピンを立てる - 実写は列車・改札・スマホ画面など、明るく彩度の高いものを使う - 地域のシルエットを地色より少し濃い色で背景に敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC ではヒーローを左にロゴとリード、右にキャラクターの横並びにする - PC の期間表示は 1 行にまとめ、ナビボタンは 1〜2 行に収める - PC の動画は 2 カラムのグリッドにする - PC のイベントは左にキャラと地図、右に日程リストの 2 カラム - PC では大見出しを 1 行にし、斜め帯を横に長く伸ばす - PC のスタンプラリーは左にスマホ、右に白パネルの横並び ## 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-0fb92d95`（元 LP の URL から採番） - **元 LP**: https://www.jrkyushu.co.jp/train/mario/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。