濃紺×黄色の学生応援キャンペーン LP

Bold Blue Student Sports Campaign LP

濃い青の地に白文字、黄色の丸い応募ボタンを効かせた投票型キャンペーン LP。学生の写真と銀色のグラデーション面、斜めの帯見出しで勢いを出す。

キャンペーン・プレゼント力強い・インパクトスポーティポップ・元気情報量多め・訴求型PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

ページの大部分は濃紺の地に白文字で組む
ストーリー部分だけ銀色グラデーションの面に黒い極太文字
応募の行動ボタンは黄色1色に限定する
強調のキャッチは青い帯に白文字を斜めに置く
金色は王冠など小さいアイコンだけ
賞品一覧は白いカードで濃紺から浮かせる

TYPOGRAPHY

書体

displayFV の斜め帯キャッチゴシック／ Dela Gothic One 900 ／ 30px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg銀色面の詩的な見出しゴシック／ Noto Sans JP 900 ／ 20px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdセクション見出し（概要など）ゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm合計票数などの数字表示ゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-md説明文ゴシック／ Noto Sans JP 500 ／ 13px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・期間・小さな補足ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-button枠線ボタン・応募ボタンゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

見出しは極太のゴシックで中央揃え
詩的なコピーは短い行で改行して縦に積む
数字は他の文字より大きくして目立たせる
見出しは字間を広めにとる
注釈は小さく白で控えめに

PAGE STRUCTURE

セクション構成

ヘッダーナビ各セクションへの移動左にロゴ、右に短いメニューを細い濃紺帯に並べる
ファーストビュー勢いと世界観を一目で伝える全幅の青空と学生の写真に商品を合成し、斜め帯キャッチを右上に置く
特典の帯賞品の規模を伝える青帯に白文字で数量を大きく書く
ストーリー共感と参加の動機をつくる銀色グラデーション面に短い行の極太コピーとロゴを中央に積む
動画雰囲気を体感させる縦長の動画サムネイルを中央に置く
応募とランキング投票へ誘導し現状を見せる黄色の円形ボタン、王冠付き見出し、枠線ボタン2つ、総投票数
キャンペーン概要条件と期間を示す字間の広い見出し、説明文、期間、3ステップアイコン
賞品一覧賞品の量を見せる白カードに商品画像を格子状にずらりと並べる
再応募とシェア拡散と再参加円形応募ボタン、ランキング、SNS の丸アイコン3つ
商品ラインナップブランドを紹介するロゴの下に商品パッケージを2段に並べる
お問い合わせ・フッター窓口と規約を示す白文字の連絡先と注釈、黄色帯ボタン、白いフッター

COMPONENTS

部品

斜め帯キャッチ slanted-bannerFV 写真の上に、少し傾けた青帯に白の極太文字を2段置く
円形応募ボタン button-circle-cta黄色の正円にロゴ風の文字と小さな補足を入れる
黄色帯応募ボタン button-primaryページ下部に置く横長の黄色ボタン
枠線ランキングボタン button-outline白い細線の枠で、右に矢印。2つ横並び
総投票数表示 stat-counter大きな数字と小さな日時注記を中央に置く
3ステップアイコン step-icons白い線画アイコンと番号付き短文を3つ並べる
賞品一覧カード prize-card白カードに商品画像を格子状に並べ、上に数量を書く
銀色ストーリー面 metal-panel銀色グラデーションの上に黒い極太の詩的コピーとロゴを置く

守ること

濃紺を地の主役にする
応募の導線はすべて黄色にそろえる
部活・学生の動きのある写真を使う
数字や数量は大きく強調する
応募ボタンをページ中に何度も置く

DON'T

避けること

黄色を応募ボタン以外の装飾に使わない
細い明朝体や柔らかい丸文字を使わない
パステル調の淡い配色にしない
濃紺の上に長い文章を詰め込まない
影やぼかしを多用しない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 濃紺×黄色の学生応援キャンペーン LP（Bold Blue Student Sports Campaign LP）

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

Overview

業種: キャンペーン・プレゼント／ 雰囲気: 力強い・インパクト、スポーティ、ポップ・元気、情報量多め・訴求型
キーワード: 濃紺ベース・黄色の応募ボタン・斜めの帯見出し・銀色のグラデーション・学生写真・投票ランキング
地の質感: メタリックな銀色グラデーションの面と、フラットな濃紺の面を組み合わせる
形: 斜めに傾けた帯、円形の応募ボタン、角丸が小さい枠線ボタン
温度感: 爽やかで熱量の高い青系。黄色が温度を足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#135796`	ブランドの濃紺メイン地色	51%	画素の実測
`background`	`#FFFFFF`	白地カード・フッター	8%	画素の実測
`background-alt`	`#FBFBFB`	銀色グラデーション面のベース	12%	画素の実測
`cta`	`#FFE600`	応募ボタンの黄色	1%	推定
`on-cta`	`#135796`	黄色ボタン上の文字色	0%	画素の主要色に補正
`text`	`#010101`	銀色面の見出し文字	3%	画素の実測
`on-primary`	`#FFFFFF`	濃紺上の白文字	2%	画素の主要色に補正
`accent-1`	`#015AA9`	帯見出し・ロゴ下線の鮮やかな青	2%	画素の実測
`tint-1`	`#8BC2F4`	空色写真内の明るい青	5%	画素の実測
`line`	`#91BDDF`	枠線ボタン・区切り線	0%	画素の主要色に補正
`accent-2`	`#F2B705`	王冠アイコンの金色	0%	推定
`dark-section`	`#135695`	ヘッダーナビの濃紺	1%	画素の実測

ページの大部分は濃紺の地に白文字で組む
ストーリー部分だけ銀色グラデーションの面に黒い極太文字
応募の行動ボタンは黄色1色に限定する
強調のキャッチは青い帯に白文字を斜めに置く
金色は王冠など小さいアイコンだけ
賞品一覧は白いカードで濃紺から浮かせる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の斜め帯キャッチ	ゴシック	Dela Gothic One	900	30px	1.3	0.02em
`headline-lg`	銀色面の詩的な見出し	ゴシック	Noto Sans JP	900	20px	1.6	0.02em
`headline-md`	セクション見出し（概要など）	ゴシック	Noto Sans JP	700	18px	1.5	0.15em
`headline-sm`	合計票数などの数字表示	ゴシック	Noto Sans JP	700	16px	1.4	0.05em
`body-md`	説明文	ゴシック	Noto Sans JP	500	13px	1.8	0.03em
`note`	注釈・期間・小さな補足	ゴシック	Noto Sans JP	400	10px	1.6	0.02em
`label-button`	枠線ボタン・応募ボタン	ゴシック	Noto Sans JP	700	13px	1.2	0.1em

見出しは極太のゴシックで中央揃え
詩的なコピーは短い行で改行して縦に積む
数字は他の文字より大きくして目立たせる
見出しは字間を広めにとる
注釈は小さく白で控えめに
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。賞品一覧だけ格子状に並べる
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
すべて中央揃えの縦一列
写真や動画は縦長で中央に置く
ランキングボタンは2つ横並び
手順アイコンは3つ横並び
区切りは細い横線1本

Elevation & Depth

影はほぼ使わずフラットにする
白カードは濃紺の上に置いて段差を出す
銀色面はグラデーションで金属の質感を出す

Shapes

角丸: 小 2px ／中 4px ／大 8px。ボタンは角丸の長方形。
写真の切り抜き: 四角く切り抜き、FV は全幅の写真
セクション境界: 直線で切り替え。帯見出しは斜めに傾ける
応募ボタンは黄色の正円か長方形
ランキングボタンは白線の枠で中は透明、右に矢印
SNS は丸いアイコンを3つ並べる

Components

斜め帯キャッチ（slanted-banner）: FV 写真の上に、少し傾けた青帯に白の極太文字を2段置く
円形応募ボタン（button-circle-cta）: 黄色の正円にロゴ風の文字と小さな補足を入れる
黄色帯応募ボタン（button-primary）: ページ下部に置く横長の黄色ボタン
枠線ランキングボタン（button-outline）: 白い細線の枠で、右に矢印。2つ横並び
総投票数表示（stat-counter）: 大きな数字と小さな日時注記を中央に置く
3ステップアイコン（step-icons）: 白い線画アイコンと番号付き短文を3つ並べる
賞品一覧カード（prize-card）: 白カードに商品画像を格子状に並べ、上に数量を書く
銀色ストーリー面（metal-panel）: 銀色グラデーションの上に黒い極太の詩的コピーとロゴを置く

Do's and Don'ts

Do - 濃紺を地の主役にする - 応募の導線はすべて黄色にそろえる - 部活・学生の動きのある写真を使う - 数字や数量は大きく強調する - 応募ボタンをページ中に何度も置く

Don't - 黄色を応募ボタン以外の装飾に使わない - 細い明朝体や柔らかい丸文字を使わない - パステル調の淡い配色にしない - 濃紺の上に長い文章を詰め込まない - 影やぼかしを多用しない

Page Structure

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

ヘッダーナビ（各セクションへの移動）: 左にロゴ、右に短いメニューを細い濃紺帯に並べる
ファーストビュー（勢いと世界観を一目で伝える）: 全幅の青空と学生の写真に商品を合成し、斜め帯キャッチを右上に置く
特典の帯（賞品の規模を伝える）: 青帯に白文字で数量を大きく書く
ストーリー（共感と参加の動機をつくる）: 銀色グラデーション面に短い行の極太コピーとロゴを中央に積む
動画（雰囲気を体感させる）: 縦長の動画サムネイルを中央に置く
応募とランキング（投票へ誘導し現状を見せる）: 黄色の円形ボタン、王冠付き見出し、枠線ボタン2つ、総投票数
キャンペーン概要（条件と期間を示す）: 字間の広い見出し、説明文、期間、3ステップアイコン
賞品一覧（賞品の量を見せる）: 白カードに商品画像を格子状にずらりと並べる
再応募とシェア（拡散と再参加）: 円形応募ボタン、ランキング、SNS の丸アイコン3つ
商品ラインナップ（ブランドを紹介する）: ロゴの下に商品パッケージを2段に並べる
お問い合わせ・フッター（窓口と規約を示す）: 白文字の連絡先と注釈、黄色帯ボタン、白いフッター

Imagery

青空の下、校舎前を走る学生を低い位置から広角で撮る
部活のユニフォーム姿の友人同士の笑顔を撮る
商品パッケージは切り抜いて大きく合成する
アイコンは白い線画のシンプルなピクトにする
商品一覧は正面の切り抜きを等間隔に並べる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC でも中央に細い1カラムで、両端は濃紺のまま
FV は PC で全幅の横長、SP では縦長に切り抜き直す
SP の賞品格子は1列あたり5〜6個に減らす
ナビは SP ではハンバーガーメニューにまとめる
斜め帯キャッチは 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 行書くと起動時に読み込まれる。

---
version: alpha
name: Bold Blue Student Sports Campaign LP
description: 濃い青の地に白文字、黄色の丸い応募ボタンを効かせた投票型キャンペーン LP。学生の写真と銀色のグラデーション面、斜めの帯見出しで勢いを出す。
colors:
  primary: '#135796'
  background: '#FFFFFF'
  background-alt: '#FBFBFB'
  cta: '#FFE600'
  on-cta: '#135796'
  text: '#010101'
  on-primary: '#FFFFFF'
  accent-1: '#015AA9'
  tint-1: '#8BC2F4'
  line: '#91BDDF'
  accent-2: '#F2B705'
  dark-section: '#135695'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.6
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.15em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  slanted-banner:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 48px
  button-circle-cta:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 96px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 36px
  button-outline:
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 36px
  stat-counter:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 60px
  step-icons:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.note}'
    height: 100px
  prize-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 320px
  metal-panel:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 720px
---

# DESIGN.md — 濃紺×黄色の学生応援キャンペーン LP（Bold Blue Student Sports Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、スポーティ、ポップ・元気、情報量多め・訴求型
- **キーワード**: 濃紺ベース・黄色の応募ボタン・斜めの帯見出し・銀色のグラデーション・学生写真・投票ランキング
- **地の質感**: メタリックな銀色グラデーションの面と、フラットな濃紺の面を組み合わせる
- **形**: 斜めに傾けた帯、円形の応募ボタン、角丸が小さい枠線ボタン
- **温度感**: 爽やかで熱量の高い青系。黄色が温度を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#135796` | ブランドの濃紺 メイン地色 | 51% | 画素の実測 |
| `background` | `#FFFFFF` | 白地 カード・フッター | 8% | 画素の実測 |
| `background-alt` | `#FBFBFB` | 銀色グラデーション面のベース | 12% | 画素の実測 |
| `cta` | `#FFE600` | 応募ボタンの黄色 | 1% | 推定 |
| `on-cta` | `#135796` | 黄色ボタン上の文字色 | 0% | 画素の主要色に補正 |
| `text` | `#010101` | 銀色面の見出し文字 | 3% | 画素の実測 |
| `on-primary` | `#FFFFFF` | 濃紺上の白文字 | 2% | 画素の主要色に補正 |
| `accent-1` | `#015AA9` | 帯見出し・ロゴ下線の鮮やかな青 | 2% | 画素の実測 |
| `tint-1` | `#8BC2F4` | 空色 写真内の明るい青 | 5% | 画素の実測 |
| `line` | `#91BDDF` | 枠線ボタン・区切り線 | 0% | 画素の主要色に補正 |
| `accent-2` | `#F2B705` | 王冠アイコンの金色 | 0% | 推定 |
| `dark-section` | `#135695` | ヘッダーナビの濃紺 | 1% | 画素の実測 |

- ページの大部分は濃紺の地に白文字で組む
- ストーリー部分だけ銀色グラデーションの面に黒い極太文字
- 応募の行動ボタンは黄色1色に限定する
- 強調のキャッチは青い帯に白文字を斜めに置く
- 金色は王冠など小さいアイコンだけ
- 賞品一覧は白いカードで濃紺から浮かせる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の斜め帯キャッチ | ゴシック | Dela Gothic One | 900 | 30px | 1.3 | 0.02em |
| `headline-lg` | 銀色面の詩的な見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.6 | 0.02em |
| `headline-md` | セクション見出し（概要など） | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.15em |
| `headline-sm` | 合計票数などの数字表示 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em |
| `body-md` | 説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em |
| `note` | 注釈・期間・小さな補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `label-button` | 枠線ボタン・応募ボタン | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.1em |

- 見出しは極太のゴシックで中央揃え
- 詩的なコピーは短い行で改行して縦に積む
- 数字は他の文字より大きくして目立たせる
- 見出しは字間を広めにとる
- 注釈は小さく白で控えめに
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。賞品一覧だけ格子状に並べる
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- すべて中央揃えの縦一列
- 写真や動画は縦長で中央に置く
- ランキングボタンは2つ横並び
- 手順アイコンは3つ横並び
- 区切りは細い横線1本

## Elevation & Depth

- 影はほぼ使わずフラットにする
- 白カードは濃紺の上に置いて段差を出す
- 銀色面はグラデーションで金属の質感を出す

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 四角く切り抜き、FV は全幅の写真
- **セクション境界**: 直線で切り替え。帯見出しは斜めに傾ける
- 応募ボタンは黄色の正円か長方形
- ランキングボタンは白線の枠で中は透明、右に矢印
- SNS は丸いアイコンを3つ並べる

## Components

- **斜め帯キャッチ**（`slanted-banner`）: FV 写真の上に、少し傾けた青帯に白の極太文字を2段置く
- **円形応募ボタン**（`button-circle-cta`）: 黄色の正円にロゴ風の文字と小さな補足を入れる
- **黄色帯応募ボタン**（`button-primary`）: ページ下部に置く横長の黄色ボタン
- **枠線ランキングボタン**（`button-outline`）: 白い細線の枠で、右に矢印。2つ横並び
- **総投票数表示**（`stat-counter`）: 大きな数字と小さな日時注記を中央に置く
- **3ステップアイコン**（`step-icons`）: 白い線画アイコンと番号付き短文を3つ並べる
- **賞品一覧カード**（`prize-card`）: 白カードに商品画像を格子状に並べ、上に数量を書く
- **銀色ストーリー面**（`metal-panel`）: 銀色グラデーションの上に黒い極太の詩的コピーとロゴを置く

## Do's and Don'ts

**Do**
- 濃紺を地の主役にする
- 応募の導線はすべて黄色にそろえる
- 部活・学生の動きのある写真を使う
- 数字や数量は大きく強調する
- 応募ボタンをページ中に何度も置く

**Don't**
- 黄色を応募ボタン以外の装飾に使わない
- 細い明朝体や柔らかい丸文字を使わない
- パステル調の淡い配色にしない
- 濃紺の上に長い文章を詰め込まない
- 影やぼかしを多用しない

## Page Structure

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

1. **ヘッダーナビ**（各セクションへの移動）: 左にロゴ、右に短いメニューを細い濃紺帯に並べる
2. **ファーストビュー**（勢いと世界観を一目で伝える）: 全幅の青空と学生の写真に商品を合成し、斜め帯キャッチを右上に置く
3. **特典の帯**（賞品の規模を伝える）: 青帯に白文字で数量を大きく書く
4. **ストーリー**（共感と参加の動機をつくる）: 銀色グラデーション面に短い行の極太コピーとロゴを中央に積む
5. **動画**（雰囲気を体感させる）: 縦長の動画サムネイルを中央に置く
6. **応募とランキング**（投票へ誘導し現状を見せる）: 黄色の円形ボタン、王冠付き見出し、枠線ボタン2つ、総投票数
7. **キャンペーン概要**（条件と期間を示す）: 字間の広い見出し、説明文、期間、3ステップアイコン
8. **賞品一覧**（賞品の量を見せる）: 白カードに商品画像を格子状にずらりと並べる
9. **再応募とシェア**（拡散と再参加）: 円形応募ボタン、ランキング、SNS の丸アイコン3つ
10. **商品ラインナップ**（ブランドを紹介する）: ロゴの下に商品パッケージを2段に並べる
11. **お問い合わせ・フッター**（窓口と規約を示す）: 白文字の連絡先と注釈、黄色帯ボタン、白いフッター

## Imagery

- 青空の下、校舎前を走る学生を低い位置から広角で撮る
- 部活のユニフォーム姿の友人同士の笑顔を撮る
- 商品パッケージは切り抜いて大きく合成する
- アイコンは白い線画のシンプルなピクトにする
- 商品一覧は正面の切り抜きを等間隔に並べる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも中央に細い1カラムで、両端は濃紺のまま
- FV は PC で全幅の横長、SP では縦長に切り抜き直す
- SP の賞品格子は1列あたり5〜6個に減らす
- ナビは SP ではハンバーガーメニューにまとめる
- 斜め帯キャッチは SP では写真下部に大きく置く

## 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-5d6be5d8`（元 LP の URL から採番）
- **元 LP**: https://www.morinaga.co.jp/in/know/2026new/bukatsu/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

キャンペーン・プレゼント赤×空色グラデのポップなキャラ抽選キャンペーンLPPop Red Character Lottery Campaign LP キャンペーン・プレゼントバター黄×焦茶枠の菓子キャンペーンLPButter Yellow Campaign Card LP キャンペーン・プレゼントからし黄×朱赤の昭和レトロ酒類キャンペーンLPRetro Showa Mustard Red Liquor Campaign LP キャンペーン・プレゼント黒×赤×黄の屋台祭り風キャンペーンLPBold Festival Black Red Yellow Campaign LP キャンペーン・プレゼントピンク柄×虹色アイドルのポップなキャンペーンLPPink Idol Pop Campaign LP キャンペーン・プレゼント赤×黄×黒のポップ図形アイス応募キャンペーンLPBold Red Pop Graphic Campaign LP