DESIGN.md — くすみ水色×黄の手描き子育て団体 LP（Hand-drawn Pastel Community Parenting LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ナチュラル、かわいい
• キーワード: 手描き線画・ちぎり紙の写真・傾いたカード・くすみ水色・紙のざらつき・縦書きコピー
• 地の質感: 白地に細かい紙粒のノイズ。セクション境界は手でちぎったような波線にする。
• 形: 角丸の大きいカードを1〜2度傾ける。ボタンはふちが少し揺れたピル型。写真は不定形に切り抜く。
• 温度感: あたたかく穏やか。彩度を抑えたパステル色。

Colors

• 地の色は紙白とくすみ水色を交互に置き、ちぎった波線で切り替える。
• ボタンはくすみ水色のピル型に白文字を基本にする。
• 黄色は縦書きコピーの帯、ピックアップの枠、最後のお問い合わせ帯に限って使う。
• オレンジはファーストビューの問い合わせボタンだけに使う。
• 文字はほぼ黒の1色。英字見出しの下の補足だけ水色にする。
• 写真やロゴ以外で彩度の高い色を広い面に使わない。
• button-primary は文字 #FEFEFE × 背景 #6FB1BF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#3E7F8C、4.51:1）を使う。
• button-contact は文字 #FEFEFE × 背景 #F16631 のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D1440E、4.58:1）を使う。
• vertical-catch は文字 #FEFEFE × 背景 #6FB1BF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#3E7F8C、4.51:1）を使う。

Typography

• セクション見出しは、細めの幾何学的な英字の下に小さな水色の日本語ラベルを添える。
• 本文は字間を広め（0.1em）、行間を2.0にしてゆったり読ませる。
• キャッチコピーは縦書きにし、1行ごとに水色か黄色の帯に白抜きで置く。
• 見出しを太くしすぎない（400〜500）。
• カードのタイトルは中央揃え、説明文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカード 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは1〜2度ずつ左右交互に傾ける。
• セクションの間に不定形の写真を左右にはみ出させて置く。
• 手描きイラストは見出しやカードの角に重ねる。
• ニュースは日付と本文の2列にし、点線で区切る。
• 写真ギャラリーは横に流れるカードにする。

Elevation & Depth

• 影はほとんど付けず、面の色の差と傾きで重なりを見せる。
• カードは白い面だけで、影は付けないかごく弱くする。
• 写真は紙を切り抜いたような縁で、地から浮いて見せる。

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: ちぎり紙のような不定形のポリゴンや楕円。ギャラリーは角丸の矩形
• セクション境界: 手でちぎったような、ゆるい波線の境界
• ボタンのふちはわずかに揺らし、手描きらしさを出す。
• カードは角丸24px程度で、少し傾ける。
• History の写真は角丸を小さくし、左上に白い見出しタブを重ねる。
• 完全な直線の区切りは避ける（ただしパートナー帯と黄色帯は直線でよい）。

Components

• 水色ピルボタン（button-primary）: 詳細へ進むボタン。ふちが少し揺れるピル型に白文字を置く。
• オレンジ問い合わせボタン（button-contact）: メールアイコンを付けたピル型。ファーストビューの写真の下に置く。
• 縦書き色帯コピー（vertical-catch）: 1行ずつ水色・黄色の縦帯に白抜きの文字を置き、段をずらして並べる。
• 傾き白カード（tilted-card）: 上部にグレーのロゴ置き場、その下にタイトル・説明・ボタン。少し回転させる。
• ピックアップイベント枠（pickup-card）: 淡い黄の傾いた枠に、英字の見出し・画像・日付・黒いピルボタンを入れる。
• 英字＋和文ラベル見出し（section-heading）: 大きな英字の下に小さな水色の和文を添える。手描きイラストを隣に置く。
• ニュース一覧（news-list）: 日付と見出しの2列。各行を点線で区切る。
• 黄色お問い合わせ帯（contact-band）: 黄色の帯の中央に、揺れた白いピルボタンと短い案内文を置く。

Do's and Don'ts

Do - 手描きの線画人物（親子・子ども）を、見出しやカードの角に散らす。 - 写真は不定形に切り抜き、画面の端からはみ出させる。 - カードとボタンは少し傾けたり揺らしたりして、手作り感を出す。 - 白地には細かい紙粒のノイズを敷く。 - 本文は字間・行間を広くとる。

Don't - 鮮やかな原色を広い面に使わない。 - 影の強いカードや、光沢のあるボタンを使わない。 - 太いゴシックの大見出しで圧迫感を出さない。 - 写真をきっちりした矩形のまま並べ続けない。 - 黒い地のセクションを作らない。

Page Structure

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

1. ヘッダー（ロゴと団体の短い紹介を見せる）: 左にロゴ、隣に小さな紹介文、右にハンバーガーメニュー。
2. ファーストビュー（活動の雰囲気と理念を伝える）: 不定形の写真に縦書きの色帯コピーを重ね、オレンジの問い合わせボタンと手描きイラストを添える。
3. 注目イベント（直近のイベントへ誘導する）: 傾けた淡い黄色の枠に画像・日付・黒いボタンを入れる。
4. お知らせ（最新の動きを見せる）: 英字見出しと水色ボタン、点線で区切った日付つきのリスト。
5. 理念（団体の想いを語る）: 水色の地に大きな和文見出しと長めの本文、詳細ボタン、散らした写真。
6. イベント紹介（主な事業を紹介する）: 傾いた白カードにロゴ・タイトル・説明・ボタンを入れる。
7. 取り組み紹介（継続中のプロジェクトを並べる）: 同じ型のカードを縦に並べる。説明文のないカードも混ぜる。
8. 写真ギャラリー（活動の様子を見せる）: 角丸の写真を高さをずらして横に流す。
9. 沿革（歩みと実績を見せる）: 白地に写真を並べ、白いタブ見出しを重ねる。本文の抜粋と、続きを読むボタン。
10. パートナー（協力企業を示す）: グレーの地に紹介文と、2列のロゴ。
11. お問い合わせ（相談の窓口へ導く）: 黄色の帯に白いピルボタンと案内文。
12. フッター（サイト内のリンクと所在地を載せる）: 大きなロゴ、2列のリンク、縦書きのコピーとイラスト、最後に大きな写真。

Imagery

• 写真は自然光の屋外イベントで撮る。親子の笑顔を、明るめで少しやわらかい色調にする。
• 写真の切り抜きは、ちぎり紙のようなギザギザや不定形にする。
• イラストは黒い細線の手描きの人物。塗りは黒か白だけにする。
• ロゴのような波線のモチーフを、水色と黄色の太い線で描く。
• 事業ロゴは淡いグレーの置き場の中央に置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに英字＋和文のグローバルナビを横に並べる。
• PC のファーストビューは、左に問い合わせとピックアップ、中央に写真、右に縦書きコピーの3つで構成する。
• PC のカードはイベントを2列、取り組みを3列＋2列にし、高さをずらして配置する。
• PC の理念とパートナーは、見出しと本文を左右の2カラムにする。
• 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 行書くと起動時に読み込まれる。