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

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

Overview

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

Colors

• 地は生成り→黄→緑→生成りの順に大きな面で切り替える
• 黄地・生成り地の見出しは緑、本文はこげ茶
• 緑地の上では文字はすべて白
• 朱色は帯・日付・小ボタンだけに使うアクセント
• カードは白に近いクリーム色で、地から少し浮かせる
• 純黒は使わず、文字はこげ茶でやわらかく見せる
• 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

• 見出しは丸ゴシックで字間を広めにとる
• 本文は行間 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。