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

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

Overview

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

Colors

• 地は白とクリームを交互に置き、朱色の全面セクションは 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

• 見出しは太字ゴシックで中央揃えにし、下に朱色の英字ラベルを置く。
• 本文は 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。