DESIGN.md — 青紫×黄色のレトロアニメ風イベント LP（Retro Anime Pop Exhibition Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、レトロ、力強い・インパクト、かわいい
• キーワード: 昭和レトロアニメ・ステッカー散らし・極太ドロップシャドウ見出し・青紫ストライプ帯・年代タイムライン
• 地の質感: ベタ塗りのフラットなイラストと太い黒い輪郭線。青紫の帯にうすい斜めストライプが入る。
• 形: 角丸の大きいカード、太い紺の枠線と下にずらした影。ボタンはピル型。
• 温度感: 高彩度の寒色（青紫）に暖色（黄・ピンク・赤）をぶつけた、にぎやかで熱い印象

Colors

• 白地と青紫ストライプ帯を交互に置き、セクションのリズムを作る
• 青紫地の見出しは黄色文字に濃紺の影、白地の見出しは青紫〜黄色文字に濃紺の影
• 赤は購入・詳細などの主ボタンだけに使う
• 年代ごとにピンク・青・黄のカード色を割り当て、時間軸の帯も同じ色にする
• 本文は濃紺。純黒は輪郭線以外ではほとんど使わない
• パステルのグラデーションはデータ・ランキングの枠だけに使う

Typography

• 見出しは極太にし、濃紺の影を右下に 2〜3px ずらして重ねる
• 見出しは 1 文字ごとに大小をつけたり、少し傾けて弾ませてよい
• セクション見出しの下に小さな英字ラベルを置く
• 本文も太め（700）で、白地では中央か左揃えにする
• 番号は丸みのある極太の欧文数字で、見出しの上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は画像とテキストの 2 カラムを左右交互に置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 楽しみ方の目次は 4 つの濃紺カードを横に並べる（SP は 2×2）
• 各特長セクションは番号＋大見出し＋短い区切り線＋2〜3 行の説明
• 年代カードは縦に積み、右端に色の違う時間軸の帯を置く
• 情報表は左にラベル、右に内容。細い線で区切る
• 余白にステッカー風の小物イラストを散らし、ブロックの端にかぶせる

Elevation & Depth

• カードとボタンはぼかしなしの濃紺のベタ影を 3〜4px 下にずらす
• ぼかしのあるドロップシャドウは使わない
• イラストやステッカーは白いフチと黒い輪郭線で浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形かフチなしの横長カルーセル。イラストは切り抜いて重ねる
• セクション境界: 青紫の帯は上の角を大きく丸めて白地にかぶせる。番号タブが境界線の上に乗る
• 枠線は濃紺の 2〜3px
• 年代カードは左上に斜めのラベルタブを付ける
• SNS ボタンは白いピル型に濃紺の枠とベタ影
• 吹き出しや集中線の形をイラストの背景に使う

Components

• 赤いピル型 CTA（button-primary）: 赤地に白文字、右向き矢印付き。濃紺のベタ影
• 影付き極太見出し（heading-drop）: 黄色か青紫の極太文字に濃紺の影。下に英字ラベル
• 楽しみ方の目次カード（nav-card）: 上に番号タブ、濃紺地に白文字、下に二重矢印。4枚並べる
• セクション番号（number-tab）: 01〜04 の極太数字を境界線の上に乗せる
• 年代カード（era-card）: 年代ごとの色の地、斜めラベルタブ、中央に年代名と開始年、本文
• 紹介カード（intro-card）: ストライプ帯の上の白カード。水色の太枠と濃紺の影、周りにステッカー
• 概要表（info-table）: ラベル列と内容列。細い区切り線
• ランキングパネル（ranking-panel）: パステルグラデ枠の中に白カード。番号丸付きの横長行を 5 つ並べる
• SNS シェアボタン（sns-button）: 白いピル型にアイコンを中央配置。濃紺の枠とベタ影

Do's and Don'ts

Do - 見出しには必ず濃紺のベタ影を付ける - 白地と青紫ストライプ帯を交互に置く - 余白にレトロな小物ステッカー（カセット・ゲーム機・レコードなど）を散らす - 年代やテーマごとに色を固定する - 主 CTA は赤のピル型にそろえる

Don't - ぼかし影やグラデーションの見出しは使わない - 細い明朝体や低彩度の落ち着いた配色にしない - 写真ばかりで組まない。イラストを主役にする - 赤を装飾に多用して CTA を埋もれさせない - 本文を細字（300 以下）にしない

Page Structure

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

1. ファーストビュー（イベント名・日程・会場を一目で伝える）: 白地の中央にキャラクター3人と小物を放射状に配置。極太ロゴ、日程のピル、無料バッジを置く
2. イベント紹介（コンセプトを説明する）: 青紫ストライプ帯の上に太枠の白カード。中央揃えの本文、周りにステッカー
3. 楽しみ方の目次（4つの体験に誘導する）: 手書き風の小見出し＋影付き見出し、4枚の番号付き濃紺カード
4. 特長1：歴史展示（展示内容を見せる）: 白地。左に大見出しと説明、右に会場写真のカルーセル
5. 特長2：撮影スポット（写真映えを訴求する）: 青紫帯。左に集中線背景のイラスト、右に黄色の見出し
6. 特長3：年代別アイテム（時代ごとの魅力を伝える）: 白地。左に見出しとサブボタン、右に年代カードの縦タイムライン
7. 特長4：コスプレ体験（体験ブースを訴求する）: 青紫帯。英字の掛け声を添えたイラストと黄色の見出し
8. キャンペーン（SNS 投稿キャンペーンへの参加を促す）: 写真バナーと黄色の帯。帯に応募期限と赤い CTA
9. 概要・アクセス（日時・料金・会場を伝える）: 線で区切った 2 列の表と地図
10. データ紹介（関連データで信頼と興味を高める）: リード文とパステル枠のランキングパネル 2 つ
11. SNSシェア（拡散を促す）: 青紫の帯に白いピル型の SNS ボタンを 3 つ
12. フッター（アプリへの誘導と表記）: ロゴ、赤地のアプリダウンロードバナー、注釈、著作権表記

Imagery

• 80〜90年代アニメ風の大きな瞳のキャラクターを、太い輪郭線とベタ塗りで描く
• カセット・レコード・ゲーム機・ポスター・ペンライトなどの小物を、白フチ付きのステッカー風にする
• 集中線・ギザギザの吹き出し・星やキラキラの線を背景の飾りにする
• 写真は会場のにぎわいがわかる横長のカット
• イラストは少し傾けて、ブロックの外へはみ出させる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は特長セクションを画像とテキストの 2 カラムで左右交互に置く。SP は縦に積み、見出しを先に出す
• 目次カードは PC で 4 列、SP で 2×2
• 年代タイムラインは SP では全幅のカードにし、右端の帯は細くする
• ステッカーは SP では数を減らし、小さくする
• ランキングの 2 列は SP では縦に積む

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