マゼンタ×黒の漫画調謎解きイベントLP

Magenta Black Manga Mystery Game LP

濃いマゼンタと黒の2色を交互に並べたセクション構成。巨大な極太英字見出しと白抜き文字を重ね、斜めの区切りや電車モチーフの線で疾走感を出す、体験型謎解きゲームのLP。漫画風キャラとモノクロの劇画テクスチャで物語の世界観を作る。

エンタメ・ゲーム・アプリ力強い・インパクトクール・先進的情報量多め・訴求型ポップ・元気SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

マゼンタ地と黒地のセクションを交互に切り替える
マゼンタ地では見出しと本文を黒、黒地では白にする
大見出し英字は中央をベタ、左右を同色の袋文字で反復させる
強調語はマゼンタの帯に白文字で載せる
青・紫・緑・コーラルは購入方法やタブの識別だけに限定する
グレー地は進め方などの補助セクションに使う

TYPOGRAPHY

書体

displayファーストビューのキャッチ明朝／ Shippori Mincho B1 800 ／ 56px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクションの巨大英字見出し欧文サンセリフ／ Anton 400 ／ 64px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-md英字に重ねる日本語の小見出しゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm帯見出し・カード見出しゴシック／ Noto Sans JP 900 ／ 20px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注意事項・注釈ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accent価格の数字・ステップ番号欧文サンセリフ／ Oswald 700 ／ 40px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタン文字ゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

セクション見出しは極太の縦長英字を画面幅いっぱいに置き、中央に日本語の小見出しを重ねる
左右の英字は袋文字にして見切れさせ、繰り返して見せる
本文はほぼ太字で中央揃え。短い行で改行する
ファーストビューのキャッチは擦れた質感の極太明朝にする
強調する語はマゼンタの帯で囲み、文字を大きくする

PAGE STRUCTURE

セクション構成

ファーストビュー世界観とキーアイテムを一目で伝えるマゼンタ地に擦れた極太明朝のキャッチ、劇画のキャラ群、中央にカード型のアイテム
ロゴ・期間タイトルとコラボ、開催期間を示す黒地にロゴを置き、デジタル書体の日付を横いっぱいに配置。ネオンの通路写真にキャッチを重ねる
ストーリー物語への導入漫画の背景を暗く敷き、マゼンタの強調帯と白文字の中央揃え本文、サブボタン
体験イメージ遊んでいる様子を見せるマゼンタ地の英字見出しの下に、写真を隙間なくモザイク状に並べる
ポイント初心者でも安心なことを訴えるキャラ付きの白い吹き出しカードを2つ置き、プラン案内のバナーを続ける
遊び方手順の説明マゼンタ地に黒いカードのステップカルーセル。左右に丸い矢印
キット・価格商品の内容と価格を示し、購入へ誘導するタブで切り替えるキット紹介、黒帯の項目の表、セット価格を大きな数字で見せ、六角形のCTA
購入方法3つの入手経路を案内する色分けした番号付きのアコーディオンカードを3つ
お試し謎解き体験して興味を持ってもらう黒地に発光する謎の画像、入力欄、解答ボタン、ヒントボタン
おすすめの進め方当日の流れを示すグレー地にタイムラインのパネル。時刻、ドット、マゼンタのラベルを並べる
登場人物キャラクターの魅力を伝える黒地に原色地のキャラタイルを2カラムで並べる
概要開催情報をまとめるマゼンタ地に黒帯の項目見出しと本文を縦に積む。問い合わせボタン
よくある質問不安を解消する黒地にマゼンタ帯のアコーディオンを連結して並べる
注意事項・フッター規約の告知とクレジットマゼンタ地に小さい文字の注意を詰める。黒いフッターに円形のTOPボタンとロゴ

COMPONENTS

部品

六角形の購入ボタン button-primary両端を尖らせた横長の六角形。マゼンタ地に黒文字、白フチ、右端に矢印を付ける
六角形のサブボタン button-outline地の色の上に置く白フチだけの六角形ボタン。矢印付き
巨大英字の見出し section-titleベタの英字を袋文字で左右に繰り返し、中央に日本語を白で重ねる
強調の帯 highlight-bandマゼンタの帯に白い太字を載せ、段違いに積む
キャラ付きの吹き出しカード point-bubble白いカードに角アイコンとラベルを付け、横にちびキャラを置く
色分けの購入方法カード accordion-buy番号を入れたダイヤ型のバッジ、斜線の飾り、アイコン、開閉マークを並べる。白フチを付ける
黒帯の項目見出し info-labelマゼンタ地に置く黒い矩形。白文字を中央に置く
FAQのアコーディオン faq-itemマゼンタの帯に白い太字の質問と細い十字マーク。白線で区切る
キャラクターのタイル character-card原色ベタ地の正方形に人物を入れ、英字の名前を白い極太字で下に重ねる
白い吹き出し見出し speech-pill白の角丸帯にマゼンタの文字。下にしっぽを付ける

守ること

マゼンタと黒の交互構成を守る
見出しは極太の英字で画面幅いっぱいに置く
斜めのカットと路線のような線で動きを出す
ボタンとタブは角を切った多角形で作る
注釈は※付きの小さい文字で必ず添える

DON'T

避けること

パステルや柔らかい角丸を主役にしない
細い明朝を本文に使わない
ドロップシャドウで立体感を出さない
アクセントの4色を見出しや地に広げない
余白を広く取りすぎて密度を下げない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — マゼンタ×黒の漫画調謎解きイベントLP（Magenta Black Manga Mystery Game LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型、ポップ・元気
キーワード: マゼンタ×黒・極太英字見出し・斜めカット・劇画・漫画・ネオンの都市・ゲームUI
地の質感: モノクロ漫画の網点・ノイズを背景に薄く敷き、ベタ塗りの色面と対比させる
形: 角を斜めに切った六角形ボタン、平行四辺形のタブ、斜め線のセクション境界
温度感: 高温で攻撃的。夜の都会とサイバー感のある派手さ

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#CC015A`	ブランド色・セクション地	30%	画素の実測
`background`	`#000000`	メイン暗色地	30%	画素の実測
`background-alt`	`#454545`	グレーのセクション地	6%	画素の実測
`surface`	`#B9B9B9`	タイムライン等のパネル地	2%	画素の実測
`dark-section`	`#473F41`	キット内のダークグレー面	4%	画素の主要色に補正
`on-dark`	`#F9FBF8`	暗色地上の白文字	3%	画素の実測
`text`	`#120E0F`	マゼンタ地上の黒文字	2%	画素の主要色に補正
`cta`	`#D1015C`	購入ボタン地	1%	画素の実測
`on-cta`	`#120E0F`	ボタン文字	0%	画素の主要色に補正
`accent-1`	`#2293BE`	サブタブ・補足の青	0%	画素の実測
`accent-2`	`#965DB2`	購入方法カードの紫	1%	画素の実測
`accent-3`	`#439B69`	購入方法カードの緑	1%	画素の実測
`tint-1`	`#F24664`	購入方法カードのコーラル	1%	画素の実測
`line`	`#F6EBE0`	白フチ・区切り線	0%	画素の主要色に補正
`cta-accessible`	`#F2016B`	AA を満たす補正値（計算）		計算
`accent-1-accessible`	`#1D7CA0`	AA を満たす補正値（計算）		計算

マゼンタ地と黒地のセクションを交互に切り替える
マゼンタ地では見出しと本文を黒、黒地では白にする
大見出し英字は中央をベタ、左右を同色の袋文字で反復させる
強調語はマゼンタの帯に白文字で載せる
青・紫・緑・コーラルは購入方法やタブの識別だけに限定する
グレー地は進め方などの補助セクションに使う
button-primary は文字 #120E0F × 背景 #D1015C のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#F2016B、4.56:1）を使う。
character-card は文字 #F9FBF8 × 背景 #2293BE のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1D7CA0、4.54:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューのキャッチ	明朝	Shippori Mincho B1	800	56px	1.1	0.0em
`headline-lg`	セクションの巨大英字見出し	欧文サンセリフ	Anton	400	64px	1.0	0.0em
`headline-md`	英字に重ねる日本語の小見出し	ゴシック	Noto Sans JP	700	15px	1.4	0.05em
`headline-sm`	帯見出し・カード見出し	ゴシック	Noto Sans JP	900	20px	1.4	0.02em
`body-md`	本文	ゴシック	Noto Sans JP	700	14px	1.8	0.03em
`note`	注意事項・注釈	ゴシック	Noto Sans JP	400	11px	1.6	0.0em
`accent`	価格の数字・ステップ番号	欧文サンセリフ	Oswald	700	40px	1.0	0.0em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	16px	1.2	0.05em

セクション見出しは極太の縦長英字を画面幅いっぱいに置き、中央に日本語の小見出しを重ねる
左右の英字は袋文字にして見切れさせ、繰り返して見せる
本文はほぼ太字で中央揃え。短い行で改行する
ファーストビューのキャッチは擦れた質感の極太明朝にする
強調する語はマゼンタの帯で囲み、文字を大きくする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。キャラクターだけ 2 カラムのグリッド
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
セクションごとに地の色を全幅で切り替える
見出しの帯は上下に余白を 40px ほど取る
情報ブロックは黒帯の見出しの下に左揃えの本文を置く
写真ギャラリーは余白なしのモザイク状に並べる
FAQ は区切り線で連結したマゼンタの帯を縦に積む

Elevation & Depth

影は基本的に使わない。ベタ面と白フチで階層を分ける
謎解き画像だけピンクの発光グロー
カードは白の太フチで地から浮かせる

Shapes

角丸: 小 0px ／中 4px ／大 24px。ボタンは角丸の長方形。
写真の切り抜き: 正方形で右下角を斜めに切る。写真は矩形のタイル
セクション境界: 斜めの直線カットと、電車の路線のように折れる細い線
主ボタンは左右の端を尖らせた六角形にする
タブは平行四辺形にする
吹き出しは角丸の帯に三角のしっぽを付ける
TOP ボタンだけ正円にする

Components

六角形の購入ボタン（button-primary）: 両端を尖らせた横長の六角形。マゼンタ地に黒文字、白フチ、右端に矢印を付ける
六角形のサブボタン（button-outline）: 地の色の上に置く白フチだけの六角形ボタン。矢印付き
巨大英字の見出し（section-title）: ベタの英字を袋文字で左右に繰り返し、中央に日本語を白で重ねる
強調の帯（highlight-band）: マゼンタの帯に白い太字を載せ、段違いに積む
キャラ付きの吹き出しカード（point-bubble）: 白いカードに角アイコンとラベルを付け、横にちびキャラを置く
色分けの購入方法カード（accordion-buy）: 番号を入れたダイヤ型のバッジ、斜線の飾り、アイコン、開閉マークを並べる。白フチを付ける
黒帯の項目見出し（info-label）: マゼンタ地に置く黒い矩形。白文字を中央に置く
FAQのアコーディオン（faq-item）: マゼンタの帯に白い太字の質問と細い十字マーク。白線で区切る
キャラクターのタイル（character-card）: 原色ベタ地の正方形に人物を入れ、英字の名前を白い極太字で下に重ねる
白い吹き出し見出し（speech-pill）: 白の角丸帯にマゼンタの文字。下にしっぽを付ける

Do's and Don'ts

Do - マゼンタと黒の交互構成を守る - 見出しは極太の英字で画面幅いっぱいに置く - 斜めのカットと路線のような線で動きを出す - ボタンとタブは角を切った多角形で作る - 注釈は※付きの小さい文字で必ず添える

Don't - パステルや柔らかい角丸を主役にしない - 細い明朝を本文に使わない - ドロップシャドウで立体感を出さない - アクセントの4色を見出しや地に広げない - 余白を広く取りすぎて密度を下げない

Page Structure

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

ファーストビュー（世界観とキーアイテムを一目で伝える）: マゼンタ地に擦れた極太明朝のキャッチ、劇画のキャラ群、中央にカード型のアイテム
ロゴ・期間（タイトルとコラボ、開催期間を示す）: 黒地にロゴを置き、デジタル書体の日付を横いっぱいに配置。ネオンの通路写真にキャッチを重ねる
ストーリー（物語への導入）: 漫画の背景を暗く敷き、マゼンタの強調帯と白文字の中央揃え本文、サブボタン
体験イメージ（遊んでいる様子を見せる）: マゼンタ地の英字見出しの下に、写真を隙間なくモザイク状に並べる
ポイント（初心者でも安心なことを訴える）: キャラ付きの白い吹き出しカードを2つ置き、プラン案内のバナーを続ける
遊び方（手順の説明）: マゼンタ地に黒いカードのステップカルーセル。左右に丸い矢印
キット・価格（商品の内容と価格を示し、購入へ誘導する）: タブで切り替えるキット紹介、黒帯の項目の表、セット価格を大きな数字で見せ、六角形のCTA
購入方法（3つの入手経路を案内する）: 色分けした番号付きのアコーディオンカードを3つ
お試し謎解き（体験して興味を持ってもらう）: 黒地に発光する謎の画像、入力欄、解答ボタン、ヒントボタン
おすすめの進め方（当日の流れを示す）: グレー地にタイムラインのパネル。時刻、ドット、マゼンタのラベルを並べる
登場人物（キャラクターの魅力を伝える）: 黒地に原色地のキャラタイルを2カラムで並べる
概要（開催情報をまとめる）: マゼンタ地に黒帯の項目見出しと本文を縦に積む。問い合わせボタン
よくある質問（不安を解消する）: 黒地にマゼンタ帯のアコーディオンを連結して並べる
注意事項・フッター（規約の告知とクレジット）: マゼンタ地に小さい文字の注意を詰める。黒いフッターに円形のTOPボタンとロゴ

Imagery

モノクロの劇画・漫画のコマをノイズ混じりで背景に敷く
キャラクターはアニメ調のイラストで、原色ベタ地の正方形に入れる
写真は都会の駅や街で若者が冊子を手に遊ぶ姿を、自然光のスナップで撮る
ネオンや電光掲示板が並ぶサイバーな通路のビジュアル
アイコンは白い太線のピクトグラムにマゼンタの丸を合わせる
ドット柄や斜線のハッチングを飾りに散らす
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は SP の幅そのままのカラムを中央に固定する
PC の左右の余白はマゼンタ地にし、巨大な英字のタイトルとロゴを縦に繰り返す
背景にはキャラのシルエットを薄く敷く
中央のカラムの内部レイアウトは SP と同じにする

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

---
version: alpha
name: Magenta Black Manga Mystery Game LP
description: 濃いマゼンタと黒の2色を交互に並べたセクション構成。巨大な極太英字見出しと白抜き文字を重ね、斜めの区切りや電車モチーフの線で疾走感を出す、体験型謎解きゲームのLP。漫画風キャラとモノクロの劇画テクスチャで物語の世界観を作る。
colors:
  primary: '#CC015A'
  background: '#000000'
  background-alt: '#454545'
  surface: '#B9B9B9'
  dark-section: '#473F41'
  on-dark: '#F9FBF8'
  text: '#120E0F'
  cta: '#D1015C'
  on-cta: '#120E0F'
  accent-1: '#2293BE'
  accent-2: '#965DB2'
  accent-3: '#439B69'
  tint-1: '#F24664'
  line: '#F6EBE0'
  cta-accessible: '#F2016B'
  accent-1-accessible: '#1D7CA0'
typography:
  display:
    fontFamily: Shippori Mincho B1
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.1
  headline-lg:
    fontFamily: Anton
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Oswald
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 4px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    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}'
    height: 56px
  button-outline:
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 52px
  section-title:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 120px
  highlight-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 36px
  point-bubble:
    backgroundColor: '{colors.on-dark}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 90px
  accordion-buy:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 130px
  info-label:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 44px
  faq-item:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 52px
  character-card:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 175px
  speech-pill:
    backgroundColor: '{colors.on-dark}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 34px
---

# DESIGN.md — マゼンタ×黒の漫画調謎解きイベントLP（Magenta Black Manga Mystery Game LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、クール・先進的、情報量多め・訴求型、ポップ・元気
- **キーワード**: マゼンタ×黒・極太英字見出し・斜めカット・劇画・漫画・ネオンの都市・ゲームUI
- **地の質感**: モノクロ漫画の網点・ノイズを背景に薄く敷き、ベタ塗りの色面と対比させる
- **形**: 角を斜めに切った六角形ボタン、平行四辺形のタブ、斜め線のセクション境界
- **温度感**: 高温で攻撃的。夜の都会とサイバー感のある派手さ

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#CC015A` | ブランド色・セクション地 | 30% | 画素の実測 |
| `background` | `#000000` | メイン暗色地 | 30% | 画素の実測 |
| `background-alt` | `#454545` | グレーのセクション地 | 6% | 画素の実測 |
| `surface` | `#B9B9B9` | タイムライン等のパネル地 | 2% | 画素の実測 |
| `dark-section` | `#473F41` | キット内のダークグレー面 | 4% | 画素の主要色に補正 |
| `on-dark` | `#F9FBF8` | 暗色地上の白文字 | 3% | 画素の実測 |
| `text` | `#120E0F` | マゼンタ地上の黒文字 | 2% | 画素の主要色に補正 |
| `cta` | `#D1015C` | 購入ボタン地 | 1% | 画素の実測 |
| `on-cta` | `#120E0F` | ボタン文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#2293BE` | サブタブ・補足の青 | 0% | 画素の実測 |
| `accent-2` | `#965DB2` | 購入方法カードの紫 | 1% | 画素の実測 |
| `accent-3` | `#439B69` | 購入方法カードの緑 | 1% | 画素の実測 |
| `tint-1` | `#F24664` | 購入方法カードのコーラル | 1% | 画素の実測 |
| `line` | `#F6EBE0` | 白フチ・区切り線 | 0% | 画素の主要色に補正 |
| `cta-accessible` | `#F2016B` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#1D7CA0` | AA を満たす補正値（計算） |  | 計算 |

- マゼンタ地と黒地のセクションを交互に切り替える
- マゼンタ地では見出しと本文を黒、黒地では白にする
- 大見出し英字は中央をベタ、左右を同色の袋文字で反復させる
- 強調語はマゼンタの帯に白文字で載せる
- 青・紫・緑・コーラルは購入方法やタブの識別だけに限定する
- グレー地は進め方などの補助セクションに使う
- `button-primary` は文字 `#120E0F` × 背景 `#D1015C` のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#F2016B`、4.56:1）を使う。
- `character-card` は文字 `#F9FBF8` × 背景 `#2293BE` のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1D7CA0`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチ | 明朝 | Shippori Mincho B1 | 800 | 56px | 1.1 | 0.0em |
| `headline-lg` | セクションの巨大英字見出し | 欧文サンセリフ | Anton | 400 | 64px | 1.0 | 0.0em |
| `headline-md` | 英字に重ねる日本語の小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em |
| `headline-sm` | 帯見出し・カード見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.4 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.8 | 0.03em |
| `note` | 注意事項・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `accent` | 価格の数字・ステップ番号 | 欧文サンセリフ | Oswald | 700 | 40px | 1.0 | 0.0em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em |

- セクション見出しは極太の縦長英字を画面幅いっぱいに置き、中央に日本語の小見出しを重ねる
- 左右の英字は袋文字にして見切れさせ、繰り返して見せる
- 本文はほぼ太字で中央揃え。短い行で改行する
- ファーストビューのキャッチは擦れた質感の極太明朝にする
- 強調する語はマゼンタの帯で囲み、文字を大きくする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。キャラクターだけ 2 カラムのグリッド
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションごとに地の色を全幅で切り替える
- 見出しの帯は上下に余白を 40px ほど取る
- 情報ブロックは黒帯の見出しの下に左揃えの本文を置く
- 写真ギャラリーは余白なしのモザイク状に並べる
- FAQ は区切り線で連結したマゼンタの帯を縦に積む

## Elevation & Depth

- 影は基本的に使わない。ベタ面と白フチで階層を分ける
- 謎解き画像だけピンクの発光グロー
- カードは白の太フチで地から浮かせる

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。
- **写真の切り抜き**: 正方形で右下角を斜めに切る。写真は矩形のタイル
- **セクション境界**: 斜めの直線カットと、電車の路線のように折れる細い線
- 主ボタンは左右の端を尖らせた六角形にする
- タブは平行四辺形にする
- 吹き出しは角丸の帯に三角のしっぽを付ける
- TOP ボタンだけ正円にする

## Components

- **六角形の購入ボタン**（`button-primary`）: 両端を尖らせた横長の六角形。マゼンタ地に黒文字、白フチ、右端に矢印を付ける
- **六角形のサブボタン**（`button-outline`）: 地の色の上に置く白フチだけの六角形ボタン。矢印付き
- **巨大英字の見出し**（`section-title`）: ベタの英字を袋文字で左右に繰り返し、中央に日本語を白で重ねる
- **強調の帯**（`highlight-band`）: マゼンタの帯に白い太字を載せ、段違いに積む
- **キャラ付きの吹き出しカード**（`point-bubble`）: 白いカードに角アイコンとラベルを付け、横にちびキャラを置く
- **色分けの購入方法カード**（`accordion-buy`）: 番号を入れたダイヤ型のバッジ、斜線の飾り、アイコン、開閉マークを並べる。白フチを付ける
- **黒帯の項目見出し**（`info-label`）: マゼンタ地に置く黒い矩形。白文字を中央に置く
- **FAQのアコーディオン**（`faq-item`）: マゼンタの帯に白い太字の質問と細い十字マーク。白線で区切る
- **キャラクターのタイル**（`character-card`）: 原色ベタ地の正方形に人物を入れ、英字の名前を白い極太字で下に重ねる
- **白い吹き出し見出し**（`speech-pill`）: 白の角丸帯にマゼンタの文字。下にしっぽを付ける

## Do's and Don'ts

**Do**
- マゼンタと黒の交互構成を守る
- 見出しは極太の英字で画面幅いっぱいに置く
- 斜めのカットと路線のような線で動きを出す
- ボタンとタブは角を切った多角形で作る
- 注釈は※付きの小さい文字で必ず添える

**Don't**
- パステルや柔らかい角丸を主役にしない
- 細い明朝を本文に使わない
- ドロップシャドウで立体感を出さない
- アクセントの4色を見出しや地に広げない
- 余白を広く取りすぎて密度を下げない

## Page Structure

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

1. **ファーストビュー**（世界観とキーアイテムを一目で伝える）: マゼンタ地に擦れた極太明朝のキャッチ、劇画のキャラ群、中央にカード型のアイテム
2. **ロゴ・期間**（タイトルとコラボ、開催期間を示す）: 黒地にロゴを置き、デジタル書体の日付を横いっぱいに配置。ネオンの通路写真にキャッチを重ねる
3. **ストーリー**（物語への導入）: 漫画の背景を暗く敷き、マゼンタの強調帯と白文字の中央揃え本文、サブボタン
4. **体験イメージ**（遊んでいる様子を見せる）: マゼンタ地の英字見出しの下に、写真を隙間なくモザイク状に並べる
5. **ポイント**（初心者でも安心なことを訴える）: キャラ付きの白い吹き出しカードを2つ置き、プラン案内のバナーを続ける
6. **遊び方**（手順の説明）: マゼンタ地に黒いカードのステップカルーセル。左右に丸い矢印
7. **キット・価格**（商品の内容と価格を示し、購入へ誘導する）: タブで切り替えるキット紹介、黒帯の項目の表、セット価格を大きな数字で見せ、六角形のCTA
8. **購入方法**（3つの入手経路を案内する）: 色分けした番号付きのアコーディオンカードを3つ
9. **お試し謎解き**（体験して興味を持ってもらう）: 黒地に発光する謎の画像、入力欄、解答ボタン、ヒントボタン
10. **おすすめの進め方**（当日の流れを示す）: グレー地にタイムラインのパネル。時刻、ドット、マゼンタのラベルを並べる
11. **登場人物**（キャラクターの魅力を伝える）: 黒地に原色地のキャラタイルを2カラムで並べる
12. **概要**（開催情報をまとめる）: マゼンタ地に黒帯の項目見出しと本文を縦に積む。問い合わせボタン
13. **よくある質問**（不安を解消する）: 黒地にマゼンタ帯のアコーディオンを連結して並べる
14. **注意事項・フッター**（規約の告知とクレジット）: マゼンタ地に小さい文字の注意を詰める。黒いフッターに円形のTOPボタンとロゴ

## Imagery

- モノクロの劇画・漫画のコマをノイズ混じりで背景に敷く
- キャラクターはアニメ調のイラストで、原色ベタ地の正方形に入れる
- 写真は都会の駅や街で若者が冊子を手に遊ぶ姿を、自然光のスナップで撮る
- ネオンや電光掲示板が並ぶサイバーな通路のビジュアル
- アイコンは白い太線のピクトグラムにマゼンタの丸を合わせる
- ドット柄や斜線のハッチングを飾りに散らす
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は SP の幅そのままのカラムを中央に固定する
- PC の左右の余白はマゼンタ地にし、巨大な英字のタイトルとロゴを縦に繰り返す
- 背景にはキャラのシルエットを薄く敷く
- 中央のカラムの内部レイアウトは SP と同じにする

## 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-87ae7c62`（元 LP の URL から採番）
- **元 LP**: https://metrotimegate.com/v3?_gl=1*1pr5quc*_gcl_au*MTcyMzk2NTg5OC4xNzcxNTA2NzE1
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://metrotimegate.com/v3?_gl=1*1pr5quc*_gcl_au*MTcyMzk2NTg5OC4xNzcxNTA2NzE1（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP