DESIGN.md — 若草グリーンとフラット人物の公的住宅支援 LP（Fresh Green Public Housing Subsidy LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 若草グリーン・白カード・フラットイラスト・吹き出し解説・大きな金額数字・公的・中立
• 地の質感: 薄い黄緑の地に細かいドット格子パターン。グラデーションは淡く、影はごく弱い
• 形: 角丸の大きい白カードに、上部の緑の見出し帯。ピル型ボタンとラベル
• 温度感: 明るく暖かめの緑。親しみやすく、押しつけ感がない

Colors

• 地は白と、ドット柄の黄緑面を交互に使ってセクションを分ける
• カードは白か淡い黄緑で、見出し帯だけ緑で塗る
• 金額の数字は青緑か緑。オレンジは強調語とタグだけに使う
• 青は番号バッジと小見出しに限る
• 本文は濃いグレー。純黒は SNS ボタンだけに使う
• 赤系はカード内の注目フレーズにだけ少し使う
• card-header-band は文字 #FFFFFF × 背景 #01C244 のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#018830、4.6:1）を使う。
• amount-display は文字 #01B494 × 背景 #FFFFFF のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#01866E、4.53:1）を使う。
• pill-tag は文字 #FFFFFF × 背景 #1496CD のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#117EAC、4.56:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #01C244 のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#018830、4.6:1）を使う。
• button-outline は文字 #01C244 × 背景 #FFFFFF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#018830、4.6:1）を使う。
• number-badge は文字 #FFFFFF × 背景 #1496CD のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#117EAC、4.56:1）を使う。
• speech-bubble は文字 #16872F × 背景 #EBFAB9 のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#15802D、4.55:1）を使う。

Typography

• 見出しは助詞を小さくし、キーワードだけ大きくする
• 強調語の上に傍点（ドット）を付ける
• 金額は数字だけ極大にし、単位は半分ほどの大きさにする
• 本文は太めのゴシックで、行間を広めにとる
• 注釈は※で始め、ぶら下げインデントにする
• 見出しの強調はオレンジにし、それ以外は緑にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内で 2 列の金額表示あり
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右 20px の余白をとって中央に置く
• カードは上部の緑帯と、白い本文エリアで構成する
• 説明文、吹き出し、イラストの順に縦に積む
• 2 つの要素の間には大きな＋記号を置く
• セクションの最後に誘導ボタンを置く
• 注釈はカードの外、直下に置く

Elevation & Depth

• カードの影はごく淡い（0 2px 8px rgba(0,0,0,0.05)）か、影なし
• ボタンは影なしのフラット
• 面の色の違いで階層を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は使わず、イラストを切り抜きで置く。グラフや図版は角丸なしの矩形
• セクション境界: FV 下端とバナー上端は、ゆるい波形。他はフラットな色切り替え
• 大カードは 28px 前後の大きな角丸
• タグ・ラベルはピル型
• 吹き出しは角丸に三角のしっぽを付ける
• 番号バッジは正円
• 主ボタンは角丸大きめかピル型

Components

• 緑帯見出しカード（card-header-band）: 上部を緑の帯にして白文字の見出しを置き、下は白い角丸の本文エリア
• 金額表示（amount-display）: ピル型タグの下に巨大な数字と単位、その下に小さな補足
• 区分タグ（pill-tag）: ピンク・青・オレンジの小さなピル型ラベル
• 緑の検索ボタン（button-primary）: 緑で塗った角丸ボタンに、白文字と虫眼鏡アイコン
• 外部リンクボタン（button-outline）: 白地に緑の太枠。左にロゴ、右に丸い矢印を置く。上に「＼ 〜 ／」形式の誘導文
• SNS フォローボタン（button-sns）: 黒い角丸ボタンに、ロゴと白文字
• 番号バッジ（number-badge）: 青い正円に「メリット＋番号」。左上に放射線の装飾。横に青い小見出し
• 吹き出し（speech-bubble）: 黄緑の角丸吹き出しに緑の文字。下にイラストの人物
• 注釈（note-text）: ※で始まる小さな文字。ぶら下げインデント

Do's and Don'ts

Do - 緑を主役にし、白と淡い黄緑の面でリズムを作る - 数値は極大の数字と小さな単位で見せる - 制度の説明はイラストの人物と吹き出しで会話調に補う - 注釈・出典は必ず小さく添える - ボタンの上に「＼ 〜 ／」形式の誘導文を置く

Don't - 写真や濃い影を多用しない - オレンジを面積の大きい塗りに使わない - 原色の赤で煽る表現をしない - 人物イラストに目鼻や輪郭線を描き込まない - カードの角を直角にしない

Page Structure

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

1. ファーストビュー（制度でお金がもらえることを一目で伝える）: 緑のドット地に、吹き出し型の前置き、オレンジの対象タグ、深緑の面に白抜きの大見出し、家族と家のイラスト
2. 金額の提示（対象ごとの補助額を示す）: 青緑・緑の帯見出しカードに巨大な金額。下に青丸の箇条書きと注釈
3. 制度概要（事業の目的を説明する）: 淡い黄緑の角丸カードに、ロゴと本文
4. 申請方法・注意点（手続きの流れと条件を伝える）: ドット地の上に緑帯カード 2 枚。イラストと検索ボタン、外部リンクボタン
5. SNS 誘導（最新情報のフォローを促す）: 白地に中央揃えの文と、黒い SNS ボタン
6. テーマ提起バナー（省エネ性能への関心を高める）: 波形の上端をもつ緑グラデーションの帯。白文字の見出しと指差す人物
7. 2 つの基準（性能の考え方を解説する）: 番号バッジ付きの淡黄緑カードを＋記号でつなぐ。吹き出しとイラストを添える
8. 基準の変遷（今後の基準強化を示す）: 段階の高さを変えた色ブロックの図、人物の吹き出し、出典
9. 表示制度（性能ラベルを紹介する）: 緑帯カードに本文、赤い斜線で挟んだ強調文、ラベル図版
10. メリット解説（暮らしの利点を 3 つ示す）: 番号バッジと小見出し、棒グラフや図解、本文を区切り線で並べる
11. 補足 Q&A（背景の詳細へ誘導する）: 水色の角丸カードに、考える人物と青い問いの見出し、詳細リンク
12. フッター（運営主体を示す）: 淡い緑の有機的な形の背景に、ロゴと家族イラスト、省庁ロゴ、灰色帯のコピーライト

Imagery

• 人物は目鼻を描かないフラットなイラスト。肌色やパステルの服で塗る
• 家はベージュ・赤屋根・青屋根のシンプルな線なし図形
• 人物や家の周りに黄緑のキラキラ装飾を散らす
• 図解は淡い青や黄緑の面と、オレンジの矢印で変化を示す
• 背景には細かいドット格子パターンを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を約 800px で中央に置き、左右はドット地にする
• PC の FV は横長にし、イラストを左、見出しを右に置く
• 金額カードや申請カードは PC で 2 列に並べる
• メリット解説は 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 行書くと起動時に読み込まれる。