DESIGN.md — 黒×赤橙の動画配信セット通信キャンペーン LP（Cinematic Dark Telecom Streaming Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、ポップ・元気、ラグジュアリー・ダーク
• キーワード: 劇場の赤カーテン・黒地の映画感・オレンジ赤グラデCTA・白い角丸パネル・キャラクター添え・注釈が多い
• 地の質感: 写真とポスター画像が中心。黒地にカーテンや作品サムネをぼかして敷き、その上の白パネルはフラットに見せる
• 形: ピル型ボタン、大きい角丸の白パネル、吹き出し付きのラベル、斜めの期間限定帯
• 温度感: 黒と赤で熱く、白パネルで落ち着かせる

Colors

• 地は「黒（映像・作品）」と「白（条件・手順）」を交互に置き、黒地の上に白い角丸パネルを浮かせる
• 主CTAはどこでもオレンジ→赤の横グラデで統一し、ほかの面に同じグラデを使わない
• サブボタンは白地にオレンジ枠かグレー枠のアウトラインにする
• 料金カードだけ青の見出し帯と金の数字を使い、特別感を出す
• 注意書きの中の大事な一文だけ赤文字にする
• 大見出しのキーワードは黄色マーカーかブランド赤で強める
• button-primary は文字 #FFF4EE × 背景 #EC5505 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C44704、4.57:1）を使う。
• badge-over-button は文字 #E55206 × 背景 #FEFEFE のコントラスト比が 3.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CC4905、4.6:1）を使う。
• nav-grid は文字 #E55206 × 背景 #333333 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 見出しは極太ゴシックにして、助詞を小さめにするなど文字サイズに強弱をつける
• 数字は欧文の太い書体を大きくし、単位は小さくする
• ファーストビューのコピーは白文字に赤いずらし影をつける
• 注釈には※や*1を付け、本文より2〜3px小さくする
• 本文は14px以上、行間は1.7前後にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビボタンは 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約16〜20pxで統一する
• CTAボタンは幅約82%で中央に置く
• 白パネルは黒地の上で左右に約16pxの余白を空ける
• 作品紹介は「画像→タイトル→あらすじ→予告編ボタン→区切り線」を1単位として繰り返す
• 料金表は横スクロールできる表にする

Elevation & Depth

• 影はほとんど使わず、フラットな面と色の差で層を分ける
• 黒地の上の白パネルは浮いて見えるが、影はつけない
• ファーストビューのコピーにだけ赤のドロップシャドウをつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 作品画像は角丸なしの横長長方形。キャラクターは切り抜きにして端に添える
• セクション境界: 直線で切り替える。黒地の上に大きい角丸の白パネルを重ねる
• ボタンはすべてピル型にする
• ボタン上のラベルはピル型にして白地＋オレンジ枠、ボタンの上辺に重ねる
• 料金カードは角丸8pxで、青紫のグラデ枠にする
• 見出しのラベルは吹き出し型（下にしっぽ）で白枠のピルにする

Components

• 主CTAグラデボタン（button-primary）: オレンジ→赤のグラデのピル型。右端に矢印、上辺に白いラベルを重ねる
• アウトラインボタン（button-outline）: 白地にオレンジ枠かグレー枠。右端に＞を置く
• ボタン上ラベル（badge-over-button）: 白地にオレンジ枠の小さなピル。条件やお得さを短く書く
• スラッシュ見出し（heading-slash）: 対象の客層をオレンジ文字で書き、左右を斜めのスラッシュで挟む
• ページ内ナビ（nav-grid）: 濃灰の帯に白地・オレンジ枠のピル型ボタンを2×2で並べ、下向き矢印を付ける
• 料金プランカード（price-card）: 青い見出し帯に金の大きな価格を置く。右上に斜めの期間限定帯、中は項目名（青）と値をラベル＋下線で並べる
• 回線選択カード（carrier-select）: ロゴと説明2行を並べ、右端に＋を置く。ブランドごとにオレンジ枠/マゼンタ枠にする
• 手順タブ＋ステッパー（step-tabs）: 上部に2つのタブ（選択中は白地＋オレンジ上線、それ以外はグレー）。ドットと線で3ステップを示し、スマホモックのスライダーを置く
• FAQアコーディオン（faq-accordion）: 濃灰の見出し帯の下に薄灰地で質問を並べ、右端に＋を置く

Do's and Don'ts

Do - 主CTAはページ内で3回以上、同じ見た目のまま繰り返す - 黒地の作品パートと白パネルの条件パートを交互に置く - キャラクターの切り抜きを見出しの左右に添えて親しみを出す - お得な数字は金のグラデか赤で大きく見せる - 注釈・ご注意事項は省かず、小さな文字で整理して載せる

Don't - 主CTAを単色やアウトラインにしない - 黒地の上に長い本文を直接置かない（白パネルに入れる） - 明朝体や細い書体を見出しに使わない - 角を尖らせたボタンを混ぜない - パステル色や淡いトーンで全体をまとめない

Page Structure

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

1. ファーストビュー（セット加入で見放題になることを強く伝える）: 赤い劇場カーテンの背景に、人物とキャラクター、スマホ枠の作品ポスター、白の極太コピーを置き、注釈を添える
2. 既存ユーザー向けCTA（すでに回線を使っている人をすぐ申し込みに進ませる）: 白地にスラッシュ見出しを置き、ラベル付きのグラデCTAとアウトラインボタンを並べる
3. 乗りかえ訴求（他社ユーザーに回線の選び方を示す）: 黄色マーカー付きの見出しの左右にキャラクターを添え、ブランドごとの色枠カードを2つ並べる
4. ページ内ナビ（各セクションへのジャンプ）: 濃灰の帯にピル型ボタンを2×2で並べる
5. 作品紹介（見られる作品で期待を高める）: 黒地に作品サムネのぼかし背景を敷き、吹き出しラベルとオレンジの大見出しを置く。作品カードを縦に並べ、白いピル型の予告編ボタンを付ける
6. キャンペーン料金（期間と割引額を示す）: 大きい角丸の白パネルに金色の日付、青い料金カード、条件テキスト、ご注意事項、横スクロールの表を入れる
7. ポイント還元（追加の特典を示す）: オレンジの大きな%数字とキャラクター、下線リンク、グレーのアコーディオンボタンを置く
8. 中間CTA（申し込みと相談に導く）: 黒地に白い見出しを置き、グラデCTAとチャット相談のアウトラインボタンを並べる
9. 利用開始手順（申し込みが簡単だと示す）: 吹き出しラベル＋大見出しの下に2タブを置き、ステッパーとスマホモックのスライダー、CTAを続ける
10. よくある質問（不安を解消する）: 濃灰の見出し帯と薄灰のアコーディオンを並べ、最後に一覧へのアウトラインボタンを置く
11. お問い合わせ（サポート窓口へ案内する）: 大見出しの下に、ブランド色の枠のピル型チャットボタンを2つ並べる

Imagery

• ファーストビューは赤いベルベットのカーテンを背景にした劇場風の合成にする
• 作品はポスター調のキービジュアルで、左上に赤いロゴマークを置く
• 黒地の背景には作品サムネを並べ、暗くぼかして敷く
• 着ぐるみ風のキャラクターを切り抜きにし、見出しの両脇で手を振らせる
• 手順はスマホ端末のモックアップに画面UIを入れて見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで、コンテンツ幅を約900pxにする
• ファーストビューは左に画像、右にコピーの2カラムにする
• ナビボタンは4つを横一列に並べる
• 作品紹介は3カラムで横に並べる
• 手順スライダーはスマホモックと説明文を横に並べる
• CTAはラベルをボタンの中の左に入れ、横長で小さめにする

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 行書くと起動時に読み込まれる。