DESIGN.md — マゼンタ×黒帯の電力キャンペーンLP（Magenta Pop Energy Campaign LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、情報量多め・訴求型、信頼・誠実
• キーワード: マゼンタ・黒帯キャンペーン・黄色マーカー・ピンク枠カード・大きな数字・イラスト解説
• 地の質感: フラットな単色面と淡い斜めストライプ風の地模様。影はほとんど使わない
• 形: 角丸が小さめの枠線カード。見出し帯は台形や矩形、CTAは角丸の矩形
• 温度感: 暖色寄りで明るく元気。黒帯が全体を締める

Colors

• 地は白・淡ピンク・クリーム・サーモンをセクションごとに切り替える
• マゼンタは見出し帯、枠線、キーワード文字、数字に限定して使う
• キャンペーン告知は必ず黒帯にピンク大文字＋白小文字で、セクション間に繰り返し挟む
• CTAは赤と緑の2色ペア。右端に黒い矢印ブロックを付ける
• 最重要フレーズは黄色マーカーを文字下半分に敷く
• 注釈はグレー小文字で本文と明確に区別する
• button-secondary は文字 #FFFFFF × 背景 #6DBB2C のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4D831F、4.58:1）を使う。
• heading-ribbon は文字 #DCDCDD × 背景 #E4007F のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE006A、4.51:1）を使う。
• link-pill は文字 #8F908F × 背景 #FFFFFF のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#757775、4.51:1）を使う。

Typography

• 見出しは極太ゴシックで中央揃え
• 数字は単位より2〜3倍大きくしてマゼンタで目立たせる
• キーワードはマゼンタ文字＋黄色マーカーで強調
• 本文は中央揃え、2〜3行の短い段落
• 注釈は※付きの小さなグレー文字で左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。CASEカードやアイコン説明は 3 列→SP は 1〜2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地色を変えて区切る
• 各セクション末に黒帯キャンペーン告知を入れる
• 大きな白カードをピンク枠で囲み中に情報をまとめる
• 見出し上に円形の線画アイコンを置く
• 比較・料金は横並びの図解で見せる

Elevation & Depth

• 基本はフラットで影なし
• カードは1〜2pxのマゼンタ枠線で浮かせる
• スライダーの矢印ボタンだけ円形の塗りで目立たせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは切り抜きか角丸の枠内、人物写真は矩形
• セクション境界: 直線の色面切り替えと、ゆるい斜めのカーブ線
• CTAは角丸小さめの矩形＋右端に黒の矢印ブロック
• 詳細リンクは白地グレー枠のピル型
• CASEラベルはマゼンタの台形タブ
• FAQは左にマゼンタのQ角丸四角、右に＋

Components

• 資料請求ボタン（button-primary）: 赤い矩形、左にアイコン、右端に黒い矢印ブロック
• 見積りボタン（button-secondary）: 緑の同型ボタン。主CTAと横並び
• キャンペーン黒帯（campaign-band）: 黒帯に白の小文字、ピンクの大見出し、期間、詳細リンク。左にピンク丸バッジ
• ピンク帯見出し（heading-ribbon）: マゼンタの横帯に白文字で対象者を示す
• CASEカード（case-card）: 白地＋マゼンタ枠、上に番号付きの台形タブ
• おすすめポイントスライダー（point-slider）: マゼンタ枠カードに番号ラベルと図解。左右に円形の矢印
• ステップカード（step-card）: 左にstep番号＋見出し、右に説明。マゼンタ枠で縦につなぐ
• FAQアコーディオン（faq-item）: マゼンタ枠、左にQ角丸、右に＋
• 詳細リンク（link-pill）: 白地グレー枠のピル型ボタン。右に外部リンクアイコン

Do's and Don'ts

Do - キャンペーン黒帯をセクションの間に繰り返し入れる - 数字は極太の大きな文字＋マゼンタで見せる - 強調語には黄色マーカーを敷く - 悩みは吹き出しとイラストで4つ並べる - 注釈は必ず小さいグレー文字で添える

Don't - マゼンタ以外の主色を増やさない - 細い明朝や手書き体を使わない - 濃い影やグラデーションを多用しない - CTAを赤緑ペア以外の色にしない - 地色を暗くしない（黒は告知帯だけ）

Page Structure

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

1. ファーストビュー（買い替えの検討を促してキャンペーンを告知する）: マゼンタ地に人物写真と製品写真、白黄の極太キャッチ、下に黒帯告知
2. CTA（資料請求と見積りへ誘導する）: 赤緑ボタンを横並びにし、下に電話番号
3. 悩みの提起（壊れてからでは困ることを伝える）: クリーム地、ピンク帯見出し、吹き出し付きのイラスト4つ、マーカーのまとめ文
4. ページ内ナビ（各セクションへ移動させる）: マゼンタ地に白文字のリンクを6分割
5. 節約の仕組み（光熱費削減の根拠を示す）: 帯グラフと円グラフの図解、大きな割引率の数字
6. 料金メニュー比較（メニューを選ばせる）: タブ切替カードに年間おトク額を大きく表示し、比較図を置く
7. 製品の特長（設備のメリットを伝える）: CASEカード3つ＋ポイントスライダー
8. 企業の強み（信頼感を出す）: 淡いピンク地、ピンク枠のイラストカード3つ
9. 導入ステップ（申込みのハードルを下げる）: 3ステップのカードを縦に並べ、最短日数をマーカーで強調
10. 付帯サービス（アフターフォローを訴求する）: サーモン地に白カード、線画アイコン3つ、会員特典ロゴ
11. キャンペーン詳細（プレゼント内容を伝える）: ピンク枠カードに商品写真と当選人数、ポイント額を大きく表示
12. 動画（CMで印象づける）: 埋め込み動画を縦に2本
13. よくある質問（不安を解消する）: Qアイコン付きのアコーディオン
14. 最終CTA・フッター（申込みと会社情報）: 赤緑ボタン、電話、グレー地のフッター

Imagery

• 人物は明るい白背景のスタジオ写真で、親しみのある表情
• 暮らしの場面はやわらかい線のカラーイラスト（パステル）
• セクション頭に円形のピンク地に黒い線画アイコン
• 図解は円グラフや帯グラフをマゼンタ・黄・紺で塗る
• 製品は白背景の切り抜き写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の幅約900px、SPは幅いっぱいの1カラム
• CTAの2ボタンはSPでも横並びか縦積み（幅100%）
• CASEカード3列はSPでは縦積みにする
• ページ内ナビ6列はSPで3列×2段
• 黒帯告知はSPで文字を2行に折り返す
• 図解はSPで縦に並べ直す

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