--- version: alpha name: Vivid Magenta Telecom Campaign LP description: 濃いマゼンタを主役に、淡い水色の地と白カードを重ねた通信キャリアのキャンペーンLP。大きな数字のポイント額、黄色マーカー、紺の見出しで特典を強く打ち出す。後半はグレー見出し帯の規約テーブルが長く続く情報量多めの構成。 colors: primary: '#DB1082' background: '#FFFFFE' background-alt: '#E4F2FD' secondary: '#0F294C' cta: '#DB1082' on-cta: '#FFFFFF' marker: '#FFF100' tint-1: '#FFF2F9' surface: '#EDEDED' text: '#333333' accent-1: '#0069FF' accent-2: '#E60012' line: '#BEC5C5' text-muted: '#5C7BA2' typography: display: fontFamily: Noto Sans JP fontSize: 52px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 20px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 16px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 150px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 260px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 28px point-total: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px tag-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 30px terms-header: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px tab-switch: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px --- # DESIGN.md — マゼンタ×水色の学生向け通信キャンペーンLP（Vivid Magenta Telecom Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、力強い・インパクト、清潔・爽やか - **キーワード**: マゼンタ・巨大数字・白カード・黄色マーカー・紙吹雪・STEP構成 - **地の質感**: フラットな単色面。グラデーションや陰影はほぼ使わず、紙吹雪とイラストで賑やかさを出す。 - **形**: 角丸12〜16pxの白カード、紺の太枠ボックス、ピル型ボタン、紺のピル型ラベル。 - **温度感**: 明るく元気でやや暖かい。水色の地で清潔感も保つ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DB1082` | ブランド色・強調数字・主ボタン | 9% | 画素の主要色に補正 | | `background` | `#FFFFFE` | カード・規約部の地 | 52% | 画素の実測 | | `background-alt` | `#E4F2FD` | 上部セクションの淡い水色地 | 12% | 画素の実測 | | `secondary` | `#0F294C` | 見出し文字・枠線・ラベルの紺 | 3% | 画素の実測 | | `cta` | `#DB1082` | 申込ボタン | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | ボタン上文字 | 0% | 画素の主要色に補正 | | `marker` | `#FFF100` | 見出しの黄色マーカー・ラベル | 1% | 推定 | | `tint-1` | `#FFF2F9` | STEPヘッダー・料金ボックスの淡ピンク | 3% | 画素の実測 | | `surface` | `#EDEDED` | 規約見出し帯・補足ボックスのグレー | 6% | 画素の実測 | | `text` | `#333333` | 本文・規約文字 | 4% | 推定 | | `accent-1` | `#0069FF` | ヒーロー背景の青 | 2% | 画素の実測 | | `accent-2` | `#E60012` | 注意書きの赤 | 0% | 推定 | | `line` | `#BEC5C5` | カード枠・区切り線 | 1% | 画素の主要色に補正 | | `text-muted` | `#5C7BA2` | リンク文字の青 | 0% | 画素の主要色に補正 | - 上部の訴求部は淡い水色地に白カードを載せる。 - 金額・ポイント数は必ずマゼンタの極太数字にする。 - プラン紹介の大セクションは全面マゼンタ地に白カードを浮かべる。 - 見出しの要点語に黄色マーカーを引く。 - 注意書きや対象外条件は赤文字の小さな注記にする。 - 規約部は白地とグレー見出し帯だけで色を抑える。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ポイント額・価格の巨大数字 | ゴシック | Noto Sans JP | 900 | 52px | 1.1 | -0.02em | | `headline-lg` | セクション見出し（紺） | ゴシック | Noto Sans JP | 900 | 24px | 1.35 | 0.02em | | `headline-md` | カード見出し・STEPタイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.0em | | `headline-sm` | 規約の小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | STEP番号など欧文 | 欧文サンセリフ | Montserrat | 800 | 20px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.02em | - 数字は単位の2〜3倍の大きさにし、単位は小さく添える。 - 見出しは2行に分け、上の行は小さいリード文にする。 - 要点語だけマゼンタにし、残りは紺か黒にする。 - ※注釈は数字の右肩に小さく付ける。 - 規約部は太字の小見出しと13px本文で淡々と並べる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。料金比較だけ3段の棒グラフ状 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 水色地の上に左右8px余白で白カードを置く。 - カード内要素は中央揃えが基本。 - STEPカードは縦に積み、番号ヘッダーを上に付ける。 - 規約部は左揃えで、グレー帯の見出しとその下の本文を繰り返す。 - セクション見出しはカードの外に中央揃えで置く。 ## Elevation & Depth - 影はほぼ使わずフラットにする。 - 紺の太枠カードは下側にずれた影風の太線を付ける。 - カードの浮きは地の色との差で出す。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 端末や人物は切り抜きで配置し、悩みは丸い吹き出しに入れる。 - **セクション境界**: 直線で切り替える。マゼンタ地へは全幅で直接切り替える。 - 主ボタンはピル型の塗り、サブボタンはピル型の枠線にする。 - ラベルはピル型か角丸の小さなタグにする。 - 条件の下には下向き三角を置き、合計値へ導く。 ## Components - **申込ボタン**（`button-primary`）: マゼンタ塗りのピル型ボタン。白太字。 - **サブボタン**（`button-outline`）: 白地にマゼンタ枠とマゼンタ文字のピル型。 - **おトク紹介カード**（`benefit-card`）: 紺太枠の白カード。上辺に紺のピル型ラベルを重ねる。 - **STEPカード**（`step-card`）: グレー枠のカード。淡ピンクのヘッダーに丸アイコンとSTEP番号を置く。 - **マーカー見出し**（`marker-heading`）: 黒太字の下半分に黄色マーカーを敷く。 - **ポイント合計表示**（`point-total`）: 下向き三角の下に、巨大なマゼンタ数字と単位を置く。 - **カテゴリタグ**（`tag-label`）: 黄色地に黒枠の見出しタグ。カードの左上に重ねる。 - **規約見出し帯**（`terms-header`）: 全幅のグレー帯に太字の小見出しを置く。 - **端末タブ**（`tab-switch`）: 選択中はマゼンタ塗り、非選択はグレーの2分割タブ。 ## Do's and Don'ts **Do** - 特典額は最大級の数字で、1画面に1つだけ置く。 - 条件は足し算（＋）と下向き三角で図にして見せる。 - カード下にテキストリンク（青字と＞）で詳細へ導く。 - 注釈番号を付け、本文の近くに小さく注記する。 - 紙吹雪と角帽の装飾で学生・お祝い感を出す。 **Don't** - マゼンタ以外の色で価格を強調しない。 - グラデーションや重い影を多用しない。 - 規約部に装飾色を持ち込まない（赤注意とマゼンタ強調だけにする）。 - 明朝体や細い書体は使わない。 - 白カードを地色なしで並べず、水色かマゼンタの地に載せる。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象年齢と最大特典を一目で伝える）: 青地に紙吹雪。白抜き太字タイトルと、マゼンタの帯に巨大な無料表記を重ねる。 2. **3つのおトク**（特典の全体像を示す）: 水色地。紺枠のカード3枚を縦に並べ、紺ラベルと下向き矢印のリンクを付ける。 3. **特典内容**（ポイントの内訳と合計を示す）: 白カード内に特典1と2を＋でつなぎ、三角の下に合計数字を置く。淡ピンクの換算ボックスも置く。 4. **別年齢向けバナー**（対象外の人を別キャンペーンへ誘導する）: 全幅の横長バナー画像を1枚置く。 5. **参加方法**（申込手順を説明する）: STEP1〜5のカードを縦に積み、途中に申込ボタンと達成特典のボックスを挟む。 6. **料金の値引き**（月額料金の安さを伝える）: 3段の階段状の料金グラフに黄色の矢印。年齢別の割引カードを2枚置く。 7. **端末同時購入**（端末購入の追加特典を示す）: 2分割タブ、端末写真、価格、マゼンタ帯の追加ポイント枠を置く。 8. **保護者向けオプション**（親の不安を解消する）: 悩み吹き出し3つと困り顔の人物を置き、その下に機能4つを線見出しとイラストで並べる。 9. **プラン訴求**（基本プランの魅力をまとめる）: 全面マゼンタ地に白抜きの大見出し。黄色タグ付きの白カードを積み、最後に2つのボタンを置く。 10. **おすすめ情報**（関連キャンペーンへ回遊させる）: バナーの横スクロールカルーセルと枠線ボタンを置く。 11. **キャンペーン規約**（条件を詳しく開示する）: 大見出しの下に、グレー帯の項目見出しと本文を繰り返す。強調はマゼンタ太字、注意は赤字にする。 ## Imagery - 人物は細線で描いたフラットイラスト。淡い色を塗り、親しみやすい表情にする。 - 端末は正面向きの切り抜き写真。 - 背景に黄・青・ピンクの四角い紙吹雪を散らす。 - 角帽やメガホンのアイコンで学生・告知感を出す。 - ポイントは金色のコインのイラストで表す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せで、コンテンツ幅を約1000pxにする。 - 3つのおトクとSTEPの特典は、PCで横並び（3列・2列）にする。 - STEPカードは、PCで左に番号の列、右に内容を置く。 - 規約は、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-3a93ef18`（元 LP の URL から採番） - **元 LP**: https://network.mobile.rakuten.co.jp/campaign/student-campaign/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。