DESIGN.md — 紺縁取り×パステルのポップな投票イベントLP（Pop Pastel Character Voting Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: パステル・紺の太縁・紙吹雪・雲と星・ステッカー風・お祭り感
• 地の質感: 地はフラット。ドットパターンや網点を薄く敷き、コミック風の質感を出す
• 形: 角丸の大きい白カード、ピル型ボタン、波形の雲でセクションを区切る
• 温度感: 明るく暖かい。子ども〜大人のファン向けの陽気さ

Colors

• セクションごとに地色をパステルの水色・グレー・薄紫・クリーム・ピンクで切り替える
• 文字と線は紺で統一する。黒は使わない
• 赤は小見出し・日付・数量の強調だけに使う
• 主ボタンは黄地に紺の文字。サブボタンは水色または白
• 最下部だけは濃い青地に白文字で締める
• 紙吹雪や星には赤・黄・水色・ピンク・紫を混ぜる

Typography

• 文字はすべて太めの丸ゴシックにする
• リード文は中央揃えで短く改行し、行間を広めにとる
• 見出しの左右に斜線のアクセント（\ //）を付けることがある
• 語尾に♪や！を付け、話しかける口調にする
• 大見出しは白い雲形と赤い立体文字の画像で表現する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。グッズ紹介だけ 3 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上端を雲形の波で区切る
• 白カードは左右 6% の余白をとって中央に置く
• 見出しの横にキャラクターを重ねてはみ出させる
• ボタンは中央揃えで幅 60〜90%
• バナーリンクは横長カードを縦に積む

Elevation & Depth

• ぼかしのない影を使う。紺のベタ影を右下に 3〜4px ずらす
• カードとボタンには紺の線を 2〜3px 引く
• グラデーションの影やぼかした影は使わない

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 商品は白地の角丸枠に置く。キャラクターは切り抜いてはみ出させる
• セクション境界: 白またはパステルの雲形の波線
• ボタンはすべてピル型にして紺の縁を付ける
• 情報カードは大きめの角丸で、紺の太線で囲む
• SNSリンクはピル型の横長カードにし、左に丸アイコンを置く
• 動画枠は角丸の長方形で中央に再生ボタンを置く

Components

• 黄色の主ボタン（button-primary）: 黄色地のピル型に紺の縁とベタ影。左右に星のアイコンを置く
• 水色のサブボタン（button-secondary）: 水色地のピル型に紺の縁。主ボタンの下に置く
• 白の矢印付きリンクボタン（button-link）: 白地のピル型に紺の縁とベタ影。末尾に▶または外部リンクのアイコンを付ける
• 残り日数の表示（countdown）: 斜線で挟んだ一文の中で、数字だけを巨大な立体文字にする
• 白の情報カード（info-card）: 紺の縁の大きな角丸カード。赤い小見出しと紺の本文で日程などを並べる
• 横長バナーカード（banner-card）: ドット柄の地にキャラクター・紙吹雪・見出しを載せたリンク用バナー
• SNSリンクカード（sns-card）: ピル型の白カード。左に黒丸のアイコン、右端に外部リンクのマークを置く
• グッズのタイル（product-tile）: 3列並べる。商品は白い角丸枠に入れ、その下に紺の商品名を置く

Do's and Don'ts

Do - 紺の線とベタ影ですべての部品に統一感を持たせる - セクションごとにパステルの地色を変えてリズムを作る - 星・雲・紙吹雪を見出しの周りに散らす - 文章はやさしい話し言葉で中央揃えにする

Don't - 黒文字や細い明朝体を使わない - ぼかした影やリアルなグラデーションを使わない - 角の立った四角いボタンにしない - 1 画面にくすんだ色や濃い色を広く使わない（フッターは例外）

Page Structure

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

1. ファーストビュー（イベントの賑わいとキービジュアルを見せる）: ロゴの下にキャラクターを集めたイラスト、立体文字のキャッチ、残り日数、黄色と水色のボタンを置く
2. 速報への導線（最新の結果ページへ誘導する）: 白いドット地に短い見出しと、水色のピル型バナーを置く
3. イベント概要（企画の趣旨を説明する）: 集中線と黄色の爆発形の上に、中央揃えのリード文と白いリンクボタンを置く
4. スケジュール（期間と発表日を伝える）: 水色の地に白い角丸カードを置く。赤い小見出しの下に日付を表形式で並べる
5. ミニゲーム（参加特典を訴求する）: 立体文字のタイトル、赤で強調した数量、横長バナーを 2 つ置く
6. 特別賞（記念企画を告知する）: 薄紫の地に見出し、中央揃えの説明、白いリンクボタンを置く
7. 関連コンテンツ（ほかの楽しみ方へ誘導する）: クリーム色の地に、イラスト入りの横長バナーを 3 枚縦に積む
8. お知らせ（最新情報を一覧で見せる）: 白い角丸カードに日付とタイトルを並べる。キャラクターが端に顔を出す
9. 公式SNS（フォローを促す）: 見出しの左右に集中線を置き、ピル型のSNSカードを 2 枚並べる
10. おすすめグッズ（物販へ送客する）: ドット柄の水色地に商品タイルを 3 列並べ、ショップへのボタンを置く
11. 推奨環境（利用条件を案内する）: 白いカードに星アイコン付きの見出し、赤い OS 名、箇条書きを並べる
12. 新企画の告知と動画（新しい投票方法を伝える）: ピンクの地に見出し、中央揃えの説明、角丸の動画枠を置く
13. フッター（問い合わせ先と権利表記）: 上辺がアーチ形の濃い青地に星柄を敷く。SNS の丸アイコン、白いボタン、白い小文字を置く

Imagery

• 2頭身のキャラクターを太い線と明るいベタ塗りで描き、網点の陰影を付ける
• 四角や三角の紙吹雪、5角の星、もこもこの雲を画面全体に散らす
• 集中線や爆発形の背景でお祭り感を出す
• 見出し画像は白い雲形の中に赤い立体文字を入れ、紺で縁取る
• 商品写真は白背景で切り抜いて使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではSP版の1カラムを中央に置き、幅420〜480px程度に固定する
• PCでは左右の余白にパステルの地色と装飾柄を敷く
• グッズのタイルはPCで4列まで増やす
• 文字サイズはSPの値を基準にし、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 行書くと起動時に読み込まれる。