DESIGN.md — マゼンタ×水色の学生向け通信キャンペーンLP（Vivid Magenta Telecom Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、力強い・インパクト、清潔・爽やか
• キーワード: マゼンタ・巨大数字・白カード・黄色マーカー・紙吹雪・STEP構成
• 地の質感: フラットな単色面。グラデーションや陰影はほぼ使わず、紙吹雪とイラストで賑やかさを出す。
• 形: 角丸12〜16pxの白カード、紺の太枠ボックス、ピル型ボタン、紺のピル型ラベル。
• 温度感: 明るく元気でやや暖かい。水色の地で清潔感も保つ。

Colors

• 上部の訴求部は淡い水色地に白カードを載せる。
• 金額・ポイント数は必ずマゼンタの極太数字にする。
• プラン紹介の大セクションは全面マゼンタ地に白カードを浮かべる。
• 見出しの要点語に黄色マーカーを引く。
• 注意書きや対象外条件は赤文字の小さな注記にする。
• 規約部は白地とグレー見出し帯だけで色を抑える。

Typography

• 数字は単位の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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。