DESIGN.md — 空色×紺の丸ゴシック キャラクター展示イベントLP（Bright Sky Blue Character Exhibition LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、清潔・爽やか、情報量多め・訴求型
• キーワード: 空色ベタ面・紺の情報セクション・丸ゴシック欧文見出し・ピンク丸バッジ・白枠フォト・キャラクター散りばめ
• 地の質感: グラデーションをほぼ使わないフラットなベタ塗り。写真の白枠とキャラクターの切り抜きで立体感を出す。
• 形: 上辺が大きな弧になったセクション境界。円形バッジと、細い白罫線の表やアコーディオン。
• 温度感: 明るく涼しい寒色系。ピンクと黄色で温かみを足す。

Colors

• 地色は空色（primary）を基本にする。地図や概要の表など情報が密なセクションだけ紺（dark-section）に切り替える。
• ファーストビューは空色より一段濃い青にして、ページの入口を締める。
• 文字は青地・紺地ともに白で統一する。本文を濃紺にするのは淡い水色地のときだけ。
• ピンクは展示番号バッジと区分ラベルだけに使う。
• 黄色はCTAボタンと区分ラベルの二色目だけに使い、面積は小さく保つ。
• 罫線は白か、白を半透明にした線で細く引く。
• news-accordion は文字 #F2F7F4 × 背景 #00B8EE のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#00799C、4.6:1）を使う。
• exhibit-badge は文字 #E8559A × 背景 #FFFFFF のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DF1E79、4.57:1）を使う。
• photo-card は文字 #F2F7F4 × 背景 #00B8EE のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#00799C、4.6:1）を使う。
• floating-ticket は文字 #F2F7F4 × 背景 #0081CC のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0076BA、4.51:1）を使う。

Typography

• セクション見出しは丸い欧文1語にし、直下に小さなカナ訳を中央揃えで添える。
• イントロの本文は中央揃えにし、行間を広く取る。
• 本文は字間を少し広げて、やわらかい印象にする。
• 日付や数字も丸ゴシックで組む。
• 強調したい語は青か白の太字にとどめ、下線は使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。マップ・凡例は縦積み、ロゴバナーは 2 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央、その下の本文ブロックは幅を絞る。
• 展示はバッジ、写真、タイトル、説明の順に縦に並べる。
• 写真の下右にページ番号（01/03など）、左に丸い矢印ボタンを置く。
• 概要は罫線区切りの2列の表にする（左に項目名、右に内容）。
• セクション間は背景色の切り替えで区切る。

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる。
• 写真は白い枠線で地色から浮かせる。
• キャラクターの切り抜きをセクションの端からはみ出させ、奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形写真に白い枠線を付ける。キャラクターは切り抜きで使う。
• セクション境界: ニュース上部は大きな弧で切り替える。それ以外は直線の色切り替え。
• 展示番号は白地にピンクの太い縁取りの円バッジ。
• スライダーの矢印はピンクの小さな円。
• CTAは角丸を小さくした黄色の長方形。
• 固定のチケットボタンは角丸の四角にする。

Components

• 欧文＋カナ見出し（section-heading）: 白い丸ゴシックの欧文1語を大きく置き、下に小さなカナ訳を添える。
• ニュース一覧（news-accordion）: 日付と見出しを1行にし、白罫線で区切る。右端に開閉の矢印を置く。
• 展示番号バッジ（exhibit-badge）: ピンク縁の白い円に番号を入れ、横に小さなキャラクターを添える。
• 白枠フォトスライダー（photo-card）: 白枠の写真にピンクの丸い矢印と枚数表示を付け、下にタイトルと説明を置く。
• 黄色CTA（button-primary）: 黄色地に濃紺文字の小さな長方形ボタン。紺地の中央に置く。
• 概要表（outline-table）: 紺地に白罫線を引き、項目名と内容の2列で並べる。
• エリア凡例・番号ピン（area-legend）: ピンクの花型と黄色の円に番号を入れたピンで区分を示す。
• 固定チケットボタン（floating-ticket）: 右下に固定する青いボタン。イラスト付き。

Do's and Don'ts

Do - 地は空色のベタで広く取り、情報が密な部分だけ紺に切り替える。 - 見出しは欧文とカナのセットで統一する。 - 展示ごとにバッジ、写真、説明の型を繰り返す。 - キャラクターを端や余白に小さく散らす。 - CTAは黄色にし、1画面に1つまでにする。

Don't - 濃いグラデーションや強い影を入れない。 - ピンクや黄色を大きな面に使わない。 - 明朝体や細い書体で見出しを組まない。 - 写真を角丸や円形で切り抜かない（白枠の長方形を守る）。 - 本文を黒にして青地に置かない。

Page Structure

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

1. ファーストビュー（イベント名・会期・会場を一目で伝える）: 濃い青地の中央にキャラクターの集合ビジュアルを置き、その下に白いロゴと日付を入れる。
2. お知らせ（最新情報を伝える）: 弧形の上辺を持つ空色地に、白罫線のアコーディオンリストを並べる。
3. ピックアップ（コラボや関連施策へ誘導する）: 正方形に近いバナーを2枚並べる（SPでは縦積み）。
4. イベント紹介（体験の世界観を伝える）: 淡い水色地に背景写真をうすく敷き、青いリード見出しと中央揃えの本文を置く。
5. エリアマップ（会場の構成と区分を案内する）: 紺地に白線のフロア図を描き、番号ピンと写真付きの凡例リストを並べる。下にPDFボタン。
6. ギャラリー（展示内容を写真で見せる）: 空色地に番号バッジ、白枠のスライダー写真、説明を縦に繰り返す。
7. イベント概要（開催情報を正確に示す）: 紺地に罫線区切りの2列の表を置き、2つの表を黄色い丸で区切る。
8. 公式SNS（SNSフォローを促す）: 白い円のアイコンを並べ、枠で囲んだ投稿写真を3列に並べる。
9. アクセス（場所と行き方を伝える）: 地図を全幅で埋め込み、ドアのアイコンと住所・路線を添える。
10. 締めのメッセージ・関連リンク（来場を後押しし、関連サイトへ送る）: 白地にピンクを効かせた大きな一文とキャラクターを置き、その下にロゴバナーをグリッドで並べる。
11. フッター（主催情報と規約を載せる）: 空色地に小さな白文字で中央揃えにし、右下に固定のチケットボタンを置く。

Imagery

• 展示写真は明るく照らした室内を正面から撮り、白い枠で囲む。
• キャラクターは輪郭のはっきりした切り抜きで、セクションの端からのぞかせる。
• 地図やフロア図は紺地に白と水色の線画で、等角図風に描く。
• 背景写真は白をうすく重ね、文字を読みやすくする。
• アイコンは単色のフラットな形にする（ドア・SNS・矢印）。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央幅およそ700pxに収め、SPでは幅88%の1カラムにする。
• マップは図の下に凡例を縦積みにする。
• ピックアップとSNS写真は、SPで横スクロールか1〜2列にする。
• ロゴバナーはPCの4列からSPでは2列にする。
• 固定チケットボタンは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 行書くと起動時に読み込まれる。