DESIGN.md — 朱赤×ミントのレトロステッカー調イベントLP（Retro Sticker Car Festival Event LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: レトロ、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: レトロアメリカン・ステッカー・不定形ブロブ・朱赤×ミント・フェス感・手描き線
• 地の質感: ミント地に網点のテクスチャ。生成りの紙のような面。印刷ズレ風のステッカーイラストを重ねる
• 形: ゆがんだ不定形ブロブ、朱赤の線で囲んだ角丸カード、正円の写真、旗のように尖ったラベル
• 温度感: 暖かく陽気。夏フェスのような高揚感がある

Colors

• 地はミントと朱赤の帯を交互に敷く。朱赤の帯は告知や駐車券などの重要枠に使う
• 本文は必ず生成りの面（ブロブかカード）にのせる。朱赤やミントの地に直接本文を置かない
• 朱赤は番号、ラベル、カードの枠線、時間枠のボタンにまとめて使う
• 黄色はエントリーなど行動を促すボタンだけに使う
• 受付が終わった項目はグレーで無彩色にする
• 文字は真っ黒にせず、こげ茶を使う
• button-closed は文字 #4D2F23 × 背景 #9E9E9E のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#9F9F9F、4.54:1）を使う。
• slot-button は文字 #E43903 × 背景 #FFF9ED のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D73603、4.53:1）を使う。
• flag-label は文字 #FFF9ED × 背景 #E43903 のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D73603、4.53:1）を使う。

Typography

• 英字の大見出しは極太の丸みのあるディスプレイ体を朱赤で組み、2行に積む
• 番号は01〜07の2桁で、極太の朱赤にする
• 告知ブロブの本文は中央揃えにし、短い行で改行する
• カードの中の本文は左揃えにする
• 大見出しの下には、こげ茶の短いリード文を2行置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは中央の約70%幅のカードの中で、文章と写真を2カラムに並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 企画カードは縦に積み、カード同士の間を32px空ける
• 告知ブロブのまわりに、少し傾けた写真やステッカーを散らす
• ロゴやブースの一覧は3列のグリッドにする
• ナビ用に、正円の写真に番号を付けたインデックスを並べる
• 時間枠のボタンは3列の小さなボタンにする

Elevation & Depth

• 写真の右下に、朱赤のオフセット影（ずらした色ベタ）を付ける
• ステッカーは白い縁取りと軽いドロップシャドウで浮かせる
• カードは影を付けず、朱赤の線で区切る

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形、正円、楕円ブロブ
• セクション境界: 色の帯を直線で切り替える。帯の中に不定形ブロブを置く
• カードは角丸20pxで、2pxの朱赤の線で囲む
• ラベルは朱赤の旗型にし、下か右に尖りを付ける
• 告知面は手で描いたようなゆがんだブロブにする
• ブロブのまわりに手描きの集中線や弧を添える

Components

• エントリーボタン（button-primary）: 黄色のピル型ボタン。こげ茶の太字を2段で入れ、細い枠線で囲む
• 受付終了ボタン（button-closed）: グレーのピル型ボタンで、受付が終わったことを示す
• 時間枠ボタン（slot-button）: 小さな角丸ボタン。朱赤の枠線と文字で、右端に丸い矢印アイコンを付ける
• 旗型ラベル（flag-label）: 朱赤の旗型。中に白い英字を入れ、ブースや企画名に使う
• 企画カード（event-card）: 生成りの面を朱赤の線で囲んだ角丸カード。左上に大きな番号を置き、右に写真を並べる
• 告知ブロブ（blob-panel）: 生成りの不定形な面。中央揃えの見出し、日時、本文を入れる
• 丸写真インデックス（circle-index）: 朱赤の縁で囲んだ正円の写真。上に番号を置き、下に矢印を付ける
• 吹き出し（speech-bubble）: ミントの吹き出しで、対象者向けの補足を短く添える
• 初出展バッジ（badge-new）: 黄色の丸いバッジ。ロゴの右上に重ねる

Do's and Don'ts

Do - ミントと朱赤の帯を交互に置いて、リズムを作る - 写真は角丸か正円に切り抜き、朱赤のオフセット影を付ける - ステッカー風のイラストを余白に少し傾けて散らす - 番号付きのカードで企画を順に見せる - 旗型ラベルで、カードの中をグループに分ける

Don't - 純白や純黒を使わない（生成りとこげ茶を使う） - 冷たい青やネオンの色を足さない - 直角の箱や細い明朝体で、堅い印象にしない - 黄色をボタン以外に多用しない - 本文を朱赤の地に直接置かない

Page Structure

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

1. ファーストビュー（イベントの世界観を一目で伝える）: 網点のミント地にステッカーをコラージュし、中央に大きな筆記体ロゴを置く
2. 開催告知（日時、会場、趣旨を伝える）: 朱赤の帯に生成りのブロブを置き、中央揃えの文章と散らした写真、動画の埋め込みを入れる
3. 出展者募集（サブ企画の募集を案内する）: ミント地に生成りのブロブを置く。円形のロゴバッジを添え、受付終了ボタンを付ける
4. 駐車券の抽選（エントリーを促す）: 朱赤の帯にブロブを置き、黄色のエントリーボタンを強調する
5. 企画インデックス（企画の全体像を見せ、各企画へ移動させる）: 英字の大見出しの下に、番号付きの丸写真を4つと3つの2段で並べる
6. 企画の詳細（各企画の内容を説明する）: 番号付きの角丸カードを縦に積む。マップのイラスト、ロゴグリッド、時間枠ボタン、出演者紹介を入れる
7. グッズと新製品（限定グッズと新製品を見せる）: カードの中に、グッズ画像や大きなイラストを全幅で置く
8. 駐車券の案内CTA（対象者別に申込先へ誘導する）: 朱赤の帯に、グレーのブロブ型ボタンを2つ並べ、上に吹き出しを付ける
9. 注意事項（抽選のルールを伝える）: 生成りの角丸カードに、行頭記号付きの箇条書きを並べる。重要な行は朱赤にする
10. フッター（サイト内のリンクを置く）: チャコールの地に小さな文字でリンクを並べる

Imagery

• クルマのイラストは、緑と朱赤の2色刷りのステッカー風にし、白い縁を付ける
• 写真は屋外イベントの明るい自然光で撮る。人の笑顔やクルマの列を写す
• 絵本のような手描きの家並みマップで、会場の配置を見せる
• ペナントやモーテルの看板など、アメリカンレトロのモチーフを使う
• 手描きの弧、集中線、点を飾りとして添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPではカードの中の2カラムを1カラムにし、写真を文章の上に置く
• 丸写真インデックスは、SPでは2列か3列に折り返す
• ロゴグリッドは、PCの3列からSPでは2列にする
• SPでもブロブの形は保つ。まわりの写真は数を減らして小さくする
• SPのカードは画面幅の92%程度にする

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