---
version: alpha
name: Dark Fantasy Parchment Event LP
description: 白レンガの壁を背景に、焼け焦げた縁の羊皮紙カードを重ねる。見出しは血のような暗赤色の筆刷毛の帯に白い筆文字をのせる。ダークファンタジー系アニメのテーマパーク・コラボイベントLP。後半はグッズとフードの2カラムのカタログ、交通案内、注意事項、黒帯のFAQへと実用情報に切り替わる。
colors:
  primary: '#59090A'
  cta: '#BC0303'
  on-cta: '#FFFFFF'
  background: '#FDFDFD'
  surface: '#E6BE8B'
  accent-1: '#AF8567'
  background-alt: '#C9C7C3'
  tint-1: '#F1F2EC'
  dark-section: '#000000'
  on-dark: '#FFFFFF'
  text: '#333333'
  accent-2: '#CEA901'
  accent-3: '#1E6B2A'
  secondary: '#292929'
  marker: '#7E0D0F'
  tint-2: '#D1BD80'
typography:
  display:
    fontFamily: Yuji Syuku
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.15em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  accent:
    fontFamily: Noto Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.6
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.7
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  heading-brush:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 72px
  card-parchment:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 600px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 32px
  button-ticket-framed:
    backgroundColor: '{colors.background}'
    textColor: '{colors.marker}'
    typography: '{typography.headline-lg}'
    height: 64px
  badge-feature:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 22px
  table-price:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 140px
  card-product:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 280px
  tag-shop:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 14px
  faq-bar:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 30px
  button-secondary:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 38px
---

# DESIGN.md — 羊皮紙×白レンガ×血赤のアニメコラボイベントLP（Dark Fantasy Parchment Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、レトロ、情報量多め・訴求型
- **キーワード**: 羊皮紙・白レンガ・血赤の筆帯・焼け焦げた紙端・カタログ型グリッド・黒帯FAQ
- **地の質感**: 前半は古紙の焼け色グラデーションとレンガの写真テクスチャ。後半は灰色の漆喰やコンクリート調のザラついた地。
- **形**: 紙の縁は不規則にちぎれて焦げている。見出し帯は刷毛でかすれた横長の形。ボタンと表は角の立った矩形。
- **温度感**: 前半は茶・赤の暖色で重厚。後半は灰・白の無彩色で落ち着いた情報ページ。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#59090A` | 筆刷毛見出し帯・表ヘッダーの暗赤 | 4% | 画素の実測 |
| `cta` | `#BC0303` | 主ボタンの赤 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | 赤ボタン上の文字 | 0% | 画素の主要色に補正 |
| `background` | `#FDFDFD` | 白い商品カード・注意事項の地 | 18% | 画素の実測 |
| `surface` | `#E6BE8B` | 羊皮紙カードの中心色 | 12% | 画素の主要色に補正 |
| `accent-1` | `#AF8567` | 羊皮紙の焦げ縁 | 3% | 画素の主要色に補正 |
| `background-alt` | `#C9C7C3` | グッズ欄の灰色漆喰の地 | 30% | 画素の主要色に補正 |
| `tint-1` | `#F1F2EC` | 公式SNS欄の淡いグレー地 | 6% | 画素の実測 |
| `dark-section` | `#000000` | ヘッダー・FAQ帯・フッターの黒 | 8% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 黒地上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#333333` | 本文・商品名の濃いグレー | 2% | 推定 |
| `accent-2` | `#CEA901` | SNSボタンのからし色 | 0% | 画素の実測 |
| `accent-3` | `#1E6B2A` | 店舗タグの深緑 | 0% | 推定 |
| `secondary` | `#292929` | サブボタンの墨色 | 1% | 画素の実測 |
| `marker` | `#7E0D0F` | リード文・強調見出しの赤文字 | 0% | 画素の実測 |
| `tint-2` | `#D1BD80` | 交通図の箱のベージュ | 1% | 画素の実測 |

- 前半のイベント紹介は白レンガの地に羊皮紙カードを重ねる。カードを白地に置かない。
- セクション見出しは暗赤の筆刷毛帯に白い筆文字をのせる。
- 主CTAは鮮やかな赤のベタ塗りか、羊皮紙の上に白い枠つきボタンで赤い大きな文字を置く。
- グッズ・フードは灰色の漆喰地に白い正方形カードを並べ、色数を抑える。
- 店舗タグは深緑と赤の2色で、販売場所を区別する。
- FAQの質問帯とフッターは黒にし、Qマークだけ赤にする。
- 外部SNSボタンだけからし色を使い、他の導線と区別する。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 筆刷毛帯の中の見出し | 手書き・筆 | Yuji Syuku | 400 | 28px | 1.3 | 0.15em |
| `headline-lg` | 後半セクションの和文見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.02em |
| `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Noto Sans | 400 | 13px | 1.4 | 0.05em |
| `headline-sm` | ニュースのタイトル・表の見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.0em |
| `body-md` | 本文・商品名・価格 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em |
| `note` | ※印の注釈・営業時間 | ゴシック | Noto Sans JP | 400 | 9px | 1.7 | 0.0em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.1em |

- 筆文字は筆刷毛帯の見出しだけに使う。本文はすべてゴシック。
- 後半の見出しは、細い英字ラベルと太い和文見出しを2段に重ねる。
- 本文は小さめにして、行間を広めに取る。
- 価格は「各◯円（税込）」の形で商品名の下に置く。
- 羊皮紙上の告知文は中央揃えで、太字の小見出しを挟む。
- CTAの文字には二重山括弧の矢印を添える。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。グッズとフードは 2 カラムのグリッド
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
- 羊皮紙カードは画面幅の約92%で、レンガ地の余白を左右に残す。
- 筆刷毛見出しは画面幅の約75%で中央に置く。左右が少しはみ出してもよい。
- 商品グリッドは2列で、間隔は約8px。白い正方形画像の下に商品名と価格を置く。
- ニュースは画像を全幅で載せ、日付・太字タイトル・抜粋・右寄せの続きリンクを縦に積む。
- 交通案内はベージュの箱を矢印でつないだ図で示す。
- FAQは黒い帯を縦に並べ、帯の間を約8px空ける。

## Elevation & Depth

- 影はほとんど使わない。羊皮紙の焦げ縁の濃淡で浮いて見せる。
- 白い商品カードは影なしで、テクスチャ地の上に平置きする。
- 主CTAにはわずかな影を付けてもよい。

## Shapes

- **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品は白背景の正方形。ニュースとキービジュアルは矩形の全幅。
- **セクション境界**: テクスチャ地の切り替えで区切る。羊皮紙カードはちぎれた縁で地から浮かせる。
- ボタンは角の立った矩形か、ごく小さい角丸にする。
- 紙の縁は不規則にちぎれ、焦げた形にする。
- 見出し帯は刷毛がかすれた横長の形にする。
- FAQの右端に四角い＋アイコンを置く。

## Components

- **筆刷毛見出し帯**（`heading-brush`）: 暗赤のかすれた刷毛帯に白い筆文字をのせ、文字間を広めに取る。
- **羊皮紙カード**（`card-parchment`）: 焦げ縁のある古紙に、ニュース・特徴・料金表を収める。
- **赤の主ボタン**（`button-primary`）: 幅の広い赤い矩形に白い太字と二重山括弧を置く。
- **枠つきチケットボタン**（`button-ticket-framed`）: 羊皮紙の上に二重線の枠をとり、白い地に赤い大きな太字を置く。
- **特徴番号ラベル**（`badge-feature`）: 焦げ茶の小さな矩形に「特徴＋数字」を白字で入れる。
- **料金表**（`table-price`）: 見出し行と見出し列は暗赤地に白字。値のセルは白地で中央揃え。
- **商品カード**（`card-product`）: 白い正方形画像の下に、商品名・価格・セット価格を小さく並べる。
- **販売場所タグ**（`tag-shop`）: 深緑または赤の小さな矩形に、白字で販売場所を入れる。
- **FAQ帯**（`faq-bar`）: 黒い帯に赤いQマーク・白い質問文・右端の＋アイコンを置く。
- **墨色のサブボタン**（`button-secondary`）: 関連サイトへの導線。墨色の矩形に白字と矢印を置く。

## Do's and Don'ts

**Do**
- 前半は必ず白レンガの地に羊皮紙カードを重ね、世界観をつくる。
- 見出しは筆刷毛帯に統一する。
- グッズとフードは2列グリッドで、価格表記の形式をそろえる。
- 注意事項や交通は白い面に箇条書きで、読みやすくまとめる。
- チケット購入の導線をヘッダー・料金表の下・フッター近くに繰り返し置く。

**Don't**
- ピル型ボタンやパステル色を使わない。
- 羊皮紙カードの縁をまっすぐにしない。
- 筆文字を本文や商品名に使わない。
- グッズ欄にまで羊皮紙を使って重くしない。
- 赤を広い面に使いすぎない。

## Page Structure

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

1. **ヘッダー**（ロゴとチケット導線を常に見せる）: 黒帯に白ロゴ、白枠のチケットボタン、ハンバーガーメニューを置く。
2. **ファーストビュー**（キャラクターで世界観を伝える）: 全幅のキービジュアル。下に羊皮紙カードを置き、ロゴ×ロゴと会期を入れる。
3. **最新情報**（新着ニュースを伝える）: 羊皮紙カードの中に画像付き記事を3件並べ、下に赤い「もっと見る」ボタンを置く。
4. **メインアトラクション紹介**（夜イベントの魅力を伝える）: 縦長のポスターを載せ、特徴ラベル・説明・写真を3回くり返す。最後に時間と注釈を置く。
5. **昼イベント告知**（関連企画を伝える）: 羊皮紙カードに中央揃えのテキストを置き、太字の小見出しで企画を区切る。
6. **チケット情報**（料金を示して購入へ誘導する）: 暗赤ヘッダーの料金表、注釈、枠つきの大きな購入ボタンの順に置く。
7. **オリジナルグッズ**（物販を紹介する）: 灰色の漆喰地に英字ラベルと見出し、赤いリード文、暗赤の帯、2列の商品グリッドを置く。
8. **コラボフード**（飲食メニューを紹介する）: 商品グリッドに販売場所タグを付ける。最後にセットメニューを置く。
9. **公式SNS**（フォローを促す）: 淡いグレーの地に見出しと、からし色の全幅ボタンを置く。
10. **会場マップ・アクセス**（来場方法を伝える）: イラストのマップ、住所、交通フロー図、帰り方の図を載せる。最後に赤いボタンを2つ並べる。
11. **注意事項**（ルールを周知する）: コンクリート調の地に白い面を置き、箇条書きで並べる。
12. **よくある質問**（不安を解消する）: 黒いアコーディオン帯を並べ、最後に墨色のボタンを置く。
13. **施設紹介・フッター**（運営施設を紹介し、回遊させる）: ロゴと中央揃えの紹介文を置く。黒いフッターにシェアボタン、2列のリンク、SNSアイコンを並べる。

## Imagery

- キャラクターのビジュアルは、青空と草原、または夜の森のライトアップを背景にした全幅の絵にする。
- ナイトイベントの写真は赤・紫・緑の照明が強い、高彩度の夜景にする。
- グッズは白背景の切り抜き写真に、斜めのSAMPLE透かしを入れる。
- フードはグレーや白の背景で、真横からやや見下ろす角度で撮る。
- 背景は白レンガ・古紙・漆喰・ひび割れたコンクリートの写真テクスチャにする。
- 交通図は、ベージュの箱と所要時間の矢印でつないだフラットな図にする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでもレンガ地を全幅に敷き、羊皮紙カードは中央に約700px幅で置く。
- PCのニュースは、左に画像・右に本文の横並びにする。
- PCの商品グリッドは3列にする。
- PCの料金表やボタンは中央寄せにし、最大幅を抑える。
- PCのフッターリンクは4列にする。

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