--- version: alpha name: Blue-to-Pink Gradient Community Cooperative LP description: 白地に、青からピンクへのグラデーションのピル型ボタンと淡い水色の面を組み合わせた、地域で活動する非営利団体のコーポレート LP。人の笑顔が写った写真を大きく使い、細めのゴシック見出しと中央寄せのやさしい文章で、信頼感と親しみの両方を出している。 colors: primary: '#3A93D2' accent-1: '#D46EAA' cta: '#7C83BC' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F5F5F5' tint-1: '#DEF1FD' secondary: '#95D4F7' dark-section: '#329FD9' text: '#3D3D3D' text-muted: '#777777' accent-2: '#E2589A' line: '#EDEEEA' surface: '#FFFFFD' cta-accessible: '#6971B3' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.06em body-lg: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 2.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Playfair Display fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.06em rounded: sm: 4px md: 10px lg: 40px full: 999px spacing: unit: 8px card: 32px section: 72px 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: 30px button-contact: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 38px news-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 230px tag-outline: textColor: '{colors.accent-2}' typography: '{typography.note}' rounded: '{rounded.full}' height: 16px service-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 170px overlay-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 560px icon-grid: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 170px watermark-text: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 120px --- # DESIGN.md — 青ピンクグラデの地域協同団体 LP（Blue-to-Pink Gradient Community Cooperative LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: 信頼・誠実、やさしい・柔らかい、清潔・爽やか、ナチュラル - **キーワード**: 青→ピンクのグラデーション・白地と余白・人物写真・淡い水色パネル・線画イラスト・中央寄せ - **地の質感**: フラットな面に、写真とうっすら透ける大きな欧文の透かし文字を重ねる - **形**: ピル型ボタン、角丸の写真、左上だけ大きく角を丸めた水色パネル - **温度感**: 爽やかな青を基調にピンクで温かみを足す、明るく柔らかい中間の温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3A93D2` | グラデーション始点の青（ブランド色） | 2% | 画素の実測 | | `accent-1` | `#D46EAA` | グラデーション終点のピンク | 2% | 画素の実測 | | `cta` | `#7C83BC` | ボタンの塗り（青からピンクへのグラデーション） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページの地色 | 40% | 画素の実測 | | `background-alt` | `#F5F5F5` | 概要セクションの薄いグレーの地 | 7% | 画素の実測 | | `tint-1` | `#DEF1FD` | 事業一覧の水色パネル | 9% | 画素の実測 | | `secondary` | `#95D4F7` | パネルやバナー帯の濃いめの水色 | 3% | 画素の実測 | | `dark-section` | `#329FD9` | 関連団体バナーを並べる青のグラデーション帯 | 2% | 画素の実測 | | `text` | `#3D3D3D` | 見出し・本文の黒に近い墨色 | 3% | 画素の実測 | | `text-muted` | `#777777` | 日付などの補足文字 | 0% | 推定 | | `accent-2` | `#E2589A` | カテゴリタグの枠線と文字のピンク | 0% | 推定 | | `line` | `#EDEEEA` | 区切り線 | 0% | 画素の主要色に補正 | | `surface` | `#FFFFFD` | 写真の上に重ねる半透明の白いカード | 8% | 画素の実測 | | `cta-accessible` | `#6971B3` | AA を満たす補正値（計算） | | 計算 | - 地色は白を基本にする。概要セクションだけ薄いグレー、事業一覧は水色のパネルにする。 - ボタンはすべて、左の青から右のピンクへの横グラデーションにし、文字は白にする。 - ピンクはタグの枠線とグラデーションの終点だけに使い、面を大きく塗らない。 - 参加を呼びかけるセクションは、全面の写真に白い霞をかけ、その上に白いカードを置く。 - 関連団体のバナー帯は、上が明るく下が濃い青のグラデーションにする。 - 文字は墨色の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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビュー写真の上に重ねる白い大コピー | ゴシック | Zen Kaku Gothic New | 300 | 34px | 1.5 | 0.08em | | `headline-lg` | セクションの大見出し（中央寄せ） | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.6 | 0.08em | | `headline-md` | 写真の下に置く小見出し（左寄せ） | ゴシック | Zen Kaku Gothic New | 500 | 17px | 1.6 | 0.06em | | `body-lg` | 導入部の中央寄せのメッセージ文 | ゴシック | Noto Sans JP | 700 | 13px | 2.4 | 0.1em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 700 | 10px | 2.0 | 0.04em | | `note` | 日付・タグ・事業名のキャプション | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.04em | | `accent` | 背景に透かして置く大きな欧文（斜めに傾ける） | 欧文セリフ | Playfair Display | 400 | 34px | 1.2 | 0.05em | | `label-button` | ピル型ボタンの文字 | ゴシック | Noto Sans JP | 500 | 10px | 1.0 | 0.06em | - 見出しは細めから中くらいの太さにし、字間を広めに取って静かな印象にする。 - 本文は小さめの太字にし、行間を広く取る。 - 導入メッセージは中央寄せにし、段落ごとに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 ```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-359c461d`（元 LP の URL から採番） - **元 LP**: https://jwcc.coop/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。