DESIGN.md — 斜め切替と青緑系のスタジアム体験イベントLP（Diagonal Stadium Teal Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: スポーティ、クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: 斜めの色面・スタジアム写真・巨大な欧文イタリック・くすみ青緑・スピード感
• 地の質感: フラットな単色面に、広角のスタジアム写真を斜めに挟んで重ねる。影はほぼ使わない。
• 形: 斜めの境界、角丸の小さい白カード、ピル型ボタン
• 温度感: やや寒色寄り。テラコッタの面で温度差をつける

Colors

• セクションごとに地の色を替える。青緑・テラコッタ・ブルーグレー・ミント・セージの順に、斜めの境界で切り替える。
• 巨大な欧文見出しは、地の色より少し明るい色か白を半透明にして重ねる。
• 情報ブロックは白いカードか白い帯見出しにまとめ、本文は濃いグレーで書く。
• CTA は濃い青緑のピル型＋白文字で統一する。
• 黄色はバッジと小さいハイライトだけに使う。
• 赤は注意書きの強調に限る。

Typography

• 欧文の巨大見出しは斜体か太字にして、画面端からはみ出すほど大きく置く。
• 縦組みの欧文見出し（1文字ずつ縦に積む形）も使ってよい。
• 和文ラベルは欧文見出しの右下に、小さな斜体で添える。
• 本文は中央揃えで短く改行する。
• 数字（ポイント番号）は大きな斜体で、淡い青緑にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイント欄は写真と文を交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの間に、全幅のスタジアム写真を斜めに切り抜いて挟む。
• 情報ブロックは白い帯見出しの下に中央揃えで置く。
• 区切りは細い罫線にする。
• STEP カードは SP で縦に積む。

Elevation & Depth

• 影はほぼ使わない。
• カードは白い面と地の色の差だけで浮かせる。
• 動画枠だけ細い枠線で囲む。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 全幅の写真を平行四辺形（斜めの上下辺）で切り抜く。カード内の写真は角丸なしの矩形。
• セクション境界: 約8〜12度の斜めの直線で切り替える
• 斜めの向きはセクションごとに左右を交互に変える。
• アイコンは白い円の中に置く。
• アコーディオンは角丸なしの白い帯にする。

Components

• チケット購入ボタン（button-primary）: 濃い青緑のピル型。右端に下向きの矢印を入れる。
• 巨大欧文見出し（section-title-giant）: 半透明の欧文に、小さな和文ラベルを添える。
• 白帯見出し（band-heading）: 全幅の白い帯に、中央揃えの太字を置く。
• 番号付きポイント（point-row）: 写真と、大きな斜体の番号＋短文を左右交互に並べる。
• STEP カード（step-card）: 上に写真、斜体の STEP 番号、本文、下に青緑のボタンを置く白カード。
• 円形バッジ（badge-circle）: 黄色の円に、期間などを2行の太字で入れる。
• アコーディオン帯（accordion）: 白い帯に太い斜体の見出しを置き、右端に矢印を付ける。
• アイコン仕様表示（icon-spec）: 白い円のアイコン、その下に小さなラベルと値を置く。3つ並べる。
• 日付タブ購入枠（date-tabs）: 青緑の枠に日付タブを横スクロールで並べ、下に空き状況の行を出す。

Do's and Don'ts

Do - セクションの境界は必ず斜めにする。 - 欧文の巨大見出しで、各セクションの入口を示す。 - セクションの間に広角の会場写真を挟み、体験の臨場感を出す。 - 情報は白い帯と中央揃えで整理する。 - CTA は濃い青緑のピル型に統一する。

Don't - 水平な境界だけで区切らない。 - 彩度の高い原色の面を広く使わない。 - 影やグラデーションの立体ボタンにしない。 - 本文を長い段落にしない。 - 見出しを明朝体にしない。

Page Structure

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

1. ファーストビュー（イベントの世界観を一目で伝える）: 全面イラストのキービジュアルに、極太の和文ロゴを重ねる。
2. リード＋動画（開催の告知と CTA）: 濃紺の会場写真の上に白い太字リードを置き、白いピル型ボタンと動画枠を並べる。
3. ポイント（体験の魅力を3つ示す）: 白地と斜めの青緑面に、写真と番号を交互に配置する。
4. ストーリー（物語への没入）: テラコッタの斜めの面に、白文字を中央揃えで置き、もっと読むボタンを付ける。
5. プレイ形式（時間・人数・場所と持ち物を示す）: ブルーグレー地に、円アイコン3つと白い注意カードを置く。
6. 遊び方（参加の手順）: 縦組みの欧文見出しの横に STEP カードを並べ、安心ポイントのバナーを添える。
7. イベント概要（日時・会場・アクセス・地図）: ミント地に白い帯見出し、中央揃えの情報、地図画像を置く。
8. チケット（販売日程・料金・購入）: セージ地に斜体の罫線付き見出しを置き、料金表と日付タブの購入枠を並べる。
9. グッズ（関連商品の訴求）: 水色グレー地に、商品画像・価格・白い帯ボタンを置く。
10. 注意事項・FAQ・問い合わせ（補足情報）: 青緑地に白いアコーディオン帯を3本並べ、問い合わせボタンは白い線枠にする。

Imagery

• 広角で、天井や客席の曲線が入るスタジアムの写真を使う。
• 人物は会場で謎解きをしている自然なカットにする。
• キービジュアルは疾走する人物のイラストに、放射状の光線とネオン調の線を重ねる。
• アイコンはシンプルな濃紺の単色ピクトにする。
• 写真は彩度を少し抑え、空の青と芝の緑を活かす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約70%で中央に置く。SP では90%前後に広げる。
• ポイント欄の交互配置は、SP では写真→文の縦積みにする。
• STEP カードは PC の横並びを、SP では縦に積む。
• 巨大な欧文見出しは SP では48〜56pxにし、はみ出しを許容する。
• 日付タブは 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 行書くと起動時に読み込まれる。