DESIGN.md — 赤レンガ×金文字のアニメ記念展覧会LP（Red Brick Gold Anniversary Exhibition LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ポップ・元気、レトロ、情報量多め・訴求型
• キーワード: 赤レンガ・金グラデ見出し・黒太枠カード・レトロテレビ・キラキラ光・周年祝祭
• 地の質感: レンガ目地のパターン地に、キラキラ光るフレアや舞う花びらを重ねる。カードは白のフラットな面。
• 形: 角を少し丸めた白カードに黒の2〜3px枠を付ける。ボタンは角丸の長方形で、下に斜線ストライプの影を付ける。
• 温度感: 赤と金の暖色が中心で華やか。紺とグレーで落ち着かせる。

Colors

• 地の色は赤レンガ→白レンガ→紺レンガ→白→赤の順に切り替え、単調にしない
• 英字の大見出しは必ず金グラデにし、黒の縁取りと影を付ける
• 情報は白いカードに黒枠を付けて載せ、柄の地の上でも読めるようにする
• 日付やラベルなど重要な数値は赤文字にする
• 公開中のボタンは黒、準備中のボタンはグレーにして状態を分ける
• 注意事項はクリーム地、特典は淡い青地、購入制限は淡い緑地のボックスに分ける

Typography

• 英字見出しは極太の大文字にし、金グラデ・黒縁取り・下影の3点を付ける
• 和文はゴシック1書体にそろえ、太さの違いで強弱を付ける
• 本文は字間を広めにし、行間は1.8以上にする
• 強調は赤・ピンク・金の文字色で示し、下線はあまり使わない
• 注釈は※から始め、小さめのサイズで黒文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。会場カードのみ 2 カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面の左右に約15pxの余白を取る
• 英字見出しはカードの上辺にかかるように重ねる
• 会場カードは上にテレビ型ラベルを半分はみ出させる
• 表は4列で、見出しのセルにだけ淡い色を付ける
• キャラクターの切り抜きはカードの端からはみ出させてよい

Elevation & Depth

• カードに影は付けず、黒の太枠で立体感を出す
• ボタンは下に斜線ストライプの段差を付けて押せる感じを出す
• 英字見出しには黒いドロップシャドウを付ける
• フレアの光や花びらは最前面に散らす

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラクターは輪郭で切り抜く。写真や動画は角丸の長方形。人物は丸型に切り抜く
• セクション境界: 直線で背景の柄を切り替え、境界に小物イラストや花びらを重ねる
• カードは角丸8〜12px＋黒枠2〜3px
• 会場ラベルはブラウン管テレビの形にする
• 購入ボタンは角丸の長方形に、ピンク・金・水色の3色を使い分ける
• 見出し前の小ラベルは赤のピル型にする

Components

• 金の英字見出し（heading-gold-en）: 極太の英字を金グラデにし、黒縁と影を付ける。カードの上辺にかかるように重ねる
• 黒枠の白カード（card-framed）: 白地に黒2〜3pxの枠を付けたカード。情報はすべてここに載せる
• 金の詳細ボタン（button-primary）: 右端に矢印を置き、下に斜線ストライプの段差を付ける
• 黒の詳細ボタン（button-dark）: 会場カード用の黒ボタン。準備中の会場はグレーにする
• テレビ型会場カード（venue-tv-card）: 上にブラウン管型のラベルで会場名を出し、施設名・赤い日付・ボタンを順に並べる
• プレイガイド別購入ボタン（button-ticket）: ピンク・金・水色のグラデにし、黒枠とストライプの段差、注釈文字を付ける
• 赤のピル型ラベル（label-pill-red）: 購入ボタン群の上に置く誘導ラベル
• 注意事項ボックス（notice-box）: クリーム地に金の見出しを置き、丸い点の付いた箇条書きを並べる
• 料金表（price-table）: 見出しのセルをピンクと淡い青に色分けし、細い黒線で区切る

Do's and Don'ts

Do - 地の色を3種類のレンガ柄で切り替え、場面転換を見せる - 英字見出しは金グラデ＋黒縁で統一する - 情報は黒枠の白カードにまとめる - 日付は赤の太字にする - フレアの光や花びら、小物イラストを境界に散らす

Don't - 金の見出しを白地の上に縁取りなしで置かない - カードの枠を細いグレー線にしない - 影の強いぼかしは使わない - パステル一色の淡いトーンにしない - 明朝体を混ぜない

Page Structure

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

1. ファーストビュー（作品の世界観と周年を一目で伝える）: キャラクターが集合したキービジュアルを全幅で置き、右下にロゴを配置する
2. コンセプト（展覧会の趣旨を伝える）: 赤レンガ地の中央に大きな金の周年数字を置き、白い英字と金の和文、白い本文を中央揃えで並べる
3. 原画スライダー（展示内容をちらりと見せる）: 白い枠の付いた線画を横に流して並べる
4. お知らせ（最新情報を伝える）: 白カードに赤の日付と題名を並べ、項目を細線で区切る
5. SNS（動画やSNSへ誘導する）: 埋め込み動画と黒いSNSボタン
6. メッセージ（原作者の言葉で共感を高める）: 色紙のイラスト、丸型の人物写真、罫線付きの本文、動画を順に並べる
7. 開催概要（会場・会期・料金を示す）: 白レンガ地にカードを置き、赤ラベルと値の定義リストを並べ、キャラクターを添える
8. 巡回会場一覧（全国の会場日程を示す）: テレビ型ラベルのカードを2列のグリッドで並べる
9. チケット（料金と購入方法を示す）: 紺レンガ地にピンクのリード文、料金表、注釈、青い特典ボックス、3色の購入ボタンを並べる
10. 音声ガイド（オプションを案内する）: 白地に金の料金表示、スマホのイラスト、クリーム地の注意事項を並べる
11. みどころ・会場マップ（展示の流れを見せる）: 赤レンガ地に本文と金ボタンを置き、色付きタイルを矢印でつないだマップと会場写真を並べる
12. グッズ（物販を紹介する）: 2列の商品画像に金の三角印と商品名を付け、淡い緑の購入制限ボックスを置く
13. フッター（関連サイトへ誘導する）: 黒地に2列のバナーを並べ、最下部にコピーライト表記を置く

Imagery

• アニメキャラクターの公式イラストを輪郭で切り抜き、カードの端からはみ出させる
• 赤・紺・白のレンガ目地パターンを背景に敷く
• 金色のフレアや光の粒、舞う花びらを散らす
• 作品にゆかりのある小物（眼鏡・腕時計・お守り）のイラストを境界に置く
• 原画の線画を白い枠で並べ、制作の裏側らしさを出す
• 会場の写真は暗い展示空間をスポットライトで照らしたものにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に黒のグローバルナビを横並びで置く
• PC のコンセプトは周年ロゴを左、テキストを右に並べる2列
• お知らせとSNSを PC では横に2列で並べる
• 会場カードは PC で3列にする
• チケット購入ボタンは PC で3つ横に並べ、キャラクターを右に添える
• フッターのバナーは PC で5列

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 行書くと起動時に読み込まれる。