--- version: alpha name: Cinematic Dark Telecom Streaming Campaign LP description: 赤い劇場カーテン風のファーストビューと黒地の作品紹介で映画らしさを出し、白い角丸パネルに料金・特典・手順を整理した携帯キャリアのキャンペーン LP。CTA はオレンジ→赤グラデのピル型で統一し、小さな白いラベルをボタン上に重ねてお得感を伝える。 colors: primary: '#E55206' cta: '#EC5505' on-cta: '#FFF4EE' background: '#FEFEFE' dark-section: '#010101' secondary: '#A53826' accent-1: '#1E519C' accent-2: '#B8964E' text: '#362E34' surface: '#333333' background-alt: '#ECECEC' marker: '#FDE514' accent-3: '#E60012' tint-1: '#E2007F' cta-accessible: '#C44704' primary-accessible: '#CC4905' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 36px fontWeight: 800 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 56px 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: 52px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px badge-over-button: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px heading-slash: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 36px nav-grid: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 480px carrier-select: backgroundColor: '{colors.background}' textColor: '{colors.text}' rounded: '{rounded.md}' height: 56px step-tabs: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 600px faq-accordion: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 150px --- # DESIGN.md — 黒×赤橙の動画配信セット通信キャンペーン LP（Cinematic Dark Telecom Streaming Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、情報量多め・訴求型、ポップ・元気、ラグジュアリー・ダーク - **キーワード**: 劇場の赤カーテン・黒地の映画感・オレンジ赤グラデCTA・白い角丸パネル・キャラクター添え・注釈が多い - **地の質感**: 写真とポスター画像が中心。黒地にカーテンや作品サムネをぼかして敷き、その上の白パネルはフラットに見せる - **形**: ピル型ボタン、大きい角丸の白パネル、吹き出し付きのラベル、斜めの期間限定帯 - **温度感**: 黒と赤で熱く、白パネルで落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E55206` | ブランドオレンジ（見出し・枠線） | 3% | 画素の実測 | | `cta` | `#EC5505` | 主CTAのグラデ（オレンジ→赤） | 2% | 画素の実測 | | `on-cta` | `#FFF4EE` | CTA上の文字 | 0% | 画素の実測 | | `background` | `#FEFEFE` | 白い地とパネル | 42% | 画素の実測 | | `dark-section` | `#010101` | 作品紹介・手順の黒地 | 15% | 画素の実測 | | `secondary` | `#A53826` | ファーストビューの赤カーテン | 4% | 画素の主要色に補正 | | `accent-1` | `#1E519C` | 料金カード見出しの青 | 2% | 画素の実測 | | `accent-2` | `#B8964E` | 金のグラデ数字・期間限定帯 | 1% | 推定 | | `text` | `#362E34` | 本文の濃いグレー | 4% | 画素の主要色に補正 | | `surface` | `#333333` | ナビ帯・アコーディオン見出しの濃灰 | 3% | 画素の実測 | | `background-alt` | `#ECECEC` | FAQとサブボタンの薄いグレー | 6% | 画素の実測 | | `marker` | `#FDE514` | 黄色いマーカー下線 | 0% | 画素の実測 | | `accent-3` | `#E60012` | 重要な注意書きの赤文字 | 0% | 推定 | | `tint-1` | `#E2007F` | サブブランドのマゼンタ枠 | 0% | 推定 | | `cta-accessible` | `#C44704` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CC4905` | AA を満たす補正値（計算） | | 計算 | - 地は「黒（映像・作品）」と「白（条件・手順）」を交互に置き、黒地の上に白い角丸パネルを浮かせる - 主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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの白い極太コピー（赤い影付き） | ゴシック | Noto Sans JP | 900 | 40px | 1.3 | 0.02em | | `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.35 | 0.02em | | `headline-md` | スラッシュで挟む見出し・作品タイトル | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `accent` | 金色の大きな日付・価格数字 | 欧文サンセリフ | Montserrat | 800 | 36px | 1.1 | 0.0em | | `body-md` | 作品あらすじ・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | 注釈・ご注意事項・表 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.02em | - 見出しは極太ゴシックにして、助詞を小さめにするなど文字サイズに強弱をつける - 数字は欧文の太い書体を大きくし、単位は小さくする - ファーストビューのコピーは白文字に赤いずらし影をつける - 注釈には※や*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 ```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-a84cf84f`（元 LP の URL から採番） - **元 LP**: https://www.au.com/pr/netflixpack/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。