---
version: alpha
name: Tricolor Stripe Sports Collab Merch LP
description: 深い紺と赤白の斜めストライプを組み合わせた、スポーツ代表応援テーマのアニメコラボグッズ販売LP。黒帯に白文字を傾けた見出し、金色ラベルのカテゴリ帯、白い角丸フレームの中に商品を2列で並べるショップ構成が特徴。
colors:
  primary: '#042666'
  background: '#FFFFFF'
  background-alt: '#EBEBEB'
  accent-1: '#D4020D'
  secondary: '#A57E31'
  dark-section: '#010101'
  on-dark: '#FFFFFF'
  text: '#333333'
  marker: '#D0101C'
  tint-1: '#8EA89B'
  accent-2: '#8C0203'
  cta: '#930102'
  on-cta: '#FFF2EF'
  text-muted: '#052258'
  secondary-accessible: '#93702C'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 62px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.4
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.03em
  accent:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
  label-button:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.2
rounded:
  sm: 0px
  md: 8px
  lg: 32px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  tilted-banner-heading:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 50px
  category-label:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 30px
  shop-frame:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
  product-card:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 300px
  category-select:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 36px
  sns-share-bar:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    rounded: '{rounded.full}'
    height: 120px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 44px
  outlined-headline:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 90px
---

# DESIGN.md — 紺×赤白ストライプのスポーツ応援コラボグッズLP（Tricolor Stripe Sports Collab Merch LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
- **キーワード**: 代表ユニフォーム配色・斜めストライプ・傾いた黒帯見出し・金ラベル・キャラクター配置・グッズカタログ
- **地の質感**: 紺地に青い炎のようなもやの質感、黒帯にはかすれたグランジ加工。ショップ部分は白でフラット。
- **形**: 斜め45度の紺・赤ストライプ帯、少し回転させた長方形の見出し帯、角丸の大きい白フレーム。
- **温度感**: 紺が基調でクールだが、赤とキャラクターの色で熱く元気な印象。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#042666` | メインの紺。FV下・動画セクション・フッターの地色 | 18% | 画素の実測 |
| `background` | `#FFFFFF` | ショップ部分の白地 | 46% | 画素の実測 |
| `background-alt` | `#EBEBEB` | SNS投稿セクションのライトグレー地 | 5% | 画素の実測 |
| `accent-1` | `#D4020D` | ストライプの赤・強調赤 | 3% | 画素の実測 |
| `secondary` | `#A57E31` | カテゴリラベルとフレーム線の金 | 3% | 画素の実測 |
| `dark-section` | `#010101` | 傾いた見出し帯とSNSアイコン帯の黒 | 4% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 紺・黒地の上の白文字 | 1% | 画素の主要色に補正 |
| `text` | `#333333` | 商品名など本文の濃いグレー | 1% | 推定 |
| `marker` | `#D0101C` | 価格表記の赤 | 0% | 推定 |
| `tint-1` | `#8EA89B` | 作品紹介セクションのくすみグリーン地 | 9% | 画素の実測 |
| `accent-2` | `#8C0203` | 告知見出しの濃い赤 | 0% | 画素の実測 |
| `cta` | `#930102` | 外部公式サイトボタンの光沢赤 | 0% | 画素の実測 |
| `on-cta` | `#FFF2EF` | ボタン上の白文字 | 0% | 画素の実測 |
| `text-muted` | `#052258` | SNS見出しの紺文字 | 0% | 画素の主要色に補正 |
| `secondary-accessible` | `#93702C` | AA を満たす補正値（計算） |  | 計算 |

- 紺・白・赤の代表カラー3色を軸にし、他の色はキャラクターや写真に任せる。
- ショップの外側は白地に紺と赤の斜めストライプを敷き詰め、内側の白フレームは無地に保つ。
- 見出し帯は黒地に白文字。カテゴリラベルは金地に白文字で統一する。
- 価格は必ず赤、税込表記は小さめの赤。
- 作品紹介のみくすみグリーン地にして、応援パートと切り分ける。
- 紺地セクションには青い炎のようなもやとキラッとした光の装飾を重ねる。
- `category-label` は文字 `#FFFFFF` × 背景 `#A57E31` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#93702C`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大型縦組み風キャッチ（紺の極太・白縁） | 装飾・ディスプレイ | Dela Gothic One | 900 | 62px | 1.1 | 0.0em |
| `headline-lg` | 白文字に黒の太い縁取りの導入見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.0em |
| `headline-md` | 傾いた黒帯の中の白見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.3 | 0.02em |
| `headline-sm` | 金ラベルのカテゴリ名 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em |
| `body-lg` | 紺地の導入文・作品紹介文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.03em |
| `body-md` | 商品名 | ゴシック | Noto Sans JP | 400 | 14px | 1.5 | 0.03em |
| `accent` | 価格（赤・税込は小文字） | ゴシック | Noto Sans JP | 500 | 16px | 1.4 | 0.0em |
| `label-button` | SHOPPINGなどの英字ラベル・ボタン | 欧文サンセリフ | Montserrat | 800 | 20px | 1.2 | 0.0em |

- 見出しはどれも極太のゴシックにし、細い書体は使わない。
- 導入文は最初の1文字だけ大きくするドロップキャップ風にする。
- 帯の見出しは-5〜-8度ほど傾けて勢いを出す。
- 商品名は中央揃えで2行まで、改行してバリエーション名を置く。
- 価格は数字を大きく、税込は約60%のサイズにする。
- 紺地の大見出しには黒の太い縁取りを付けて白文字を浮かせる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、商品は 2 列グリッド
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
- ショップは大きな角丸白フレームにまとめ、背景のストライプが左右に約5%だけ見えるようにする。
- カテゴリラベルはフレーム左端にぴったり付けた金帯で置く。
- 商品は画像・名前・価格を縦に並べ、1点のときは中央に寄せる。
- キャラクターのイラストを見出し帯の端やフレームの角にはみ出して置く。
- カテゴリ間は約60px空けてリズムを出す。

## Elevation & Depth

- 影はほとんど使わずフラットにする。
- 黒帯見出しはかすれた縁で質感を出す。
- 外部ボタンだけ光沢グラデと縁取りで立体的にする。
- 紺地の大見出しは黒の縁取りで浮かせる。

## Shapes

- **角丸**: 小 0px ／ 中 8px ／ 大 32px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品は白抜きの切り抜き、キャラクターは輪郭で切り抜き
- **セクション境界**: 直線で切り替える。白地セクションは斜めストライプで区切りを示す
- カテゴリラベル・見出し帯は角丸なしの長方形。
- ショップと店舗紹介は金線2px・大きい角丸のフレーム。
- セレクトボックスは紺線の四角で、左に▼を置く。
- SNSアイコンは丸型で横3つ並べる。

## Components

- **傾いた黒帯見出し**（`tilted-banner-heading`）: 黒地にグランジ加工、白の極太文字。少し回転させ、右端にキャラを重ねる。
- **金のカテゴリラベル**（`category-label`）: フレーム左端に付けた金の帯に白文字のカテゴリ名を入れる。
- **角丸ショップフレーム**（`shop-frame`）: 白地に金線の大きい角丸枠。上辺の中央に英字ラベルの金プレートを重ねる。
- **商品カード**（`product-card`）: 切り抜いた商品画像、中央揃えの商品名、赤い価格の3段。枠は付けない。
- **カテゴリ選択**（`category-select`）: 紺線の四角に▼アイコンと案内文を入れたプルダウン。
- **SNSシェア帯**（`sns-share-bar`）: 黒の帯に丸いSNSアイコンを3つ中央に並べる。
- **外部サイトボタン**（`button-primary`）: 光沢のある赤いグラデに白文字と▶アイコン。上にキャラを座らせる。
- **縁取り大見出し**（`outlined-headline`）: 紺地の上の白文字に黒の太い縁取り。両脇にキラッとした光を添える。

## Do's and Don'ts

**Do**
- 紺・赤・白の代表カラーと斜めストライプを繰り返し使う。
- 各セクションの端にキャラクターのミニイラストを置いて親しみを出す。
- 商品は同じフォーマットのカードで整然と並べる。
- 見出し帯は傾けて応援の勢いを出す。
- 価格は赤で統一し、税込表記を添える。

**Don't**
- パステルやグラデの多い配色を加えない。
- ショップフレームの中に柄やストライプを入れない。
- 見出しに細い書体や明朝体を使わない。
- 商品カードに影や色付きの枠を付けない。
- ストライプの角度を場所ごとに変えない。

## Page Structure

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

1. **ファーストビュー**（コラボの世界観と熱量を一目で伝える）: 白地に紺赤の斜線を散らし、紺の極太キャッチを置く。ユニフォーム姿のキャラ集合絵と公式マークを入れる。
2. **コラボ導入**（企画の内容を説明する）: 青い炎の紺地にロゴを2つ並べ、縁取り大見出しを置く。ミニキャラと、ドロップキャップの白い本文を交互に並べる。
3. **SNS投稿の呼びかけ**（ハッシュタグで投稿してもらう）: グレー地に黒帯見出しとハッシュタグを2行で置く。キャラのイラストを添え、下の黒帯にSNSアイコンを並べる。
4. **グッズショップ**（商品一覧で購入につなげる）: ストライプ地の上に白の角丸フレームを置く。金ラベルでカテゴリを分け、商品を2列グリッドで並べる。
5. **販売元表示**（購入先を示す）: 白地に小さな赤い英字と店舗ロゴを中央に置く。
6. **企画動画**（動画でもう一度盛り上げる）: 紺地に黒帯見出しとロゴを置き、縦長の動画プレイヤーを中央に配置する。下にミニキャラを入れる。
7. **ショップ紹介**（運営する店舗の信頼性を伝える）: ストライプ地に角丸フレームと金ラベルを重ね、ロゴ・赤リンク・説明文を入れる。
8. **作品紹介**（原作を告知し、公式サイトへ誘導する）: くすみグリーン地にロゴ・あらすじ・キービジュアルを並べる。赤の告知見出しの後に光沢ボタンを置く。
9. **フッター**（規約と権利を表記する）: 紺地に白の下線付きリンクを2つ置き、著作権の注意文と権利表記を入れる。

## Imagery

- キャラは代表ユニフォーム姿の線画アニメ調。等身大とデフォルメのミニキャラを使い分ける。
- 商品は白背景で切り抜き、正面から撮ってサイズ感をそろえる。
- 紺地には青い炎や煙のようなテクスチャと白い十字の光を重ねる。
- 背景のストライプは紺・赤・白で太さを変えた45度の平行帯にする。
- 見出し帯には黒いインクのかすれやスプラッシュを入れる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCではショップフレームを中央約72%幅にし、商品を4列で並べる。
- PCのFVは横長のキービジュアルにし、左右にSNS導線とグッズ導線を入れる。
- PCの導入はイラストと本文を左右交互の2カラムにする。
- 背景ストライプは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-e79a93f3`（元 LP の URL から採番）
- **元 LP**: https://shop.tv-tokyo.co.jp/shop/pages/spyfamily_samuraiblue.aspx
- **解析に使った画像**: 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/）からご連絡ください。