DESIGN.md — 空色とリボン曲線の国際協力NPO LP（Sky Blue Ribbon NGO Corporate LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、ポップ・元気
• キーワード: 空色・リボン曲線・チケット型・線画アイコン・白カード・大きな数字
• 地の質感: フラットな淡い水色の面に、少し濃い水色の大きな曲線モチーフを透かしで重ねる。影はほぼ使わない
• 形: 角丸 8px 前後の白カード、チケットの切り欠き、円形バッジ、太いリボン曲線
• 温度感: 爽やかで明るく、少し温かい寒色系

Colors

• 地は淡い空色で統一し、帯で一段濃い水色に切り替えてセクションを区切る
• 見出し・数字・リンクはすべて primary の青にする
• カードやロゴ枠は白で、地から浮かせる
• 黄緑マーカーはキーワード1語の下線だけに使う
• 最後の問い合わせと寄付は濃青グラデーションのカードで締める
• 暖色は写真とロゴ以外に入れない
• ticket-banner は文字 #0B7DBB × 背景 #FFFEFF のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0B7BB9、4.59:1）を使う。
• stat-tile は文字 #0B7DBB × 背景 #BBDFF7 のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0B7BB9、4.52:1）を使う。

Typography

• 見出しは青の太字ゴシックで、字間を少し広げる
• 数字は大きな欧文太字にし、単位は小さく添える
• 本文は濃グレーで行間を広く取る
• 英字ラベルは大文字で小さくつける
• 中央寄せのメッセージ文は短い行で改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績は 2 列、カードとロゴは 3 列
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• 左右の余白は約 30px
• プロジェクトとブログは横スクロールのカルーセルにし、矢印ボタンを右下に置く
• ステップ説明は円形ノードを曲線でつなぐ
• ロゴは白い正方形タイルを 3 列で並べる
• 共創ブロックは画面右端まではみ出すパネルにする

Elevation & Depth

• 影は基本なし。白と水色の面の差で階層をつける
• カードの影はあっても極薄にする
• ヘッダーは白いピル型バーで写真の上に浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 8px の長方形。カード上部は横長に切る
• セクション境界: 直線で色を切り替え、上にリボン曲線をまたがせる
• ボタンは角丸 6px で、文字部分と矢印部分の 2 つに分ける
• タグは全角丸のピル型
• チケット型パーツはふちをギザギザか切り欠きにする
• 番号バッジは二重線の円にする

Components

• 分割型主ボタン（button-primary）: 青地の文字ボタンと、右に矢印だけの青い四角を並べる
• 矢印つきテキストリンク（link-arrow）: 小さな青い矢印ボックスと青文字に下線を引く
• チケット型バナー（ticket-banner）: ギザギザのふちの白い帯に、斜めの青ピルラベルとマーカーつき大見出しを置く
• 円形番号バッジ（step-badge）: 二重線の円に英字ラベル、大きな番号、日本語の小見出しを入れる
• プロジェクトカード（project-card）: 白カードに写真、水色ピルのタグ、青見出し、本文、ボタンを縦に並べる
• 実績タイル（stat-tile）: 水色パネルに線画アイコン、下にラベルと大きな青い数字を置く
• アコーディオン行（accordion-bar）: 白に近い帯の中で、左に太字ラベル、右に青い矢印ボックスを置く
• ニュース行（news-row）: 白い行に青い日付、1 行に省略したタイトル、右に青矢印を置く
• 問い合わせ・寄付カード（contact-card）: 濃青グラデーションのカードに白い大見出し、説明、白ボタンを入れる

Do's and Don'ts

Do - 淡い空色の地に青一色でまとめる - リボン状の曲線を大きく使い、セクションをつなぐ - アイコンは青い線画の人物で統一する - ボタンは文字と矢印に分けた形にそろえる - キーワードには黄緑のマーカーを引く

Don't - 赤やオレンジをボタンに使わない - 濃い影や立体的な装飾を付けない - 背景を真っ白だけにしない - 明朝体を混ぜない - 写真を角丸なしの裁ち落としで並べない（ファーストビューは除く）

Page Structure

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

1. ファーストビュー（活動の現場と理念を伝える）: 全面の集合写真に青いリボン曲線を重ね、縦書きコピーを入れる。下にチケット型の導線を置く
2. 代表メッセージ（創設の想いを語る）: 小ラベル、青い大見出し、角丸写真、本文、右寄せの署名を順に置く
3. 取り組み概要（ミッションとプロジェクトの入口）: 大見出しとアコーディオン 3 行を置く
4. 仕組みの図解（支援の循環を説明する）: 太い白の曲線上に 4 つの円形ステップを配置する
5. プロジェクト紹介（事業一覧）: 白カードの横スクロールカルーセルにする
6. 実績数字（信頼を示す）: 2 列の水色タイルに線画アイコンと大きな数字を入れる
7. 参加方法（関わり方を 3 段階で示す）: チケット型バナーの後に、番号バッジと 3 列カードを繰り返す
8. パートナー（協力企業を示す）: カテゴリ見出しの下に、白いロゴタイルを 3 列で並べる
9. 共創メッセージ（企業へ呼びかける）: 余白を広く取り、中央寄せの短い文の上にリボン曲線を流す
10. ブログ（活動報告）: 濃い水色の帯の上に、写真カードのカルーセルを置く
11. 最新情報（お知らせ）: バナー画像と、白いニュース行のリストを並べる
12. CTA（問い合わせと寄付）: 濃青グラデーションのカードを 2 枚並べる
13. フッター（団体情報とナビ）: 空色の地にロゴ、住所、リンク、SNS、トップへ戻るボタンを置く

Imagery

• 現地の子どもやスタッフの自然な笑顔のスナップを使う
• 人物アイコンは青の単色線画で、一部を青く塗る
• 背景には大きな曲線モチーフを薄い水色で透かす
• リボン曲線は青のグラデーションで、先を細くする
• チケットのアイコンを装飾として繰り返す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにナビとボタン 2 つを横に並べる
• PC のメッセージは写真と本文の 2 カラムにする
• PC のアコーディオンは 3 列に並べる
• PC の実績は本文の左右に置き、2×2 で並べる
• PC のロゴは 4 列、ブログは 4〜5 枚を同時に見せる
• 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 行書くと起動時に読み込まれる。