DESIGN.md — 生成り地×多色エリア色のイベント告知 LP（Colorful Illustrated Community Festival LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、ナチュラル
• キーワード: マルシェ・フラットイラスト・エリア色分け・番号付きグリッド・ガーランド・生成り
• 地の質感: フラットな単色面と、紙のように柔らかい生成り地。グラデーションは使わない
• 形: 角丸の白パネル、ピル型ボタン、黒い四角の番号バッジ、雲形の吹き出し
• 温度感: 温かく明るい。昼の屋外イベントの雰囲気

Colors

• エリアごとに背景色を固定する（緑・橙・黄・青・紺）。マップとボタンも同じ色で揃える
• 色地の上には白い角丸パネルを置き、中身は白地で読ませる
• 強調語は見出しの一部だけをオレンジ文字にする
• 生成りは導入、イベント情報、プレゼント、フッター周りに使う
• 番号バッジは黒地に白数字で統一する
• エリア色のボタンでは白文字、黄色のボタンだけは白文字か紺文字にする

Typography

• 見出しは極太のゴシックにし、英字の小見出しを上に添える
• セクション見出しは英字の大文字で中央揃えにし、字間を広く取る
• 本文は中央揃えで短く改行する
• 数字や時刻は細めのコンデンス系欧文で組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。出展カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 色地の上に白パネルを置き、パネルの左右に 4% ほどの余白を残す
• パネルの上部はイラストと見出しと番号を中央にまとめる
• 出展カードは罫線で区切ったグリッドにし、左上に番号バッジを置く
• タイムテーブルは時刻を横に並べ、SP では横スクロールにする
• イベント概要は、生成りのラベル帯と情報を縦に積む

Elevation & Depth

• 影はほぼ使わず、フラットな面で構成する
• 白パネルは色地とのコントラストだけで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸 4〜8px の長方形。導入部では写真を 2 枚ずらして重ねる
• セクション境界: 直線で背景色を切り替える。フッターは丘のような弧の形
• エリアボタンは横長のピル型にし、右端に▼を付ける
• 番号バッジは角丸なしの黒い四角
• 吹き出しは雲形やモコモコの形にする

Components

• エリア別ピルボタン（area-button）: エリア色で塗った横長のピル型ボタン。2 行の白文字で、右端に▼を付ける
• 予約ボタン（button-primary）: 紺のピル型で、右端に▶を付ける
• 番号バッジ（number-badge）: 黒い四角に白数字。カードの左上や見出しの右に置く
• 出展者カード（exhibitor-card）: 写真、ロゴ、社名、太字タイトル、説明を縦に積む。罫線で区切ったグリッドに並べる
• エリアパネル（section-panel）: 色地の上に置く白い角丸パネル。上部に屋台イラスト、英字の小見出し、エリア名、番号を並べる
• 雲形の吹き出し（speech-bubble）: オレンジや緑の雲形に白文字。写真に重ねる
• カテゴリアイコン（category-icon）: 紺の角丸四角に白い線画アイコン。体験・買う・食べるなどを示す
• タイムテーブル（timetable）: 紺の見出し帯の下に、時刻と出演者を縦組みのセルで並べる
• 情報ラベル帯（info-label）: 生成りの角丸帯に太字の項目名。下に詳細を書く

Do's and Don'ts

Do - エリアごとの色を、背景・ボタン・マップで一貫させる - フラットな手描き風イラストで、人と街の賑わいを描く - 出展者には必ず番号を振り、マップと対応させる - 写真は角丸にし、ガーランドなどの装飾を添える - 見出しは極太の和文に、英字の小見出しを添える

Don't - グラデーションや強い影を使わない - エリア色を他の用途に流用しない - 明朝体や細い書体で見出しを組まない - 暗い背景のセクションを作らない - 写真だけを並べて、イラストのない無機質な構成にしない

Page Structure

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

1. ファーストビュー（イベント名と日時・会場を伝える）: 緑の丘と街並み、人物のフラットイラストを置き、中央に手書き風のロゴと日時を載せる
2. 導入（イベントのコンセプトを伝える）: 一部をオレンジにした見出しと中央揃えの文章を置き、ガーランドと重ねた写真 2 枚と吹き出しを添える
3. イベント情報・マップ（会場の構成とエリアへ誘導する）: 生成り地に、番号付きの会場マップとカテゴリアイコン、エリア色のピルボタンを縦に並べる
4. 物販・グルメ（出展者を一覧で見せる）: 生成り地の白パネルに、番号付きの出展者カードをグリッドで並べる
5. プロの実演（実演の内容と時間を伝える）: オレンジ地の白パネルに、カードグリッドとタイムテーブルを置く
6. 音楽ステージ（出演者を紹介する）: 黄色地に、3 列の出演者カードと 2 日分のタイムテーブルを置く
7. セレクション展示（特設コーナーを告知する）: 緑地の白パネルに、準備中の表示を置く
8. ワークショップ（予約制の体験へ誘導する）: 青地の白パネルに、写真付きのカード 1 枚、日時の生成りボックス、紺の予約ボタンを置く
9. プレゼント企画（SNS 投稿を促す）: 生成り地に写真を重ね、ハッシュタグの吹き出しと、緑の枠に入れた SNS ボタンを置く
10. 開催概要（日時・会場・アクセスを伝える）: 左に生成りのラベル帯で情報、右にモノクロの線画地図を置く
11. 注意事項（来場時の注意を伝える）: 黒い枠の角丸ボックスに箇条書きを入れる
12. フッター（主催者を示して締める）: 主催者のロゴの下に、緑の丘と街並みのイラストを置く

Imagery

• 人物や屋台、建物を、線のないフラットな手描き風イラストで描く
• 写真は昼間の屋外で、子どもや家族が体験している明るいスナップにする
• 三角旗のガーランドや雲、鳥、風船を、写真の周りに散らす
• 商品写真は自然光の俯瞰か物撮りにする
• 地図は白黒の線画にし、目的地だけ黄色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では出展者グリッドを 4 列から 2 列にする
• マップとエリアボタンは 2 カラムから縦積みにする
• タイムテーブルは横スクロールにする
• 開催概要と地図は縦に積む
• PC のグローバルナビは、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 行書くと起動時に読み込まれる。