DESIGN.md — 芝生×ブルーのポップなアウトドアイベントLP（Pop Street-Art Outdoor Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、ナチュラル、情報量多め・訴求型
• キーワード: 野外イベント・ストリートアート・芝生・ロゴウォール・かすれ極太英字・ドット柄
• 地の質感: 芝生写真とかすれた版画風の見出し文字、細かいミント色ドット地。写真とフラットなイラストを混ぜる
• 形: 円形バッジ型のエリアアイコン、角丸の大きな写真枠、白い四角のロゴタイル
• 温度感: 明るく陽気な春の屋外。青と緑で爽やか、黄色で元気さを出す

Colors

• 地は白を基本に、エリア紹介周辺はミント色の細かいドット柄で変化をつける
• ヘッダー・フッター・主ボタンはラベンダーブルー1色で統一する
• セクション見出しは濃紺のかすれ極太英字で、色は変えない
• 出展ブランドは芝生写真の上に白タイルを敷き詰め、緑の面積で野外感を出す
• 注意喚起ボックスは淡ミントか淡ブルーの面に、見出しだけ濃い同系色を使う
• 黄色はメインビジュアルとEXHIBITORS見出しなどイラスト系に限定する
• button-primary は文字 #F6FDFE × 背景 #5973D4 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#536ED2、4.5:1）を使う。
• header-bar は文字 #F6FDFE × 背景 #5973D4 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#536ED2、4.5:1）を使う。

Typography

• 英字見出しはすべて大文字の極太・かすれ質感、中央揃え
• 日本語の見出しは太字ゴシックにし、装飾はアイコンを添える程度に抑える
• 本文は13px前後・行間1.8で読みやすく
• 開催概要は小さめの項目名ラベルと値の2列の表にする
• 芝生や写真の上の文字は白の太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴは 5 列、エリアアイコンは 3 列、交通案内は 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション間に横長の会場写真コラージュ帯を挟む
• ロゴタイルは隙間4px程度で敷き詰める
• 注意ボックスは左右に余白を取り幅80%程度
• 支援団体はランク別に大きさを変えて1〜3列に並べる
• マスコットイラストを角に配置しセクションをまたがせる

Elevation & Depth

• 影はほぼ使わず平面的に構成する
• 主ボタンに下方向の濃い影を少しつけ立体感を出す
• SNSボタンは白枠と影でカード状に浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 導入写真は角丸の大きいスーパー楕円風、エリアアイコンは正円、ロゴは正方形に近い白タイル
• セクション境界: 直線で切り替え、写真コラージュ帯で区切る
• ボタンとボックスは角丸4〜8pxの控えめな角丸
• エリア紹介は太い濃紺の輪郭線を持つ円バッジ
• アクセス見出しの裏にミントの帯を斜めずらしで配置

Components

• 来場案内ボタン（button-primary）: 情報アイコン付きの2行テキストボタン。下に濃い影
• かすれ英字見出し（heading-grunge）: 濃紺の極太大文字英字を中央に大きく置く
• ブランドロゴタイル（logo-tile）: 芝生背景の上の白い四角にロゴを中央配置
• エリア円バッジ（area-badge）: 青と黄色のイラストを濃紺の太線円で囲み、斜めの英字ラベルを添える
• お知らせボックス（notice-box）: 淡色面に情報アイコン付き見出しと中央揃え本文
• 交通手段ラベル（transport-label）: 濃紺の帯に白文字と乗り物アイコン、下に箇条書き
• 開催概要表（event-info-table）: 日時・会場・料金・主催などを項目名と値の2列で並べる
• SNS・公式サイトカード（sns-card）: 白カードとインスタ風グラデーションのカードを横並び
• 固定ヘッダー（header-bar）: 青地に中央イベント名、右にハンバーガー

Do's and Don'ts

Do - 見出しは英字の極太かすれ書体で統一する - ブランドや出展者はロゴタイルの格子で量を見せる - セクション間に会場写真の横長コラージュ帯を入れる - マスコットキャラクターを要所の角に配置して楽しさを出す - 注意事項はアイコン付きの淡色ボックスにまとめる

Don't - 見出しを細い明朝や上品な書体にしない - 原色を多用して面を塗り分けすぎない（青・緑・黄に絞る） - ロゴタイルに角丸や影をつけて装飾しない - 本文を色付き文字や大きな文字にしない - 写真の上に読みにくい細字を置かない

Page Structure

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

1. ファーストビュー（イベント名・日時・会場を一目で伝える）: 会場写真の上にイラストのキービジュアルと大きな日付、入場無料の丸バッジ
2. イベント紹介（開催内容を短く紹介）: 太い縁取りの黄色文字コピーと角丸写真、下に本文2段落
3. 開催概要（日時・場所・主催など基本情報）: 中央英字見出しの下に2列の概要表と来場案内ボタン
4. 出展者一覧（出展ブランドの多さを見せる）: 芝生写真背景に黄色の英字見出しと白抜き説明文、5列の白ロゴタイル
5. 特別コンテンツ（企画の告知）: 白地に濃紺英字見出しと準備中テキスト
6. エリアマップ（会場配置と注意事項）: ドット柄地にマップ枠と淡ミントのお知らせボックス
7. コンテンツ一覧（エリアの種類を紹介）: 3列×3段のイラスト円バッジ
8. アクセス（行き方を案内）: 見出し裏のミント帯、地図埋め込み、電車・車の2列ラベルと箇条書き、淡ブルーの会場注意ボックス
9. ビジュアル制作者紹介（アートワークの作者を紹介）: 左にロゴ、右に名前とプロフィール、SNSの枠線ボタン
10. 支援団体（主催・協賛を示す）: 暗めの会場写真背景に罫線付き見出し、ランク別サイズの白ロゴ枠
11. フッター（公式リンクと問い合わせ）: 青地に公式サイト・SNSカード、電話番号を大きく、TOPへ戻るマスコット

Imagery

• メインビジュアルはストリートアート調のポップイラスト。太い黒線、青・黄・緑のフラット配色
• キャラクターは車を擬人化したような手描き風マスコットを要所に置く
• 会場写真は明るい昼の屋外で、テント・ギア・人の賑わいを横長に並べる
• エリアアイコンは青系と黄の2〜3色で描いた線画を円で囲む
• 背景用に芝生の接写写真と、ミントの細かいドット柄を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに英字＋日本語小文字の2段ナビを横並びにする
• PC のイベント紹介は左にコピーと本文、右に写真の2カラム
• PC の出展ロゴは7列に増やし、見出しと説明文を左右に分ける
• エリアバッジは PC でも3列のまま中央に寄せ幅を絞る
• 交通案内・地図は 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 行書くと起動時に読み込まれる。