---
version: alpha
name: Pastel Fantasy Anime Event LP
description: 白地に水色と藤紫を差した、明朝体中心の幻想的なアニメコラボ体験型イベントLP。手書き風の欧文スクリプトを見出しの背後に透かして重ね、金色の唐草ラインと細線の枠で上品に仕上げている。チケット情報は表・帯見出し・グラデーションのピル型ボタンで整理し、情報量が多くても柔らかく見える。
colors:
  primary: '#7A4E9A'
  secondary: '#4A9CC8'
  background: '#FFFFFE'
  background-alt: '#FEFEFE'
  surface: '#FFFDF2'
  cta: '#8C63A5'
  on-cta: '#FFFFFF'
  accent-1: '#ACDEFF'
  tint-1: '#ABC4EC'
  tint-2: '#EEE0FB'
  accent-2: '#C9A65A'
  text-body: '#3A3A48'
  line: '#A9C3D7'
  dark-section: '#73B9D3'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  accent:
    fontFamily: Dancing Script
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.0
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.06em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Serif JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 6px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  button-notice:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 32px
  heading-script:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 90px
  band-label:
    backgroundColor: '{colors.tint-1}'
    typography: '{typography.headline-sm}'
    height: 28px
  icon-badge:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 72px
  price-table:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 160px
  benefit-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 480px
  accordion:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 44px
  tab-toggle:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 28px
---

# DESIGN.md — 水色×藤紫の幻想アニメコラボイベントLP（Pastel Fantasy Anime Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: やさしい・柔らかい、上品・高級、情報量多め・訴求型
- **キーワード**: 幻想・水彩の淡色・明朝体・細線フレーム・金の唐草・透かしスクリプト
- **地の質感**: 白地を基本に、水彩のにじみ・ぼかしと淡い水色のテクスチャ帯を重ねる
- **形**: 四角い細線の枠と角に飾りを付けたカード、ピル型ボタン、円形アイコン
- **温度感**: やや寒色寄りの澄んだ空気感に、藤紫と金で温かみを添える

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#7A4E9A` | 見出し文字・ブランドの藤紫 | 2% | 推定 |
| `secondary` | `#4A9CC8` | リード文・小見出しの水色 | 1% | 推定 |
| `background` | `#FFFFFE` | ページ地の白 | 60% | 画素の実測 |
| `background-alt` | `#FEFEFE` | FAQ帯の淡い水色地 | 4% | 画素の実測 |
| `surface` | `#FFFDF2` | 特典カードのクリーム地 | 3% | 画素の実測 |
| `cta` | `#8C63A5` | 注意事項ボタンの紫面 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#ACDEFF` | 購入ボタンの水色→藤紫グラデ起点 | 0% | 画素の実測 |
| `tint-1` | `#ABC4EC` | 表ヘッダー・帯見出しの淡青 | 2% | 画素の実測 |
| `tint-2` | `#EEE0FB` | アコーディオン・特典見出しの薄紫 | 1% | 画素の実測 |
| `accent-2` | `#C9A65A` | 唐草・飾り罫の金 | 0% | 推定 |
| `text-body` | `#3A3A48` | 本文の濃グレー | 2% | 推定 |
| `line` | `#A9C3D7` | 表・カードの細罫 | 0% | 画素の主要色に補正 |
| `dark-section` | `#73B9D3` | ストーリー帯の水色テクスチャ | 4% | 画素の主要色に補正 |

- 地は白を基本にし、ストーリー帯だけ水色テクスチャ面にする
- 見出しは藤紫、リードや小見出しは水色で書き分ける
- 表ヘッダーと帯見出しは淡青、特典・補足見出しは薄紫で塗る
- 購入ボタンは水色→藤紫の横グラデにする
- 金は飾り罫と唐草にだけ使い、面には使わない
- 特典カードはクリーム地にして白地と区別する

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのタイトルロゴ風文字 | 明朝 | Shippori Mincho | 800 | 40px | 1.2 | 0.02em |
| `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 700 | 24px | 1.4 | 0.08em |
| `accent` | 見出しの背後に透かす欧文 | 欧文スクリプト | Dancing Script | 600 | 44px | 1.0 | 0.0em |
| `headline-md` | 水色のリード文・小見出し | 明朝 | Noto Serif JP | 600 | 18px | 1.6 | 0.06em |
| `headline-sm` | 帯見出し・カード見出し | 明朝 | Noto Serif JP | 600 | 15px | 1.5 | 0.05em |
| `body-md` | 本文・説明文 | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.04em |
| `note` | 注釈・期間表記 | 明朝 | Noto Serif JP | 400 | 11px | 1.7 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em |

- 和文は明朝で統一し、ボタンだけゴシックにする
- 見出しは中央揃えにして、半透明の欧文スクリプトを背後に重ねる
- 本文は中央揃えで短い行に区切り、行間を広めに取る
- 料金の数字は大きく太く、単位は小さくする
- 字間は少し広めにして静かな印象を出す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特長や手順のカードは SP で 1〜2 列にする
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- 見出しの下には金の唐草罫を必ず入れる
- チケット情報は小見出し→帯→日時の順に縦へ積む
- 料金は罫線で区切った表にまとめる
- 特典ブロックは見出し帯付きのカードを縦に並べる
- FAQはアコーディオンを縦に並べる

## Elevation & Depth

- 影は基本使わず、細線の枠で区切る
- アコーディオンにだけごく薄い影を付ける
- ストーリー帯の文章面は白の半透明パネルにする

## Shapes

- **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸なしの矩形帯、キャラは背景を抜いた全身、アイコンは円
- **セクション境界**: 直線で切り替え、水彩のぼかしと飾り罫で区切る
- カードは角に飾りを付けた細線の四角い枠にする
- ボタンはピル型、右端に丸い矢印アイコンを付ける
- 特徴アイコンはクリーム地の円にまとめる

## Components

- **購入ボタン**（`button-primary`）: 水色→藤紫グラデのピル型ボタン。右端に白丸の矢印
- **注意事項ボタン**（`button-notice`）: 紫ベタの角丸小ボタン。右端に丸矢印
- **透かし欧文見出し**（`heading-script`）: 薄い水色の欧文スクリプトの上に、藤紫の明朝見出しと金の唐草罫を重ねる
- **帯見出し**（`band-label`）: 淡青で塗った全幅の帯に、白い明朝の小見出しを入れる
- **円形スペックバッジ**（`icon-badge`）: クリーム地の円に、線画アイコンと時間・人数などの短い数値を入れる
- **料金表**（`price-table`）: 淡青ヘッダーに細罫を引いた表。価格は大きく太字
- **特典カード**（`benefit-card`）: 薄紫の見出し帯とクリーム地の本文を、紫細枠で囲む
- **アコーディオン**（`accordion`）: 白地または薄紫地に細枠。中央に明朝の見出し、右端に下向き三角
- **料金切替タブ**（`tab-toggle`）: 選択中は薄紫、未選択は白に枠線のピル型2連タブ

## Do's and Don'ts

**Do**
- 見出しには透かし欧文と金の唐草をセットで付ける
- 色数は水色・藤紫・金に絞る
- 情報ブロックは細線の枠で囲み、余白を広く取る
- イラストや写真の縁は水彩ぼかしで溶かす

**Don't**
- 原色や蛍光色を使わない
- 太いゴシックの見出しにしない
- 濃い影や立体的なボタンにしない
- 黒ベタの面を作らない

## Page Structure

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

1. **ファーストビュー**（世界観とタイトルを一目で伝える）: 青みのキービジュアル全面に、ひび割れ表現と明朝の縦書きコピー、金縁のタイトルを置く
2. **導入リード**（体験の設定を語る）: 白地に中央揃えの明朝本文。水色のリード文を2行で強調する
3. **体験写真帯**（参加の雰囲気を見せる）: 体験写真を横一列に隙間なく並べる
4. **イベント概要**（内容とスペックを説明する）: 飾り枠の画像カード3枚と、円形スペックバッジ5個を並べる
5. **キャンペーン**（特典を告知する）: 透かし見出しの下にバナーを1枚置く
6. **ストーリー**（物語への没入を促す）: 水色テクスチャの全幅帯に白の半透明パネルを重ね、小さなピル型ボタンを置く
7. **登場キャラクター**（キャラクターを紹介する）: 背景を抜いた全身イラストを横に並べ、足元に名前の丸ラベルを付ける
8. **参加方法**（手順を示す）: 番号バッジ付きの縦長枠カード4枚に、線画イラストと説明を入れる
9. **チケット情報**（販売日程と料金を示す）: 帯見出し、日時、料金表、注意事項ボタンの順に縦へ並べる
10. **特典グッズ**（付帯特典を見せる）: 薄紫の見出し帯とクリーム地のカードに、商品ビジュアルと説明を入れる
11. **購入会場一覧**（会場ごとの購入へ誘導する）: 角に飾りのある紫細枠のカードに、会場名・期間・グラデボタンを入れる
12. **グッズ予告**（今後の展開を予告する）: 水彩ぼかしの上に欧文スクリプトで近日公開と表示する
13. **FAQ・注意事項**（不安を解消する）: 淡い水色の帯にアコーディオンを3段並べる
14. **フッター**（関連リンクと権利表記を載せる）: ロゴ、バナー2枚、クレジットを置き、最下部に後ろ姿の淡いイラストを入れる

## Imagery

- キービジュアルは青みの寒色トーンに統一し、ガラスのひび割れや光の粒を重ねる
- 水彩のにじみとぼかしを背景装飾に使う
- 体験写真は暗めの店内で人が楽しむ様子を、彩度を揃えて並べる
- アイコンは細い線画でセピア系のトーンにする
- 金の唐草・蝶・星などの細い装飾を見出し周りに添える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは本文幅を約480px相当の中央寄せにし、左右は淡いグレー地にする
- SPでは写真帯を横スクロールか2段にする
- SPではスペックバッジを3＋2個に折り返す
- SPでは参加方法カードを1列か2列にする
- SPでは料金表の文字を縮め、横幅に収める
- SNSボタンは画面右下に固定する

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