DESIGN.md — ティール×辛子の市松柄お笑いライブLP（Retro Checker Teal & Mustard Live Tour LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、ポップ・元気、情報量多め・訴求型
• キーワード: 市松柄・黒太枠・ずらし影・ティール×辛子・セリフ見出し・タイムライン
• 地の質感: フラットなベタ塗り。黒の太線と、ずらしたベタ影でシルク印刷のような手触りを出す
• 形: 角が直角のカードと、角丸小さめのボタン。どちらも黒の2px枠と右下のずらし影を付ける
• 温度感: 生成りとクリーム色で温かい。ティールで爽やかさを足す

Colors

• 地は生成りにし、日程セクションだけクリームとセージの市松柄にする
• ティールと辛子色をカードごとに交互に割り当て、リズムを作る
• 枠線と影はすべて墨黒で統一する
• グッズのような区切りセクションはティールの全面ベタにする
• 赤は重要な注意文だけに使う

Typography

• セクション見出しは大きな英字セリフにし、下に小さな和文サブを添える
• 見出しの左右に線画アイコンを対で置き、左をティール、右を辛子色にする
• 日付は数字を大きく、曜日を小さい大文字にする
• 本文は太めのゴシックで、小さくても潰れないようにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。日程カードは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• カード同士は 12〜16px 空ける
• 販売スケジュールは左に縦線と丸ノードを置くタイムライン型にする
• カード内は日付→区切り線→バッジ→会場→詳細→ボタンの順に並べる
• ボタンはカードの最下部に全幅で置く

Elevation & Depth

• ぼかし影は使わず、墨黒のベタ影を右下へ 4〜6px ずらす
• カードとボタンには黒 2px の枠線を付ける
• 見出しの枠も同じ太枠＋ずらし影にする

Shapes

• 角丸: 小 3px ／ 中 8px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は角版、または背景を抜いた切り抜き
• セクション境界: 直線で切り替え、境界に黒の細線を入れる
• カードは角丸なしの直角
• ボタンは角丸 8px で、枠とずらし影を付ける
• 県名や期間のバッジは角丸 3〜10px の小さいベタ

Components

• 固定ヘッダー（header-bar）: 濃色の帯に英字ナビを並べ、右端に辛子色のピル型購入ボタンを置く
• 枠付きセクション見出し（section-title-box）: 白い箱に黒の太枠とずらし影を付け、大きな英字セリフと左右のアイコンを入れる
• 公演日程カード（schedule-card）: 白カードに日付、県名バッジ、会場名リンク、時刻、主催、ボタンを入れる。色は交互に変える
• ティールボタン（button-primary）: 白い太字の文字に黒枠とずらし影を付け、外部リンクのアイコンを添える
• 辛子色ボタン（button-secondary）: 墨黒の文字を載せた辛子色のボタン。形はティールボタンと同じ
• 県名・期間バッジ（pref-badge）: 小さな角丸のベタ地に白字で、ラベルを短く入れる
• タイムライン丸ノード（timeline-node）: 縦の黒線上に、黒枠付きの色丸を置く。各ステージのカードがここに連なる
• 券種と価格（price-list）: 色付きの券種名の下に、価格を大きく太字で置く

Do's and Don'ts

Do - ティールと辛子色を交互に使う - カードとボタンには必ず黒枠とずらし影を付ける - 日程まわりの背景は市松柄にする - 英字見出しはセリフ体で大きく組む

Don't - ぼかしのドロップシャドウを使わない - ピンクや紫など第三の強い色を足さない - グラデーションの背景を多用しない - カードを大きな角丸にしない

Page Structure

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

1. ヘッダー（ナビと購入導線を常に見せる）: 濃色の帯にロゴ、英字ナビ、辛子色のボタンを並べる
2. ファーストビュー（公演の世界観を伝える）: クリーム地に人物写真と、ボードゲームの駒を表すコインを散らし、左にロゴを置く
3. イントロ（公演の概要と導線）: ティールの見出しと中央揃えの本文を置き、色違いのボタンを2つ並べる
4. スケジュール（全公演の日程と会場）: 市松柄の背景に枠付き見出しを置き、2列の日程カードを並べる
5. チケット料金（券種と価格を示す）: 生成り地に色付きの券種名と大きな価格を置き、灰色の注釈を添える
6. 販売スケジュール（先行受付の流れを示す）: 縦タイムラインに STAGE ごとのカードを並べ、ボタンを横に複数置く
7. 注意事項・問い合わせ（規約と連絡先）: 小さな文字の箇条書きを、区切り線で分ける
8. グッズ（近日公開を予告する）: ティール全面の上に見出しを置き、淡色のセリフ体で予告の一文を入れる
9. ファンクラブ訴求（会員登録の誘導）: 宇宙風の濃紺写真の上に白カードを重ね、月額・年額の価格と辛子色の CTA を置く

Imagery

• 人物は明るいクリーム背景で、動きのある全身ポーズを撮る
• 盤やコインなどの立体小物をティールとクリームで揃えて散らす
• アイコンは線画で、ピンやチケットなどの形にする
• 訴求セクションは濃紺の宇宙風背景の写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では日程カードを 3 列にする
• PC はコンテンツ幅を約 900px で中央に寄せ、左右は市松柄を見せる
• タイムラインとカード構造は SP・PC で共通にする
• ファンクラブ訴求は 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 行書くと起動時に読み込まれる。