DESIGN.md — 水色地×色分けパステルの子育て自治体PR LP（Playful Pastel Municipal Family Promotion LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ポップ・元気、親しみ・手作り感、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 手描きキャラクター・テーマ別の色分け・吹き出しコメント・実績メダル・街並みシルエット
• 地の質感: 水色地に薄い紙のような質感。そのほかは平らなベタ塗りの面
• 形: 角丸カード、いびつな手描き帯の見出し、楕円の吹き出し、写真の有機的な切り抜き
• 温度感: 明るく温かい。パステル寄りの中間色

Colors

• テーマごとに地色を決める。支援はピンク、教育はラベンダー、暮らしは水色、声は薄黄
• カードの枠線・見出し色・見出し帯・吹き出しの色は、そのセクションの地色に揃える
• 強調は黄色の半透明マーカーで行い、文字色はあまり変えない
• FV と最後のフッターは水色地にして、街並みの白いシルエットで区切る
• ボタンは白地に黒い枠線のモノトーンにし、色付きの面と差をつける
• 数値やランキングの強調には赤と金の黄色を少しだけ使う

Typography

• 見出しは手書き書体、本文はゴシックで役割を分ける
• 手書きの見出しは行頭をずらして段差をつけ、リズムを出す
• カードの見出しはセクションのテーマ色で太字にする
• 本文の段落は1字下げにし、行間を広めにとる
• 本文の要点には黄色のマーカーを引く
• 吹き出しの文は小さめの本文サイズにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカードを 3 カラムに並べる
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは見出し帯、リード文、カード列、キャラの吹き出しの順に並べる
• カードは縦に積み、カード同士は 24px ほど空ける
• カードの右下にイラストを置き、本文の行をイラストの手前で折り返す
• 見出し帯は画面の端からはみ出す幅で斜めに配置する
• 各セクションの最後にキャラクターと吹き出しを置く
• 写真は 2 枚を少しずらして重ねる

Elevation & Depth

• 影はほぼ使わず、平らな面で構成する
• ランキング表だけはごく弱い影で浮かせる
• 奥行きは色付きの枠線と地色の差でつける

Shapes

• 角丸: 小 4px ／ 中 14px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: FV は有機的な曲線で切り抜く。本文中は四角い写真を重ねる
• セクション境界: 街並みの白いシルエットと、地色の直線の切り替え
• カードは角丸 14〜20px で、2〜3px の色付き枠線を付ける
• ボタンは角丸なしの四角に 1px の黒線を付ける
• 見出し帯は端がいびつな手描きの多角形にする
• 吹き出しは角丸の面に小さな三角の尻尾を付ける
• 番号は小さな色付きの円にする

Components

• 枠付きボタン（button-outline）: 白地に黒の細い枠線。中央に太字ラベルを置き、右に矢印を付ける
• 手描き帯の見出し（heading-brush-band）: テーマ色の帯にキャラクターと手書きの見出しを重ねる
• 枠線カード（card-support）: テーマ色の太枠の角丸カード。色付きの見出し、本文、右下のイラストで構成する
• キャラの吹き出し（character-bubble）: 左にキャラクターと名前、右にテーマ色の角丸吹き出しを置く
• 実績メダル（award-medal）: 金のメダルの中央に大きな文字、下に金のリボンを付けて縦に並べる
• 切替タブ（tab-switch）: グレーのタブ 3 つ。選択中は白地にテーマ色の枠を付ける
• 番号付き目次（numbered-index）: 色付きの円に番号を入れ、手書きの項目を段違いに並べる
• 市民の声カード（voice-card）: 写真の下にクリーム地と黄土色の枠のカードを置く

Do's and Don'ts

Do - セクションごとに地色とテーマ色を 1 つ決め、すべての部品をその色で統一する - 手描きのゆるいキャラクターを各セクションに登場させる - 数字や受賞の実績は、メダル・グラフ・表で目に見える形にする - 本文の要点に黄色のマーカーを引く - カードの右下に淡いイラストを添える

Don't - 濃い単色のグラデーションや強い影を使わない - ボタンを派手な色のピル型にしない - 手書き書体を本文に使わない - 1 つのセクションの中に複数のテーマ色を混ぜない - 写真をすべて同じ四角で並べず、重ねたりずらしたりする

Page Structure

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

1. ファーストビュー（街の魅力を一言で伝える）: 水色地に手書きのキャッチを置き、家族の写真を曲線で切り抜く。周りにキャラクターを散らす
2. 目次（5 つのテーマを予告する）: 白っぽいパネルに番号の円と手書きの項目を段違いに並べる
3. 実績（受賞やランキングで信頼を示す）: メダル 3 つを並べ、ベージュのパネルに折れ線グラフと順位表を入れる
4. 子育て支援（支援制度を紹介する）: ピンク地にタブを置き、マゼンタ枠のカードを縦に並べる
5. 教育（教育の充実を示す）: ラベンダー地に紫枠のカードを並べ、最後に「もっと見る」ボタンを置く
6. 暮らし・アクセス（住環境と交通の便利さを伝える）: 淡い水色地に青枠のカードを置き、重ねた写真と路線図、大きな所要分数を入れる
7. お客様の声（住民のリアルな声を伝える）: 写真の下に薄黄地と黄土色の枠のカードを置く
8. CTA（資料請求に誘導する）: ベージュ地に中央揃えのコピーと枠付きボタンを置く
9. フッター（関連サイトへの誘導と運営元の表示）: 水色地にキャラクターを横に並べ、ロゴを置く。下端に黒い人物のシルエットを入れる

Imagery

• 写真は自然光で撮った、明るい家族の日常のスナップにする
• キャラクターは太い黒の主線とベタ塗りで描く。UFO に乗った宇宙人のような、ゆるい生き物にする
• カード内のイラストは淡い肌色や中間色のフラットな人物画にし、透明度を上げる
• 受賞はリアルな金のメダルとリボンで表現する
• 街並みは白か淡い単色のシルエットにする
• 路線図はくすんだ青の太線と円の駅で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を左右 2 分割にし、左にコピーと目次、右に写真を置く
• PC では支援・教育のカードを 3 カラムのグリッドに並べる
• PC の暮らしカードは、左に文、右に写真の横並びにする
• 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 行書くと起動時に読み込まれる。