---
version: alpha
name: Playful Geometric Animal Welfare LP
description: 朱色のオレンジを主役に、ミント緑・黄・青の幾何学図形と切り抜きの猫写真を散りばめた団体サイト。地はクリームと白を交互に使う。猫耳型の面やカードで親しみやすさを出しつつ、本文は小さめのゴシックで丁寧に読ませる。
colors:
  primary: '#F55C30'
  background: '#FEFEFE'
  background-alt: '#FFFAE7'
  secondary: '#55D7A9'
  accent-1: '#00935D'
  accent-2: '#FCFE63'
  accent-3: '#2364C4'
  cta: '#F25C2D'
  on-cta: '#FFFFFF'
  text: '#0A0A0A'
  text-body: '#4A4A4A'
  tint-1: '#A7D5EF'
  surface: '#FDFEFD'
  dark-section: '#5F4C4C'
  cta-accessible: '#D93E0D'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.06em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    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-secondary:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  card-cat-ear:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 420px
  badge-corner:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 40px
  section-title:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 60px
  donation-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 260px
  cat-head-panel:
    backgroundColor: '{colors.primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 360px
  tab-link:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 48px
---

# DESIGN.md — 朱色×若草の幾何学ポップな保護猫団体 LP（Playful Geometric Animal Welfare LP）

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

## Overview

- **業種**: 自治体・公共・団体 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、信頼・誠実
- **キーワード**: 朱色オレンジ・幾何学図形・切り抜き写真・猫耳シルエット・クリーム地・ゆるい手書き吹き出し
- **地の質感**: フラットな単色の面だけで構成する。影やグラデーションはほぼ使わない。
- **形**: アーチ、円、正方形、平行四辺形を組み合わせる。猫耳の付いた丸い面やカードを使う。
- **温度感**: 暖色寄りで明るく温かい。緑と青で温度を抑えて清潔感を足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#F55C30` | ブランドの朱色。FV・募集セクションの地 | 14% | 画素の実測 |
| `background` | `#FEFEFE` | 基本の白地 | 38% | 画素の実測 |
| `background-alt` | `#FFFAE7` | コンセプト・トピックスのクリーム地 | 18% | 画素の実測 |
| `secondary` | `#55D7A9` | ミント緑のアーチ・図形 | 4% | 画素の実測 |
| `accent-1` | `#00935D` | 濃い緑の寄付カード見出し面 | 4% | 画素の実測 |
| `accent-2` | `#FCFE63` | レモンイエローの図形 | 2% | 画素の実測 |
| `accent-3` | `#2364C4` | ロイヤルブルーのボタン・図形 | 2% | 画素の実測 |
| `cta` | `#F25C2D` | 寄付・申込の主ボタン | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#0A0A0A` | 見出しの黒 | 1% | 画素の実測 |
| `text-body` | `#4A4A4A` | 本文の濃いグレー | 2% | 推定 |
| `tint-1` | `#A7D5EF` | 水色のアーチ・写真背景 | 2% | 画素の実測 |
| `surface` | `#FDFEFD` | カードの白面 | 5% | 画素の実測 |
| `dark-section` | `#5F4C4C` | 写真のこげ茶トーン・ドア装飾 | 2% | 画素の主要色に補正 |
| `cta-accessible` | `#D93E0D` | AA を満たす補正値（計算） |  | 計算 |

- 地は白とクリームを交互に置き、朱色の全面セクションは FV と募集の 2 か所に絞る。
- 幾何学図形にはミント・黄・青・朱色を使い、1 か所に 2〜3 色までにする。
- 主ボタンは朱色、問い合わせや申込のサブ動線は青のピル型にする。
- 英字ラベルは朱色の小さい文字で見出しの下に添える。
- 寄付カードの見出し面は濃い緑、本文面はクリームにする。
- 朱色の面の上の文字とカードは白にする。
- `button-primary` は文字 `#FFFFFF` × 背景 `#F25C2D` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D93E0D`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV のキャッチ（白抜き） | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.5 | 0.08em |
| `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.06em |
| `headline-md` | 事業名・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.05em |
| `headline-sm` | 小見出しのリード | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.03em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em |
| `accent` | 見出し下の英字ラベル・番号 | 欧文サンセリフ | Montserrat | 700 | 11px | 1.2 | 0.1em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em |
| `note` | 口座情報などの注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.03em |

- 見出しは太字ゴシックで中央揃えにし、下に朱色の英字ラベルを置く。
- 本文は 13px 前後と小さめにし、行間を広く取る。
- 番号は「01」の形で朱色の小さい欧文にし、見出しの左上に添える。
- 吹き出しのセリフは手書き風の斜め線を添えて、ゆるく見せる。
- ロゴ風の大きな欧文を帯状に流すときは、塗りと白抜きを交互に並べる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カード群も縦に積む
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- 事業紹介は写真と文章を左右交互に置き、SP では写真を上に積む。
- 写真の背後に図形をずらして重ね、余白を広く取る。
- 寄付ブロックは見出し面と本文面を分けたカード型にする。
- セクション同士の間は 80px 以上空ける。
- 写真ギャラリーは余白なしのタイル状に並べる。

## Elevation & Depth

- 基本は影なしのフラットにする。
- ボタンにだけ下方向の薄い影（0 2px 0 程度）を付けてもよい。
- 切り抜き写真には接地用の淡い影を付けてもよい。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 猫は背景を切り抜き、アーチ・円・正方形の色面に重ねる。ギャラリーは四角いトリミング。
- **セクション境界**: 大きな円弧で区切り、猫耳付きの丸い面を使う。図形を境界にまたがせて置く。
- カードの上辺に猫耳の三角を 2 つ付ける。
- アーチ型（上が半円の縦長）を写真枠や扉モチーフに使う。
- 小さな正方形・平行四辺形・円を周囲に散らす。
- ボタンはピル型にし、右端に丸アイコンか＋記号を付ける。

## Components

- **朱色ピルボタン**（`button-primary`）: 寄付・登録の主ボタン。右に＋か矢印を付ける
- **青ピルボタン**（`button-secondary`）: 申込・問い合わせ用。右端に白丸の再生アイコン
- **猫耳カード**（`card-cat-ear`）: 上辺に猫耳が付いた白カード。朱色の地の上に置く
- **角の青バッジ**（`badge-corner`）: カード右上に付ける斜めストライプ入りの青い四角ラベル
- **見出し＋英字ラベル**（`section-title`）: 太字の日本語見出しと、その下に置く朱色の英字
- **寄付カード**（`donation-card`）: 左（SP は上）が濃い緑の見出し面、右がクリームの本文面
- **猫頭シルエット面**（`cat-head-panel`）: 猫の頭の形をした朱色の大きな面に団体紹介を白文字で入れる
- **下矢印付き事業リンク**（`tab-link`）: 番号付きの事業名の下に線と▼を付けたアンカーリンク

## Do's and Don'ts

**Do**
- 猫の写真は切り抜いて、色面からはみ出すように配置する。
- 図形はミント・黄・青・朱色の 4 色から選ぶ。
- 白・クリームの地と朱色の地のリズムを守る。
- ボタンはピル型にし、右端にアイコンを付ける。
- 猫耳・アーチなどの動物モチーフを形に取り入れる。

**Don't**
- グラデーションや強い影を使わない。
- 黒や暗色の全面背景を使わない。
- 角ばったカードを多用して硬い印象にしない。
- 本文を太字にしすぎて読みにくくしない。
- 図形の色を 5 色以上に増やさない。

## Page Structure

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

1. **ファーストビュー**（団体の理念を一言で伝える）: 朱色の地にミント・水色・黄の大きなアーチ面と切り抜き猫を置き、右上に白抜きのキャッチを入れる。
2. **ロゴ帯**（ブランドの印象付け）: 白地に大きな欧文ロゴを横に流し、塗りと白抜きを交互にする。
3. **理念・コンセプト**（活動の背景を語る）: クリーム地に長文と猫写真を左右交互に置き、周囲に図形を散らす。
4. **団体紹介**（団体の概要を伝える）: 朱色の猫頭シルエット面の中に、白ラベルと白文字の説明を入れる。
5. **事業紹介**（5 つの事業を一覧で見せて詳しく説明する）: 番号付きのアンカーリンクを並べ、その下で写真と図形、見出し、本文を左右交互に配置する。
6. **ボランティア募集**（参加を募る）: 円弧で始まる朱色の地に猫耳カードを 2 列で並べる。最後に大きな白抜きの呼びかけ文と猫の顔を置く。
7. **寄付のご案内**（支援方法を提示する）: 緑の見出し面とクリームの本文面からなるカードを縦に並べ、小さい方法は 3 列で並べる。
8. **写真ギャラリー**（活動の様子を見せる）: 図形とお礼の吹き出しを添えた大きな猫の下に、写真を隙間なくタイル状に並べる。
9. **猫の紹介**（里親募集などへ誘導する）: 縦書きの見出しの横に、イラスト風背景の写真カードを 3 枚と丸矢印リンクを並べる。
10. **トピックス**（お知らせへ誘導する）: クリーム地にアーチ型の扉イラストを 2 つ置き、扉にラベルを付ける。
11. **お問い合わせ**（連絡手段を示す）: 白地に短い説明と青ピルボタンを 2 つ並べ、左下に猫写真を置く。

## Imagery

- 猫は白背景で撮るか切り抜き、全身または上半身を見せる。
- 写真の背後に円・正方形・アーチの色面をずらして重ねる。
- 画面の周りに小さな四角や平行四辺形を傾けて散らす。
- 猫の足跡のような淡い模様をクリーム地に薄く置く。
- 扉・家・本などのフラットなイラスト背景と写真を合成する。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC の左右交互配置は、SP では写真→本文の順に縦に積む。
- PC で 2 列の猫耳カードは、SP では 1 列にする。
- PC で 3 列の寄付カードは、SP では 1 列にして見出し面を上に置く。
- PC で縦書きの見出しは、SP では横書きにしてもよい。
- FV の図形は SP では縮小し、キャッチを写真の下に回す。
- ナビは 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-22d700c0`（元 LP の URL から採番）
- **元 LP**: https://gifuhappycats.com/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。