--- version: alpha name: Sunny Yellow Childcare Playful LP description: 明るい山吹色と生成りの地を交互に使い、白い角丸カードと手描き風の家族イラストで親しみを出した保育・子育て施設サイト。オレンジのボタン、濃い茶の丸文字、波形の区切り線、斜めに置いた写真で、遊び心のある温かいトーンにまとめている。 colors: primary: '#FFD122' background: '#FFFFFF' background-alt: '#F9F1E4' cta: '#F58A03' on-cta: '#FFFFFF' text: '#4A3418' text-muted: '#9A8C7A' surface: '#FFFFFF' tint-1: '#FCF0E2' secondary: '#FEA105' dark-section: '#5B3E1A' accent-1: '#3DBC2C' line: '#E2BA3E' accent-2: '#616162' cta-accessible: '#AE6202' typography: display: fontFamily: Zen Maru Gothic fontSize: 27px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.12em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Montserrat fontSize: 22px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 28px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px button-white: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px heading-section: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px tag-category: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px card-course: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 460px news-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px badge-new: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' rounded: '{rounded.full}' height: 26px tel-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 230px form-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 500px --- # DESIGN.md — 山吹色と生成りのイラスト保育施設 LP（Sunny Yellow Childcare Playful LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、やさしい・柔らかい - **キーワード**: 山吹色・生成り・フラットイラスト・角丸カード・波形の区切り・点線 - **地の質感**: ベタ塗りのフラットな面。生成りの地にうっすらドット柄や大きな星形シルエットを敷く。 - **形**: 大きめの角丸カード、写真の右下を角丸で切り欠いた形、波形やなだらかな丘形のセクション境界、ギザギザの星形装飾。 - **温度感**: 暖色寄りで、明るく陽だまりのような温かさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFD122` | メインの山吹色の地 | 15% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 38% | 画素の実測 | | `background-alt` | `#F9F1E4` | コース・支援セクションの生成り地 | 12% | 画素の実測 | | `cta` | `#F58A03` | 主ボタン・カテゴリタグのオレンジ | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#4A3418` | 見出し・本文の濃い茶 | 3% | 推定 | | `text-muted` | `#9A8C7A` | 日付などの補足文字 | 0% | 推定 | | `surface` | `#FFFFFF` | 白い角丸カード | 20% | 画素の実測 | | `tint-1` | `#FCF0E2` | イベント枠・アイコン円の薄いクリーム | 3% | 画素の実測 | | `secondary` | `#FEA105` | 電話ブロックの濃い橙地 | 2% | 画素の実測 | | `dark-section` | `#5B3E1A` | 施設名ラベルの焦げ茶ピル | 0% | 画素の実測 | | `accent-1` | `#3DBC2C` | ヘッダー問い合わせボタンの緑 | 0% | 画素の実測 | | `line` | `#E2BA3E` | 見出し下の黄色点線 | 0% | 画素の実測 | | `accent-2` | `#616162` | イラスト人物の灰色 | 2% | 画素の実測 | | `cta-accessible` | `#AE6202` | AA を満たす補正値（計算） | | 計算 | - 地は白→山吹色→生成り→写真→山吹色→白の順で切り替える。 - 山吹色の地の上には白カードを載せ、文字は必ず濃い茶にする。 - 主ボタンとカテゴリタグはオレンジで統一し、白文字にする。 - 地域タグは白地にオレンジ枠のアウトラインで区別する。 - 黒は使わず、文字は濃い茶、補足は灰みのある茶にする。 - 緑はヘッダーの問い合わせボタンだけに限定する。 - `button-primary` は文字 `#FFFFFF` × 背景 `#F58A03` のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AE6202`、4.62:1）を使う。 - `tag-category` は文字 `#FFFFFF` × 背景 `#F58A03` のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AE6202`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（2行・点線下線つき） | 丸ゴシック | Zen Maru Gothic | 700 | 27px | 1.8 | 0.12em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.4 | 0.1em | | `headline-md` | カードタイトル・コース名 | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.5 | 0.08em | | `body-md` | 本文・説明文 | 丸ゴシック | Zen Maru Gothic | 500 | 15px | 2.0 | 0.1em | | `accent` | 見出し下の英字ラベル | 欧文サンセリフ | Montserrat | 700 | 11px | 1.4 | 0.1em | | `label-button` | ボタン・タグ文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.3 | 0.05em | | `note` | 日付・受付時間などの補足 | 欧文サンセリフ | Montserrat | 500 | 11px | 1.6 | 0.05em | | `headline-sm` | 電話番号 | 欧文サンセリフ | Montserrat | 600 | 22px | 1.3 | 0.04em | - 和文は丸ゴシックで統一し、字間を広め（0.08〜0.12em）にとる。 - セクション見出しの下には英字ラベルを小さく添え、一部の文字をオレンジにする。 - 見出しの左右に焦げ茶の縦棒（枝のような形）を置いて挟む。 - 本文の行間は2.0前後と広めにとる。 - 日付や電話番号は欧文サンセリフにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はコースカードが 3 カラム、お知らせは横並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算） - 白カードの左右には約 16px の余白をとり、地色を見せる。 - セクション見出しは中央揃えにし、その上に吹き出しラベルを置く。 - FVは写真の横スライダーとキャッチの2段構成にする。 - 見出し・カード周りにはイラスト人物を余白にはみ出させて配置する。 - フッターは白地にし、リンクを黄色ドット付きのリストで並べる。 ## Elevation & Depth - 影はほぼ使わず、色面の差で階層をつくる。 - カードは白のベタ塗りで、境界線なしで地から浮かせる。 - フォーム枠は白カードの内側に黄色の点線枠を入れる。 ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の長方形。コース写真は右下を角丸で切り欠き、そこに黄色の矢印ボタンをはめ込む。FV写真は黄色の太い縁取り、コラージュ写真は白フチをつけて傾ける。 - **セクション境界**: なだらかな丘形の曲線、細かい波形、点線の区切り - ボタンは角丸 10px 前後の長方形にし、右端に白丸の矢印を置く。 - タグはピル型にする。 - Newバッジは焦げ茶の吹き出しにする。 - 装飾にはギザギザの星形とひし形を散らす。 ## Components - **オレンジ主ボタン**（`button-primary`）: オレンジ地の角丸ボタン。白文字の右に白丸＋矢印を置く。 - **白い誘導ボタン**（`button-white`）: 黄色地の上に置く白い横長ボタン。右端に黄色丸の矢印。 - **縦棒挟み見出し**（`heading-section`）: 中央の見出しを焦げ茶の縦棒で挟み、英字ラベルと吹き出しを添える。 - **カテゴリ・地域タグ**（`tag-category`）: カテゴリはオレンジ塗りのピル、地域はオレンジ枠の白ピルで並べる。 - **コースカード**（`card-course`）: 白の大角丸カード。クリーム色の円アイコン、タイトル、短い説明、右下を切り欠いた写真と黄色矢印で構成。 - **お知らせ行**（`news-item`）: 左に黄色枠の角丸サムネ、右にタグ・タイトル・日付を並べる。 - **Newの吹き出し**（`badge-new`）: 焦げ茶の小さな吹き出しに白文字のNew。 - **電話案内カード**（`tel-card`）: 濃い橙の枠の中に白カードを置き、焦げ茶のピルで施設名、大きな電話番号、受付時間を載せる。 - **問い合わせ誘導枠**（`form-box`）: 白カードの内側に黄色点線枠。見出し、点線、案内文、封筒イラスト、主ボタンの順に並べる。 ## Do's and Don'ts **Do** - 山吹色・生成り・白の3つの地をリズムよく切り替える。 - フラットな家族イラストを見出しやカードの縁に添える。 - 写真は角丸にし、一部は傾けてコラージュにする。 - 文字は濃い茶の丸ゴシックで統一する。 - ボタンには必ず丸い矢印アイコンをつける。 **Don't** - 純黒の文字や角張った明朝体を使わない。 - 寒色を大きな面に使わない（グループ紹介カードは例外）。 - 強いドロップシャドウや立体的なグラデーションを入れない。 - 直線の硬いセクション境界ばかりにしない。 - 写真を角丸なしの四角で並べない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと問い合わせ導線）: 白地の左にロゴ、右に緑の問い合わせボタンとオレンジのメニューボタン。 2. **ファーストビュー**（施設の雰囲気とキャッチを伝える）: 黄色縁の写真の横スライダー。その下に2行キャッチ（点線下線つき）、英字の訳、親子イラスト。 3. **理念紹介**（施設の想いを伝える）: 丘形の山吹色の地に、見出し・本文・白い誘導ボタン、傾けた写真のコラージュ。 4. **お知らせ**（最新の活動を見せる）: 白い大カードに見出しと「すべて見る」ボタン、サムネ付きのリストを3件。 5. **イベント・入園案内**（イベントや説明会を告知する）: クリーム色の枠の中に、白い小カードを縦に並べる。 6. **イラストの間奏**（ブランドの世界観を見せる）: 山吹色の地に親子の大きなイラストと吹き出しを散らし、下端を波形にする。 7. **コース案内**（サービスの種類を説明する）: 生成り地に縦棒挟みの見出し、コースカードを縦に3枚。 8. **子育て支援**（教室や支援プログラムを紹介する）: コース案内と同じカード形式で3枚。 9. **採用情報**（スタッフ募集へ誘導する）: 暗くした写真の全面背景に白い見出しとオレンジのボタン。下端は波形。 10. **問い合わせ**（フォームと電話へ誘導する）: 山吹色の地に、点線枠のフォーム誘導カードと、橙枠の電話カード2枚。 11. **ループ帯**（ブランドを印象づける）: 白地に英字ロゴとイラストを横一列に流す。 12. **フッター**（所在地とサイトマップ）: ロゴ、SNSのピルボタン、地図2つ、黄色ドットのリンクリスト、グループ施設の色分けカード4枚。 ## Imagery - 写真は自然光の室内で撮った子どもの活動風景。明るく暖色寄りに補正する。 - イラストは輪郭線なしのフラットな人物。顔は省略し、灰・オレンジ・黄・白で塗る。 - 装飾はギザギザの星、ひし形、ロケット、車などの小物を散らす。 - アイコンはクリーム色の円の中にオレンジ・黄の簡素な図形で描く。 - 写真の上に人物イラストを重ねて、縁からはみ出させる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVをキャッチ左・写真右の2分割にする。 - PCの理念紹介は写真コラージュ左・テキスト右に並べる。 - PCのお知らせは見出し左・サムネ3件を横並びにする。 - PCのコースと支援のカードは3カラムにする。 - PCの電話カード2枚とフッターのリンクは横並びにする。 - PCの本文幅は約1000pxで中央寄せにする。 ## 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-3f7bcbd3`（元 LP の URL から採番） - **元 LP**: https://www.kids-house.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。