DESIGN.md — 煉瓦色×深緑×生成りのレトロ列車風イベント LP（Retro Railway Brick and Cream Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、情報量多め・訴求型、かわいい
• キーワード: レトロ列車・切符モチーフ・煉瓦色・生成りカード・ピンク差し色・情報整理
• 地の質感: 地はフラットな単色。切符型 CTA にだけ縁の凹凸と影をつけて立体感を出す
• 形: 角丸の生成りカード、ギザ縁の切符、ピル型ラベル
• 温度感: 暖色寄り。深緑で温度を引き締める

Colors

• 地は煉瓦色を基本にする。冒頭の作品紹介ブロックだけ深緑に切り替える
• 情報は白か生成りのカードに載せ、濃色地に直接長文を置かない
• パネルの見出し帯は淡黄にし、文字は赤茶にする
• ピンクは表の見出し・アコーディオンの文字・切符の耳だけに使う差し色にする
• 作品の区別は青・ピンク・赤茶のラベル色で行う
• 購入ボタンはこげ茶のグラデーションにして、切符の生成り地から浮かせる
• accordion は文字 #E8648A × 背景 #FEFAE4 のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#DC2157、4.55:1）を使う。

Typography

• セクション見出しは字間を広く取り、上に極小の英字ラベルを添える
• 見出しの下には中央に菱形を置いた細い横線を引く
• 本文は中央揃えで短く改行する
• 小見出しは「▼〜▼」の形で区切る
• 筆記体はロゴと切符の中だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約 10% の余白を取って中央に置く
• アコーディオンは同じ幅で縦に並べ、間隔は約 24px にする
• 写真グリッドは 5 列の縦長サムネイル
• 表は 3 列にし、見出し行に色をつける
• 切符 CTA はページの途中と末尾に 2 回置く

Elevation & Depth

• カードは影なしのフラットにする
• 切符 CTA だけに右下へ落ちるやや濃い影をつける
• 購入ボタンはグラデーションと内側の光沢で立体的に見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 縦長カードを角丸 4px で切り抜く。メイン写真は全幅の正方形に近い比率
• セクション境界: 直線で色を切り替える
• 切符は左右の縁をギザギザにする
• 切符の左端にピンクの耳を付け、縦書きの英字を置く
• 耳と本体の境は点線にする
• 会場名などのラベルはピル型にする
• 期間表示の枠は角丸の細い赤茶線で囲む

Components

• 切符型 CTA（ticket-cta）: ギザ縁の生成りの切符。ピンクの耳、筆記体ロゴ、こげ茶のピル型ボタンで構成する
• アコーディオン（accordion）: 生成りの角丸バー。左にピンク文字、右に＋記号を置く
• セクション見出し（section-heading）: 英字の小ラベル、太字の和文、菱形付きの細線を縦に重ねる
• 特典パネル（panel-card）: 白い角丸パネル。上部に淡黄の見出し帯を付ける
• 期間ボックス（period-box）: 赤茶の細線で囲んだ枠に、ピル型の会場ラベルと日付を入れる
• 作品ラベル（label-tag）: 作品ごとに色を変えた小さい角丸の帯に、白い英字を載せる
• 日程表（schedule-table）: ピンクか淡黄の見出し行を付けた白い表。罫線は赤茶系
• ページ内ナビ（nav-grid）: 煉瓦色の地に、2 列で白い小さな文字リンクを並べる

Do's and Don'ts

Do - 暖かい煉瓦色・深緑・生成りの 3 色で世界観を保つ - 情報は角丸カードに収め、中央揃えで並べる - CTA は切符の形で、レトロな旅のモチーフに合わせる - 見出しには英字ラベルと菱形付きの線をセットで使う - 注釈は小さな白文字で、カードの外にまとめる

Don't - 寒色の大きな面を使わない - 角ばった無装飾の四角ボタンにしない - ピンクを広い面に使わない - 濃色地に長文の黒文字を置かない - 筆記体を本文に使わない

Page Structure

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

1. ファーストビュー（世界観と出演者を一目で伝える）: レトロな駅と列車の背景に人物を並べ、上部に筆記体ロゴを置く
2. ページ内ナビ（各セクションへ誘導する）: 煉瓦色の地に 2 列の文字リンクを並べる
3. 作品紹介（企画の概要と作品の一覧を示す）: 深緑の地に中央揃えの白文字。作品ごとのアコーディオンを置く
4. 上映スケジュール（概要）（期間を整理して見せる）: ピンクの見出し行を付けた白い表
5. 劇場一覧・チケット（会場と券種を案内する）: 生成りのカードとアコーディオン
6. 入場者特典（来場の動機をつくる）: 白いパネルに期間ボックスと作品ラベルを置き、5 列の写真グリッドで見せる
7. 限定特典（複数回の来場を促す）: 同じ型のパネルに、大きめのカード写真を並べる
8. 注釈・ストーリー（条件の説明と世界観を補う）: 小さな白文字の注釈、区切り線、中央揃えの詩的な文章
9. 全国スケジュール（地域ごとの日程を示す）: 列車イラストの見出しの下に、淡黄の見出し行の 3 列表を置く
10. CTA（チケット購入へ誘導する）: 切符型 CTA、劇場一覧カード、料金カード、切符型 CTA の順に並べる

Imagery

• 夕暮れの駅とピンクや緑の列車など、レトロで暖かい色の背景合成
• 人物はヴィンテージ調の衣装で、全身を横一列に並べる
• 時計・街灯・ベンチなど、古い駅の小物を装飾に使う
• グッズ写真は縦長カードに均一に並べる
• ロゴは立体感のある筆記体にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約 50% 幅のカラムを置き、背景色は全幅に広げる
• PC のナビは 4 列×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 行書くと起動時に読み込まれる。