---
version: alpha
name: Warm Yellow and Leaf Green Childcare Facility LP
description: 生成りの地に、濃い黄と若草緑の大きな面を丘のような波形で切り替える。子どもの写真をランダムに散らし、細い線の手描き風の装飾と縦書きの欧文ラベルを添える。やさしく元気な発達支援・保育施設のサイト。
colors:
  background: '#FCF7D9'
  primary: '#56A345'
  secondary: '#FDDD00'
  accent-1: '#E0663A'
  surface: '#FFFDEE'
  text: '#503E3F'
  on-primary: '#FFFDEE'
  background-alt: '#59A64A'
  accent-2: '#2E7D32'
  line: '#DACA96'
  accent-3: '#D4B82D'
  accent-1-accessible: '#C84C1F'
  background-alt-accessible: '#458139'
typography:
  display:
    fontFamily: Zen Maru Gothic
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.2em
  headline-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.2em
rounded:
  sm: 4px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  wave-divider:
    backgroundColor: '{colors.secondary}'
    height: 80px
  section-heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 90px
  news-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 160px
  button-pill-small:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.full}'
    height: 24px
  support-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 240px
  ribbon-badge:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 80px
  schedule-bar:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.on-primary}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 120px
  staff-comment:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 140px
---

# DESIGN.md — 黄×若草緑の波形が弾む児童福祉施設 LP（Warm Yellow and Leaf Green Childcare Facility LP）

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

## Overview

- **業種**: 教育・スクール・資格 ／ **雰囲気**: やさしい・柔らかい、ポップ・元気、ナチュラル、親しみ・手作り感
- **キーワード**: 生成り地・濃い黄の面・若草緑の面・丘の波形・写真の散らし配置・細い手描き線
- **地の質感**: フラットな単色の面。影はほとんど使わず、写真と細い点線・曲線で動きを出す
- **形**: 大きな有機的カーブ（ハート型・丘型）でセクションを区切る。カードは角丸控えめ、写真は四角か円
- **温度感**: 暖かい。黄と生成りが主役で、緑が落ち着きを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FCF7D9` | ページ基本の生成り地 | 34% | 画素の実測 |
| `primary` | `#56A345` | ブランドの若草緑（支援セクション地・見出し文字） | 24% | 画素の実測 |
| `secondary` | `#FDDD00` | 理念セクションの濃い黄の面 | 14% | 画素の実測 |
| `accent-1` | `#E0663A` | FV下の朱色の波帯・日付文字・ボタン | 2% | 推定 |
| `surface` | `#FFFDEE` | お知らせ・コメントのカード面 | 6% | 画素の実測 |
| `text` | `#503E3F` | 本文のこげ茶 | 3% | 画素の主要色に補正 |
| `on-primary` | `#FFFDEE` | 緑地の上の白文字 | 2% | 画素の主要色に補正 |
| `background-alt` | `#59A64A` | 時間割表の帯（緑の明るめ） | 3% | 画素の主要色に補正 |
| `accent-2` | `#2E7D32` | 緑の濃い色（見出しバッジ・時間割マーカー） | 1% | 推定 |
| `line` | `#DACA96` | お知らせ一覧の点線・薄い区切り | 1% | 画素の主要色に補正 |
| `accent-3` | `#D4B82D` | 見出し上の装飾・マーカーの黄 | 1% | 画素の実測 |
| `accent-1-accessible` | `#C84C1F` | AA を満たす補正値（計算） |  | 計算 |
| `background-alt-accessible` | `#458139` | AA を満たす補正値（計算） |  | 計算 |

- 地は生成り→黄→緑→生成りの順に大きな面で切り替える
- 黄地・生成り地の見出しは緑、本文はこげ茶
- 緑地の上では文字はすべて白
- 朱色は帯・日付・小ボタンだけに使うアクセント
- カードは白に近いクリーム色で、地から少し浮かせる
- 純黒は使わず、文字はこげ茶でやわらかく見せる
- `button-pill-small` は文字 `#FFFDEE` × 背景 `#E0663A` のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C84C1F`、4.55:1）を使う。
- `schedule-bar` は文字 `#FFFDEE` × 背景 `#59A64A` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#458139`、4.61:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV のキャッチ（字間広め） | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.5 | 0.2em |
| `headline-lg` | セクション見出し（緑） | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.6 | 0.1em |
| `headline-sm` | カード見出し・支援名 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.08em |
| `body-md` | 本文（中央揃えが多い） | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.0 | 0.08em |
| `note` | 写真キャプション・日付 | ゴシック | Zen Kaku Gothic New | 500 | 12px | 1.8 | 0.05em |
| `accent` | 英字の小見出し・縦書きラベル | 欧文サンセリフ | Montserrat | 600 | 11px | 1.4 | 0.2em |

- 見出しは丸ゴシックで字間を広めにとる
- 本文は行間 2.0 前後でゆったり組む
- 理念文は中央揃え、カード内は左揃え
- 英字ラベルは大文字・字間広めで見出しに添えるか、写真の横に縦書きで置く
- 太すぎる書体は避け、最大でも 700 にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真グリッドは 2 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションは大きな波形の面で区切り、上下に十分な余白をとる
- 支援カードは写真＋ラベル＋説明文を段違いに配置する
- 写真は大きさを変えてずらし、リズムを出す
- お知らせはクリーム色の角丸カードにまとめる
- 時間割は横長の表を帯で示す（SP では横スクロール）

## Elevation & Depth

- 基本はフラットで影なし
- カードはごく薄い影か、影なしで地との色差で区別する
- 写真のラベルは白地に細い黒枠で写真に重ねる

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 四角が基本。人物の紹介は円形。FV は大きな有機的な楕円で切り抜く
- **セクション境界**: ハート型・丘型の大きな曲線の波形
- 区切りは直線にせず、必ず大きなカーブにする
- 小ボタンはピル型（朱色）
- 支援名のラベルは角の立った白い箱に黒の細枠
- 装飾には細い点線の弧や小さな円を散らす

## Components

- **丘型の波形の区切り**（`wave-divider`）: 黄と緑の面の上端を、ハートのような大きな曲線で切る
- **英字付きのセクション見出し**（`section-heading`）: 小さな英字ラベル（下線付き）の下に、緑の丸ゴシック見出しを 2 行で置く
- **お知らせカード**（`news-card`）: クリーム色の角丸カード。朱色の日付とタイトルを点線で区切って並べる
- **一覧ボタン**（`button-pill-small`）: 朱色のピル型の小ボタン
- **支援項目カード**（`support-card`）: 写真の左下に白い箱のラベルを重ね、その下に枠付きの白い説明ボックス。写真の横に縦書きの英字を添える
- **本のような見出しバッジ**（`ribbon-badge`）: 濃い緑の開いた本型の枠に、白抜きで数字と見出しを入れる
- **一日の時間割**（`schedule-bar`）: 時刻の目盛りの下に、活動名を黄色の短い線で示す半透明の帯の表
- **スタッフのコメントカード**（`staff-comment`）: 白の角丸カード。左に円形の人物写真と名前、右に挨拶文

## Do's and Don'ts

**Do**
- 生成り・黄・緑の三色の面で章立てする
- 子どもの自然な表情の写真を大小ずらして散らす
- 細い点線の弧や小さな円の装飾で動きを足す
- 見出しは緑の丸ゴシックで、字間をゆったりとる
- 英字ラベルを小さく添えて、情報の階層を示す

**Don't**
- セクションを直線や鋭角で区切らない
- 純黒の文字や、強いドロップシャドウを使わない
- 原色の赤やネオン色を足さない
- 写真を整然と同じサイズで並べすぎない
- 大きな太字の訴求コピーやセール風の装飾を使わない

## Page Structure

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

1. **ファーストビュー**（施設の雰囲気と理念を伝える）: 生成り地に有機的な形で切り抜いた子どもの写真。ロゴ・ナビ・字間の広いキャッチと短い説明文。下端は朱色の波帯
2. **理念**（大切にしている考えを語る）: 濃い黄の地に英字ラベルと緑の 2 行見出し。中央揃えの本文。点線の弧で装飾
3. **名前に込めた思い**（団体の由来を説明する）: 黄の地のまま、引用符付きの小見出しと中央揃えの本文
4. **お知らせ**（最新情報を示す）: クリーム色の角丸カードに日付付きのリストと朱色の一覧ボタン
5. **支援内容**（5 つの支援領域を紹介する）: 緑の地。本型のバッジ見出しと、写真＋ラベル＋説明の支援カードを段違いに配置。専門職がいることを下線付きの白文字で強調
6. **一日の流れ**（一日の過ごし方を見せる）: 時計アイコン付きの見出しと、時刻の目盛り付きの帯の時間割表
7. **その他の支援**（相談支援などの追加サービスを紹介する）: 緑の地に、写真と白文字の説明文を 2 列で並べる
8. **施設紹介**（新しい園舎の魅力を伝える）: 生成り地。大小の写真グリッドに部屋名と短いキャプションを添える
9. **給食**（食へのこだわりを伝える）: 調理写真の横並びと中央揃えの本文。料理長のコメントカード
10. **フッター**（見学の問い合わせ先を示す）: 子どもの写真を散らしたあと、ロゴ・住所・電話番号を生成り地に控えめに置く

## Imagery

- 自然光で撮った子どもの自然な表情や活動中の姿
- 教室・園庭・給食など、日常の場面を明るいトーンで撮る
- 写真は大小をつけて、少しずらして散らす
- 細い線の点線の弧・小さな円・雲形を手描き風に添える
- 支援写真の横に縦書きの英字ラベルを置く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は本文の幅を約 70% に絞って中央に置く。SP は 88% 幅
- 支援カードは PC では段違いの 3 列。SP では 1〜2 列で縦に積む
- その他の支援は PC 2 列、SP 1 列
- 時間割表は SP では横スクロールにする
- ナビは PC では右上のピル型の白いバー。SP ではハンバーガーメニューにする
- 波形の区切りは SP でも残し、高さだけ縮める

## 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-39588122`（元 LP の URL から採番）
- **元 LP**: https://ippo-kids.com/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（5/11 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。