DESIGN.md — マゼンタ×紫のシニア向け通信プランLP（Magenta and Purple Senior Mobile Plan LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 情報量多め・訴求型、ポップ・元気、信頼・誠実、やさしい・柔らかい
• キーワード: マゼンタ・ラベンダー地・大きな価格数字・白カード・ピル型ボタン・フラットイラスト
• 地の質感: グラデーションや質感はほぼ使わないフラットな塗り。薄紫の面と白カードを重ねる
• 形: 角丸小さめのカードと完全なピル型ボタン。円形アイコンバッジ、下向き三角の矢印
• 温度感: 明るく温かい。原色寄りのマゼンタで元気さを出しつつ、薄紫で柔らげる

Colors

• 地は白とラベンダーを交互に置いてセクションを分ける
• 主CTA・価格数字・選択中タブはマゼンタにまとめる
• 見出し帯・セクションタイトルは紫で、マゼンタとは役割を分ける
• お得額は黄色帯の上にマゼンタか黒の太字でのせる
• 注意書きは赤、補足注釈は灰色の小さな文字にする
• カードは白にして薄紫の面の上に浮かせる
• button-primary は文字 #FFFFFF × 背景 #FF008C のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E5007E、4.53:1）を使う。
• marker-bar は文字 #FD018C × 背景 #FDF201 のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF0173、4.58:1）を使う。
• tab-switch は文字 #FFFFFF × 背景 #FD018C のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF0173、4.56:1）を使う。

Typography

• 価格の数字は単位の2〜3倍の大きさにする
• 『実質』の小見出しは数字の左に縦に積む
• 税込価格は数字の横に細めで小さく添える
• 見出しは中央揃え、本文は左揃えにする
• 注釈には※番号を振り、ブロックの下にまとめる
• シニア向けなので本文は14px未満にしない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内の比較は 2〜3 列から縦積みへ
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは白とラベンダーの全幅帯で区切る
• 申込ブロックは同じ型でページ内に3回繰り返す
• カードは白地に細い枠線、内側の余白は16px
• 料金比較は横並びの段階タブ＋価格の列で見せる
• 主CTAはカード幅の8割ほどの横長ピルにする
• 手順は番号付きカードを下向き矢印でつなぐ

Elevation & Depth

• 影はほぼ使わず、枠線と面の色で階層をつける
• カードには薄い灰色の1px枠をつける
• バナーにだけごく弱い影を許可する

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物はフラットイラストを切り抜いて配置。端末写真は背景なしの切り抜き
• セクション境界: 直線で色を切り替える。強調には下向き三角をつけた帯を使う
• ボタンは常にピル型
• アイコンは円形の枠に入れる
• 段階タブは右端を矢印形に切る
• 見出し帯は角丸小さめの紫の長方形

Components

• 主CTAボタン（button-primary）: マゼンタ塗りに白文字の横長ピル
• サブボタン（button-secondary）: 白地にマゼンタか灰色の枠線をつけたピル。詳細を見る系の導線
• 紫見出し帯（section-band）: カード上辺に置く紫の帯と白い中央見出し
• 価格ブロック（price-block）: 『実質』と巨大な数字に『円/月〜』、税込を小さく添える
• お得額の黄色帯（marker-bar）: 黄色の横帯に、通常よりいくらお得かを太字で書く
• 紫ラベル（label-badge）: 見出しの上に置く小さな紫ラベル。対象年齢などを書く
• 特長カード（feature-card）: 円アイコン＋紫見出し＋イラストと説明を左右に並べた白カード
• 手順ステップ（step-card）: 番号付き見出し、イラスト、CTAを持つ白カード。下向き矢印でつなぐ
• 切替タブ（tab-switch）: 選択中はマゼンタ塗り、未選択は灰色地の2分割タブ
• FAQ行（faq-item）: マゼンタの円形シェブロンと質問文を並べ、細線で区切るアコーディオン

Do's and Don'ts

Do - 価格は必ず巨大な数字＋小さな単位＋税込併記で見せる - 申込ブロックを主要セクションのあとに繰り返し置く - マゼンタはCTAと価格に絞って使う - 特長は円アイコンと紫見出しで見出しをそろえる - 注釈は灰色の小さな文字でブロックの下にまとめる

Don't - 暗い背景や黒基調にしない - ボタンを角張った四角にしない - マゼンタと紫を同じ役割で混ぜない - 写真主体の重いビジュアルにしない - 本文を極端に小さくしたり、行間を詰めすぎたりしない

Page Structure

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

1. ファーストビュー（対象者とプラン名、月額を一目で伝える）: 空色の地に人物イラスト、太字のロゴ風見出し、特長4つの白ラベル、マゼンタ帯に大きな価格
2. エントリー案内（参加手順を示し、エントリーへ誘導する）: 紫の見出し帯、3ステップのアイコンを矢印でつなぎ、主CTAを置く
3. 申込ブロック（Web・店舗・電話の申込先を案内する）: ラベンダー地にWeb申込カード、店舗検索とオペレーターの2列カード、店舗特典バナー
4. ページ内ナビ（主要セクションへ飛ばす）: 紫の帯の上に白い3分割タブとアイコン
5. プラン概要（セット内容と実質価格を示す）: 紫ラベル、大見出し、要素を＋でつなぐ図、巨大な価格、黄色帯
6. 料金詳細（使用量ごとの段階料金を比較する）: 矢印形の段階タブの下に3列の価格を並べ、サブボタンを置く
7. オプション特長（付帯サービスの価値を伝える）: 薄紫の面に白い特長カードを縦に並べ、イラストと説明をつける
8. おすすめ端末（端末購入を促す）: タブ切替、切り抜いた端末写真と価格、特長2枚、キャンペーン枠、2つのボタン
9. 紹介キャンペーン（家族での申込を促す）: 2列の特典カードを下向き三角でまとめ、合計ポイントを強調
10. 利用の流れ（申込手順を詳しく案内する）: タブ切替、番号付きステップカードを矢印でつなぎ、画面キャプチャを入れる
11. よくある質問（不安を解消する）: 白カード内にアコーディオン行を並べる
12. プラン全体訴求（基本プランへ誘導する）: マゼンタ全面の枠に白カードで料金と特典を並べ、下にボタン2つ

Imagery

• 人物は線の少ないフラットイラストで、シニアやスタッフを明るい服の色で描く
• 公園や街並みの人物シルエットを横長に並べ、帯の装飾にする
• アイコンはマゼンタの線画を白い円に入れる
• コインやポイントは金色のフラットイラストで散らす
• 端末は正面からの切り抜き写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは価格の数字を48px前後にし、単位を折り返さない
• 特長4つのラベルはSPで2×2に並べる
• 店舗とオペレーターの2列カードはSPで縦に積む
• 段階料金の3列はSPで横スクロールか縦積みにする
• PCは中央約900px幅の白カードに収め、左右はラベンダー地にする

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