水色×藤紫の幻想アニメコラボイベントLP

Pastel Fantasy Anime Event LP

白地に水色と藤紫を差した、明朝体中心の幻想的なアニメコラボ体験型イベントLP。手書き風の欧文スクリプトを見出しの背後に透かして重ね、金色の唐草ラインと細線の枠で上品に仕上げている。チケット情報は表・帯見出し・グラデーションのピル型ボタンで整理し、情報量が多くても柔らかく見える。

エンタメ・ゲーム・アプリやさしい・柔らかい上品・高級情報量多め・訴求型PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

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

TYPOGRAPHY

書体

displayFVのタイトルロゴ風文字明朝／ Shippori Mincho 800 ／ 40px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出し明朝／ Shippori Mincho 700 ／ 24px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

accent見出しの背後に透かす欧文欧文スクリプト／ Dancing Script 600 ／ 44px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-md水色のリード文・小見出し明朝／ Noto Serif JP 600 ／ 18px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm帯見出し・カード見出し明朝／ Noto Serif JP 600 ／ 15px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文・説明文明朝／ Noto Serif JP 400 ／ 13px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・期間表記明朝／ Noto Serif JP 400 ／ 11px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタン文字ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

和文は明朝で統一し、ボタンだけゴシックにする
見出しは中央揃えにして、半透明の欧文スクリプトを背後に重ねる
本文は中央揃えで短い行に区切り、行間を広めに取る
料金の数字は大きく太く、単位は小さくする
字間は少し広めにして静かな印象を出す

PAGE STRUCTURE

セクション構成

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

COMPONENTS

部品

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

守ること

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

DON'T

避けること

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

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

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

Imagery

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

Responsive Behavior

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

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://realdgame.jp/s/frieren/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP