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

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

Overview

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

Colors

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

Typography

• 筆文字は筆刷毛帯の見出しだけに使う。本文はすべてゴシック。
• 後半の見出しは、細い英字ラベルと太い和文見出しを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

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

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