DESIGN.md — 水色の波と赤のポップなメタバース施設 LP（Light Blue Wave Metaverse Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、清潔・爽やか、クール・先進的、親しみ・手作り感
• キーワード: 水色の地・波形の区切り・赤のアクセント・3DCG キャプチャ・円形切り抜き・ステップ案内
• 地の質感: フラットな単色面。影はほぼ使わず、写真と CG の彩度で賑やかさを出す。
• 形: 大きめの角丸、円形の写真、ピル型ボタン、波線の装飾
• 温度感: 水色ベースの爽やかな寒色を、赤の差し色で温める

Colors

• 白地と水色地をセクションごとに交互に置く。境目は波形にする。
• 赤は英字見出し・CTA・バッジ・フッター面だけに使う。
• 青は手順のタブ・カード枠・STEP ラベルに限って使う。
• 本文は濃いグレーにし、純黒はダウンロードボタンだけに使う。
• ページ末尾は赤一色の面に白文字を置いて締める。

Typography

• 英字見出しは赤の太字にし、下に小さな波線を添える。
• リード文は中央揃えで 2〜4 行に改行する。
• 本文は字間を広めに、行間を 2.0 程度にする。
• ボタンの文字は太く、遊び心のある書体にする。
• STEP の番号は青、手順の文は濃いグレーで書く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はフロア紹介を 3 カラムにする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しとリードは中央揃えにする。
• 写真は左右 4% 程度の余白を取って幅いっぱいに置く。
• フロア紹介は円形写真・詳細ボタン・参加ボタンの順に縦に積む。
• 手順は白い大きな角丸パネルにまとめ、STEP の間を赤い▼でつなぐ。
• 本文の長文は左揃えにする。

Elevation & Depth

• 影はほぼ使わず、フラットに作る。
• カードは色の面と線の枠で区切る。
• 円形写真は太い白縁で浮かせて見せる。

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は大きめの角丸の長方形か、白縁付きの正円で切り抜く。
• セクション境界: 細かい波形でセクションを区切る。手順セクションは上辺が大きな角丸の白パネルにし、上に半円のタブ見出しを載せる。
• ボタンはすべてピル型にする。
• サブボタンは白地に赤い枠線、主ボタンは赤い塗りにする。
• 手順のタブは上側だけ角丸にする。

Components

• 参加 CTA（button-primary）: 赤い塗りのピル型ボタン。白文字で、文末に感嘆符を付ける。
• 詳しく見るボタン（button-secondary）: 白地に赤枠のピル型ボタン。右端に赤丸のプラスアイコンを置く。
• 英字見出し+波線（section-title）: 中央に赤い英字を置き、下に水色の小さな波線を添える。
• 赤い円バッジ（badge-circle）: ギザギザの縁の赤い円に、白い小さな文字で無料などを示す。
• 円形フロア写真（floor-circle）: 白縁付きの正円写真の中央に、白い太字でフロア名を重ねる。
• デバイス別タブカード（tab-card）: 青いタブを 3 つ並べ、選択中のタブは白にする。本体は青い枠線の角丸カード。
• お知らせカルーセル（info-carousel）: 画像カードを横にスライドさせる。カード下の青い帯に詳細リンクを置き、ドットで位置を示す。
• STEP 見出し（step-label）: 青い STEP 番号と太字の説明を中央揃えで書き、STEP の間に赤い▼を置く。

Do's and Don'ts

Do - セクションの境目は波形にし、軽やかな印象を保つ。 - 赤は要所だけに使い、水色と白を主役にする。 - CG のキャプチャは角丸か円形で切り抜く。 - 見出しは英字+波線の型にそろえる。 - 主ボタンとサブボタンは縦に 2 段で並べる。

Don't - ボタンを直角にしない。 - 濃い影やグラデーションの面を多用しない。 - 赤を本文や広い面に使わない（フッターは例外）。 - 明朝体を使わない。 - 写真を四角いまま角丸なしで置かない。

Page Structure

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

1. ファーストビュー（施設の世界観を一目で伝える）: 水色の地に、CG キャラクターとロゴを入れた角丸のキービジュアルを置く。上辺は波形にする。
2. お知らせ（最新のイベントを告知する）: 英字見出しの下にカード型のカルーセルを置き、左右の矢印とドットを付ける。
3. 紹介動画（体験の様子を動画で見せる）: 白地に、短いリードと幅いっぱいの埋め込み動画を置く。
4. 概要（コンセプトを説明する）: リード文、角丸写真、長めの本文を交互に置く。PC では写真と本文を左右交互に並べる。
5. フロア紹介（入口を選ばせて参加を促す）: 水色の地に円バッジを添える。円形写真と 2 つのボタンのセットを 3 つ並べる。
6. 参加方法（始めるまでの手順を案内する）: 半円のタブ見出しを載せた白パネルに、タブカードと STEP1〜4 を▼でつないで並べる。
7. お問い合わせ（連絡先を示す）: 上辺が波形の赤い面に、白文字で中央揃えの英字見出しと連絡先を置く。

Imagery

• 明るい晴天の下の 3DCG 空間を、俯瞰やアバター目線でキャプチャする。
• アニメ調のアバターキャラクターをビジュアルの左右に配置する。
• 画面 UI が写り込んだゲーム画面のキャプチャもそのまま使う。
• 装飾は波線・▼・ギザギザの円など、シンプルな図形に限る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を約 75% の中央寄せにし、両側は水色の地のままにする。
• フロア紹介は 3 カラムに並べ、ボタンを各カラムの下に置く。
• 概要は写真と本文を左右に分けて交互に並べる。
• カルーセルは PC では左右のカードをのぞかせ、3 枚が見えるようにする。
• フッターの文字は 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 行書くと起動時に読み込まれる。