DESIGN.md — 月ごとに暗色が移るトークライブ公演 LP（Dark Shifting Theater Tour Schedule LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、情報量多め・訴求型、力強い・インパクト
• キーワード: 暗い舞台・月替わり背景・オレンジ細欧文・赤ラベル・色分けピルボタン・人物切り抜き
• 地の質感: ほぼ単色のマットな暗色面。グラデーションや質感はつけず、写真だけで奥行きを出す
• 形: ラベルは角のない小さな長方形、チケットボタンは完全なピル型、日付は大きい数字と小さい単位の組み合わせ
• 温度感: 暗めで落ち着いているが、オレンジと赤で舞台照明のような温かみを足す

Colors

• ページ全体を暗色にする。月が変わるごとに背景を紺→深緑→オリーブ→えんじ→紫と切り替え、季節が進む感じを出す
• オレンジは欧文の大見出しと主チケットボタンだけに使う
• 項目ラベルは濃い赤の面に白文字で統一する
• プレイガイドボタンは販売元ごとに色を決めて、全公演で同じ色にする（オレンジ・青・水色寄りの青・ピンク・緑）
• 販売終了のボタンはグレーにして、色を抜いて見せる
• 都道府県バッジは月ごとに色を変える（水色・緑・ピンク・青緑・紫）
• 動画セクションだけ明るめの赤茶にして、公演リストと区切る
• button-ticket-primary は文字 #FFFFFF × 背景 #D34A14 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE4814、4.6:1）を使う。
• badge-pref は文字 #F4FEFF × 背景 #EB6CA5 のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#DD1E74、4.54:1）を使う。
• header-ticket は文字 #FFFFFF × 背景 #D34A14 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE4814、4.6:1）を使う。

Typography

• 欧文の見出しは細く大きく、オレンジで置く。すぐ下に白い和文の小見出しを中央揃えで添える
• 日付は数字を大きく、月・日・曜日は小さくして組み合わせる
• 本文は白、住所や主催などの注記はグレーで、文字の濃さに差をつける
• FVのタイトルだけは手書き風の白文字にオレンジを混ぜ、黒い縁取りをつける
• 左端の月表示は、大きい数字の下に月の色の短い線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。左に月表示用の細い列（約 20%）、右に公演カード
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 公演の間は細い横線で区切り、上下に約 24px の余白をとる
• ラベルと値は 2 列の定義リストのように並べる
• チケットボタンは横に 4 個並べ、収まらない分は折り返す
• 主役の人物写真は右側に固定し、背景としてカードの後ろに重ねる
• 月表示は左の列に置き、その月の最初の公演と高さを揃える

Elevation & Depth

• 影はほとんど使わず、色の面だけで構成する
• 人物の切り抜き写真を暗い背景に溶け込ませて奥行きを出す
• クッキー同意バーは半透明の黒い帯で重ねる

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を抜いて右寄せに配置。動画サムネイルとアーカイブロゴは角丸の長方形
• セクション境界: 直線で背景色だけが切り替わる。細い横線も使う
• 項目ラベルと県名バッジは角丸なしの長方形
• チケットボタンは完全なピル型
• アーカイブのロゴカードは角丸 10px の黒い四角

Components

• 主チケットボタン（button-ticket-primary）: 公式販売への導線になるオレンジのピル型ボタン。並びの先頭に置く
• プレイガイドボタン（button-ticket-guide）: 販売元ごとに色を変えたピル型ボタン。販売終了はグレーにする
• 項目ラベル（label-item）: 時間・料金・出演などを示す赤い小さな四角。右に値を書く
• 都道府県バッジ（badge-pref）: 日付の右に置く、色付きの小さな四角い県名バッジ
• 販売スケジュール見出し（bar-schedule）: 暗いグレーの帯に白文字。下に三角マーク付きのリストを続ける
• 欧文セクション見出し（heading-section）: 細いオレンジの欧文の下に、和文の小見出しを中央揃えで置く
• 月表示（month-marker）: 左の列に置く大きい月の数字と、その下の色付き下線
• ヘッダーのチケットボタン（header-ticket）: 右上に固定するオレンジの四角いボタン。欧文と和文の 2 段組み
• 動画サムネイルカード（card-video）: 再生ボタン付きのサムネイルの下に白いタイトル。SP は 3 列

Do's and Don'ts

Do - 月ごとに違う暗色の背景を使い、長いリストでも今どの月かわかるようにする - どの公演も同じ順番で並べる（日付＋県名バッジ→会場名→住所→ラベル付きの情報→販売スケジュール→ボタン→主催） - プレイガイドの色はページ全体で統一する - オレンジは見出しと主チケットボタンに絞って使う - 右側に人物の切り抜き写真を大きく重ねる

Don't - 白や明るい背景を本文エリアに使わない - 項目ラベルを角丸やグラデーションにしない - 欧文見出しを太字にしない - 公演ごとにボタンの並び順や色を変えない - 影や立体感のある装飾を足さない

Page Structure

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

1. ヘッダー（メニュー・SNS・チケットへすぐ移動できるようにする）: 左にハンバーガーメニュー・SNSアイコン・ロゴ、右にオレンジのチケットボタンを置く
2. ファーストビュー（出演者とイベントのタイトルを印象づける）: 焦茶の背景。右に人物写真、左に手書き風の大きなタイトルと、白文字のキャッチ 4 行。強調語はオレンジにする
3. お知らせ（最新のお知らせを伝える）: オレンジの細い欧文見出しの横に、日付と見出しを 1 件だけ置く
4. 公演情報（月別）（全国の公演日程とチケット導線を一覧にする）: 欧文の大見出しの下に公演カードを縦に並べる。月ごとに背景色を変え、左の列に月を表示する
5. 注意事項（入場条件などを伝える）: 中央に小見出しを置き、米印付きのグレーの小さな文字で箇条書きにする
6. 動画一覧（過去のトーク動画で内容を体験してもらう）: 赤茶の背景に 3 列のサムネイルを並べ、右下に半透明の大きな欧文を透かす
7. アーカイブ（過去の開催回を一覧で見せる）: 焦茶の背景に、オレンジの欧文見出しと黒い角丸ロゴカードを 3 列で並べる
8. フッター（主催とコピーライトを表示する）: 白い細い帯に主催のロゴ・リンク・コピーライトを横一列に並べ、右端にページトップへ戻るボタンを置く

Imagery

• 出演者は舞台照明の下で話している瞬間を撮り、背景を抜いて暗い地に溶け込ませる
• ジェスチャーや表情が伝わる、腰から上のスーツ姿の写真
• 似顔絵タッチのモノクロのキャラクターイラストをロゴに添える
• 動画サムネイルはテロップの大きいバラエティ番組風で、赤・黄・黒の帯を使う
• アーカイブは回ごとに違う手書きロゴを黒い地に白で置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も 1 カラムの縦リストのまま、中央寄せの幅約 70% に収める
• PC では人物写真を右側に大きく固定し、リストと重ねる
• PC はボタンが 1 行に 5 個並ぶ
• 動画一覧は PC・SP どちらも 3 列
• FV は 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 行書くと起動時に読み込まれる。