--- version: alpha name: Hand-drawn Pastel Community Parenting LP description: 紙のざらつきがある白地とくすみ水色の面を交互に使う、地域の子育て団体サイト。手描きの線画イラスト、ちぎった紙のような不定形の写真、少し傾けた白カードで、手作りのやさしさを出している。強調色は黄色とオレンジだけを少し使う。 colors: primary: '#6FB1BF' background: '#FCFCFC' background-alt: '#F0F4F5' surface: '#FEFEFE' tint-1: '#F7F7F7' secondary: '#EEDC5B' tint-2: '#FFF6BA' cta: '#F16631' on-cta: '#FEFEFE' text: '#222222' text-muted: '#6B5F5D' line: '#D3DDD9' dark-section: '#1A1A1A' primary-accessible: '#3E7F8C' cta-accessible: '#D1440E' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Josefin Sans fontSize: 34px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em accent: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.15em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em note: fontFamily: Josefin Sans fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.1em rounded: sm: 6px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-contact: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px vertical-catch: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 200px tilted-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 420px pickup-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 360px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px news-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 70px contact-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 360px --- # DESIGN.md — くすみ水色×黄の手描き子育て団体 LP（Hand-drawn Pastel Community Parenting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: 親しみ・手作り感、やさしい・柔らかい、ナチュラル、かわいい - **キーワード**: 手描き線画・ちぎり紙の写真・傾いたカード・くすみ水色・紙のざらつき・縦書きコピー - **地の質感**: 白地に細かい紙粒のノイズ。セクション境界は手でちぎったような波線にする。 - **形**: 角丸の大きいカードを1〜2度傾ける。ボタンはふちが少し揺れたピル型。写真は不定形に切り抜く。 - **温度感**: あたたかく穏やか。彩度を抑えたパステル色。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6FB1BF` | サブボタン・英字見出しの下の日本語ラベル | 3% | 画素の実測 | | `background` | `#FCFCFC` | 紙のざらつきがある白い地 | 40% | 画素の実測 | | `background-alt` | `#F0F4F5` | くすみ水色のセクション地 | 25% | 画素の実測 | | `surface` | `#FEFEFE` | 傾けたカードの白い面 | 12% | 画素の実測 | | `tint-1` | `#F7F7F7` | カード内のロゴ置き場の淡いグレー | 5% | 画素の実測 | | `secondary` | `#EEDC5B` | お問い合わせ帯の黄色・縦書きコピーの帯 | 4% | 画素の実測 | | `tint-2` | `#FFF6BA` | ピックアップイベント枠の淡い黄 | 2% | 画素の実測 | | `cta` | `#F16631` | 問い合わせボタンのオレンジ | 0% | 画素の実測 | | `on-cta` | `#FEFEFE` | オレンジボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#222222` | 見出し・本文の文字 | 3% | 推定 | | `text-muted` | `#6B5F5D` | ニュースの日付 | 0% | 画素の主要色に補正 | | `line` | `#D3DDD9` | ニュース一覧の点線 | 0% | 画素の主要色に補正 | | `dark-section` | `#1A1A1A` | 黒いピル型ボタン | 0% | 画素の実測 | | `primary-accessible` | `#3E7F8C` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#D1440E` | AA を満たす補正値（計算） | | 計算 | - 地の色は紙白とくすみ水色を交互に置き、ちぎった波線で切り替える。 - ボタンはくすみ水色のピル型に白文字を基本にする。 - 黄色は縦書きコピーの帯、ピックアップの枠、最後のお問い合わせ帯に限って使う。 - オレンジはファーストビューの問い合わせボタンだけに使う。 - 文字はほぼ黒の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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きのキャッチコピー（色帯の上に置く） | ゴシック | Zen Kaku Gothic New | 500 | 34px | 1.3 | 0.05em | | `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Josefin Sans | 500 | 34px | 1.2 | 0.02em | | `headline-md` | コンセプトを伝える和文見出し | ゴシック | Zen Kaku Gothic New | 400 | 32px | 1.5 | 0.06em | | `headline-sm` | カードのタイトル | ゴシック | Zen Kaku Gothic New | 500 | 19px | 1.5 | 0.08em | | `body-md` | 本文・カードの説明文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.1em | | `accent` | 英字見出しの下の日本語ラベル（水色） | ゴシック | Zen Kaku Gothic New | 500 | 10px | 1.4 | 0.15em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.4 | 0.12em | | `note` | 日付・フッターのリンク | 欧文サンセリフ | Josefin Sans | 400 | 11px | 1.6 | 0.1em | - セクション見出しは、細めの幾何学的な英字の下に小さな水色の日本語ラベルを添える。 - 本文は字間を広め（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 ```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-fca490f8`（元 LP の URL から採番） - **元 LP**: https://mamafes.net/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。