DESIGN.md — 青と白の自治体省エネ還元キャンペーン LP（Clean Blue Public Campaign LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: シアンブルー外枠・白パネル・紺の帯見出し・黄色ボタン・赤の注意文字・手順図解
• 地の質感: フラットな単色面。キービジュアルだけ青のグラデーションと手描き線画を使う
• 形: 大きな白パネルは角丸ほぼなし。ボタンはピル型。カードは細い紺の線で囲む
• 温度感: 爽やかで涼しい色が中心。黄色と赤を差し色にして注意を引く

Colors

• ページの外枠は青で固定する。内容は白いパネルに入れ、セクションごとに区切る
• 見出しの帯やラベルは紺で塗り、文字は白にする
• 主な申請ボタンは黄色地に紺の文字。サブボタンは白地に紺の枠線にする
• 金額・還元率・注意は赤の太字で示す。赤は本文の 5% 以下に抑える
• 解説コラムは淡い緑、手順のステップは淡い水色と淡いベージュで色分けする
• オレンジは地域店舗の紹介ボタンなど、特別な導線 1 か所だけに使う
• reward-box は文字 #FDF202 × 背景 #E60012 のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D90011、4.52:1）を使う。

Typography

• 本文は中央揃えにし、1 行を短く改行する
• 数値と単位はサイズに差をつけ、数値を大きくする
• 注釈は必ず「※」で始め、小さいグレー文字にする
• 見出しは左右に小さな星の装飾や「＼ ／」をつけて中央に置く
• 1 段落の中で強調に使う赤字は 1〜2 か所までにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。製品比較は 3 列を縦積みか 2 列にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 青い外枠の中に白パネルを左右 16px の余白で置く
• パネル同士の間は 24〜32px あけ、青い地を見せる
• 目次は ▼ 付きのリンクをグレー枠の中に並べる
• 手順は番号付きカードを横に流し、矢印でつなぐ
• チェックリストの項目は点線で区切る

Elevation & Depth

• 影はほぼ使わない
• 立体感は枠線と色面で出す
• 吹き出しだけ太い紺の線で強調する

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 製品は切り抜き画像を青グラデーションの正方形に載せる。手順はグレーの角丸枠に線画で描く
• セクション境界: キービジュアルの下は波形で白から青に切り替える。それ以外はパネルの直線で区切る
• ボタンはピル型にし、右端に › の矢印をつける
• 状況パネルは上部の青い帯を角丸 16px にする
• カードは 1px の紺線と角丸 10px
• 吹き出しは黄色の円形にし、紺の太線で縁取る

Components

• 黄色申請ボタン（button-primary）: 黄色のピル型ボタン。紺の太字と右矢印をつける
• 枠線サブボタン（button-outline）: 白地に紺の 1px 枠線のピル型ボタン。右矢印をつける
• 紺の帯見出し（heading-band）: 紺の長方形に白文字を中央揃え。下に小さな三角を出すこともある
• 進捗パネル（status-panel）: 上部に青い帯を置いたカード。紺とグレーの進捗バーで予算の消化率を示す
• 還元強調ボックス（reward-box）: 赤地に黄色の太字で上限額を示す
• 手順カード（step-card）: 青い番号に線画イラストと短い説明をつけたカード。矢印でつなぐ
• 問い合わせ枠（contact-box）: 紺線で囲んだ角丸の枠に、電話番号を大きく表示する
• 円形吹き出し（speech-bubble）: 黄色の円に紺の太文字。目印を伝える

Do's and Don'ts

Do - 外枠は青、中身は白パネルの構成を全セクションで守る - 重要な数値は赤の太字で大きく見せる - 手順は番号とイラストで図解する - 注釈は※付きの小さい文字で省略せずに載せる

Don't - 暗い背景やくすんだ色を使わない - 主ボタンを黄色以外の色にしない - 写真を全面に敷く装飾的なレイアウトにしない - 明朝体や手書き書体を本文に使わない

Page Structure

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

1. ファーストビュー（キャンペーン名と還元率、期間を伝える）: 青グラデーションのロゴビジュアル、赤の大見出し、紺ラベル付きの期間表示、ボタン 2 つ
2. 申請状況（予算の消化状況を示す）: 青帯付きのパネルに金額と進捗バーを置く
3. お知らせ・問い合わせ（最新情報と連絡先を示す）: 紺の帯見出しにお知らせを続け、その下に大きな電話番号の枠を置く
4. 目次（ページ内を移動しやすくする）: グレー枠に ▼ 付きのリンクを格子状に並べる
5. 概要（制度の趣旨を説明する）: 中央揃えの文章、カモメのイラスト、紹介動画
6. 還元額（還元率と上限を強調する）: 青枠の箱に大きな % 表示を置き、赤い強調ボックスを並べる
7. 対象製品（対象の条件を示す）: 3 列のカード、緑の帯、星の評価、点線の区切り
8. 解説コラム（表示ラベルの読み方を説明する）: 淡い緑の地にラベルの図と吹き出しを置く
9. 効果比較（導入のメリットを数値で示す）: 3 列のカードに、青とオレンジの円柱グラフを並べる
10. 登録店舗（購入できる店舗の条件と、店舗向けの募集を案内する）: 白パネルにアイコンを置き、オレンジのボタン、チェックリスト、黄色ボタンを続ける
11. 申請方法（手順を図で示す）: 紺の帯で申請方法を分け、番号付きの手順カードを矢印でつなぐ
12. 必要書類（そろえる書類を一覧にする）: 丸数字のリストを点線で区切る
13. 還元方法（交換方法を示す）: ロゴを格子状に並べ、STEP を色付きの角丸枠で示し、スマホ画面の図を添える

Imagery

• 製品は白い家電を切り抜き、青のグラデーション背景に置く
• 手順は紺の線画で描いたシンプルなイラストにする
• カモメ・雲・きらめきを白の手描き線で添える
• スマホ画面のモックで操作の流れを示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の白パネルを約 85% 幅にし、両脇に青を見せる
• SP は白パネルを 92% 幅にし、3 列のカードは縦に積む
• 手順カードは SP で 2 列に折り返す
• 目次は PC で 4 列、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 行書くと起動時に読み込まれる。