DESIGN.md — 青ピンクグラデの地域協同団体 LP（Blue-to-Pink Gradient Community Cooperative LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、清潔・爽やか、ナチュラル
• キーワード: 青→ピンクのグラデーション・白地と余白・人物写真・淡い水色パネル・線画イラスト・中央寄せ
• 地の質感: フラットな面に、写真とうっすら透ける大きな欧文の透かし文字を重ねる
• 形: ピル型ボタン、角丸の写真、左上だけ大きく角を丸めた水色パネル
• 温度感: 爽やかな青を基調にピンクで温かみを足す、明るく柔らかい中間の温度

Colors

• 地色は白を基本にする。概要セクションだけ薄いグレー、事業一覧は水色のパネルにする。
• ボタンはすべて、左の青から右のピンクへの横グラデーションにし、文字は白にする。
• ピンクはタグの枠線とグラデーションの終点だけに使い、面を大きく塗らない。
• 参加を呼びかけるセクションは、全面の写真に白い霞をかけ、その上に白いカードを置く。
• 関連団体のバナー帯は、上が明るく下が濃い青のグラデーションにする。
• 文字は墨色の1色にまとめ、色付きの文字は使わない。
• button-primary は文字 #FFFFFF × 背景 #7C83BC のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#6971B3、4.55:1）を使う。
• button-contact は文字 #FFFFFF × 背景 #7C83BC のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#6971B3、4.55:1）を使う。

Typography

• 見出しは細めから中くらいの太さにし、字間を広めに取って静かな印象にする。
• 本文は小さめの太字にし、行間を広く取る。
• 導入メッセージは中央寄せにし、段落ごとに1行分空ける。
• 背景の欧文は淡い色にして読ませず、装飾として扱う。
• 見出しに飾り線やアイコンを付けない。
• ボタンの文字は「〜はこちら」のように短い誘導の言葉にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。お知らせと事業一覧は 2 カラム、概要アイコンは 4 カラム。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 32px（375px 幅換算）
• 写真は左右どちらかの端まで広げ、左右非対称に置く。
• 見出し・本文・ボタンの順に縦に並べ、ボタンは中央に置く。
• 事業カードは、写真の上端中央に円形アイコンを半分はみ出させて重ねる。
• 水色パネルは画面の左に少し余白を空け、右端まで広げる。
• 概要アイコンは縦の区切り線で 4 つに分ける。
• ファーストビューの直下では、2 枚の写真を少しずらして重ねる。

Elevation & Depth

• 影はほとんど使わず、フラットにする。
• 参加セクションのカードは、白の 85〜90% 不透明で写真の上に重ねる。
• 写真同士の重なりで奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 横長の長方形。事業カードは角丸 10px、本文写真は角丸 4px 程度。
• セクション境界: 直線で切り替える。事業パネルだけ左上と左下の角を大きく丸める。
• ボタンは必ずピル型にする。
• アイコンは白い正円の中に青の線画で入れる。
• タグは角丸の枠線だけで作る。
• 写真同士の重なりは、角を揃えずにずらす。
• カードは角丸 10px にする。
• 装飾として、ロゴの無限記号を大きくぼかしたものを背景に敷く。

Components

• グラデーションのピル型ボタン（button-primary）: 青からピンクへの横グラデーションに白文字。幅は 160px 前後で中央に置く。
• 大きな問い合わせボタン（button-contact）: フッター上に置く、ひと回り大きいグラデーションのピル型ボタン。
• お知らせカード（news-card）: サムネイル、日付、タイトル、ピンク枠のタグを縦に並べ、2 カラムで配置する。
• カテゴリタグ（tag-outline）: ピンクの枠線と文字だけで作る小さなピル型ラベル。
• 事業カード（service-card）: 角丸の写真の上端に白丸の線画アイコンを重ね、下に太字のキャプションを中央に置く。
• 半透明の参加カード（overlay-card）: 写真背景の上に置く白いカード。小見出し、見出し、本文、ボタンを入れ、区切り線で複数の項目に分ける。
• 概要アイコン列（icon-grid）: 黒い線画アイコンとラベルを、縦線で区切って 4 列に並べる。
• 透かし欧文（watermark-text）: 淡い青のセリフ体の欧文を斜めに置き、ぼかしたロゴ図形と重ねる。

Do's and Don'ts

Do - ボタンは全部、同じ青からピンクのグラデーションでそろえる。 - 人物の笑顔が写った自然光の写真を大きく使う。 - 余白を広く取り、1 つのブロックには見出し・短い文・ボタンの 3 つだけを置く。 - 図解は淡い色の円を重ねたベン図と、青い線画の人物で描く。 - 事業の数が多いときは、アイコン付きのカードを 2 カラムで並べる。 - 関連団体のバナーは、青い帯の上に白いバナーとして並べる。

Don't - 赤や黒のベタ塗りで強い訴求をしない。 - ボタンを単色や角ばった形にしない。 - 見出しを極太にしない。 - ピンクを広い面に塗らない。 - 強い影や立体的な装飾を使わない。 - 情報を詰め込んだバナーを多用しない。

Page Structure

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

1. ファーストビュー（活動の現場の空気と理念を伝える）: 全面の写真の上に白い細字の 2 行コピーを置く。下端に別の写真 2 枚をずらして重ねる。
2. 団体紹介（団体が何者かを短く宣言する）: 中央寄せの太字メッセージとグラデーションボタンを置く。下に透かし欧文とぼかしたロゴを敷く。
3. 仕組みの説明（働き方の仕組みを図解する）: 中央の見出しの下に、3 つの円を重ねたベン図と線画イラストを置き、続けて本文を入れる。
4. 用語解説（鍵となる概念を 2 つ説明する）: 片側の端まで広げた写真の下に、左寄せの見出し・本文・中央のボタンを並べる。これを 2 回繰り返す。
5. お知らせ（最新の活動を見せる）: 2 カラムのカードに日付・タイトル・タグを入れ、最後に「もっと見る」ボタンを置く。
6. 事業一覧（幅広い事業領域を示す）: 左上の角を丸めた水色パネルの上に、アイコン付きの写真カードを 2 カラムで約 12 枚並べる。
7. 参加の呼びかけ（働く・参加する・立ち上げるという関わり方を案内する）: 霞をかけた全面写真の上に半透明の白いカードを 2 枚置き、区切り線で項目を分ける。各項目にボタンを付ける。
8. ビジョン（目指す社会像を示す）: 角丸の写真の下に、中央寄せの見出し・短い文・ボタンを置く。
9. 団体概要（基本情報への入口にする）: 薄いグレーの地に、線画アイコンを 4 列並べ、その下にボタンを置く。
10. 関連団体バナー（つながりのある団体を示す）: 青のグラデーションの帯に、白いバナーを 3 列で並べる。
11. 問い合わせとフッター（連絡先を示す）: 大きなグラデーションボタンの下に、ロゴ・所在地・リンク・コピーライトを左寄せで置く。

Imagery

• 地域の現場で働く人・子ども・高齢者が自然に笑っている写真を、明るい自然光で撮る。
• 農作業、食、清掃、森など、生活に密着した場面を選ぶ。
• 図解のイラストは、青い細線の人物と淡い黄・ピンク・水色の円で描く。
• アイコンは青の単色の線画にし、手や人をモチーフにする。
• 背景の装飾には、ロゴ形状をぼかした大きなグラデーションと透かしの欧文を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビを横に並べ、右上に問い合わせのピル型ボタンを置く。
• PC の用語解説は、写真とテキストの 2 カラムにし、左右を交互に入れ替える。
• PC のお知らせは 4 カラム、事業一覧も 4 カラムにする。
• 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 行書くと起動時に読み込まれる。