--- version: alpha name: Sky Blue Sports Partnership Beer LP description: 雲の浮かぶ青空写真を全面の地にしたビールのスポーツ協賛LP。上部は赤帯CTAでキャンペーンへ送客する。中央揃えの白文字ステートメント、角丸カードのバナー、動画サムネイルを縦に積む、短めの告知型の構成。 colors: primary: '#0075C4' secondary: '#0055A8' cta: '#E40113' on-cta: '#FFFAF8' accent-1: '#015DBB' surface: '#F4F4F4' dark-section: '#111111' on-dark: '#F9FAF8' accent-2: '#B09867' accent-3: '#C13025' line: '#F9FAF8' background: '#F9FAF8' accent-2-accessible: '#D6CAB1' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 38px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.4 rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 90px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' cta-red-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 46px campaign-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 480px button-pill: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px gold-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 60px official-dark-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 180px video-thumb: textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px outline-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px --- # DESIGN.md — 青空ブルー×赤帯のスポーツ協賛ビールLP（Sky Blue Sports Partnership Beer LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 清潔・爽やか、力強い・インパクト、スポーティ - **キーワード**: 青空・雲・白抜き太字・赤帯・角丸バナー・エンブレム群 - **地の質感**: 青空と雲の写真を地にして、フラットな色面と光沢のある商品写真を重ねる - **形**: 角丸20px前後のカードと白い細枠のバナー。ボタンはピル型 - **温度感**: 爽快で涼しい寒色が主体。赤と金の差し色で熱量を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0075C4` | 青空の地色（ブランド青） | 45% | 画素の実測 | | `secondary` | `#0055A8` | ヘッダー帯の濃い青 | 4% | 画素の実測 | | `cta` | `#E40113` | 赤帯CTA・期限帯 | 4% | 画素の実測 | | `on-cta` | `#FFFAF8` | 赤帯上の白文字 | 1% | 画素の実測 | | `accent-1` | `#015DBB` | ピル型ボタンの塗り | 2% | 画素の実測 | | `surface` | `#F4F4F4` | カード下部のオフホワイト | 4% | 画素の実測 | | `dark-section` | `#111111` | 公式サイト誘導カードの黒 | 3% | 推定 | | `on-dark` | `#F9FAF8` | 青地・黒地の上の白文字 | 3% | 画素の主要色に補正 | | `accent-2` | `#B09867` | バッジ・見出しの金 | 1% | 画素の主要色に補正 | | `accent-3` | `#C13025` | NEWバッジの赤 | 0% | 画素の主要色に補正 | | `line` | `#F9FAF8` | バナーを囲む白い細枠 | 0% | 画素の主要色に補正 | | `background` | `#F9FAF8` | 雲のハイライト | 5% | 画素の主要色に補正 | | `accent-2-accessible` | `#D6CAB1` | AA を満たす補正値（計算） | | 計算 | - 地は全面を青空の写真にする。白い面は作らない - 本文と見出しは青地の上に白の太字で置く - 赤は上部のCTA帯と期限帯、NEWバッジにだけ使う - 金はキャンペーンバッジとリニューアル見出しの差し色に限る - 公式サイトへ誘導するカードは黒のグラデーションにして、青空と対比させる - カード下部はオフホワイトにし、青いピルボタンを置く - `gold-badge` は文字 `#0055A8` × 背景 `#B09867` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D6CAB1`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 最上部の大見出し | ゴシック | Dela Gothic One | 900 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 38px | 1.3 | 0.02em | | `headline-md` | 赤帯CTA・カード見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.4 | 0.02em | | `body-lg` | 中央揃えのステートメント本文 | ゴシック | Noto Sans JP | 700 | 16px | 2.2 | 0.05em | | `body-md` | 動画のキャプション | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.02em | | `label-button` | ピルボタンの文字 | ゴシック | Noto Sans JP | 900 | 19px | 1.0 | 0.05em | | `note` | 著作権表記・NEWバッジ | 欧文サンセリフ | Montserrat | 700 | 10px | 1.4 | 0.0em | - 文字はすべて太字のゴシックにする。明朝は使わない - 本文は中央揃えで行間を広く取り、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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-357c85d0`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/beer/suntorynama/jleague/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。