DESIGN.md — 赤×青の対比で魅せるキャラクター発表LP（Bold Red-Blue Character Announcement LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、スポーティ、ポップ・元気、シンプル・ミニマル
• キーワード: 赤と青の対比・太い斜体の欧文・表彰台・細い線の枠・白地・アニメ調キャラクター
• 地の質感: グラデーションや質感は使わない。白地にベタ塗りと細い線だけのフラットな画面
• 形: 四角を基本にし、カードの角を一か所だけ斜めに切り落とす。ボタンだけピル型
• 温度感: 赤が主役の熱量高めの暖色。青を補色として対にする

Colors

• 地は白を基本にする。区切りたいセクションだけを全幅の赤ベタ帯にする
• 赤と青は二人のキャラクターに一色ずつ割り当てる。プロフィールの見出し・本文・罫線は、それぞれの色で統一する
• 赤と青以外の有彩色は使わない。補助色はグレーと黒だけにする
• 大きな数値やタイトルは赤の太字で目立たせる
• 罫線は主色を薄くした細線にする。濃い線は使わない

Typography

• 欧文の見出しは極太の斜体にし、スポーツユニフォームのような勢いを出す
• 日本語の大見出しも斜体寄りの極太にし、字間を広めに取る
• 本文は中央揃えにし、短く改行して行間を広く取る
• 数値は欧文の極太斜体で大きくし、単位は小さく添える
• 英字の見出しの近くに、日本語の見出しを小さめの太字で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。表彰台だけ 3 列に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右 16px の余白で、ほぼ全幅に置く
• 全幅の赤帯セクションは、上下に 48px 前後の余白を取る
• 表彰台は中央の 1 位を高く、左右の 2 位・3 位を低くする
• プロフィールカードは画像→キャッチ→項目の順に、罫線で区切って縦に積む
• イベント情報は左揃えにし、赤ラベル→本文を繰り返す

Elevation & Depth

• 影は使わず、すべてフラットにする
• 奥行きは細い線の枠とベタ塗りの面で表す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: キャラクターは切り抜きの全身イラストで白地に直接置く。バナーとサムネイルは角丸のない長方形
• セクション境界: 直線の水平区切り。全幅の赤ベタ帯で切り替える
• カード枠は四角にし、右上か左上の角を一つだけ斜めにカットする
• ボタンだけを完全なピル型にする
• 表彰台は角丸のない赤い直方体にする

Components

• 巨大欧文ロゴとキャラクター（hero-logo-type）: 左右を赤と青に塗り分けた極太斜体の欧文を背面に置き、手前にキャラクター二体を重ねる
• トロフィー付きの結果見出し（result-heading）: 線画のトロフィーで見出しを挟み、上下を細い赤線で区切って数値を大きく出す
• 表彰台グラフ（podium）: 赤い台を三段に並べ、上にキャラクターを置き、台の中に順位と得票数を白字で入れる
• 色違いの線枠プロフィールカード（profile-card）: 細い線の枠で、角を一つ斜めに切り落とす。縦書きの英字名と全身イラストを並べ、その下に項目を罫線で区切って続ける
• 赤い四角ラベル（label-tag）: 日時・内容などの項目名を、赤ベタに白字の小さな四角ラベルで出す
• 赤ピル CTA（button-primary）: 写真背景の上に置く、赤ベタに白い太字のピル型ボタン
• 黒ピルボタン（button-secondary）: 詳細へ誘導する、黒ベタに白字のピル型ボタン
• 赤ベタ全幅帯（red-band）: 動画やメッセージを載せる赤い全幅のセクション。白い文字を中央揃えで置く

Do's and Don'ts

Do - 二体のキャラクターで、赤と青の色分けを全要素に徹底する - 欧文は極太の斜体で、大胆に大きく配置する - 白地を広く取り、赤帯でリズムをつける - 数字は特大の欧文斜体で見せる

Don't - グラデーションやドロップシャドウを使わない - 赤と青以外の有彩色を加えない - カードを角丸にしない - 本文を装飾書体にしない

Page Structure

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

1. ファーストビュー（キャラクターとメッセージを一目で印象づける）: 赤と青に塗り分けた欧文ロゴにキャラクター二体を重ね、その下に赤い斜体のキャッチを置く
2. 結果発表（投票の総数と結果を伝える）: トロフィー付きの見出しと特大の数値を置き、下に中央揃えの短い説明文を添える
3. 順位表示（候補ごとの得票を比較して見せる）: 赤い三段の表彰台にキャラクターと得票数を載せる
4. 紹介動画（動画で世界観を伝える）: 赤の全幅帯に白い欧文見出しを置き、動画を埋め込む
5. プロフィール（キャラクターの性格を伝える）: 赤と青の線枠カードを一体ずつ縦に並べ、項目を罫線で区切る
6. ブランドメッセージ（キャラクターに込めた想いを語る）: 赤の全幅帯に、白い中央揃えの長文を段落ごとに置く
7. イベント告知（来場を促す）: バナー画像を置き、赤ラベルで日時と内容を示して、黒ピルボタンにつなぐ
8. 関連プロジェクト誘導（外部サイトへ送客する）: 暗めのアニメ画像を全面に敷き、白い大見出しと赤ピルの CTA を重ねる
9. クレジット（制作者を明記する）: 極太斜体の欧文見出しを置き、項目ごとに細い下線を引いて小さな文字で並べる

Imagery

• 太い輪郭線とベタ塗りのアニメ調キャラクターを、白背景で切り抜いて使う
• キャラクターは赤系と青系の衣装で対にし、全身で描く
• トロフィーや月桂樹は細い線画のアイコンにする
• 外部誘導の背景には、暗めのトーンのアニメのキービジュアルを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキャラクターを横長の欧文ロゴの中に収め、キャッチを 1 行にする
• PC のプロフィールカードは、イラストと項目表の 2 カラムにし、赤と青で左右を反転させる
• PC のイベント告知は、バナーと情報の 2 カラムにする
• PC では本文幅を 800px 前後に絞って中央に置く
• 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 行書くと起動時に読み込まれる。