DESIGN.md — 青空ブルー×赤帯のスポーツ協賛ビールLP（Sky Blue Sports Partnership Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 清潔・爽やか、力強い・インパクト、スポーティ
• キーワード: 青空・雲・白抜き太字・赤帯・角丸バナー・エンブレム群
• 地の質感: 青空と雲の写真を地にして、フラットな色面と光沢のある商品写真を重ねる
• 形: 角丸20px前後のカードと白い細枠のバナー。ボタンはピル型
• 温度感: 爽快で涼しい寒色が主体。赤と金の差し色で熱量を出す

Colors

• 地は全面を青空の写真にする。白い面は作らない
• 本文と見出しは青地の上に白の太字で置く
• 赤は上部のCTA帯と期限帯、NEWバッジにだけ使う
• 金はキャンペーンバッジとリニューアル見出しの差し色に限る
• 公式サイトへ誘導するカードは黒のグラデーションにして、青空と対比させる
• カード下部はオフホワイトにし、青いピルボタンを置く
• gold-badge は文字 #0055A8 × 背景 #B09867 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D6CAB1、4.52:1）を使う。

Typography

• 文字はすべて太字のゴシックにする。明朝は使わない
• 本文は中央揃えで行間を広く取り、4行ずつの段落に分ける
• 段落の間は1行ぶん空ける
• キャッチは太いゴシックで、末尾に感嘆符を置く
• 縦書きはバナー内の補助コピーにだけ使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 90px、基本単位 8px、カード内 16px（375px 幅換算）
• カードとバナーは左右16〜24pxの余白を取り、中央に置く
• ステートメントの前後は大きく空けて、雲の写真を見せる
• 動画は全幅のサムネイルの下にキャプションを置き、縦に並べる
• エンブレム群は6列のグリッドに並べ、商品写真の左右を囲む

Elevation & Depth

• カードには柔らかい影 0 4px 12px rgba(0,0,0,.2) を付ける
• 商品写真には落ち影を付けて浮かせる
• バナーは影ではなく白い細枠で区切る

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 動画サムネイルは角丸16pxの横長矩形で切る。商品写真は切り抜き
• セクション境界: 境界線は引かない。青空の写真を連続させてつなぐ
• カードは角丸24pxにする
• バナーは白枠1.5px・角丸16pxにする
• ボタンはピル型にし、右端に外部リンクアイコンを付ける

Components

• 赤帯CTA（cta-red-band）: 全幅の赤い帯。白い太字と右向きの矢印「>>>」で外部へ誘導する
• キャンペーンカード（campaign-card）: 青の見出し、赤の期限帯、商品画像、オフホワイトの下部の順に重ねた角丸カード
• 詳細ボタン（button-pill）: 濃い青のピル型ボタン。白文字で、右端に外部リンクアイコンを付ける
• 金バッジ（gold-badge）: カード左上に重ねる金色の四角いバッジ
• 公式サイト誘導カード（official-dark-card）: 黒のグラデーションに大きなロゴと日付を載せた角丸カード
• 動画サムネイル（video-thumb）: 白枠の角丸サムネイル。中央に再生アイコン、左上にNEWバッジを置く
• 白枠バナー（outline-banner）: 青地に白い細枠を引き、商品写真と金のコピーを組み合わせる

Do's and Don'ts

Do - 地は青空と雲の写真で一貫させる - 文字は白の太字ゴシックで中央に揃える - 赤は期限やCTAなど、急ぎの情報だけに使う - カードとバナーは角丸にして影か白枠で浮かせる - 商品写真は冷えて光沢のある見せ方にする

Don't - 白や淡色を地にしたセクションを作らない - 細い明朝や手書き書体を使わない - 赤を広い面に使わない - 本文を左揃えで長く詰めない - 暗くて重い背景写真を使わない

Page Structure

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

1. ヘッダー告知（キャンペーンを即座に訴求する）: 濃い青の帯に巨大な白いキャッチを置き、その下に赤帯CTAを敷く
2. ファーストビュー（協賛関係と商品を示す）: 上部に2社ロゴを×でつなぎ、中央に商品写真、周囲をエンブレム群で囲む
3. ステートメント（応援の想いを伝える）: 白の太字を中央揃えにし、4段落に分けて広い余白を取る
4. 公式サイト誘導（リーグ公式サイトへ送客する）: 黒の角丸カードに大きな日付を載せる
5. キャンペーン（応募へ誘導する）: 金バッジ、赤い期限帯、商品画像、ピルボタンの順に積んだ角丸カード
6. CM・動画（動画を見てもらう）: 白文字の見出しの下に、NEWバッジ付きの角丸サムネイルを縦に並べる
7. 関連バナー（リニューアル告知と公式サイトへ送客する）: 白枠の角丸バナーを2枚置き、金の見出しと縦書きコピーを入れる
8. フッター（権利を表記する）: 空の写真の右下に小さな白文字で著作権を入れる

Imagery

• 地は雲の多い晴天の青空写真にし、縦に連続させる
• 商品は缶とジョッキを並べる。泡と結露でシズル感を出す
• エンブレムは等間隔の小さなアイコンで敷き詰める
• 動画のサムネイルはジョッキを大量に並べた迫力ある構図にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約480〜900pxのカラムを置き、背景の空を全幅に広げる
• PCではファーストビューのエンブレムを商品写真の左右にまとめる
• PCでは動画を大きな1本の下に2本を2列で並べる
• 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 行書くと起動時に読み込まれる。