--- version: alpha name: Bold Red Yellow Telecom Campaign LP description: 濃い赤と山吹色の黄色を主役にした、価格訴求型の通信サービスLP。斜体の極太ゴシックで巨大な数字を見せ、赤い帯見出し・赤パネルの特典カード・アコーディオン型の注意事項を何度も繰り返す。白と淡いピンクの地を交互に敷き、セクションごとに申込ボタン2種を置く。 colors: primary: '#CC0133' background: '#FFFFFF' background-alt: '#FFFFFE' secondary: '#FAC400' cta: '#CE0030' on-cta: '#FFF4F1' accent-1: '#7A3F22' text: '#222222' accent-2: '#FAC705' accent-3: '#B97951' tint-1: '#01B495' tint-2: '#DCAA02' line: '#333333' primary-accessible: '#B0012C' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: M PLUS 1p fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 40px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px 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.sm}' height: 60px button-secondary: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 60px heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 64px heading-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 60px benefit-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 180px accordion-note: textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px nav-circle: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 130px plus-connector: backgroundColor: '{colors.primary}' textColor: '{colors.accent-2}' rounded: '{rounded.full}' height: 28px speech-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 90px --- # DESIGN.md — 赤×黄の大胆な通信回線キャンペーンLP（Bold Red Yellow Telecom Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 巨大価格数字・斜体極太・赤帯見出し・金色グラデ数字・繰り返しCTA・注釈多め - **地の質感**: ベタ塗りが中心。金色グラデの数字と紙吹雪・キラキラ装飾で祝祭感を足す - **形**: 角を少し丸めた長方形。右下に赤いオフセット影を付けた枠見出しと、丸いナビボタン - **温度感**: 暖色寄りで高揚感が強い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CC0133` | ブランド赤・帯見出し・特典パネル | 12% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地色 | 42% | 画素の実測 | | `background-alt` | `#FFFFFE` | 淡いピンクのセクション地 | 11% | 画素の実測 | | `secondary` | `#FAC400` | ヒーロー・キャンペーンの黄色地 | 7% | 画素の実測 | | `cta` | `#CE0030` | 主申込ボタン（赤） | 2% | 画素の主要色に補正 | | `on-cta` | `#FFF4F1` | ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#7A3F22` | サブ申込ボタン（茶）・特典アイコン | 2% | 推定 | | `text` | `#222222` | 見出し・本文の黒 | 3% | 推定 | | `accent-2` | `#FAC705` | 赤地の上の黄色強調文字 | 1% | 画素の主要色に補正 | | `accent-3` | `#B97951` | 関連サービスの茶系ボタン | 0% | 画素の実測 | | `tint-1` | `#01B495` | 関連サービスの緑ボタン | 0% | 画素の実測 | | `tint-2` | `#DCAA02` | カード訴求の金色吹き出し | 0% | 画素の実測 | | `line` | `#333333` | アコーディオンの上下罫線 | 0% | 推定 | | `primary-accessible` | `#B0012C` | AA を満たす補正値（計算） | | 計算 | - 地の色は白と淡いピンクを交互に使い、ヒーローとキャンペーン冒頭だけ黄色地にする - 強調面は赤ベタ。赤の上の文字は白、最重要の語だけ黄色 - 価格の数字は赤文字。赤パネルの上では金色グラデの数字にする - 申込ボタンは赤（主）と茶（サブ）を必ず並べる - 関連サービスはそれぞれのブランド色（茶・緑・金）で分け、主色の赤とは混ぜない - 注釈は灰黒の小さい文字で、色は付けない - `plus-connector` は文字 `#FAC705` × 背景 `#CC0133` のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B0012C`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 巨大な価格数字・スピード訴求 | ゴシック | Dela Gothic One | 900 | 72px | 1.0 | -0.02em | | `headline-lg` | 斜体のキャッチ見出し | ゴシック | M PLUS 1p | 900 | 34px | 1.2 | 0.0em | | `headline-md` | 赤帯・枠見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.02em | | `headline-sm` | 特典カードの小見出し・CTA上の見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 500 | 15px | 1.7 | 0.02em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `label-button` | 申込ボタン2行ラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.04em | | `accent` | 欧文の速度表記・単位 | 欧文サンセリフ | Montserrat | 900 | 40px | 1.0 | -0.02em | - 数字は本文の3〜5倍に大きくし、「円」「(税込)」「/月」は小さく添える - キャッチは斜体の極太にして勢いを出す - 見出しはすべて700〜900の太字 - 注釈は12px前後で本文ブロックのすぐ下に置く - 重要語は赤文字か、赤帯の白抜き文字にする - CTAの見出しは左右に斜線を付けて中央に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。申込ボタンと丸ナビだけ 2〜3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの終わりごとに申込ボタンの組を入れる - 特典カードの下には毎回アコーディオンの注意事項を付ける - 特典同士は丸い赤の＋アイコンでつなぎ、重ねがけを示す - 中身の要素はすべて中央揃え - 淡いピンク地の上に白いカードを載せて関連サービスを並べる ## Elevation & Depth - 申込ボタンには下に濃い色の厚み（3px程度）を付ける - 枠見出しは右下に赤いオフセット影を付ける - 丸ナビボタンには薄い影を付ける - それ以外は影なしのフラット ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は長方形のまま。人物は背景を抜いて黄色地に合成する - **セクション境界**: 黄色地の下端は大きな弧か下向きの三角。ほかは直線で切り替える - ボタンは角丸4〜6pxの長方形 - 丸ナビは正円で、下に矢印を付ける - 見出しには斜めの帯やリボンの形を使う - タグは「＋」付きの丸い淡ピンクの帯にする ## Components - **主申込ボタン**（`button-primary`）: 赤い角丸の長方形。2行ラベルで右端に＞を付け、下に厚みを付ける - **サブ申込ボタン**（`button-secondary`）: 茶色で主ボタンと同じ形。主ボタンの横に並べる - **赤帯見出し**（`heading-band`）: 画面幅いっぱいの赤い角丸帯に、白い斜体の太字。右下にずらした赤い影を付ける - **枠見出し**（`heading-outline`）: 白地に赤い枠線と赤文字。右下に赤いオフセット影を付ける - **特典パネル**（`benefit-card`）: 赤ベタのパネル。左上に丸い茶色のアイコン、白い小見出し、金色グラデの巨大な数字を置く - **注意事項アコーディオン**（`accordion-note`）: 上下の罫線だけで囲み、中央にラベル、右端に＋を置く - **丸ナビボタン**（`nav-circle`）: 白い正円に赤い枠線と黒・赤の太字。下向き矢印付きで3つ並べる - **＋コネクタ**（`plus-connector`）: 特典の間に置く赤い小さな正円に黄色の＋ - **吹き出し帯**（`speech-banner`）: 赤または金の長方形で、下中央に三角のしっぽを付ける ## Do's and Don'ts **Do** - 価格や数字は画面幅の6〜8割を占めるくらい大きくする - 特典ごとに注意事項のアコーディオンを付ける - 各セクションの終わりに申込ボタン2種を並べる - 黄色・赤・ピンクの地をはっきり切り替えてリズムを出す - キラキラや紙吹雪の装飾は数字の周りに少しだけ散らす **Don't** - 寒色をメイン色に使わない（関連サービスの緑ボタンだけ例外） - 細い書体や明朝体を見出しに使わない - 注釈を省略しない、本文と同じ大きさにもしない - 赤パネル上の数字を白一色にしない（金色グラデにする） - 余白を広く取りすぎた静かな構成にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（勢いのあるキャッチと月額価格で一気に引き込む）: 黄色地に人物の切り抜きと、斜体で巨大な赤い文字。下に価格を帯状にまとめ、すぐ下に注釈を置く 2. **キャンペーン概要**（期間限定の価格特典を伝える）: 黄色地に紙吹雪とリボン見出し、巨大な赤い価格。その下に赤パネルで通常価格との比較を見せ、下端は弧で切る 3. **CTA**（申込への導線）: 斜線で挟んだ見出しと、赤・茶の2ボタンを横に並べる 4. **目次ナビ**（知りたい項目へ飛ばす）: 黄色地の上に赤帯、キャラクター、丸ナビ3つ。下端は三角に切る 5. **特長（速さ）**（性能を数字で訴求する）: 赤帯見出し、斜体の赤い巨大コピー、黄色いラベル付きの欧文数字 6. **利用シーン**（使う場面をイメージさせる）: 淡いピンク地に写真のカルーセルと、白い斜めキャプションカード 7. **料金**（割引価格と通常価格を示す）: キャンペーンのバナー画像と、＋付きのタグ、巨大な価格、アコーディオン 8. **選べるオプション**（選べる付帯サービスを示す）: 枠見出し、短い説明、アコーディオン 9. **特典一覧**（特典の重ねがけを見せる）: 赤パネルを＋コネクタでつないで縦に並べ、それぞれにアコーディオンを付ける 10. **セット割**（関連サービスとの組み合わせ割引を見せる）: 淡いピンク地に白いカード。赤タグ、吹き出し、巨大な割引額 11. **関連プラン紹介**（関連プランへ送客する）: 白いカードの中を罫線で分け、それぞれのブランド色のロゴとボタンを置く 12. **支払い特典**（カード払いの還元を見せる）: 金色の吹き出し、カードの画像、赤い大きなパーセント、金色の枠のボタン ## Imagery - 人物は切り抜いて黄色地に合成する。カメラ目線で、前に差し出す動きのあるポーズ - コインや金色のポイントアイコンは立体感と光沢を出し、斜めに傾けて動きを出す - 紙吹雪・キラキラ・集中線で祝祭感を足す - 丸い茶色の地に白い線でアイコンを描き、特典パネルの角に重ねる - 利用シーンの写真はテレビ視聴などの生活の場面で、明るめに仕上げる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像がないため推奨案。中身は最大幅750px前後で中央に置く - 背景の色帯は画面幅いっぱいに伸ばす - 申込ボタンは2列のまま、ボタン幅を広げる - 特典パネルはPCで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-624308da`（元 LP の URL から採番） - **元 LP**: https://nttdocomo-ssw.com/nssw/dhkr/hikari10gb/10va_index.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。