DESIGN.md — 青×生成りの波形で弾む子ども支援NPO LP（Bright Blue Wavy Youth NPO LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ポップ・元気、やさしい・柔らかい、親しみ・手作り感、清潔・爽やか
• キーワード: 波形の境界・青と生成り・不定形の写真・手書き欧文・子どもの笑顔・白カード
• 地の質感: 生成りの地にうっすら紙のような粒状感。青の面は単色でフラット
• 形: 波線・不定形のブロブ・大きめの角丸カード・ピル型ボタン
• 温度感: 明るく温かい。爽やかな青に生成りの温もりを足している

Colors

• 地は白→生成り→青を波形の境界で切り替える
• 青の面はサービス紹介・お客様の声・フッターなど強調ブロックに使う
• 青地の上には白カードを置き、文字は紺黒にする
• ボタンは黒のピル型を基本にする。青地の上では白いピルにする
• 赤・黄・緑・青の原色は小さなブロブ装飾だけに使う
• 手書き欧文は黄色か青で、写真のそばに置く

Typography

• 見出しは太いゴシックで短く言い切る
• 英字の小見出しを青で日本語見出しの上に添える
• 本文は行間を広めにして短い行で改行する
• 手書き欧文は傾けたり帯状に流したりして動きを出す
• 大きな欧文のCONTACTは白抜きか淡色で背景になじませる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列も可
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション間は波形の境界で区切る
• テキストと写真は左右に振り分け、SPでは縦に積む
• カードは等間隔のグリッドに並べる
• 写真コラージュのセクションは余白を詰めて不定形の写真を散らす
• 見出しは中央揃えか左揃えのどちらかで、セクションごとに揃える

Elevation & Depth

• カードはごく薄い影か影なしで、白と地の色の差で浮かせる
• 丸い矢印アイコンをカードの右下角にかぶせる
• 写真には影をつけない

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の四角が基本。コラージュ部分は不定形のブロブで切り抜く
• セクション境界: ゆるやかな波線。キャラクター風の目がついた膨らみを入れる
• 直線の区切りは使わない
• 装飾のブロブは手描きのような不揃いな形にする
• ボタンは必ずピル型にし、左に丸い矢印アイコンを入れる

Components

• 黒ピルボタン（button-pill-dark）: 黒地に白文字。左に白い丸の矢印アイコンを入れる
• サービスカード（service-card）: 白カードに角丸写真・タイトル・2行の説明を入れ、右下に黒丸の矢印をつける
• 声の吹き出しカード（voice-bubble）: 青地の上に白い小カードを散らし、青いタグと＋アイコンを添える
• お知らせカード（news-card）: 角丸サムネの下に日付・カテゴリタグ・タイトルを置く
• 英字＋日本語見出し（section-label）: 小さな青い英字の上に太字の日本語見出しを重ねる
• 手書き欧文の流れる帯（marquee-hand）: 青の手書き英字を画面幅いっぱいに横へ流す
• 問い合わせカード（contact-card）: LINE・メール・電話の3枚を並べる。LINEは緑のピル、電話は大きな番号で見せる
• スタッフ写真カード（staff-card）: 縦長の角丸写真に役職と名前を添え、横にスクロールさせる

Do's and Don'ts

Do - 子どもの自然な笑顔や外遊びの写真を大きく使う - 境界は必ず波形にして、柔らかい流れをつくる - 原色の小さなブロブを写真のまわりに点在させる - ボタンは黒のピル型に矢印アイコンをつけて統一する - 青地の上の情報は白カードにまとめる

Don't - 直線や鋭い角の区切りを使わない - 原色を広い面に塗らない - 明朝体や重厚な配色を使わない - 写真を四角のまま角丸なしで並べない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（活動の明るさを一目で伝える）: 全面の屋外写真に白い太字コピーと英字を重ね、下端を波形で白地へつなぐ
2. メッセージ（団体の想いを伝える）: 左に見出しと短い改行の本文、右に角丸写真と黄色の手書き英字を置く
3. サービス一覧（事業を紹介する）: 青地に白カードを3列×2段で並べ、中央に白いピルボタンを置く
4. 写真の帯（雰囲気を伝える）: 笑顔のアップ写真を全幅で入れ、上下を波形で切る
5. お知らせ（最新情報を伝える）: 左にカテゴリのリスト、右にサムネカードを3枚並べる
6. メディア掲載（信頼を補強する）: 生成りの丸い面に縦書きの見出しとロゴ付きのリストを置く
7. 団体紹介（理念と人を見せる）: 手書き英字の帯の下に、見出し＋本文と集合写真を左右に並べる
8. 紹介動画（活動を映像で見せる）: 角丸の動画サムネを2つ並べ、中央に青い再生ボタンを置く
9. スタッフ（親しみを伝える）: 縦長の角丸写真を横に並べてスクロールさせる
10. 写真コラージュ（多様な活動を見せる）: 不定形に切り抜いた写真とカラフルなブロブを散らす
11. 利用者の声（共感を得る）: 青地に白い吹き出しカードを不揃いに配置する
12. SNS（フォローを促す）: 生成りの大きな角丸パネルに投稿サムネを横に並べる
13. 寄付・サポーター（支援を募る）: 寄付の説明と写真、支援企業のロゴを4列で並べる
14. 問い合わせ・フッター（連絡手段を示す）: 大きな欧文見出しの下に3つの連絡カードを置き、青い波形のフッターにつなぐ

Imagery

• 夏の屋外で自然光の中、子どもや若者が走ったり笑ったりする瞬間を撮る
• 湖や空の青を背景に入れて、ブランドの青と色を合わせる
• 室内は勉強や食事などの何気ない活動を温かい色味で撮る
• 赤・黄・緑・青の不揃いなブロブと、目のついた小さなキャラクターを装飾に使う
• 写真には手書きの英字で名前やメッセージを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は2〜3カラムのカード。SP は1〜2カラムにする
• PC の左右に分けたテキストと写真は、SP では写真を上にして縦に積む
• スタッフやSNSは SP で横スクロールにする
• 波形の振れ幅は SP で小さくする
• FVのコピーは SP で32〜36pxにし、写真の上の余白に置く
• PC のグローバルナビは 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 行書くと起動時に読み込まれる。