DESIGN.md — 紺×赤の代表応援プレゼント企画 LP（Navy Red Sports Supporter Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、信頼・誠実、スポーティ
• キーワード: 紺と赤・応援の一体感・写真コラージュ・明朝の宣言文・斜めの帯・SNS応募
• 地の質感: ベタ塗りの紺と白。写真の上に光沢のある紺の布帯を重ねて質感を出す
• 形: 四角い白パネルと紺のカード。角丸は小さめ。赤帯は少し傾けて勢いを出す
• 温度感: 熱く誠実。紺で引き締め、赤で熱を足す

Colors

• 地色は紺と白の交互。グラデーションは使わない
• 赤は帯・下線・NEWロゴ・注意文に限定
• 紺地上の文字は白のみ
• 主ボタンは黒地白文字で紺と差別化
• 金色は当選確率バッジ1点だけ
• 写真セクション以外に中間色を増やさない
• badge-odds は文字 #E60122 × 背景 #F2C230 のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#FEF8E9、4.51:1）を使う。

Typography

• 見出しと本文は太めの明朝で誠実さを出す
• 本文は中央揃えで短い行を段落ごとに区切る
• 大コピーは赤帯上に白で3行程度
• STEPはイタリック欧文で数字を大きく
• 注釈とボタンだけゴシックにする
• 重要語は下線で強調
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ステップのみ 3 列横並び
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションは全幅の地色ブロックで区切る
• 宣言文は写真枠の中央に白パネルで置く
• 応募期間は白線の角丸枠で囲む
• ステップは矢印でつなぎ横3列
• CTAとシェアボタンは中央に縦積み

Elevation & Depth

• 影はほぼ使わずフラット
• 赤帯のみ写真上で浮く薄い影
• 布帯写真の光沢で奥行きを表現

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は四角く密に並べたグリッドのコラージュ
• セクション境界: 直線で地色を切り替える
• ボタンは角丸なしの長方形
• ステップカードは角丸8px、右に三角矢印
• STEPラベルは左上に重なるタブ型
• バッジは円形
• 赤帯は数度傾ける

Components

• 写真コラージュFV（hero-collage）: 人物写真を四方に並べ、中央に白パネルで宣言文
• 紺の宣言帯（slogan-band）: 写真の上に横長の紺帯と筆文字風コピー・ロゴ
• 斜め赤帯コピー（red-tilt-banner）: 紺の布帯写真の上に傾いた赤ボックスと白明朝の大コピー
• 赤下線見出し（heading-underline）: 紺地に白明朝の見出し、下に太い赤線
• 当選確率バッジ（badge-odds）: 金色の円に倍率数字を大きく
• 応募期間枠（period-box）: 紺地に白線の角丸枠で期間を明朝で表示
• ステップカード（step-card）: 紺カードにSTEPタブ、白アイコン、短い説明。矢印で連結
• 主CTA（button-primary）: 黒の長方形に白太字
• 要項ボタン（button-outline）: 白地に黒枠、右に矢印

Do's and Don'ts

Do - 紺・白・赤の3色で全体を構成する - 見出しと本文は太めの明朝で統一 - 応募手順は3ステップ横並びで図示 - 倍率などの特典は金の丸バッジで1点だけ強調 - 注釈は最下部にまとめる

Don't - パステルやグラデーションの背景を使わない - 赤を広い面の地色に使わない - ボタンを丸いピル型にしない - 本文を左揃えの長い段落にしない - 装飾アイコンを増やしすぎない

Page Structure

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

1. ファーストビュー（応援の一体感とメッセージを伝える）: 人物写真のコラージュに紺の宣言帯、中央の白パネルに明朝の宣言文とロゴ
2. 企画タイトル（企画名を明示）: 白地に赤のNEWロゴ＋紺の大明朝
3. キービジュアル（商品の存在感と決意を伝える）: 斜めに重ねた紺の布帯写真に傾いた赤帯の白コピー
4. プレゼント概要（当選数と参加方法の概要を伝える）: 紺地にロゴ、赤下線見出し、中央揃え白本文、金バッジ、白枠の期間表示
5. 応募方法（手順を理解させる）: 白地に見出し、紺のSTEPカード3枚を矢印で連結
6. CTA（応募行動へ誘導）: 黒の主ボタン、赤の注意文、枠線の要項ボタン、SNSシェアボタン
7. 注意事項（条件を補足）: 小さなグレーの注釈を※付きで箇条書き

Imagery

• 選手やサポーターの笑顔・叫ぶ表情を正方形に近い枠で密に並べる
• 全員が同じ色の小物を身につけ一体感を出す
• 商品は光沢のある布を斜めに重ねて撮る
• 手順はシンプルな白の線アイコン（ハッシュ・封筒）
• 写真の隅に小さく権利表記を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約640px幅のSPレイアウトを置く
• キービジュアルと紺地は全幅に広げる
• コラージュは左右の写真列を維持
• ステップ3列はSP・PC共通
• 文字サイズは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 行書くと起動時に読み込まれる。