ワインレッド×金の恋愛番組キャンペーンLP

Wine Red and Gold Reality Show Campaign LP

深いワインレッドの地に金色のアイコンと白い明朝体を重ねた、映画ポスターのようなドラマチックな番組LP。舞い散る紙幣やボケたモチーフ、大きく薄い欧文の透かし文字で奥行きを出す。予想投票のキャンペーンと、出演者カードのグリッドで参加を促す。

エンタメ・ゲーム・アプリラグジュアリー・ダーク上品・高級力強い・インパクトPC

ダウンロード

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

COLORS

配色

地は常にワインレッド〜赤紫のグラデーションで、白い地は使わない
強調は金色のみ。キーワード・アイコン・CTA に限定する
本文は白、補足は白の透過 70% 程度
背景の透かし欧文は地より少し明るい赤茶で低コントラストにする
フッターだけ黒に切り替え、直前はベージュ寄りのグラデーションで夕焼けのようにつなぐ

TYPOGRAPHY

書体

displayFVのキーコピー（大きな漢字2文字の対比）明朝／ Shippori Mincho 500 ／ 64px ／行間 1.2

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

headline-lgセクション大見出し明朝／ Shippori Mincho 500 ／ 32px ／行間 1.3

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

headline-mdストーリーの語り文明朝／ Shippori Mincho 600 ／ 18px ／行間 1.6

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

accent背景の大きな透かし欧文・英字小見出し欧文セリフ／ Playfair Display 400 ／ 56px ／行間 1.0

あなたの 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 ／ 15px ／行間 1.2

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

見出しと語り文は明朝。説明と UI はゴシックに分ける
語り文は1行ごとに左右へずらして配置し、映画の字幕のようにリズムを出す
強調語だけ文字を大きく・金色にする
日本語の見出しに小さな英訳を添える
背景の透かし欧文はセクションをまたいで大きく置く

PAGE STRUCTURE

セクション構成

ファーストビュー番組の世界観とロゴを見せる妖艶なキービジュアル全面に白い明朝ロゴと金の筆記体を重ねる
コンセプト提示二択のテーマを印象づける大きな漢字2つの間に金のアイコン。背景に透かし欧文
ストーリー導入ルールとあらすじを伝える明朝の短文を左右交互に置き、出演者写真と紙幣を散らす
出演者一覧出演者を見せるモノクロの集合写真と、白い太見出しのキャッチ
キャンペーン告知予想投票とプレゼントで参加を促すひし形パネルを2つ縦につなぎ、人型アイコン列と賞品を中央揃えで置く
予想投票出演者ごとの予想に投票させるヤシの葉の装飾と金のカードアイコン、遊び方ボックス、出演者カードのグリッド、投票ボタン
視聴CTA番組の視聴へ誘導するサムネイルと放送情報、金のCTA、SNSの丸アイコン
フッターアプリ誘導とリンク黒地にロゴ、ストアバッジ、小さなリンク。右下に追従する円形の投票ボタン

COMPONENTS

部品

金色の視聴CTA button-primary金のピル型ボタンに濃い文字と再生アイコン
投票ボタン button-vote半透明ピンク系のピル型で、左右に金の細線を伸ばす
円形の予告バッジ badge-circle金の円の周りに英字を円形に回す
ひし形キャンペーン枠 diamond-panel45度回転した面の中に見出し・説明・賞品を中央揃えで置く
出演者予想カード cast-card写真、肩書き、名前、二択の割合バー
金の帯ラベル label-gold抽選人数などを入れる小さな金の帯
遊び方ボックス howto-box暗い面と細枠のボックスに丸アイコン2つと説明
透かし欧文 watermark-text背景に大きく置く低コントラストのセリフ欧文

守ること

地はワインレッドのグラデーションでまとめる
金は強調とCTAに絞る
見出しは明朝で余白を大きく取る
紙幣・宝石などのモチーフをボケさせて前景に散らす
ひし形の幾何学で高級感を出す

DON'T

避けること

白や明るいパステルの地にしない
ポップな丸ゴシックや原色は使わない
金をあちこちに使いすぎない
要素を詰め込み、余白をなくさない
太い枠線や強いドロップシャドウを使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — ワインレッド×金の恋愛番組キャンペーンLP（Wine Red and Gold Reality Show Campaign LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト
キーワード: ワインレッド・ゴールド・明朝体・透かし欧文・舞い散る紙幣・ひし形フレーム
地の質感: グラデーションの暗い赤い地に、ボケ写真や斜めの光の線を重ねた映画的な質感
形: ひし形の枠、細い金の罫線、角丸の小さい人物カード、ピル型ボタン
温度感: 暖色寄りで妖艶。夜の高級感

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#78303F`	メインの地色（ワインレッド）	40%	画素の主要色に補正
`background`	`#6E243B`	中盤の深い赤紫の地	25%	画素の実測
`secondary`	`#701A33`	ひし形パネルの面	8%	画素の実測
`accent-1`	`#E2C27A`	金のアイコン・ロゴマーク	2%	推定
`cta`	`#F0CF84`	金色の視聴ボタン	1%	推定
`on-cta`	`#1E1417`	金ボタン上の文字	0%	画素の主要色に補正
`text`	`#FFF5EF`	見出し・本文の白文字	3%	画素の実測
`accent-2`	`#E8C98A`	強調語の金文字	0%	推定
`tint-1`	`#A76E65`	透かし欧文の淡色	3%	画素の実測
`surface`	`#59202A`	説明ボックス・カードの暗面	4%	画素の主要色に補正
`background-alt`	`#CDA793`	フッター下部のベージュグラデーション	3%	画素の主要色に補正
`dark-section`	`#000000`	フッターの黒	6%	画素の実測
`line`	`#B8956A`	金の細罫線	0%	推定

地は常にワインレッド〜赤紫のグラデーションで、白い地は使わない
強調は金色のみ。キーワード・アイコン・CTA に限定する
本文は白、補足は白の透過 70% 程度
背景の透かし欧文は地より少し明るい赤茶で低コントラストにする
フッターだけ黒に切り替え、直前はベージュ寄りのグラデーションで夕焼けのようにつなぐ

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVのキーコピー（大きな漢字2文字の対比）	明朝	Shippori Mincho	500	64px	1.2	0.05em
`headline-lg`	セクション大見出し	明朝	Shippori Mincho	500	32px	1.3	0.04em
`headline-md`	ストーリーの語り文	明朝	Shippori Mincho	600	18px	1.6	0.08em
`accent`	背景の大きな透かし欧文・英字小見出し	欧文セリフ	Playfair Display	400	56px	1.0	0.0em
`body-md`	キャンペーン説明本文	ゴシック	Noto Sans JP	500	13px	1.8	0.04em
`note`	注釈・英文の小さな添え書き	ゴシック	Noto Sans JP	400	10px	1.6	0.02em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	15px	1.2	0.04em

見出しと語り文は明朝。説明と UI はゴシックに分ける
語り文は1行ごとに左右へずらして配置し、映画の字幕のようにリズムを出す
強調語だけ文字を大きく・金色にする
日本語の見出しに小さな英訳を添える
背景の透かし欧文はセクションをまたいで大きく置く
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、出演者カードは 2〜3 列グリッド
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
中央揃えを基本にする
ストーリー部は写真と文を左右交互に散らして余白を広く取る
キャンペーンはひし形の枠の中に中央揃えで収める
出演者カードは等幅のグリッドで、写真・名前・予想バーを縦に並べる

Elevation & Depth

影は弱く、金ボタンにだけ柔らかい光の影をつける
奥行きはボケた紙幣や写真の重ねで表現する
カードは地より少し暗い面と細い線で浮かせる

Shapes

角丸: 小 4px ／中 8px ／大 16px。ボタンはピル型。
写真の切り抜き: 人物は四角形で、ピンク〜金のグラデーションを背景にしたポートレート
セクション境界: 直線の境界は使わず、グラデーションとひし形・斜めの光の線でつなぐ
ひし形を繰り返し使う
円形の金バッジで予告などの導線を出す
罫線は細い金色

Components

金色の視聴CTA（button-primary）: 金のピル型ボタンに濃い文字と再生アイコン
投票ボタン（button-vote）: 半透明ピンク系のピル型で、左右に金の細線を伸ばす
円形の予告バッジ（badge-circle）: 金の円の周りに英字を円形に回す
ひし形キャンペーン枠（diamond-panel）: 45度回転した面の中に見出し・説明・賞品を中央揃えで置く
出演者予想カード（cast-card）: 写真、肩書き、名前、二択の割合バー
金の帯ラベル（label-gold）: 抽選人数などを入れる小さな金の帯
遊び方ボックス（howto-box）: 暗い面と細枠のボックスに丸アイコン2つと説明
透かし欧文（watermark-text）: 背景に大きく置く低コントラストのセリフ欧文

Do's and Don'ts

Do - 地はワインレッドのグラデーションでまとめる - 金は強調とCTAに絞る - 見出しは明朝で余白を大きく取る - 紙幣・宝石などのモチーフをボケさせて前景に散らす - ひし形の幾何学で高級感を出す

Don't - 白や明るいパステルの地にしない - ポップな丸ゴシックや原色は使わない - 金をあちこちに使いすぎない - 要素を詰め込み、余白をなくさない - 太い枠線や強いドロップシャドウを使わない

Page Structure

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

ファーストビュー（番組の世界観とロゴを見せる）: 妖艶なキービジュアル全面に白い明朝ロゴと金の筆記体を重ねる
コンセプト提示（二択のテーマを印象づける）: 大きな漢字2つの間に金のアイコン。背景に透かし欧文
ストーリー導入（ルールとあらすじを伝える）: 明朝の短文を左右交互に置き、出演者写真と紙幣を散らす
出演者一覧（出演者を見せる）: モノクロの集合写真と、白い太見出しのキャッチ
キャンペーン告知（予想投票とプレゼントで参加を促す）: ひし形パネルを2つ縦につなぎ、人型アイコン列と賞品を中央揃えで置く
予想投票（出演者ごとの予想に投票させる）: ヤシの葉の装飾と金のカードアイコン、遊び方ボックス、出演者カードのグリッド、投票ボタン
視聴CTA（番組の視聴へ誘導する）: サムネイルと放送情報、金のCTA、SNSの丸アイコン
フッター（アプリ誘導とリンク）: 黒地にロゴ、ストアバッジ、小さなリンク。右下に追従する円形の投票ボタン

Imagery

人物はピンク〜金のグラデーションを背景に、暖色ライトで撮った艶のあるポートレート
集合写真はモノクロにして、金とピンクの小物だけ色を残す
紙幣や宝石を被写界深度で強くボカし、前景に斜めに散らす
ヤシの葉をワインレッドや銅色で塗った装飾
斜めの細い光の線とレンズの光で夜の雰囲気を出す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央 1 カラムで、出演者カードは 5 列
SP は出演者カードを 2〜3 列にする
SP ではストーリーの左右交互配置を残しつつ、写真を小さくする
ひし形パネルは SP で横幅いっぱいに縮め、文字は 13px 以上にする
視聴CTAは 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 行書くと起動時に読み込まれる。

---
version: alpha
name: Wine Red and Gold Reality Show Campaign LP
description: 深いワインレッドの地に金色のアイコンと白い明朝体を重ねた、映画ポスターのようなドラマチックな番組LP。舞い散る紙幣やボケたモチーフ、大きく薄い欧文の透かし文字で奥行きを出す。予想投票のキャンペーンと、出演者カードのグリッドで参加を促す。
colors:
  primary: '#78303F'
  background: '#6E243B'
  secondary: '#701A33'
  accent-1: '#E2C27A'
  cta: '#F0CF84'
  on-cta: '#1E1417'
  text: '#FFF5EF'
  accent-2: '#E8C98A'
  tint-1: '#A76E65'
  surface: '#59202A'
  background-alt: '#CDA793'
  dark-section: '#000000'
  line: '#B8956A'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.08em
  accent:
    fontFamily: Playfair Display
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.0
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  button-vote:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  badge-circle:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 88px
  diamond-panel:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 360px
  cast-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 200px
  label-gold:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    height: 20px
  howto-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 48px
  watermark-text:
    textColor: '{colors.tint-1}'
    typography: '{typography.accent}'
    height: 60px
---

# DESIGN.md — ワインレッド×金の恋愛番組キャンペーンLP（Wine Red and Gold Reality Show Campaign LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、力強い・インパクト
- **キーワード**: ワインレッド・ゴールド・明朝体・透かし欧文・舞い散る紙幣・ひし形フレーム
- **地の質感**: グラデーションの暗い赤い地に、ボケ写真や斜めの光の線を重ねた映画的な質感
- **形**: ひし形の枠、細い金の罫線、角丸の小さい人物カード、ピル型ボタン
- **温度感**: 暖色寄りで妖艶。夜の高級感

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#78303F` | メインの地色（ワインレッド） | 40% | 画素の主要色に補正 |
| `background` | `#6E243B` | 中盤の深い赤紫の地 | 25% | 画素の実測 |
| `secondary` | `#701A33` | ひし形パネルの面 | 8% | 画素の実測 |
| `accent-1` | `#E2C27A` | 金のアイコン・ロゴマーク | 2% | 推定 |
| `cta` | `#F0CF84` | 金色の視聴ボタン | 1% | 推定 |
| `on-cta` | `#1E1417` | 金ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text` | `#FFF5EF` | 見出し・本文の白文字 | 3% | 画素の実測 |
| `accent-2` | `#E8C98A` | 強調語の金文字 | 0% | 推定 |
| `tint-1` | `#A76E65` | 透かし欧文の淡色 | 3% | 画素の実測 |
| `surface` | `#59202A` | 説明ボックス・カードの暗面 | 4% | 画素の主要色に補正 |
| `background-alt` | `#CDA793` | フッター下部のベージュ グラデーション | 3% | 画素の主要色に補正 |
| `dark-section` | `#000000` | フッターの黒 | 6% | 画素の実測 |
| `line` | `#B8956A` | 金の細罫線 | 0% | 推定 |

- 地は常にワインレッド〜赤紫のグラデーションで、白い地は使わない
- 強調は金色のみ。キーワード・アイコン・CTA に限定する
- 本文は白、補足は白の透過 70% 程度
- 背景の透かし欧文は地より少し明るい赤茶で低コントラストにする
- フッターだけ黒に切り替え、直前はベージュ寄りのグラデーションで夕焼けのようにつなぐ

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのキーコピー（大きな漢字2文字の対比） | 明朝 | Shippori Mincho | 500 | 64px | 1.2 | 0.05em |
| `headline-lg` | セクション大見出し | 明朝 | Shippori Mincho | 500 | 32px | 1.3 | 0.04em |
| `headline-md` | ストーリーの語り文 | 明朝 | Shippori Mincho | 600 | 18px | 1.6 | 0.08em |
| `accent` | 背景の大きな透かし欧文・英字小見出し | 欧文セリフ | Playfair Display | 400 | 56px | 1.0 | 0.0em |
| `body-md` | キャンペーン説明本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.04em |
| `note` | 注釈・英文の小さな添え書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.04em |

- 見出しと語り文は明朝。説明と UI はゴシックに分ける
- 語り文は1行ごとに左右へずらして配置し、映画の字幕のようにリズムを出す
- 強調語だけ文字を大きく・金色にする
- 日本語の見出しに小さな英訳を添える
- 背景の透かし欧文はセクションをまたいで大きく置く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、出演者カードは 2〜3 列グリッド
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
- 中央揃えを基本にする
- ストーリー部は写真と文を左右交互に散らして余白を広く取る
- キャンペーンはひし形の枠の中に中央揃えで収める
- 出演者カードは等幅のグリッドで、写真・名前・予想バーを縦に並べる

## Elevation & Depth

- 影は弱く、金ボタンにだけ柔らかい光の影をつける
- 奥行きはボケた紙幣や写真の重ねで表現する
- カードは地より少し暗い面と細い線で浮かせる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 人物は四角形で、ピンク〜金のグラデーションを背景にしたポートレート
- **セクション境界**: 直線の境界は使わず、グラデーションとひし形・斜めの光の線でつなぐ
- ひし形を繰り返し使う
- 円形の金バッジで予告などの導線を出す
- 罫線は細い金色

## Components

- **金色の視聴CTA**（`button-primary`）: 金のピル型ボタンに濃い文字と再生アイコン
- **投票ボタン**（`button-vote`）: 半透明ピンク系のピル型で、左右に金の細線を伸ばす
- **円形の予告バッジ**（`badge-circle`）: 金の円の周りに英字を円形に回す
- **ひし形キャンペーン枠**（`diamond-panel`）: 45度回転した面の中に見出し・説明・賞品を中央揃えで置く
- **出演者予想カード**（`cast-card`）: 写真、肩書き、名前、二択の割合バー
- **金の帯ラベル**（`label-gold`）: 抽選人数などを入れる小さな金の帯
- **遊び方ボックス**（`howto-box`）: 暗い面と細枠のボックスに丸アイコン2つと説明
- **透かし欧文**（`watermark-text`）: 背景に大きく置く低コントラストのセリフ欧文

## Do's and Don'ts

**Do**
- 地はワインレッドのグラデーションでまとめる
- 金は強調とCTAに絞る
- 見出しは明朝で余白を大きく取る
- 紙幣・宝石などのモチーフをボケさせて前景に散らす
- ひし形の幾何学で高級感を出す

**Don't**
- 白や明るいパステルの地にしない
- ポップな丸ゴシックや原色は使わない
- 金をあちこちに使いすぎない
- 要素を詰め込み、余白をなくさない
- 太い枠線や強いドロップシャドウを使わない

## Page Structure

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

1. **ファーストビュー**（番組の世界観とロゴを見せる）: 妖艶なキービジュアル全面に白い明朝ロゴと金の筆記体を重ねる
2. **コンセプト提示**（二択のテーマを印象づける）: 大きな漢字2つの間に金のアイコン。背景に透かし欧文
3. **ストーリー導入**（ルールとあらすじを伝える）: 明朝の短文を左右交互に置き、出演者写真と紙幣を散らす
4. **出演者一覧**（出演者を見せる）: モノクロの集合写真と、白い太見出しのキャッチ
5. **キャンペーン告知**（予想投票とプレゼントで参加を促す）: ひし形パネルを2つ縦につなぎ、人型アイコン列と賞品を中央揃えで置く
6. **予想投票**（出演者ごとの予想に投票させる）: ヤシの葉の装飾と金のカードアイコン、遊び方ボックス、出演者カードのグリッド、投票ボタン
7. **視聴CTA**（番組の視聴へ誘導する）: サムネイルと放送情報、金のCTA、SNSの丸アイコン
8. **フッター**（アプリ誘導とリンク）: 黒地にロゴ、ストアバッジ、小さなリンク。右下に追従する円形の投票ボタン

## Imagery

- 人物はピンク〜金のグラデーションを背景に、暖色ライトで撮った艶のあるポートレート
- 集合写真はモノクロにして、金とピンクの小物だけ色を残す
- 紙幣や宝石を被写界深度で強くボカし、前景に斜めに散らす
- ヤシの葉をワインレッドや銅色で塗った装飾
- 斜めの細い光の線とレンズの光で夜の雰囲気を出す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央 1 カラムで、出演者カードは 5 列
- SP は出演者カードを 2〜3 列にする
- SP ではストーリーの左右交互配置を残しつつ、写真を小さくする
- ひし形パネルは SP で横幅いっぱいに縮め、文字は 13px 以上にする
- 視聴CTAは PC の横並びから 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-050b342f`（元 LP の URL から採番）
- **元 LP**: https://lovecatcherjapan.com/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（5/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

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

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP