DESIGN.md — 原色グラフィックの音楽フェス LP（Bold Pop Graphic Music Festival LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、レトロ、クール・先進的
• キーワード: 原色パッチワーク・極太欧文・抽象グラフィック・ストリート・街のお祭り
• 地の質感: フラットなベタ塗り。グラデーションや影は使わず、版画やシルクスクリーンのような平面的な質感。
• 形: 矩形ブロックを敷き詰めて、うずまき・楕円・人型シルエットを切り絵風に配置する。角丸はほぼ使わない。
• 温度感: 暖色寄り。朱と黄土が熱量を出し、青と緑で抜けをつくる。

Colors

• 地は白か薄グレーにして、色は大きなグラフィック面にまとめて使う。
• 朱・緑・黄土・青・黒の 5 色をパッチワークで隣り合わせ、同じ色が隣に並ばないようにする。
• セクションごとに 1 色を主役にする（チケットは黄土、アクセスは青）。
• イベントカードの左端の色帯でカテゴリを色分けする。
• ボタンは黒地に白文字に統一する。完売など無効の状態はグレーにする。
• 有料・無料のバッジは朱と青で塗り分ける。
• price-badge は文字 #E5E5E5 × 背景 #E74516 のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BB3812、4.52:1）を使う。

Typography

• セクション見出しは極太の欧文大文字 1 語だけにし、中央に大きく置く。
• 数字（日付・時刻・価格）は太い幾何学的なサンセリフで目立たせる。
• 本文は左揃えにして、短い行で区切る。
• 日時・会場などのラベルは角括弧で囲んだ小さな文字にし、その下に値を太字で置く。
• ロゴ風の文字列を上下反転させて繰り返すテキスト帯を、区切りに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• グラフィック帯とテキスト帯は画面幅いっぱいに敷く。
• イベントカードは左端に約 15px の色帯をつけ、全幅で積み重ねる。
• アーティストは「アイコン帯→写真→色帯の情報欄」を 1 セットにして繰り返す。
• アクセスのカードは色付きの柄の上に白い箱で置く。
• セクションの間は余白より色面の切り替えで区切る。

Elevation & Depth

• 影は一切使わない。
• 重なりは色面のコントラストと細い枠線だけで表す。
• 白いカードは柄の背景の上に置き、1px の色線で囲む。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は全幅の矩形。円形のフレームや大きな楕円を使うこともある。
• セクション境界: 直線で色面を切り替える。背景に大きな曲線の模様を敷く。
• ボタン・カード・バッジはすべて角を立てる。
• 曲線はグラフィックの模様（うずまき・楕円・波）だけに使う。
• 完売表示は楕円形のグレーの面で例外的に表す。

Components

• ヘッダーのチケットボタン（header-ticket-button）: 右上に固定する黄土色の矩形ボタン。極太の欧文で書く。
• 原色パッチワーク帯（graphic-patchwork）: 矩形のタイルに、人型・レコード・うずまきなどのモチーフを並べる。グレーの細帯でテーマ語を挟む。
• イベントカード（event-card）: 上にグラフィック、下に薄グレー地で名称・バッジ・説明・日時・会場を置く。左端に色帯をつける。
• 有料・無料バッジ（price-badge）: 小さな矩形のバッジに白い太字。有料は朱、無料は青。
• 黒の全幅ボタン（button-black）: プロフィールや詳細へ進む黒い矩形ボタン。文字は白で中央揃え。
• アーティスト情報欄（artist-panel）: 色面に名前と黒丸の SNS アイコンを並べ、下に黒ボタンを置く。
• ロゴ反復帯（logo-ticker）: ロゴ風の文字列を正位置と上下反転で交互に繰り返すモノクロの帯。
• チケット情報枠（ticket-box）: 黄土地の上に細い淡色線で囲んだ枠。販売区分ごとに区切り線を入れる。

Do's and Don'ts

Do - 原色 5 色と黒・白だけで構成する。 - 見出しは極太の欧文で、大きく短くする。 - 情報はラベルと値の組で整理する。 - モチーフは平面のシルエットにして繰り返す。 - セクションごとに地の色を変えてリズムをつくる。

Don't - グラデーション・影・角丸ボタンを使わない。 - パステル調や彩度の低い色を混ぜない。 - 細い明朝体や手書きの書体を使わない。 - グラフィックの上に長い本文を重ねない。 - リアルなイラストや写真素材を装飾に使わない。

Page Structure

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

1. ヘッダー（ロゴ・メニュー・チケットへの導線を示す）: 白地の左にロゴ、中央に丸いメニューボタン、右に黄土色のボタンを置く。
2. ファーストビュー（イベント名と開催日でインパクトを出す）: 極太のロゴと日付を置き、下に原色パッチワークのグラフィックを全幅で敷き詰める。
3. コンセプト（イベントの趣旨を伝える）: 白地に大きな欧文見出しを置き、短い行の本文を段落ごとに並べる。
4. プログラム（各イベントの内容と日時を示す）: 左に色帯のあるカードを縦に積む。上にグラフィック、下に情報を置く。
5. 出演者（出演者を紹介する）: 柄の背景に見出しを置き、黒帯のアイコン→写真→色面の情報欄を繰り返す。
6. ロゴ帯（区切りとブランドの印象づけ）: ロゴ文字列を反転させながら繰り返すモノクロの帯にする。
7. チケット（価格と販売スケジュールを伝える）: 黄土地に淡黄の波模様を敷き、大見出し・大きな価格・枠囲みの情報・楕円のボタンを並べる。
8. アクセス（会場の場所を案内する）: 青と白の柄の背景に白いカードを置き、住所・黒ボタン・地図を入れる。
9. 主催・協力（背景となる取り組みを示す）: 白地に黒いバナー画像を置き、下に説明文を添える。
10. フッター（SNS とリンクを置く）: パッチワークとロゴ帯で締めたあと、黒地に白い丸アイコンとリンクを並べる。

Imagery

• 人型・レコード・うずまき・楕円などを、切り絵風のベタ塗りシルエットで描く。
• 1 タイルに 1 モチーフを 3〜4 個並べ、色の組み合わせを変えながら敷き詰める。
• 人物写真は明るいスタジオか自然光で撮った全身・半身の写真を全幅で使う。
• 背景には大きな有機曲線の柄を 2 色で入れる（白とグレー、黄土と淡黄、青と白）。
• SNS アイコンは黒丸に白い線画で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はパッチワークを横に広げ、タイルの数を増やす。
• PC はイベントカードを 2 カラムに並べてもよい。
• 本文の幅は PC で最大 720px 程度に抑える。
• 見出しは PC で 120px 前後まで拡大する。
• 出演者は 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 行書くと起動時に読み込まれる。