---
version: alpha
name: Red Frame Pop Anime Streaming-Style LP
description: 画面の外周を太い赤枠で囲み、その中にセクションを積み重ねるアニメ番組の公式サイト型 LP。動画配信サービス風の UI（スマホ枠・タブレット枠・プレイヤー枠・流れるロゴ帯）とピクセル風ドット、和柄の紙片で、ポップで勢いのある世界観を出している。見出しは太い丸みの欧文と小さなカナを組み合わせ、ボタンは赤や黒のピル型で白丸矢印を付けている。
colors:
  primary: '#E01C32'
  background: '#D2D8DF'
  cta: '#E11C32'
  on-cta: '#FFF5F6'
  dark-section: '#2E2626'
  on-dark: '#FFFFFE'
  surface: '#FFFFFF'
  accent-1: '#E8401C'
  accent-2: '#B4B8F0'
  secondary: '#F08A1C'
  text: '#33363F'
  accent-3: '#E6110D'
  line: '#FFFFFE'
  cta-accessible: '#DF1C31'
  accent-1-accessible: '#D33715'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: M PLUS Rounded 1c
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.0
  body-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 14px
    fontWeight: 800
    lineHeight: 1.9
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0.04em
rounded:
  sm: 6px
  md: 12px
  lg: 28px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 56px
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}'
    rounded: '{rounded.full}'
    height: 58px
  button-dark:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 58px
  section-heading:
    textColor: '{colors.accent-3}'
    typography: '{typography.display}'
    height: 70px
  logo-ticker:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 40px
  device-carousel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 480px
  carousel-nav:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.cta}'
    rounded: '{rounded.full}'
    height: 44px
  news-card:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 130px
  category-tag:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 22px
  sns-icon:
    backgroundColor: '{colors.text}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 50px
---

# DESIGN.md — 赤フレーム×動画配信風のアニメ番組 LP（Red Frame Pop Anime Streaming-Style LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型
- **キーワード**: 赤い外枠・動画配信UI風・ピクセルドット・和柄の紙片・太い丸ゴシック見出し・ピル型ボタン
- **地の質感**: フラットな塗りに、ぼかした背景写真と市松模様を重ねる。デバイス枠の黒い縁取りで画面感を出す。
- **形**: 角丸の大きい外枠、ピル型ボタン、有機的な赤いブロブ形、ドット状の段差境界、三角形のキャラクター切り抜き。
- **温度感**: 高い温度感の赤を主役にした、にぎやかで熱量の高いトーン。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E01C32` | 外周フレーム・ブランド赤 | 22% | 画素の実測 |
| `background` | `#D2D8DF` | ニュース・映像セクションの淡いグレー地 | 10% | 画素の主要色に補正 |
| `cta` | `#E11C32` | もっと見るボタンの赤 | 1% | 画素の実測 |
| `on-cta` | `#FFF5F6` | ボタン上の白文字・白丸アイコン | 1% | 画素の実測 |
| `dark-section` | `#2E2626` | ニュースカード・フッター帯の濃い焦げ茶 | 10% | 画素の実測 |
| `on-dark` | `#FFFFFE` | 濃色カード上の白文字 | 2% | 画素の主要色に補正 |
| `surface` | `#FFFFFF` | フッターの白地 | 8% | 画素の実測 |
| `accent-1` | `#E8401C` | ニュースのカテゴリタグのオレンジ赤 | 0% | 推定 |
| `accent-2` | `#B4B8F0` | キャラクター欄のラベンダー市松地 | 7% | 推定 |
| `secondary` | `#F08A1C` | 見出しカナ・強調語のオレンジ | 0% | 推定 |
| `text` | `#33363F` | フッター本文の濃グレー文字 | 0% | 画素の主要色に補正 |
| `accent-3` | `#E6110D` | 見出しの赤グラデ欧文 | 0% | 画素の実測 |
| `line` | `#FFFFFE` | ロゴ帯の白い区切り線 | 0% | 画素の主要色に補正 |
| `cta-accessible` | `#DF1C31` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#D33715` | AA を満たす補正値（計算） |  | 計算 |

- 画面外周は常に赤で塗り、角丸の内側にコンテンツを置いて額縁のように見せる。
- セクション地は、赤／ぼかし写真＋濃いオーバーレイ／ラベンダー市松／淡いグレーの順で切り替えて単調にしない。
- 淡いグレー地の上には大きな赤いブロブ形を敷き、その上に白い見出しを置く。
- 情報カードは濃い焦げ茶の地に白文字を載せ、タグだけをオレンジ赤で目立たせる。
- 暗い写真の上では、本文を白にして強調語だけオレンジ赤にする。
- 主ボタンは赤地に白文字、淡色地のボタンは焦げ茶地に白文字にする。
- `button-primary` は文字 `#FFF5F6` × 背景 `#E11C32` のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DF1C31`、4.52:1）を使う。
- `category-tag` は文字 `#FFF5F6` × 背景 `#E8401C` のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D33715`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの欧文見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 36px | 1.1 | 0.02em |
| `headline-sm` | 欧文見出しの下に添えるカナ | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.2 | 0.05em |
| `headline-lg` | 縦書き・斜めのキャラクターのセリフ文字 | 手書き・筆 | Dela Gothic One | 900 | 40px | 1.0 | 0.0em |
| `body-lg` | イントロのあらすじ本文（太い丸文字・中央揃え） | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.9 | 0.02em |
| `body-md` | ニュースの見出しとフッター本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.02em |
| `note` | 日付・タグ・SNSのID | 欧文サンセリフ | Montserrat | 700 | 10px | 1.4 | 0.02em |
| `label-button` | もっと見るボタン | ゴシック | Zen Kaku Gothic New | 900 | 17px | 1.0 | 0.04em |

- 見出しは、太い欧文を大きく置き、その下に小さなカナを中央揃えで重ねる 2 段構成にする。
- 欧文見出しの色は、赤地とグレー地では白、明るい地では赤にする。
- 本文は中央揃えにし、強調語だけ色を変えてカギ括弧でくくる。
- 人名や固有名詞には小さなルビを付けてもよい。
- セリフは縦組みや斜め配置にして、キャラクターの横に大きく置く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。ニュースは横長カードの縦積みで、カード内は画像左・テキスト右に置く
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
- 外周には約 8px の赤い枠を残し、内側を角丸のコンテンツ面にする。
- 見出し上の余白は約 48px、見出しと中身の間は約 24px にする。
- カルーセルは中央に 1 枚を大きく置き、左右に次のカードを少しはみ出させる。
- カルーセルの下にドット付き矢印ナビ、その下にもっと見るボタンを置く。
- ニュースカードは 12px 間隔で縦に並べる。

## Elevation & Depth

- 影はほとんど使わない。立体感はデバイス枠の太い黒縁で出す。
- ボタンと矢印の丸ボタンにだけ、ごく薄い影を付けてもよい。
- 背景写真は強くぼかし、暗いオーバーレイをかけて奥に下げる。

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 28px。ボタンはピル型。
- **写真の切り抜き**: キャラクターは三角形や丸に切り抜き、作品画像はスマホ・タブレット・動画プレイヤーの枠に入れる。
- **セクション境界**: 流れるロゴ帯、ピクセル状に段差の付いたドット境界、大きな赤いブロブ形で区切る。
- ボタンはピル型にし、右端に白い円＋赤い矢印を付ける。
- タグは小さなピル型にする。
- ニュースカードは角丸 6px の濃色にする。
- 外周フレームは角丸 28px 程度にする。

## Components

- **もっと見るボタン（赤）**（`button-primary`）: 赤いピル型の地に白い太字を置き、右に白丸の矢印を付ける。
- **もっと見るボタン（濃色）**（`button-dark`）: 淡いグレー地の上で使う焦げ茶のピル型ボタン。
- **欧文＋カナ見出し**（`section-heading`）: 太い欧文を大きく置き、下に小さなカナを添えて中央揃えにする。
- **流れるロゴ帯**（`logo-ticker`）: 赤地に白線を引き、配信サービス風のロゴを横に繰り返して流す区切り帯。
- **スマホ枠カルーセル**（`device-carousel`）: 黒縁のスマホ枠にキャラクターを入れ、縦書きのセリフと、いいね風のアイコン列を重ねる。
- **矢印＋ドットナビ**（`carousel-nav`）: 白い丸ボタンに赤い矢印を置き、中央にドットを並べる。現在位置のドットは赤にする。
- **ニュースカード**（`news-card`）: 濃色の横長カードで、左にサムネイル、右に日付・タグ・タイトルを置く。
- **カテゴリタグ**（`category-tag`）: オレンジ赤の小さなピル型に白文字を入れる。
- **SNS丸アイコン**（`sns-icon`）: 黒い円にロゴを入れ、下に白文字でIDを置く。

## Do's and Don'ts

**Do**
- 外周の赤いフレームを全体で途切れさせない。
- セクションごとに地の質感（写真・市松・グレー・赤）を変える。
- 動画プレイヤー・スマホ・タブレットの枠を使い、配信サービス風に見せる。
- ピクセルドットや和柄の紙片を見出しの周りに散らす。
- ボタンはすべてピル型＋白丸矢印にそろえる。

**Don't**
- 細い明朝体や繊細なセリフ体は使わない。
- 赤を寒色の主役色に置き換えない。
- 長い本文を左揃えのまま密に並べない。
- 影を多用して立体的なカードにしない。
- 装飾を一切置かない真っ白なセクションを作らない（フッターは除く）。

## Page Structure

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

1. **ファーストビュー**（作品の世界観と放送情報を一目で伝える）: 角丸フレームいっぱいにキービジュアルを置き、下部に放送日時の帯と大きな文字、右上に丸いメニューボタンを置く。
2. **ピックアップ**（注目の企画へ誘導する）: 赤地に白の欧文見出しを置き、バナー 3 枚を横に並べる。
3. **イントロダクション**（あらすじを伝える）: 上下をロゴ帯で挟む。ぼかし写真を暗くした地に中央揃えの白い本文を置き、強調語はオレンジにする。四隅に三角に切り抜いたキャラクターを配置する。
4. **キャラクター**（登場人物を紹介する）: ラベンダーの市松地に和柄の紙片と雲を散らし、スマホ枠のカルーセルとドットナビ、赤ボタンを置く。
5. **メカ紹介**（ロボットの魅力を見せる）: 筆文字の大見出しにルビを添え、タブレット枠のカルーセルを置く。下端はピクセル状の境界にする。
6. **映像**（予告映像を見せる）: グレー地に赤いブロブを敷き、白い見出しの下に動画プレイヤー風の枠と、チャンネル誘導の丸バッジを置く。
7. **ニュース**（最新情報を伝える）: 赤いブロブの上に見出しを置き、濃色の横長カードを 4 枚並べた後、濃色ボタンを置く。
8. **公式SNS**（SNSへ誘導する）: 暗いぼかし写真の地に白い見出しを置き、黒丸のSNSアイコンを 2 つ並べる。
9. **フッター**（権利表記と関連リンク）: 白地に企業ロゴとシリーズバナー、注意書き、縦線で区切ったリンクを置き、最下部に焦げ茶のコピーライト帯を敷く。

## Imagery

- アニメ調のキャラクターは、明るい塗りの全身または上半身を、勢いのあるポーズで描く。
- 背景は街並みや室内の写真風画像を強くぼかし、暗く落として文字を読みやすくする。
- ピクセルアート風の四角ドットを、境界やロゴの周りに散らす。
- 青海波などの和柄を描いた紙片、手裏剣、桜を、ポップな色で浮遊させる。
- SNS・動画UI風のアイコン（ハート・いいね・コメント・再生バー）を画像に重ねる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも外周の赤いフレームを維持し、キービジュアルは横長で切り出す。
- ピックアップは、見出しとバナーを 1 行に横並びにする。
- イントロは、和柄の額縁風パネルに入れて中央に置く。
- キャラクターのカルーセルは、3 枚が同時に見える状態にし、中央以外をぼかす。
- メカと映像は 2 カラムにし、見出し・ボタンとデバイス枠を左右に振り分ける。
- ニュースは左に見出しとボタン、右にカードリストの 2 カラムにする。

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