DESIGN.md — 橙×紫×蛍光緑の斜め切りポップなトークイベントLP（Neon Diagonal Pop Talk Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的
• キーワード: 斜め切り・ネオンカラー・ベタ塗り・極太斜体・縦書き黒帯・ストリート
• 地の質感: グラデーションも質感もない完全なベタ塗り。黒の段ずらし影でステッカーっぽく見せる
• 形: 平行四辺形・斜めの帯・ギザギザの縁・星形バッジ・吹き出し。どれも右上がりに傾ける
• 温度感: 暖色と寒色の補色を強くぶつけた、高彩度でにぎやかな配色

Colors

• セクションごとに地色をオレンジ→紫→蛍光緑→深緑→黒と切り替え、境目は斜めにする
• 隣り合う面には必ず補色に近い組み合わせを置いて、境目をはっきり見せる
• カードは地色と違う色にして、緑・水色・紫を順番に回す
• 強調語は文字色を変えて目立たせる。紫の地にはオレンジ、緑の地には深緑や紫を使う
• 黒は見出しの帯・ずらし影・フッターに限る
• グラデーション・半透明・パステルは使わない
• badge-starburst は文字 #FFFFFF × 背景 #FF6600 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C95100、4.51:1）を使う。
• speech-bubble は文字 #FFFFFF × 背景 #FF6600 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C95100、4.51:1）を使う。

Typography

• 見出しも本文も原則 skewX(-10deg) 前後の斜体にする
• 太さは800〜900が基本で、細い字は注釈だけに使う
• セクション見出しは黒帯の中に白文字の縦書きで置く
• 日付は数字を大きく、年・月・曜日を小さくして強弱をつける
• FVのリード文は行ごとに左へずらし、斜めのラインを作る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで、楽しみ方カードだけ 2 カラム。PC は中央寄せで、カードは 3 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの境目は右上がりの斜め線で区切る
• 日程カードは縦に等間隔で並べ、右上に星形バッジを重ねる
• 縦書き見出しの帯は画面の端から少しはみ出させて置く
• 要素を地色の帯からはみ出させ、重なりで動きを出す
• 余白は詰めめにして、色の面で密度を保つ

Elevation & Depth

• ぼかした影は使わない
• 日程カードは右下に黒のベタ影を4〜6pxずらして重ねる
• 重なりの奥行きは色面の前後関係だけで表す

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は使わない。線画イラストを切り抜いて、色面の上に直接置く
• セクション境界: 右上がりの斜めカットで区切り、色面を何枚も重ねる
• 楽しみ方カードは角を丸めた平行四辺形にする
• 日程カードは左右の縁をギザギザにした帯にする
• 先着バッジは尖りの多い星形にする
• 主CTAは大きな正円にする
• 感想カードは吹き出しの尾がついた平行四辺形にする

Components

• 円形申込CTA（cta-circle）: 水色の大きな正円に黒の斜体文字2行を入れ、下に紫の矢印を添える
• 縦書き黒帯見出し（heading-vertical-band）: 斜めに傾けた黒い帯に、白の縦書きで見出しを置く。助詞だけ小さくする
• ギザギザ日程カード（schedule-card）: 蛍光緑の帯に日付・時刻・申し込むボタンを入れ、黒のずらし影をつける。日付の下にはオレンジの波線を引く
• 先着バッジ（badge-starburst）: オレンジの星形に白文字で、定員を2行で入れる
• 申し込むボタン（button-apply）: 紫の斜めの三角形の帯に、下線つきの紫文字を載せる
• STEPラベル（step-label）: 紫の平行四辺形に水色の欧文でSTEPと番号を入れ、右に太字斜体の手順文を並べる
• 楽しみ方カード（card-idea）: 角丸の平行四辺形に#番号と短文を入れる。色は緑・水色・紫を順番に回し、強調語だけ色を変える
• 吹き出し（speech-bubble）: オレンジの平行四辺形に尾をつけ、白の斜体で短い一言を入れる

Do's and Don'ts

Do - 全体を右上がりの斜めでそろえる - 高彩度の色をベタで隣り合わせに置く - 文字は極太の斜体にする - 番号やSTEPなどのラベルは欧文の斜体にする - 影は黒ベタのずらしだけにする

Don't - パステルやグラデーションを使わない - ぼかした影や半透明を使わない - 細い明朝体や上品な書体を使わない - 水平・垂直だけの静かなレイアウトにしない - 写真を大きく使わない

Page Structure

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

1. ファーストビュー（世界観とイベントの気軽さを伝える）: オレンジの地に変形させた極太のロゴ文字を置き、短い詩文を斜めに並べる。奥には深緑の斜め面を入れ、円形CTAを配置する
2. 日程一覧（開催回を選んで申し込ませる）: 紫の地に縦書きの黒帯見出しを置き、ギザギザの日程カードを縦に並べる。各カードに星形バッジをつけ、最後に注釈を入れる
3. 参加の流れ（参加までの手軽さを示す）: 蛍光緑の地にSTEPラベルを4つ並べ、線画の人物イラストと注釈を添える
4. 参加者の声（体験の価値を伝える）: 水色と深緑の吹き出し型カードを斜めに横並びにし、PCでは横に流して見せる
5. 楽しみ方（話題の例で参加意欲を高める）: 深緑の地に縦書きの見出しと吹き出しを置き、#番号つきの平行四辺形カードを2カラムで14枚並べる
6. フッター（シェアと運営者の情報を載せる）: 黒い帯にTOPタブ・SNSアイコン・ロゴ・リンク・コピーライトを中央寄せで並べる

Imagery

• 写真は使わない
• 人物は黒い手描き線画で、肌などをオレンジでベタ塗りする
• ノートPCでのビデオ通話のような日常のワンシーンを描く
• 稲妻や集中線など、手描きの小さな記号を添える
• 装飾には矢印・波線・星形・吹き出しの図形を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも斜めの色面を画面幅いっぱいに敷き、内容は中央の約60%幅に置く
• PCの日程カードは横長にして、日付と時刻を1行に並べる
• PCの楽しみ方カードは3カラムにする
• 参加者の声は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 行書くと起動時に読み込まれる。