DESIGN.md — 真紅×白のポップな展示イベントLP（Vivid Red Pop Exhibition Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、シンプル・ミニマル
• キーワード: 純赤・白地・太丸ディスプレイ書体・明朝本文・ゆるイラスト・ピルボタン
• 地の質感: フラットな単色の面。グラデーションや影は使わない。
• 形: ピル型ボタン、円形の切り抜き写真、角丸なしの正方形サムネイル
• 温度感: 高彩度の赤で熱量が高い。白の余白で軽く見せる。

Colors

• 地は白。導入文のセクションだけ全面を赤で塗る。
• 見出しは赤一色で、太い書体で組む。
• 主CTAは赤のピル型にする。サブCTAは白地に赤枠のピル型にする。
• 写真の背景は淡いグレーか水色寄りの白で揃える。
• 赤以外の有彩色はイラストや協賛ロゴの中だけで使う。
• 写真の帯の上端に、赤い細帯を区切り線として入れる。
• button-primary は文字 #FFFFFF × 背景 #FD0202 のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EE0202、4.52:1）を使う。
• red-intro は文字 #FFFFFF × 背景 #FF0101 のコントラスト比が 3.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EE0000、4.53:1）を使う。
• floating-ticket は文字 #FFFFFF × 背景 #FB8D8D のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#EC0808、4.56:1）を使う。
• menu-button は文字 #FFFFFF × 背景 #FF0101 のコントラスト比が 3.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EE0000、4.53:1）を使う。

Typography

• 見出しは太い丸みのディスプレイ書体にし、字間を広く取る。
• 本文とボタンは明朝体にして、ポップな見出しと対比させる。
• タイトルは2〜3行に改行して中央揃えで積む。
• 本文は左揃えにする。短い説明文は中央揃えにする。
• 日付は欧文セリフ体で大きく組む。曜日は小さい括弧で添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サムネイルは 2 カラム
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• 要素は中央揃えを基本にする。
• 写真の帯は画面幅いっぱいに置く。
• セクションの間に広い白余白を取る。
• CTAボタンは幅の75%前後で縦に並べる。上に小さな補足ラベルを置く。
• サムネイルは正方形で2列に並べる。下に中央揃えのキャプションを付ける。

Elevation & Depth

• 影は使わず、完全にフラットにする。
• 面の区切りは色の切り替えだけで表す。
• 追従ボタンは半透明のピンクの円にする。

Shapes

• 角丸: 小 0px ／ 中 20px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 人物写真は円形か全幅で切る。サムネイルは角丸なしの正方形にする。
• セクション境界: 直線で切り替える。写真の帯の上に赤い細帯を入れる。
• ボタンはすべてピル型にする。
• 人物のポートレートは大きな円で切り抜く。
• キラキラ記号や放射線をタイトルの装飾に使う。

Components

• 主CTAピルボタン（button-primary）: 赤い面に白い明朝体の文字を載せたピル型ボタン。
• 枠線ボタン（button-outline）: 白地に赤の細い枠線を引いたピル型のサブボタン。
• ボタン上ラベル（cta-label）: ボタンの直上に置く、赤い小さな補足文字。
• 赤ディスプレイ見出し（heading-display）: 太い丸み書体の赤文字。字間を広げて中央に置く。
• 赤地の導入セクション（red-intro）: 全面を赤で塗り、白文字でタイトル・会期・本文を載せる。下に円形の人物写真とサインを置く。
• サムネイルグリッド（thumb-grid）: 正方形画像を2列に並べ、下に中央揃えのキャプションを付ける。
• 追従チケットボタン（floating-ticket）: 右下に固定する半透明ピンクの円。中に白い丸ゴシックの文字を入れる。
• ハンバーガーメニュー（menu-button）: 右上に固定する赤い正方形。中に白い三本線を入れる。

Do's and Don'ts

Do - 見出しは赤のディスプレイ書体で統一する。 - 本文は明朝体で落ち着かせる。 - 白い余白を広く取り、赤を際立たせる。 - CTAはページの中で2回以上出す。 - ゆるい手描きキャラクターを添えて親しみを出す。

Don't - 赤以外の強い色をUIに使わない。 - 影やグラデーションを付けない。 - 角張った四角いボタンにしない。 - 本文をディスプレイ書体で組まない。 - セクション間の余白を詰めすぎない。

Page Structure

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

1. ファーストビュー（イベントの世界観とタイトルを一目で伝える）: 淡いグレー地に人物写真を置く。上部に赤いロゴ見出しとイラストを重ね、下にハッシュタグを入れる。
2. 導入メッセージ（会場・会期と開催の想いを伝える）: 全面を赤で塗り、白文字で組む。下に円形の人物写真と手書きサインを置く。
3. 料金・会期とCTA（料金を示し、チケット購入へ誘導する）: 白地に赤見出しと明朝の料金表を置く。大きな日付の下に、枠線ボタンと赤ボタンを縦に並べる。
4. ビジュアル帯（雰囲気を切り替える）: 全幅の人物写真に、黒い太いハッシュ記号を重ねる。
5. 展示内容（展示コーナーを紹介する）: 赤見出し、サブ見出し、本文の下に、正方形サムネイルを2列で並べる。
6. イベント告知（毎日のイベントを訴求し、予約へ誘導する）: 赤い細帯付きの全幅写真の下に、大きな赤見出し、説明、赤ボタン2つを置く。
7. アクセス（会場の場所を示す）: 赤見出しの下に全幅の地図を置き、住所と最寄り駅を明朝体で中央揃えにする。
8. 協賛一覧（協賛企業を示して信頼感を出す）: 赤ロゴ見出しの下に、企業ロゴを2列のグリッドで並べる。

Imagery

• 人物写真は淡いグレー背景のスタジオで撮った明るいポートレートにする。
• 服や小物に赤を差し色として入れる。
• ゆるい手描きのキャラクターイラストを見出しに添える。
• キラキラ記号や放射線を装飾に使う。
• 会場の様子は実写写真で臨場感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せの狭めの幅で、SPの構成をほぼ保つ。
• PCの導入セクションは、本文と円形写真を左右2カラムに並べる。
• PCのCTAボタンは横に3つ並べる。
• PCのサムネイルは3列、協賛ロゴは6列にする。
• PCではハッシュタグを左端に縦書きで固定する。

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