DESIGN.md — 桜ピンク×紺の春の電力キャンペーンLP（Spring Pink Pop Campaign Utility LP）

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

Overview

• 業種: その他 ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、親しみ・手作り感
• キーワード: 桜ピンク・春の新生活・手描きイラスト・エリア別CTA・白カード積み・料金比較表
• 地の質感: フラットな塗りが基本。帯の背景だけ、細かいドットや斜線の淡い柄と、角に桜の花びらを置く
• 形: 角丸カード、ピル型ボタン、リボン型の見出しラベル、下向きの山形が付いたタブ
• 温度感: 暖色寄りの明るい春。紺の文字で引き締め、信頼感を残す

Colors

• 地は淡ピンクで統一する。CTA帯だけ濃ピンクに切り替えて、区切りの目印にする
• コンテンツは白カードに載せる。文字は紺を基本にする
• エリア別のCTAは、シアンと緑のグラデーションで色を分ける
• 金額と特典の数字は濃ピンクにする。重要な語には黄色マーカーを引く
• プランごとに紫・ティール・緑のヘッダー色を割り当て、色で識別できるようにする
• 手順ブロックは淡黄と淡ミントの入れ子枠で示す
• point-badge は文字 #FFFFFF × 背景 #FE79AC のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E9025A、4.54:1）を使う。
• step-bar は文字 #FFFFFF × 背景 #44BAED のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#117EAE、4.55:1）を使う。
• check-tag は文字 #F05A9B × 背景 #FFE3EF のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CC1363、4.55:1）を使う。

Typography

• 見出しは太い丸ゴシックで、白フチや影を付けて立体感を出す
• セクション見出しの上に、手書き風のリードを斜めに添える
• 数字はひと回り大きく、欧文の太字にする
• 注釈は小さいグレー寄りの紺にし、※で始める
• 重要な語は濃ピンクの文字か、黄色マーカーで示す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。特長タブは2×2、CTAは縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードを中央にそろえて縦に積む
• CTA帯はページ内に3回ほど繰り返す
• ポイント番号のバッジはカード上端にまたがせる
• 料金表は2列で、行ごとに矢印を入れて金額を示す
• FAQはアコーディオンで、＋アイコンを付ける

Elevation & Depth

• 白カードには、ごく薄い影か影なしにする
• CTAボタンは下方向に濃い色の段差影を付け、立体的に見せる
• ポイント番号のバッジには、ピンクの浮き影を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物イラストは切り抜きでカード外にはみ出させる。画面キャプチャはスマホの枠に入れる
• セクション境界: 直線で背景色を切り替える。CTA帯の角には桜の装飾を置く
• CTAはピル型にし、左にアイコン、右に＞を付ける
• 見出しラベルはリボン型か角丸の小さな帯にする
• プランタブの下端には、山形の▼マークを付ける

Components

• エリア別申込ボタン（button-area-primary）: シアンまたは緑のグラデーションのピル型ボタン。上に紺枠の小さなラベルを乗せ、左端にスマホのアイコンを置く
• 詳細リンクボタン（button-pink）: 濃ピンクのピル型ボタン。白文字で右に＞を付ける
• ポイント番号バッジ（point-badge）: ピンクの角丸四角に、筆記体のpointと大きな数字を入れる
• 特長タブ（feature-tab）: 白カードにピンクの番号とイラストを載せ、下端にピンクの帯と▼を付ける
• キャンペーン訴求帯（campaign-ribbon）: ピンクの斜めリボンと紺の帯に、大きな無料月数を重ねる
• 料金比較表（price-table）: ピンクのヘッダーを付けた2列の表。各行に、黄からピンクのグラデーション矢印と濃ピンクの金額を並べる
• 手順ステップ見出し（step-bar）: シアンの帯に黄色のSTEPラベルを付ける。ステップの間は下向きの矢印でつなぐ
• FAQ項目（faq-item）: 紺枠の白い角丸ボックス。左にQのバッジ、右に＋を置く
• おすすめ対象タグ（check-tag）: 淡ピンクの角丸タグに、ピンクのチェックアイコンを付ける

Do's and Don'ts

Do - 淡ピンクの地に白カード、紺の文字という基本の組み合わせを守る - CTA帯は濃ピンクで、ページ内に複数回入れる - エリアや対象者ごとに、ボタンの色を変える - 手描き線の若者イラストを、カードの端にはみ出させて配置する - 数字は大きく濃ピンクにし、単位は小さく添える

Don't - 暗い背景や黒ベタを使わない - 写真の人物を使わない。イラストで統一する - 明朝体を使わない - ボタンを角張った四角にしない - 注釈を本文と同じ大きさで並べない

Page Structure

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

1. ファーストビュー（キャンペーン名・期間・特典を伝える）: 淡ピンクの地に桜の装飾。太い丸ゴシックのタイトル、実績メダル、歩く男女のイラストを置き、紺の帯で特典を見せる
2. CTA帯（エリア別に申込先へ誘導する）: 濃ピンクの帯に、シアンと緑のピル型ボタンを2つ並べ、注釈を添える
3. 対象者の提示（どんな人向けかを示す）: 白カードにチェック付きのタグを2つ置き、紺のボタンで詳細へ導く。左右に人物イラストを配置する
4. 特長の目次（ポイントを一覧で見せる）: 手書き風リードと大見出しの下に、番号付きタブを4つ並べる
5. 特長の詳細と申込手順（手軽さを伝える）: 番号バッジ付きの白カード。淡黄と淡ミントの枠の中に、STEP帯と画面キャプチャを並べる
6. 特長の詳細（決済・安心・特典）（不安を解消し、特典を伝える）: 白カードの左にテキスト、右にイラストを置き、チェックリストとメダルで補強する
7. 注意喚起（手続き上の注意を示す）: 紺の細枠の白ボックスに、ピンクの！アイコンと強調文字を入れる
8. お得額の表（メリットを数字で示す）: ピンクのヘッダーの比較表に、行ごとの矢印と大きな金額を並べる
9. 対象プラン（プランごとの案内をする）: 3色のタブで切り替え、色付きヘッダーの白カードに、図解とピンクのボタンを載せる
10. シミュレーションと適用条件（試算へ誘導し、条件を明示する）: 濃ピンクの帯に黄色のピル型ボタン。その下に、開閉式の条件ボックスを置く
11. よくある質問（疑問を解消する）: Qバッジ付きのアコーディオンを縦に並べる
12. クロージングCTAとフッター（最後のひと押しをする）: FVと同じ訴求帯とボタン2つを置き、白地のフッターに青い帯を付ける

Imagery

• 紺の主線にパステルの塗りを合わせた、手描きタッチの若者イラスト
• 人物は全身や半身で、指差し・ガッツポーズ・スマホ操作など動きのあるポーズにする
• 背景の角に、淡い桜の花びらと枝を置く
• 金色の月桂樹メダルで実績を見せる
• 画面キャプチャはスマホの枠に入れ、手順に沿って並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで、カード幅は約600px。左右は淡ピンクの余白にする
• PCのCTAは2つを横並び、SPは縦積みにする
• 特長タブはPCで4列、SPで2×2にする
• PCでは人物イラストをカードの左右に大きく置き、SPでは縮小して上下に配置する
• SPでは表の文字を小さくし、2列を維持する

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