赤×紺×黄のコミック調スポーツ用品キャンペーンLP

Pop Comic Crimson Sports Campaign LP

深い赤の地に、紺のパネルと黄色の極太文字を重ねたLP。コミック風のにぎやかなキャンペーン型。切り抜いた人物写真や星・キラキラ・ボールの装飾を余白に散らし、勢いと遊び心を出す。中央のパネルは黄色い縁の角を内側にえぐった額縁形で、そこに情報をまとめる。

キャンペーン・プレゼントポップ・元気力強い・インパクトスポーティレトロSPPC

ダウンロード

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

COLORS

配色

地は赤一色で通す。情報のまとまりだけを紺パネルに載せる
黄色は見出し・パネルの縁・ボタン専用。広い面には使わない
赤地の本文は白の太字、紺パネルの見出しは黄色と白
条件カードは淡いグレー地に紺文字。重要語は赤い帯の上に白文字で強調する
ページ末尾は濃紺に切り替え、締めのセクションにする
ピンクと水色は小さな星の装飾だけに使う

TYPOGRAPHY

書体

displayメインのロゴ風英字・大見出し装飾・ディスプレイ／ Dela Gothic One 900 ／ 64px ／行間 1.1

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

headline-lgセクション見出し(和文)ゴシック／ Dela Gothic One 900 ／ 30px ／行間 1.2

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

headline-mdパネル内の見出しゴシック／ M PLUS Rounded 1c 900 ／ 24px ／行間 1.3

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

accent見出し下の英字サブラベル欧文サンセリフ／ Montserrat 800 ／ 15px ／行間 1.2

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

body-lg赤地に置く中央揃えのリード文ゴシック／ Noto Sans JP 700 ／ 15px ／行間 2.4

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

body-mdカード内の本文ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.6

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

note※印の注釈ゴシック／ Noto Sans JP 500 ／ 10px ／行間 1.7

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

label-buttonボタンとメニュー項目丸ゴシック／ M PLUS Rounded 1c 800 ／ 14px ／行間 1.3

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

すべて太字以上で組み、細い文字は使わない
見出しは和文を大きく置き、その下に英字の小さなラベルを添えた2段構成にする
リード文は短い行を中央揃えにし、行間を広く取る
大きなロゴ文字は斜めに配置し、紺の太い縁取りと網点を付ける
日付などの数字は特大にし、曜日は縦書きにして添える

PAGE STRUCTURE

セクション構成

ファーストビュー企画の世界観とインパクトを伝える放射線背景の上に人物と競技ボールのコラージュを置き、黄色縁で囲む。下部に帯キャッチを入れる
タイトルロゴ企画名を印象付ける赤地に白の極太英字と、紺×黄の大きな和文ロゴを置く
イントロキャラクター紹介と呼びかけ白い太字の短い行を中央に並べる。顔の切り抜きと斜めの叫び文字を添える
目次メニュー各セクションへ誘導する額縁パネルの中に、星付きの項目を区切り線で並べる
プレゼントキャンペーン特典・期間・条件を伝える紺の額縁パネルに傾けた特典画像、斜めの吹き出し帯、特大の日付、条件カード2枚とorバッジ、注釈を順に置く
競技一覧スライダー競技ごとのビジュアルを見せる黄色い額縁の中に人物ビジュアルを入れ、左右に黄色い円の矢印を置く
その他のキャンペーン関連企画へ誘導する紺の額縁パネルに2つの企画名を区切り線で並べ、黄色ピルボタンを置く
店舗一覧店舗情報を案内する山形の境界から濃紺に切り替え、地域アコーディオンを並べる
フッターブランドで締める中央にロゴを置き、左右に顔入りの星アイコンを並べる

COMPONENTS

部品

額縁パネル frame-panel紺または赤の面を黄色い太線で囲み、四隅を内側にえぐったパネル。目次やキャンペーン情報を入れる
星付きメニュー menu-list中央揃えの項目を細線で区切り、左右にピンクと水色の星を置いた目次
黄色ピルボタン button-primary黄色地に紺の太字を置き、末尾に三角を付けたボタン
和英2段の見出し section-title黄色の大きな和文見出しの下に、白の英字ラベルを置く
条件カード case-card上部に黄色の帯と番号、下の淡いグレー地に紺文字の本文を入れたカード
赤帯の強調 marker-highlight重要語の背面に赤い帯を敷き、白文字を載せる
orバッジ or-badge黄色い円に紺の英字を入れ、カードの間に置くバッジ
人物と斜め叫び文字 speech-shout切り抜いた顔の横に、黄色の斜体キャッチを斜めに添える
地域アコーディオン area-accordion濃紺地に白の太字で地域名を並べ、横に下向き三角を付ける

守ること

赤・紺・黄の3色に絞り、原色の強さを保つ
余白に星・キラキラ線・ボール・切り抜き人物を散らして、にぎやかにする
情報は必ず黄色縁の額縁パネルに入れる
見出しは和英2段・黄色で統一する
重要語は赤帯で強調する

DON'T

避けること

細い文字や明朝体を使わない
パステル調やくすんだ色を足さない
影を重ねた立体的なカードUIにしない
装飾を本文の上に重ねて読みにくくしない
白地のセクションを挟まない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 赤×紺×黄のコミック調スポーツ用品キャンペーンLP（Pop Comic Crimson Sports Campaign LP）

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

Overview

業種: キャンペーン・プレゼント／ 雰囲気: ポップ・元気、力強い・インパクト、スポーティ、レトロ
キーワード: コミック調・原色3色・極太ゴシック・切り抜き人物・額縁パネル・キラキラ装飾
地の質感: ベタ塗りの平面が基本。紺パネルだけ中央を少し明るくしたグラデーション。ロゴ文字には網点と立体の縁取りを付ける
形: 角を内側にえぐった額縁形のパネル、ピル型ボタン、星、斜めの帯文字
温度感: 高温・にぎやか。赤がずっと続き、黄色で熱量を足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#C72743`	ページ全体の地の赤	50%	画素の実測
`secondary`	`#1D2087`	情報パネルの紺	12%	画素の実測
`dark-section`	`#011671`	店舗一覧セクションの濃紺	8%	画素の実測
`accent-1`	`#FCF409`	見出しの黄色・パネル縁	4%	画素の実測
`cta`	`#FEF302`	詳細ボタンの黄色	1%	画素の実測
`on-cta`	`#1D2087`	ボタン上の紺文字	0%	画素の主要色に補正
`on-primary`	`#FDFCFB`	赤地の上の白文字	3%	画素の実測
`surface`	`#E8E8F2`	条件カード内部の淡いグレー	2%	推定
`marker`	`#E32244`	キーワードを強調する赤の帯	0%	画素の実測
`background-alt`	`#BB3246`	メニューパネルの少し明るい赤	4%	画素の実測
`accent-2`	`#F06FA8`	メニューの星(ピンク)	0%	推定
`accent-3`	`#4FB6E8`	メニューの星(水色)	0%	推定
`text`	`#1D2087`	カード内本文の紺文字	0%	画素の主要色に補正
`line`	`#D8D8E8`	パネル内の細い区切り線	0%	推定
`marker-accessible`	`#E32042`	AA を満たす補正値（計算）		計算

地は赤一色で通す。情報のまとまりだけを紺パネルに載せる
黄色は見出し・パネルの縁・ボタン専用。広い面には使わない
赤地の本文は白の太字、紺パネルの見出しは黄色と白
条件カードは淡いグレー地に紺文字。重要語は赤い帯の上に白文字で強調する
ページ末尾は濃紺に切り替え、締めのセクションにする
ピンクと水色は小さな星の装飾だけに使う
marker-highlight は文字 #FDFCFB × 背景 #E32244 のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#E32042、4.5:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	メインのロゴ風英字・大見出し	装飾・ディスプレイ	Dela Gothic One	900	64px	1.1	0.02em
`headline-lg`	セクション見出し(和文)	ゴシック	Dela Gothic One	900	30px	1.2	0.02em
`headline-md`	パネル内の見出し	ゴシック	M PLUS Rounded 1c	900	24px	1.3	0.02em
`accent`	見出し下の英字サブラベル	欧文サンセリフ	Montserrat	800	15px	1.2	0.02em
`body-lg`	赤地に置く中央揃えのリード文	ゴシック	Noto Sans JP	700	15px	2.4	0.08em
`body-md`	カード内の本文	ゴシック	Noto Sans JP	700	14px	1.6	0.02em
`note`	※印の注釈	ゴシック	Noto Sans JP	500	10px	1.7	0.02em
`label-button`	ボタンとメニュー項目	丸ゴシック	M PLUS Rounded 1c	800	14px	1.3	0.04em

すべて太字以上で組み、細い文字は使わない
見出しは和文を大きく置き、その下に英字の小さなラベルを添えた2段構成にする
リード文は短い行を中央揃えにし、行間を広く取る
大きなロゴ文字は斜めに配置し、紺の太い縁取りと網点を付ける
日付などの数字は特大にし、曜日は縦書きにして添える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。PC も中央の約 38% 幅に SP 版をそのまま表示する
本文ブロックの幅: 画面幅の約 76%
余白: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算）
中央のパネルは画面幅の約 75〜80%
パネルの左右と間に切り抜き人物や装飾を散らし、余白を埋める
見出し・本文・ボタンは中央揃え
セクションの間は大きく空け、その余白に装飾を置く
2つの条件カードの間に円形の or バッジを挟む

Elevation & Depth

影はほぼ使わず、平面で表現する
パネルは黄色い太線と細い赤の二重縁で浮かせる
ロゴ文字には紺色の段差影を付けて立体感を出す

Shapes

角丸: 小 6px ／中 10px ／大 16px。ボタンはピル型。
写真の切り抜き: 人物は背景を抜いて自由に配置する。ビジュアルは黄色い額縁の中に収める
セクション境界: 基本は境界なしの連続した赤。末尾だけ山形(上向き三角)で濃紺に切り替える
パネルは四隅を内側に丸くえぐったチケット・額縁形にする
条件カードは角丸10px。上部に黄色の帯見出しを付ける
ボタンは黄色のピル型で、文字の後ろに右向き三角を付ける
スライダーの矢印は黄色い円の中に紺の三角

Components

額縁パネル（frame-panel）: 紺または赤の面を黄色い太線で囲み、四隅を内側にえぐったパネル。目次やキャンペーン情報を入れる
星付きメニュー（menu-list）: 中央揃えの項目を細線で区切り、左右にピンクと水色の星を置いた目次
黄色ピルボタン（button-primary）: 黄色地に紺の太字を置き、末尾に三角を付けたボタン
和英2段の見出し（section-title）: 黄色の大きな和文見出しの下に、白の英字ラベルを置く
条件カード（case-card）: 上部に黄色の帯と番号、下の淡いグレー地に紺文字の本文を入れたカード
赤帯の強調（marker-highlight）: 重要語の背面に赤い帯を敷き、白文字を載せる
orバッジ（or-badge）: 黄色い円に紺の英字を入れ、カードの間に置くバッジ
人物と斜め叫び文字（speech-shout）: 切り抜いた顔の横に、黄色の斜体キャッチを斜めに添える
地域アコーディオン（area-accordion）: 濃紺地に白の太字で地域名を並べ、横に下向き三角を付ける

Do's and Don'ts

Do - 赤・紺・黄の3色に絞り、原色の強さを保つ - 余白に星・キラキラ線・ボール・切り抜き人物を散らして、にぎやかにする - 情報は必ず黄色縁の額縁パネルに入れる - 見出しは和英2段・黄色で統一する - 重要語は赤帯で強調する

Don't - 細い文字や明朝体を使わない - パステル調やくすんだ色を足さない - 影を重ねた立体的なカードUIにしない - 装飾を本文の上に重ねて読みにくくしない - 白地のセクションを挟まない

Page Structure

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

ファーストビュー（企画の世界観とインパクトを伝える）: 放射線背景の上に人物と競技ボールのコラージュを置き、黄色縁で囲む。下部に帯キャッチを入れる
タイトルロゴ（企画名を印象付ける）: 赤地に白の極太英字と、紺×黄の大きな和文ロゴを置く
イントロ（キャラクター紹介と呼びかけ）: 白い太字の短い行を中央に並べる。顔の切り抜きと斜めの叫び文字を添える
目次メニュー（各セクションへ誘導する）: 額縁パネルの中に、星付きの項目を区切り線で並べる
プレゼントキャンペーン（特典・期間・条件を伝える）: 紺の額縁パネルに傾けた特典画像、斜めの吹き出し帯、特大の日付、条件カード2枚とorバッジ、注釈を順に置く
競技一覧スライダー（競技ごとのビジュアルを見せる）: 黄色い額縁の中に人物ビジュアルを入れ、左右に黄色い円の矢印を置く
その他のキャンペーン（関連企画へ誘導する）: 紺の額縁パネルに2つの企画名を区切り線で並べ、黄色ピルボタンを置く
店舗一覧（店舗情報を案内する）: 山形の境界から濃紺に切り替え、地域アコーディオンを並べる
フッター（ブランドで締める）: 中央にロゴを置き、左右に顔入りの星アイコンを並べる

Imagery

人物は大げさな表情とポーズで撮り、背景を抜いて配置する
ボール・シャトル・ストップウォッチなどの競技道具は、太い紺の輪郭線を付けたイラスト風にする
背景には放射状の集中線を使い、虹色の光と網点を組み合わせる
黄色い星と、手描き風の十字キラキラ線を散らす
特典画像は少し傾け、角に黄色の三角の動き線を付ける
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC では中央に SP 幅のカラムを置き、左右は赤地のまま広げる
PC は左に目次パネル、右に装飾コラージュを置いた3分割にする
中央カラムの左右には細い黄色の縦線を引く
文字サイズや部品の比率は 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: Pop Comic Crimson Sports Campaign LP
description: 深い赤の地に、紺のパネルと黄色の極太文字を重ねたLP。コミック風のにぎやかなキャンペーン型。切り抜いた人物写真や星・キラキラ・ボールの装飾を余白に散らし、勢いと遊び心を出す。中央のパネルは黄色い縁の角を内側にえぐった額縁形で、そこに情報をまとめる。
colors:
  primary: '#C72743'
  secondary: '#1D2087'
  dark-section: '#011671'
  accent-1: '#FCF409'
  cta: '#FEF302'
  on-cta: '#1D2087'
  on-primary: '#FDFCFB'
  surface: '#E8E8F2'
  marker: '#E32244'
  background-alt: '#BB3246'
  accent-2: '#F06FA8'
  accent-3: '#4FB6E8'
  text: '#1D2087'
  line: '#D8D8E8'
  marker-accessible: '#E32042'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 64px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 2.4
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 14px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.04em
rounded:
  sm: 6px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 120px
components:
  page:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  frame-panel:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    height: 600px
  menu-list:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    height: 420px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 36px
  section-title:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    height: 80px
  case-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 230px
  marker-highlight:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    height: 24px
  or-badge:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.secondary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 50px
  speech-shout:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    height: 120px
  area-accordion:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.body-md}'
    height: 48px
---

# DESIGN.md — 赤×紺×黄のコミック調スポーツ用品キャンペーンLP（Pop Comic Crimson Sports Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、スポーティ、レトロ
- **キーワード**: コミック調・原色3色・極太ゴシック・切り抜き人物・額縁パネル・キラキラ装飾
- **地の質感**: ベタ塗りの平面が基本。紺パネルだけ中央を少し明るくしたグラデーション。ロゴ文字には網点と立体の縁取りを付ける
- **形**: 角を内側にえぐった額縁形のパネル、ピル型ボタン、星、斜めの帯文字
- **温度感**: 高温・にぎやか。赤がずっと続き、黄色で熱量を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#C72743` | ページ全体の地の赤 | 50% | 画素の実測 |
| `secondary` | `#1D2087` | 情報パネルの紺 | 12% | 画素の実測 |
| `dark-section` | `#011671` | 店舗一覧セクションの濃紺 | 8% | 画素の実測 |
| `accent-1` | `#FCF409` | 見出しの黄色・パネル縁 | 4% | 画素の実測 |
| `cta` | `#FEF302` | 詳細ボタンの黄色 | 1% | 画素の実測 |
| `on-cta` | `#1D2087` | ボタン上の紺文字 | 0% | 画素の主要色に補正 |
| `on-primary` | `#FDFCFB` | 赤地の上の白文字 | 3% | 画素の実測 |
| `surface` | `#E8E8F2` | 条件カード内部の淡いグレー | 2% | 推定 |
| `marker` | `#E32244` | キーワードを強調する赤の帯 | 0% | 画素の実測 |
| `background-alt` | `#BB3246` | メニューパネルの少し明るい赤 | 4% | 画素の実測 |
| `accent-2` | `#F06FA8` | メニューの星(ピンク) | 0% | 推定 |
| `accent-3` | `#4FB6E8` | メニューの星(水色) | 0% | 推定 |
| `text` | `#1D2087` | カード内本文の紺文字 | 0% | 画素の主要色に補正 |
| `line` | `#D8D8E8` | パネル内の細い区切り線 | 0% | 推定 |
| `marker-accessible` | `#E32042` | AA を満たす補正値（計算） |  | 計算 |

- 地は赤一色で通す。情報のまとまりだけを紺パネルに載せる
- 黄色は見出し・パネルの縁・ボタン専用。広い面には使わない
- 赤地の本文は白の太字、紺パネルの見出しは黄色と白
- 条件カードは淡いグレー地に紺文字。重要語は赤い帯の上に白文字で強調する
- ページ末尾は濃紺に切り替え、締めのセクションにする
- ピンクと水色は小さな星の装飾だけに使う
- `marker-highlight` は文字 `#FDFCFB` × 背景 `#E32244` のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#E32042`、4.5:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | メインのロゴ風英字・大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 64px | 1.1 | 0.02em |
| `headline-lg` | セクション見出し(和文) | ゴシック | Dela Gothic One | 900 | 30px | 1.2 | 0.02em |
| `headline-md` | パネル内の見出し | ゴシック | M PLUS Rounded 1c | 900 | 24px | 1.3 | 0.02em |
| `accent` | 見出し下の英字サブラベル | 欧文サンセリフ | Montserrat | 800 | 15px | 1.2 | 0.02em |
| `body-lg` | 赤地に置く中央揃えのリード文 | ゴシック | Noto Sans JP | 700 | 15px | 2.4 | 0.08em |
| `body-md` | カード内の本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.02em |
| `note` | ※印の注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.7 | 0.02em |
| `label-button` | ボタンとメニュー項目 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.3 | 0.04em |

- すべて太字以上で組み、細い文字は使わない
- 見出しは和文を大きく置き、その下に英字の小さなラベルを添えた2段構成にする
- リード文は短い行を中央揃えにし、行間を広く取る
- 大きなロゴ文字は斜めに配置し、紺の太い縁取りと網点を付ける
- 日付などの数字は特大にし、曜日は縦書きにして添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC も中央の約 38% 幅に SP 版をそのまま表示する
- **本文ブロックの幅**: 画面幅の約 76%
- **余白**: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算）
- 中央のパネルは画面幅の約 75〜80%
- パネルの左右と間に切り抜き人物や装飾を散らし、余白を埋める
- 見出し・本文・ボタンは中央揃え
- セクションの間は大きく空け、その余白に装飾を置く
- 2つの条件カードの間に円形の or バッジを挟む

## Elevation & Depth

- 影はほぼ使わず、平面で表現する
- パネルは黄色い太線と細い赤の二重縁で浮かせる
- ロゴ文字には紺色の段差影を付けて立体感を出す

## Shapes

- **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 人物は背景を抜いて自由に配置する。ビジュアルは黄色い額縁の中に収める
- **セクション境界**: 基本は境界なしの連続した赤。末尾だけ山形(上向き三角)で濃紺に切り替える
- パネルは四隅を内側に丸くえぐったチケット・額縁形にする
- 条件カードは角丸10px。上部に黄色の帯見出しを付ける
- ボタンは黄色のピル型で、文字の後ろに右向き三角を付ける
- スライダーの矢印は黄色い円の中に紺の三角

## Components

- **額縁パネル**（`frame-panel`）: 紺または赤の面を黄色い太線で囲み、四隅を内側にえぐったパネル。目次やキャンペーン情報を入れる
- **星付きメニュー**（`menu-list`）: 中央揃えの項目を細線で区切り、左右にピンクと水色の星を置いた目次
- **黄色ピルボタン**（`button-primary`）: 黄色地に紺の太字を置き、末尾に三角を付けたボタン
- **和英2段の見出し**（`section-title`）: 黄色の大きな和文見出しの下に、白の英字ラベルを置く
- **条件カード**（`case-card`）: 上部に黄色の帯と番号、下の淡いグレー地に紺文字の本文を入れたカード
- **赤帯の強調**（`marker-highlight`）: 重要語の背面に赤い帯を敷き、白文字を載せる
- **orバッジ**（`or-badge`）: 黄色い円に紺の英字を入れ、カードの間に置くバッジ
- **人物と斜め叫び文字**（`speech-shout`）: 切り抜いた顔の横に、黄色の斜体キャッチを斜めに添える
- **地域アコーディオン**（`area-accordion`）: 濃紺地に白の太字で地域名を並べ、横に下向き三角を付ける

## Do's and Don'ts

**Do**
- 赤・紺・黄の3色に絞り、原色の強さを保つ
- 余白に星・キラキラ線・ボール・切り抜き人物を散らして、にぎやかにする
- 情報は必ず黄色縁の額縁パネルに入れる
- 見出しは和英2段・黄色で統一する
- 重要語は赤帯で強調する

**Don't**
- 細い文字や明朝体を使わない
- パステル調やくすんだ色を足さない
- 影を重ねた立体的なカードUIにしない
- 装飾を本文の上に重ねて読みにくくしない
- 白地のセクションを挟まない

## Page Structure

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

1. **ファーストビュー**（企画の世界観とインパクトを伝える）: 放射線背景の上に人物と競技ボールのコラージュを置き、黄色縁で囲む。下部に帯キャッチを入れる
2. **タイトルロゴ**（企画名を印象付ける）: 赤地に白の極太英字と、紺×黄の大きな和文ロゴを置く
3. **イントロ**（キャラクター紹介と呼びかけ）: 白い太字の短い行を中央に並べる。顔の切り抜きと斜めの叫び文字を添える
4. **目次メニュー**（各セクションへ誘導する）: 額縁パネルの中に、星付きの項目を区切り線で並べる
5. **プレゼントキャンペーン**（特典・期間・条件を伝える）: 紺の額縁パネルに傾けた特典画像、斜めの吹き出し帯、特大の日付、条件カード2枚とorバッジ、注釈を順に置く
6. **競技一覧スライダー**（競技ごとのビジュアルを見せる）: 黄色い額縁の中に人物ビジュアルを入れ、左右に黄色い円の矢印を置く
7. **その他のキャンペーン**（関連企画へ誘導する）: 紺の額縁パネルに2つの企画名を区切り線で並べ、黄色ピルボタンを置く
8. **店舗一覧**（店舗情報を案内する）: 山形の境界から濃紺に切り替え、地域アコーディオンを並べる
9. **フッター**（ブランドで締める）: 中央にロゴを置き、左右に顔入りの星アイコンを並べる

## Imagery

- 人物は大げさな表情とポーズで撮り、背景を抜いて配置する
- ボール・シャトル・ストップウォッチなどの競技道具は、太い紺の輪郭線を付けたイラスト風にする
- 背景には放射状の集中線を使い、虹色の光と網点を組み合わせる
- 黄色い星と、手描き風の十字キラキラ線を散らす
- 特典画像は少し傾け、角に黄色の三角の動き線を付ける
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では中央に SP 幅のカラムを置き、左右は赤地のまま広げる
- PC は左に目次パネル、右に装飾コラージュを置いた3分割にする
- 中央カラムの左右には細い黄色の縦線を引く
- 文字サイズや部品の比率は 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-229a4521`（元 LP の URL から採番）
- **元 LP**: https://store.megasports.jp/feature/bukatsu_debut?utm_medium=paid&utm_source=ig&utm_id=120243888848410629&utm_content=120243936060890629&utm_term=120243888848420629&utm_campaign=120243888848410629&fbclid=PAaWdyZARQi79leHRuA2FlbQEwAGFkaWQBqzE5Eq86VXNydGMGYX
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

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

似た LP の design.md

キャンペーン・プレゼント赤×空色グラデのポップなキャラ抽選キャンペーンLPPop Red Character Lottery Campaign LP キャンペーン・プレゼントバター黄×焦茶枠の菓子キャンペーンLPButter Yellow Campaign Card LP キャンペーン・プレゼントからし黄×朱赤の昭和レトロ酒類キャンペーンLPRetro Showa Mustard Red Liquor Campaign LP キャンペーン・プレゼント黒×赤×黄の屋台祭り風キャンペーンLPBold Festival Black Red Yellow Campaign LP キャンペーン・プレゼントピンク柄×虹色アイドルのポップなキャンペーンLPPink Idol Pop Campaign LP キャンペーン・プレゼント赤×黄×黒のポップ図形アイス応募キャンペーンLPBold Red Pop Graphic Campaign LP