---
version: alpha
name: Edgy Comic Collab Event LP
description: ゲームと水族館・レジャー施設のコラボイベントを告知する LP。地はくすんだ青グレー。そこに傾いた黒いカード、群青の平行四辺形見出し、赤・黄・紫の三角片を散らし、コミック調の勢いを出している。
colors:
  background: '#BAC9D0'
  dark-section: '#000000'
  on-dark: '#F9F9F9'
  primary: '#2F55A4'
  surface: '#FFFFFF'
  background-alt: '#EAEDF6'
  accent-1: '#E0202F'
  accent-2: '#FEF101'
  accent-3: '#780DB1'
  secondary: '#016EBA'
  text: '#030403'
  cta: '#020202'
  on-cta: '#FCFCFC'
  tint-1: '#E3E8EC'
  secondary-accessible: '#017ACE'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: M PLUS 1p
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.08em
  body-md:
    fontFamily: M PLUS 1p
    fontSize: 13px
    fontWeight: 800
    lineHeight: 2.0
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.02em
  accent:
    fontFamily: Playfair Display
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.2
  label-button:
    fontFamily: M PLUS 1p
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 0px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 70px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  card-dark:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 260px
  heading-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 52px
  heading-en:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 60px
  info-tag:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 44px
  photo-stack:
    height: 240px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 40px
  nav-tabs:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 60px
  pagetop-star:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 80px
  slider:
    height: 260px
---

# DESIGN.md — 黒×群青の斜めカット コラボイベント LP（Edgy Comic Collab Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、クール・先進的、ポップ・元気
- **キーワード**: 斜めカット・黒カード・コミック調・コラボ告知・散らし装飾
- **地の質感**: フラットな塗り。網点（ハーフトーン）と白黒の斜めストライプを、写真の背面に重ねている。
- **形**: わずかに回転させた四角形や平行四辺形。直角の切り口と三角の破片が中心で、角丸はほとんど使わない。
- **温度感**: クールな寒色の地に、赤・黄の熱い差し色を入れている。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#BAC9D0` | ページ地の青グレー | 45% | 画素の実測 |
| `dark-section` | `#000000` | 説明文カードの黒面 | 16% | 画素の実測 |
| `on-dark` | `#F9F9F9` | 黒カード上の白文字 | 3% | 画素の実測 |
| `primary` | `#2F55A4` | 見出し帯の群青 | 5% | 推定 |
| `surface` | `#FFFFFF` | 紹介ブロックの白カード | 10% | 画素の実測 |
| `background-alt` | `#EAEDF6` | FV のごく淡いグレー地 | 9% | 画素の実測 |
| `accent-1` | `#E0202F` | 帯ロゴ・星形ボタン・破片の赤 | 2% | 推定 |
| `accent-2` | `#FEF101` | 見出し下線・破片の黄 | 1% | 画素の実測 |
| `accent-3` | `#780DB1` | ナビ帯・三角片の紫 | 2% | 画素の実測 |
| `secondary` | `#016EBA` | ナビ背景の海の青 | 3% | 画素の実測 |
| `text` | `#030403` | 白地の本文・見出し文字 | 2% | 画素の主要色に補正 |
| `cta` | `#020202` | 外部リンクボタンの黒 | 0% | 画素の実測 |
| `on-cta` | `#FCFCFC` | ボタン上の白文字 | 0% | 画素の実測 |
| `tint-1` | `#E3E8EC` | スライダー下の淡い斜め片 | 1% | 画素の実測 |
| `secondary-accessible` | `#017ACE` | AA を満たす補正値（計算） |  | 計算 |

- 地は青グレーで統一し、本文はすべて黒カードに白文字で載せる。
- 見出しは群青の平行四辺形に白文字で入れる。
- 赤・黄・紫は小さい三角片や下線として、1 セクションに 1〜2 個だけ散らす。
- 長文の解説だけは白カードに黒文字にして、読みやすさを優先する。
- フッターは白地にロゴを並べ、黒の太線で区切る。
- `nav-tabs` は文字 `#030403` × 背景 `#016EBA` のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#017ACE`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 欧文のセクション英字見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.1 | 0.02em |
| `headline-lg` | 開催期間・場所の大きな表示 | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.3 | 0.02em |
| `headline-md` | 群青帯の中のセクション見出し | ゴシック | M PLUS 1p | 900 | 22px | 1.3 | 0.04em |
| `headline-sm` | 白帯の告知見出し | ゴシック | Zen Kaku Gothic New | 900 | 18px | 1.4 | 0.08em |
| `body-md` | 黒カード内の太字本文 | ゴシック | M PLUS 1p | 800 | 13px | 2.0 | 0.02em |
| `body-lg` | 白カードの解説文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.02em |
| `accent` | FV の日付表記 | 欧文セリフ | Playfair Display | 500 | 18px | 1.2 | 0.0em |
| `label-button` | ボタン・ナビのラベル | ゴシック | M PLUS 1p | 800 | 13px | 1.2 | 0.04em |

- 見出しも本文も極太ゴシックにし、勢いを出す。
- 英字見出しは超太の文字に黄の斜め下線を敷き、横に小さな和文見出しを添える。
- 黒カードの本文は中央揃えか左揃えにし、行間は 2.0 前後と広めに取る。
- 見出し帯の文字は白で、帯ごと少し傾けて置く。
- 日付だけは欧文セリフを使い、上品なアクセントにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC も中央に約 640px 幅の 1 カラムを置き、左右は青で塗る。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
- 各セクションは『写真＋黒カード』のセットを縦に積む。
- 写真は −3〜3 度程度回転させ、背面にストライプ柄のカードを重ねる。
- 見出し帯は写真とカードの境目に、またがるように重ねる。
- セクション間の余白に三角片を 1 つ置き、リズムを付ける。
- ナビは横スクロールの斜めタブを、海の青を背景に並べる。

## Elevation & Depth

- 影はほとんど使わず、カードの重なりで奥行きを表す。
- 黒カードには白の細い縁取り（2〜3px）を付けて、地から浮かせる。
- 写真の背面にずらしたストライプカードを重ね、立体感を出す。

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 四角い写真を少し回転させて置く。キャラ素材は切り抜き。
- **セクション境界**: 斜めの面と三角片で区切る。FV の下は斜めの紫帯にする。
- ボタンは平行四辺形にし、端に赤い小さな三角を付ける。
- 見出し帯は左端に縦線の飾りを付けた平行四辺形にする。
- トップへ戻るボタンは赤い星形にする。
- カードの角は直角を基本とし、わずかに歪んだ四辺形にする。

## Components

- **傾いた黒カード**（`card-dark`）: 白文字の本文を載せる黒い四辺形。白枠付きで、わずかに回転させる。
- **群青の見出し帯**（`heading-band`）: 平行四辺形の帯に白い極太文字を入れ、左端に縦線を添える。
- **英字セクション見出し**（`heading-en`）: 超太の英字に黄色の斜め下線を引き、和文の小見出しを並べる。
- **開催情報タグ**（`info-tag`）: 白または群青の斜めタグを重ねて、期間と場所を表示する。
- **重ね写真**（`photo-stack`）: 回転させた写真の背面に、白黒ストライプと網点のカードを重ねる。
- **外部リンクボタン**（`button-primary`）: 黒い平行四辺形に白文字を入れ、右端に赤い三角アイコンを付ける。
- **斜めナビタブ**（`nav-tabs`）: 紫の帯の下に、白黒の斜めタブと赤い矢印ボタンを横に並べる。
- **星形トップボタン**（`pagetop-star`）: 赤い星の中に白文字を入れ、右下に固定する。
- **画像スライダー**（`slider`）: 左右に黒四角の矢印、下に丸いドットを置く。

## Do's and Don'ts

**Do**
- カードや写真は必ず少し傾け、静止画でも動きを出す。
- 本文は黒カードに白い太字で載せる。
- セクション間に色付きの三角片を 1 つ置く。
- 見出し帯は、写真とカードにまたがる位置に重ねる。
- 背景は青グレー 1 色に保つ。

**Don't**
- 角丸の柔らかいボタンやカードを使わない。
- パステル調やグラデーションの多用はしない。
- 細い明朝体を見出しに使わない。
- 差し色を広い面に使わない。
- 要素を水平・整列だけで並べて、単調にしない。

## Page Structure

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

1. **ファーストビュー**（コラボのキービジュアルと会期を伝える。）: キャラの 8 分割イラストを置き、その下にコラボ両者のロゴと×、セリフ体の日付を中央に並べる。
2. **ナビゲーション**（各企画へ移動させる。）: 紫の斜め帯の下に斜めタブを並べ、海の青を背景にミニキャラを配置する。斜めに走る赤い帯ロゴも入れる。
3. **新着告知スライダー**（描き下ろしイラストなどの最新情報を見せる。）: 白帯の見出しを置き、その下に横長バナーのスライダーとドットを並べる。
4. **開催概要**（期間と場所を明示する。）: 英字見出しの下に、斜めタグを左右にずらして重ねる。
5. **特典チケット**（主力商品の内容を説明する。）: ブック型の画像を置き、群青帯と黒カードの長文を続ける。
6. **コラボエリア紹介**（会場内の企画を紹介する。）: 重ね写真、番号付きの群青帯、短い黒カードの 3 点セットを 2 回繰り返す。
7. **コラボフード**（限定メニューを訴求する。）: 料理の切り抜き写真の下に、中央揃えの黒カードを置く。
8. **コラボグッズ**（限定グッズを訴求する。）: グッズを散らした集合写真の下に、黒カードを置く。
9. **コラボホテル**（宿泊プランを案内する。）: 客室写真の下に、黒カードで 2 プランを説明する。
10. **作品紹介**（原作の世界観を説明する。）: 白カードの上辺に、黒白赤の変形ロゴ見出しを重ねる。集合イラストと解説文の後に、黒い斜めボタンを置く。
11. **フッター**（権利表記とロゴを示す。）: 白地に両ロゴと×を並べ、小さなコピーライトを添える。星形のトップへ戻るボタンも置く。

## Imagery

- アニメ調のキャラは、輪郭のはっきりしたセル画風にする。
- ミニキャラは 2 頭身の切り抜きで、横一列に並べる。
- 施設写真は、明るい水と青空、または夜景と花火にする。
- 背面の装飾は白黒の斜めストライプ、網点、稲妻状の線で作る。
- 赤・黄・紫・青の三角片を、手で散らしたように配置する。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では中央に約 640px 幅の青グレーの帯を置き、左右は明るい空色で塗る。
- PC の FV は横長にし、左にキービジュアル、右にロゴと日付を縦積みにする。
- ナビ帯とキャラ帯は PC では全幅に広げる。
- カード構成は SP と同じ 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-3d74148c`（元 LP の URL から採番）
- **元 LP**: https://www.seaparadise.co.jp/seapara_persona30th/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。