DESIGN.md — 若草緑×赤の手描き野菜行政プロジェクト LP（Fresh Green Public Food Program LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 親しみ・手作り感、ナチュラル、信頼・誠実、やさしい・柔らかい
• キーワード: 若草グリーン・生成りベージュ・赤の見出し・手描き野菜・キャラクター・地図シルエット
• 地の質感: ベージュ面には紙のようなわずかなザラつき。白面はフラット。カードは淡い緑グラデーション。
• 形: 大きめの角丸カードとピル型ボタン、円形の番号バッジ、ギザギザの地図シルエット。
• 温度感: 暖かく健康的。緑で安心感を出し、赤で行動を促す。

Colors

• 白と生成りベージュのセクションを交互に敷いてリズムを作る。
• セクション見出しと本文中の強調語は赤にする。本文はグレーのまま。
• カード・ラベル・番号・リストの丸は若草緑で統一する。
• 赤は CTA ボタンと強調語だけに使い、面には広げない。
• FV とフッターだけ濃い緑のグラデーションで締める。
• ベージュ地の上には白カードを置き、白地の上には淡緑カードを置く。
• button-primary は文字 #FDF1EF × 背景 #EE2E2B のコントラスト比が 3.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE1512、4.5:1）を使う。
• section-heading-map は文字 #E42F2B × 背景 #D1F1B2 のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CA1E1A、4.56:1）を使う。
• label-badge は文字 #FDF1EF × 背景 #8CBD5C のコントラスト比が 1.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#557A31、4.51:1）を使う。
• contact-card は文字 #EE2E2B × 背景 #FFFFFE のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DE1512、4.54:1）を使う。

Typography

• セクション見出しは赤の太丸ゴシックで中央揃えにし、下に英字サブを置く。
• 大きな数値は Montserrat の極太にし、単位は小さく添える。
• 本文は字間を広めにとり、行間は約 1.9 にする。
• 強調は赤文字の太字だけにする。マーカーや下線は使わない。
• 小見出しは濃グレーで中央揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは中央寄せの単列。メリットは横スライダー。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの左右余白は約 22px。
• 見出しブロックの後に 40px ほどあけて本文を置く。
• CTA はセクション末尾ごとに繰り返し配置する。
• カード同士は 24〜32px あける。
• フローは左に縦線と番号の丸を並べたタイムラインにする。

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる。
• カードは塗りと緑の 2px 枠線で区切る。
• 地図シルエットだけ、緑の線をずらして重ねたオフセット効果を付ける。

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの横長矩形。アイコンは淡緑の角丸正方形の中に置く。
• セクション境界: 直線で背景色を切り替える。FV 下だけ両脇に斜めの緑面を置く。
• CTA はピル型にし、右端に「>」を付ける。
• 最終フォームのボタンだけ角丸を小さくした矩形にする。
• 番号は緑の円の中に白数字。
• FAQ の開閉は緑の円に白い＋。

Components

• 赤ピル CTA（button-primary）: 幅は約 88%。白の太字に右矢印を添える。
• 地図シルエット見出し（section-heading-map）: 淡緑グラデーションの地域シルエットに、赤の日本語見出しと英字サブを重ねる。
• 線画アイコンカード（icon-card）: 淡緑グラデーションの角丸正方形に、緑の線画アイコンを入れる。下にラベルを置く。
• 緑ラベル（label-badge）: 小さな角丸の緑帯に白文字。カード上部の見出しに使う。
• メリットスライダー（merit-slider-card）: 大きな角丸の淡緑カードに、番号・タイトル・白枠の箇条書きを入れる。左右に赤矢印、下にドット。
• 数値比較カード（data-card）: 白い角丸カードに横棒グラフ（緑の目標と赤の平均）、赤線で区切った数値行、赤の結論を入れる。
• 番号付きフロー（flow-timeline）: 緑の丸番号を縦線でつなぎ、緑の太字見出しと本文を並べる。
• FAQ アコーディオン（faq-accordion）: 太字の質問と右端の緑丸＋を置き、下にグレーの区切り線を引く。
• 申込・電話カード（contact-card）: 白カードの中に赤の矩形ボタンと、ベージュ面の電話番号（赤の大きな数字）を入れる。

Do's and Don'ts

Do - 見出しは必ず地図シルエットと赤文字の組み合わせにする。 - セクション境界にキャラクターを小さくはみ出させて置く。 - 白とベージュの交互配色を守る。 - 数値は太い欧文で大きく見せる。 - CTA を 3〜4 か所で繰り返す。

Don't - 赤を背景面に広く使わない。 - 濃い影やグラデーションを多用したボタンにしない。 - 細い明朝体を使わない。 - 写真を多く並べない。主役はイラストにする。 - 青や紫など、別系統の色をアクセントに加えない。

Page Structure

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

1. ファーストビュー（テーマと募集を一目で伝える）: 緑の円弧背景に白抜きの大見出しを置き、中央にキャラクター、周りに野菜イラストを散らす。下に吹き出し風の白帯と赤 CTA。
2. プロジェクト概要（取り組みの目的を説明する）: 両脇の斜めの緑面に野菜イラストを置く。地図見出しの下に本文（強調は赤）と、3 つの線画アイコンカードを縦に並べる。
3. 最新の取り組み（事例の掲載枠）: 白地に地図見出しと短い準備中表記を置く。
4. 新着情報（お知らせ）: ベージュ地。赤の日付に赤い下線を引き、本文の下にグレー線。
5. 価値・メリット（参画する利点を示す）: 導入文と小見出しの下に、淡緑の大カードを横スライダーで並べ、末尾に CTA。
6. 背景・課題（必要性をデータで示す）: ベージュ地に食卓の写真と本文。白カードに横棒グラフで比較し、出典の注釈と FAQ 風の補足アコーディオンを添える。
7. 目標と参画パターン（目指す数値と参加方法）: 淡緑の目標カード、緑枠の数値目標カード、番号付きの 2 パターン（アイコン・箇条書き・おすすめ枠）。
8. 参画までの流れ（手順を示す）: ベージュ地に 5 ステップの縦タイムライン。続けて緑枠の原則リスト（緑の番号）とグレーの補足ボックス。
9. よくある質問（不安を解消する）: 白地にアコーディオンを 6 件ほど並べる。
10. 関連リンク（外部情報へ誘導する）: ダッシュで挟んだ小見出しと赤ピルボタン。
11. 申込 CTA（フォームと電話へ誘導する）: ザラついたベージュ地に地図見出し、白カードの中に赤ボタンと電話番号。
12. フッター（問い合わせ先とナビ）: 緑のグラデーション地に白文字のロゴ、住所、2 列のリンク。

Imagery

• 野菜・食材は太めの黒い主線に、ややくすんだ水彩風の塗りで手描きする。
• マスコットキャラクターは青×黄の縞の頭を持つゆるい二頭身。調理などのポーズ違いで各セクションに登場させる。
• アイコンは緑の単線ラインアート。淡緑グラデーションの角丸正方形の中に置く。
• 写真は和食の食卓を明るく俯瞰ぎみに撮った一枚程度にとどめる。
• 地域の地図シルエットを見出しの背景モチーフにする。淡緑グラデーションに緑の線をずらして重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左上ロゴ、右にナビと赤ボタンを置いた横並びヘッダー。
• PC の FV はタイトルを左、キャラクターを右に置く横構成。
• アイコンカードや参画パターンは PC で 3 列・2 列に横並びにする。
• 数値比較カードは PC で 2 列。
• 課題の写真と本文は PC で左右 2 カラム。
• PC のコンテンツ幅は約 1000px で中央寄せ。CTA は幅を縮めたピルにする。

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