--- version: alpha name: Fresh Green Public Food Program LP description: 若草色のグラデーションと生成りベージュを交互に敷き、見出しは赤の太丸ゴシックで目立たせる構成。キャラクターと手描き野菜イラストで親しみを出した、自治体の企業参画募集 LP。地図型の緑シルエットを背負った見出し、緑の角丸カード、赤のピル CTA を繰り返して、行政らしい信頼感とやわらかさを両立させている。 colors: primary: '#8CBD5C' secondary: '#53AD5D' cta: '#EE2E2B' on-cta: '#FDF1EF' accent-1: '#E42F2B' background: '#FFFFFF' background-alt: '#F1EAD9' tint-1: '#D1F1B2' surface: '#FFFFFE' tint-2: '#EDEDED' text: '#3A3A3A' text-muted: '#B3B3B3' line: '#ECEDEB' accent-2: '#F9726E' cta-accessible: '#DE1512' accent-1-accessible: '#CA1E1A' primary-accessible: '#557A31' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.04em label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 6px md: 14px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px section-heading-map: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 200px icon-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 220px label-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px merit-slider-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 700px data-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 560px flow-timeline: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 180px faq-accordion: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 70px contact-card: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 420px --- # DESIGN.md — 若草緑×赤の手描き野菜行政プロジェクト LP（Fresh Green Public Food Program LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: 親しみ・手作り感、ナチュラル、信頼・誠実、やさしい・柔らかい - **キーワード**: 若草グリーン・生成りベージュ・赤の見出し・手描き野菜・キャラクター・地図シルエット - **地の質感**: ベージュ面には紙のようなわずかなザラつき。白面はフラット。カードは淡い緑グラデーション。 - **形**: 大きめの角丸カードとピル型ボタン、円形の番号バッジ、ギザギザの地図シルエット。 - **温度感**: 暖かく健康的。緑で安心感を出し、赤で行動を促す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8CBD5C` | ブランドの若草緑（ラベル・番号・アイコン） | 4% | 画素の実測 | | `secondary` | `#53AD5D` | FV・フッターの濃い緑 | 5% | 画素の実測 | | `cta` | `#EE2E2B` | 主 CTA の赤 | 2% | 画素の実測 | | `on-cta` | `#FDF1EF` | CTA 上の白文字 | 0% | 画素の実測 | | `accent-1` | `#E42F2B` | セクション見出しの赤文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 白の地 | 39% | 画素の実測 | | `background-alt` | `#F1EAD9` | 生成りベージュの交互セクション | 21% | 画素の実測 | | `tint-1` | `#D1F1B2` | 淡い緑のカード面 | 9% | 画素の実測 | | `surface` | `#FFFFFE` | 白の情報カード（ベージュ上） | 6% | 画素の実測 | | `tint-2` | `#EDEDED` | グラフ・補足ボックスの薄グレー | 2% | 画素の実測 | | `text` | `#3A3A3A` | 見出し・本文の濃いグレー | 3% | 推定 | | `text-muted` | `#B3B3B3` | 注釈のグレー | 0% | 画素の実測 | | `line` | `#ECEDEB` | FAQ の区切り線 | 0% | 画素の主要色に補正 | | `accent-2` | `#F9726E` | グラフの平均値の薄赤 | 0% | 画素の実測 | | `cta-accessible` | `#DE1512` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CA1E1A` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#557A31` | AA を満たす補正値（計算） | | 計算 | - 白と生成りベージュのセクションを交互に敷いてリズムを作る。 - セクション見出しと本文中の強調語は赤にする。本文はグレーのまま。 - カード・ラベル・番号・リストの丸は若草緑で統一する。 - 赤は 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインタイトル（白抜き、一部の語だけ黄色） | 丸ゴシック | M PLUS Rounded 1c | 900 | 34px | 1.3 | 0.04em | | `headline-lg` | 赤のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.3 | 0.02em | | `accent` | 見出し下の英字サブ | 欧文サンセリフ | Montserrat | 700 | 15px | 1.2 | 0.02em | | `headline-md` | 小見出し（濃グレー） | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.04em | | `headline-sm` | カードタイトル・FAQ の質問 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.06em | | `note` | 注釈・出典 | ゴシック | Zen Kaku Gothic New | 400 | 12px | 1.7 | 0.04em | | `label-button` | ボタンやラベルの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.4 | 0.04em | - セクション見出しは赤の太丸ゴシックで中央揃えにし、下に英字サブを置く。 - 大きな数値は 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-00b5ee75`（元 LP の URL から採番） - **元 LP**: https://shokukankyo.pref.gifu.lg.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。