DESIGN.md — 赤×黒の3DCGクリエイター向けイベントLP（Bold Red 3D Creative Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、クール・先進的、ポップ・元気
• キーワード: 真紅ベタ面・白抜き極太見出し・3DCG浮遊オブジェクト・流れるテキスト帯・目盛りライン・黒い弧のフッター
• 地の質感: ほぼフラットな赤面に中央へ向かう淡い放射グラデーションと大きな六角形の透かし。暗部はチャコールの単色。
• 形: 細い白線の角丸フレーム、ピル型の時刻タグとボタン、円形の人物写真、斜めに傾けた白帯ラベル。
• 温度感: 熱く高揚感のある暖色寄り。黒とチャコールで締める。

Colors

• 地の色は赤を主に、チャコールと黒の帯で章を区切る
• 赤地の文字はすべて白にして、色は増やさない
• 赤地のCTAは白ボタンに赤文字、黒地では赤ボタンに白文字にする
• 白地はスポンサー欄だけに使い、最後の黒フッターの前の休みにする
• 見出しを強調するときは白帯の上に赤文字で反転させる
• 装飾の色は3DCGビジュアルの色だけにとどめる

Typography

• 欧文は横に広いジオメトリック体にし、日時や番号にも使う
• セッションの大見出しは2文字ずつ改行して極太で積み上げる
• テーマは白い帯にのせた赤文字にして、1行ずつ帯を切る
• 本文は細めのゴシックで中央揃えか左揃えにし、行間は広めにとる
• 英字の大きな白抜き文字を背景に流して、ラベルとして使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。登壇者は写真と肩書きの横並びか3列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 右端に縦の目盛りラインを通し、時刻タグから線を伸ばす
• セッションは時刻タグ→番号→大見出し→テーマ→登壇者→本文→準備中ボタンの順に並べる
• セッションの間にはシェブロンとOTHER SESSIONの区切りを入れる
• 章の境目は流れるテキスト帯かロゴ帯で区切る
• 開催概要はラベルと値の2列の表にし、横線だけで区切る

Elevation & Depth

• 影はほぼ使わず、フラットな面で見せる
• 立体感は3DCGオブジェクトのレンダリングで出す
• 手前の浮遊オブジェクトの一部をぼかして被写界深度を出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 人物は円形に切り抜いて右上に＋アイコンを付ける。作品画像は角丸なしの長方形。
• セクション境界: 直線の帯で切り替え、フッターだけ上辺を大きな弧にする
• FVは細い白線の角丸長方形で枠を囲む
• 時刻タグは白の細線のピルにする
• 準備中ボタンは細線のピルに斜めの白帯ラベルを重ねる
• スポンサーロゴは細いグレー線の白い円に入れる

Components

• 白ピル申込ボタン（button-primary-light）: 赤地に置く白いピル型ボタン。赤文字で、右端に赤い円と矢印を付ける。
• 赤ピル申込ボタン（button-primary）: 黒地に置く赤いピル型ボタン。右端に白い円と赤い矢印を付ける。
• 時刻タグ（time-tag）: 時計アイコンと時間を白地のピルに入れ、配信情報を細線で続けて目盛りラインへ接続する。
• 白帯反転見出し（heading-band）: テーマの1行ごとに白帯を敷き、赤い極太文字をのせる。
• 登壇者ユニット（speaker-card）: 円形写真の横か下に、役割の英字ラベル・所属・肩書き・氏名を小さく積む。
• 準備中ラベル（coming-soon）: 細線のピル枠に、斜め約8度に傾けた白帯の英字ラベルを重ねる。
• 流れるテキスト帯（marquee-band）: 黒帯に白い欧文でイベント名・日時、または製品ロゴを横に流す。
• セッション区切り（session-divider）: 白と淡い赤のシェブロンを縦に重ね、英字ラベルを左右に並べる。
• 開催概要表（info-table）: チャコール地に字間の広いラベルと値を2列で並べ、グレーの横線で区切る。

Do's and Don'ts

Do - 赤の面を広くとり、文字は白だけで構成する - 3DCGオブジェクトを画面の端からはみ出させて浮かせる - 欧文の大見出しは横に広い極太体にする - セッションは同じ部品の並びで繰り返し、リズムをそろえる - CTAはピル型にして、右端に丸と矢印を付ける

Don't - 赤地に黒や他の色の本文を置かない - パステルや淡いトーンを主役にしない - カードに影や立体ボタンを付けない - 写真を角丸の長方形で切り抜かない（人物は円形にする） - 明朝体や手書き書体を混ぜない

Page Structure

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

1. ファーストビュー（イベント名と日時を印象づける）: 赤い放射グラデーションの地に白線フレームを敷く。中央に巨大な欧文ロゴ、その下に日時を置き、周りに3D物体や絵文字を浮かべる。
2. テキスト帯（章を区切り、日時を繰り返す）: 黒帯に白い欧文を横に流す。
3. コンセプト（イベントの趣旨を語る）: チャコール地に斜体の英字キャッチと和文サブ、中央揃えの詩的な本文を置く。背景には透かしの大きな文字と3D物体。
4. ロゴ帯（関連ツールを一覧で見せる）: 黒帯に製品ロゴを横に流す。
5. タイムテーブル（各セッションの内容と登壇者を紹介する）: 赤地の上部に巨大な英字の白抜きを流し、縦の目盛りラインに沿ってセッションを5本繰り返す。
6. CTA（無料申込へ誘導する）: 赤地に白いピルボタンを置く。
7. 開催概要（名称・日程・費用・場所・問い合わせを示す）: チャコール地に線だけで区切った2列の表を置く。
8. スポンサー（協賛企業を示す）: 白地に英字見出しとシェブロンを置き、ロゴを白い円で3つ並べる。
9. フッター（最後の申込と運営情報を示す）: 上辺が弧の黒地に、アーチ状の白抜き英字を沿わせる。赤ピルボタン、ロゴ、SNS、コピーライトの順に置く。

Imagery

• 光沢のある3DCGオブジェクト（結晶・ブロック・キャラクター）を単体で切り抜いて配置する
• 手前の物体はぼかして奥行きを出す
• 3Dの絵文字風アイコンをアクセントに散らす
• 人物写真はモノクロ寄りかナチュラルなバストアップにして、円形に切り抜く
• 背景には大きな六角形や白抜きの英字を透かしで敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではタイムテーブルを2カラムにし、中央の縦ラインを挟んで左右交互にセッションを置く
• PCのFVは横長にして、ロゴを1行で大きく見せる
• PCではスポンサー見出しを左に置き、ロゴの円を右に横並びにする
• 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 行書くと起動時に読み込まれる。