--- version: alpha name: Clean Blue Public Campaign LP description: 鮮やかなシアン系ブルーの外枠に白い大きなパネルを載せた、自治体系キャンペーンの告知 LP。情報が多くても読めるように、紺の帯見出し、黄色の主ボタン、赤の強調文字、点線の区切りで整理している。手描き風のカモメと雲が、公共の堅さを少しやわらげている。 colors: primary: '#0088CD' secondary: '#1A3A7A' background: '#FEFEFE' background-alt: '#FFFFFF' tint-1: '#E2F2E7' cta: '#FDF202' on-cta: '#1A3A7A' accent-1: '#E60012' accent-2: '#ED5C2E' accent-3: '#1E9E4A' text: '#1E2A4A' text-muted: '#666666' line: '#2A4A8A' tint-2: '#FBF0D4' accent-1-accessible: '#D90011' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px 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: 48px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px heading-band: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 32px status-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 160px reward-box: backgroundColor: '{colors.accent-1}' textColor: '{colors.cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 80px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 140px contact-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 150px speech-bubble: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px --- # DESIGN.md — 青と白の自治体省エネ還元キャンペーン LP（Clean Blue Public Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: シアンブルー外枠・白パネル・紺の帯見出し・黄色ボタン・赤の注意文字・手順図解 - **地の質感**: フラットな単色面。キービジュアルだけ青のグラデーションと手描き線画を使う - **形**: 大きな白パネルは角丸ほぼなし。ボタンはピル型。カードは細い紺の線で囲む - **温度感**: 爽やかで涼しい色が中心。黄色と赤を差し色にして注意を引く ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0088CD` | 外枠背景・キービジュアルの青 | 18% | 画素の実測 | | `secondary` | `#1A3A7A` | 帯見出し・ラベルの紺 | 3% | 推定 | | `background` | `#FEFEFE` | 白パネル地 | 55% | 画素の実測 | | `background-alt` | `#FFFFFF` | 目次エリアの淡いグレー地 | 6% | 画素の実測 | | `tint-1` | `#E2F2E7` | 解説セクションの淡い緑地 | 6% | 画素の実測 | | `cta` | `#FDF202` | 主ボタンの黄色 | 2% | 画素の実測 | | `on-cta` | `#1A3A7A` | 主ボタンの文字 | 0% | 推定 | | `accent-1` | `#E60012` | 強調数値・注意文字の赤 | 2% | 推定 | | `accent-2` | `#ED5C2E` | 店舗紹介ボタンのオレンジ | 1% | 画素の実測 | | `accent-3` | `#1E9E4A` | 省エネラベル帯の緑 | 1% | 推定 | | `text` | `#1E2A4A` | 本文・見出しの濃紺文字 | 3% | 推定 | | `text-muted` | `#666666` | 注釈のグレー文字 | 1% | 推定 | | `line` | `#2A4A8A` | カード枠・区切り線 | 0% | 推定 | | `tint-2` | `#FBF0D4` | 手順 STEP2 の淡いベージュ地 | 2% | 画素の実測 | | `accent-1-accessible` | `#D90011` | AA を満たす補正値（計算） | | 計算 | - ページの外枠は青で固定する。内容は白いパネルに入れ、セクションごとに区切る - 見出しの帯やラベルは紺で塗り、文字は白にする - 主な申請ボタンは黄色地に紺の文字。サブボタンは白地に紺の枠線にする - 金額・還元率・注意は赤の太字で示す。赤は本文の 5% 以下に抑える - 解説コラムは淡い緑、手順のステップは淡い水色と淡いベージュで色分けする - オレンジは地域店舗の紹介ボタンなど、特別な導線 1 か所だけに使う - `reward-box` は文字 `#FDF202` × 背景 `#E60012` のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D90011`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キービジュアルの大ロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 48px | 1.1 | 0.02em | | `headline-lg` | 還元率など最重要の訴求（赤） | ゴシック | Noto Sans JP | 900 | 24px | 1.35 | 0.02em | | `headline-md` | セクション見出し（申請方法など） | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | 紺帯の見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 電話番号・大きな数値 | 欧文サンセリフ | Montserrat | 800 | 34px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em | - 本文は中央揃えにし、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 ```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-15455dd6`（元 LP の URL から採番） - **元 LP**: https://ecohama.city.yokohama.lg.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。