--- version: alpha name: Pastel Kindergarten Web Service LP description: 淡いピンクと水色の地に、白い角丸カードとターコイズのピル型ボタンを重ねた、保育・教育施設向けのやさしいサービス紹介LP。人物イラストや雲・ガーランドの装飾で親しみやすさを出しつつ、ポイント番号・料金カード・流れ・FAQは整然と並べて信頼感も保つ。 colors: primary: '#04ABBA' on-primary: '#FFFFFF' cta: '#01ACBB' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FEE3EC' tint-1: '#E2F6FF' tint-2: '#FFFBCE' accent-1: '#F27BA7' accent-2: '#F7A623' accent-3: '#5AA6E6' text: '#4A3F3A' line: '#D8D4CE' dark-section: '#FFAD2B' cta-accessible: '#01828D' accent-1-accessible: '#E41662' primary-accessible: '#03828D' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Quicksand fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Quicksand fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px 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.full}' height: 48px point-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 48px worry-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px point-block: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 240px price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 120px contact-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 140px flow-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 44px faq-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px --- # DESIGN.md — パステル桃×水色の園向けHP制作LP（Pastel Kindergarten Web Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: やさしい・柔らかい、かわいい、信頼・誠実、親しみ・手作り感 - **キーワード**: パステル・雲とガーランド・白カード・人物イラスト・ターコイズCTA・園・保育 - **地の質感**: フラットな単色面。グラデーションや影はほぼ使わず、雲形・旗飾りのイラストで柔らかさを出す - **形**: 角丸カード、ピル型ボタン、雲形のセクション境界、丸い吹き出し - **温度感**: 明るく暖かいパステル。ピンク地で温かみを出し、水色とターコイズで清潔感を加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#04ABBA` | ボタン・見出し・電話番号に使うターコイズ | 2% | 画素の実測 | | `on-primary` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `cta` | `#01ACBB` | 相談・見積もりの主CTA | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 35% | 画素の主要色に補正 | | `background-alt` | `#FEE3EC` | ポイント・事例・FAQの淡ピンク地 | 30% | 画素の実測 | | `tint-1` | `#E2F6FF` | ファーストビューの空色 | 5% | 画素の実測 | | `tint-2` | `#FFFBCE` | ポイントブロックの淡黄色 | 6% | 画素の主要色に補正 | | `accent-1` | `#F27BA7` | ポイント番号・強調文字のピンク | 2% | 推定 | | `accent-2` | `#F7A623` | 料金カード・ラベルのオレンジ | 2% | 推定 | | `accent-3` | `#5AA6E6` | 料金カード・ラベルの青 | 1% | 推定 | | `text` | `#4A3F3A` | 見出し・本文のこげ茶グレー | 2% | 推定 | | `line` | `#D8D4CE` | カード枠のグレー | 1% | 画素の主要色に補正 | | `dark-section` | `#FFAD2B` | フッターのオレンジ帯 | 2% | 画素の実測 | | `cta-accessible` | `#01828D` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E41662` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#03828D` | AA を満たす補正値（計算） | | 計算 | - 地色は白・淡ピンク・空色を交互に使い、セクションの切り替えを示す - 主な行動はターコイズのピル型ボタンに統一する - ピンク・オレンジ・青はプラン別やラベルの色分けに使い、1要素に1色とする - 強調したい本文はピンク文字にし、太字の多用は避ける - 淡黄色の面でポイント内の説明ブロックを囲む - 文字は純黒を使わず、こげ茶グレーにする - `button-primary` は文字 `#FFFFFF` × 背景 `#01ACBB` のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#01828D`、4.59:1）を使う。 - `point-badge` は文字 `#FFFFFF` × 背景 `#F27BA7` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E41662`、4.58:1）を使う。 - `contact-card` は文字 `#04ABBA` × 背景 `#FFFFFF` のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#03828D`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 34px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.4 | 0.05em | | `headline-md` | ポイント見出し・カード見出し | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.4 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・税込表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 見出し上の小さな欧文ラベル | 欧文サンセリフ | Quicksand | 700 | 11px | 1.2 | 0.1em | | `label-button` | ボタン文字 | 丸ゴシック | Zen Maru Gothic | 700 | 14px | 1.2 | 0.05em | | `headline-sm` | 料金・電話番号の数字 | 欧文サンセリフ | Quicksand | 700 | 28px | 1.2 | 0.02em | - 見出しは丸ゴシックで中央揃え - 見出しの上に小さな欧文ラベルを色付きで添える - 強調したい数字だけ大きくし、見出し中の色を変える - 本文は行間を広めに取り、短い段落にする - 料金の数字は大きく、単位や税込表記は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はポイント内が 2 カラム、料金・事例が 3 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - コンテンツは白い大きな角丸カードにまとめる - 各ポイントの前に悩みの吹き出しと人物イラストを置く - 流れは番号のピンク帯と白い行を横に並べる - FAQは白い行に＋アイコンを付けて縦に並べる - 相談CTAブロックは主要セクションの後に繰り返す ## Elevation & Depth - 影はほぼ使わず、色面と細い線で区切る - 相談カードだけ薄い影で浮かせる - 小カードは白地に淡いグレーの枠を付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 事例画像は角丸の長方形。下部に色付きのプランラベルを重ねる - **セクション境界**: 雲形の波線と旗飾りのガーランドで区切る - ボタンと吹き出しはピル型 - カードは角丸12〜20px - 番号バッジは角丸の正方形 ## Components - **主CTAボタン**（`button-primary`）: 見積もり・相談のピル型ボタン - **ポイント番号**（`point-badge`）: 欧文の小ラベルと数字を入れたピンクの角丸バッジ - **悩み吹き出し**（`worry-bubble`）: 白いピル型の吹き出しに人物イラストを添える - **ポイントブロック**（`point-block`）: 淡黄色の面に見出し・説明・アイコン付き白カードを並べる - **料金カード**（`price-card`）: 色帯の見出しと大きな価格を入れたプラン別カード - **相談CTAカード**（`contact-card`）: 見出し・電話番号・ボタンをまとめた白カード - **流れの行**（`flow-row`）: 左にピンクの番号、右に工程名と説明を並べる - **FAQ行**（`faq-row`）: Q記号と＋アイコンを付けた白い開閉行 ## Do's and Don'ts **Do** - 淡ピンク・空色・白の地を交互に使う - 人物イラストは柔らかい線で描き、悩みや声の横に置く - CTAはターコイズのピル型に統一する - 雲とガーランドで季節感と園らしさを出す - プランやオプションはラベルの色で区別する **Don't** - 黒や濃紺など重い色を大面積に使わない - 角張ったボタンや鋭い装飾を使わない - 強い影やグラデーションを使わない - 原色を多用せず、パステルの比率を保つ - 本文を詰めすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値と対象を伝える）: 空色地に雲・ブランコの子ども・鳥を配置。中央にロゴ、CTA、サイト例のモニター3台を置く 2. **共感の提起**（利用者の期待と課題に共感する）: 白地。左にパソコンを使う人物のイラスト、右に短い段落を並べる 3. **5つのポイント**（特長を悩み別に説明する）: ピンク地の白カード内に、吹き出しから淡黄色のポイントブロックへ縦に5つ並べる 4. **相談CTA**（問い合わせを促す）: 白い角丸カードに大きな電話番号とボタンを置き、鳥や花のイラストを添える 5. **料金プラン**（価格帯を比較させる）: ガーランドの下に3色のプランカードを並べ、詳細ボタンを置く 6. **保守費用・オプション**（月額費用と追加メニューを示す）: グレー枠の白カード内に、色見出し付きのリスト箱を並べる 7. **制作事例**（実績を見せる）: ピンク地に3列×2段のサムネイル。プランラベルと短い説明を付ける 8. **お客様の声**（導入者の評価を伝える）: 淡黄色の吹き出しに人物イラストを左右交互に置く 9. **制作の流れ**（手順を示す）: 雲形の境界から白地。番号付きの行を6段並べる 10. **よくある質問**（不安を解消する）: ピンク地に白いQ行をリストで並べる 11. **最終CTA・フッター**（最後のひと押し）: 相談カードの下に虹・子どものイラスト、オレンジのフッター帯とSNSアイコンを置く ## Imagery - 柔らかい線と淡い塗りのフラットな人物イラスト（保育士・保護者・子ども） - 雲・鳥・虹・花・旗飾りなどの装飾イラスト - サイト実例はモニターやスマホの枠に入れて見せる - 機能アイコンは淡色背景の小さなイラストで、白カードに入れる - 事例写真は明るい自然光で子どもの笑顔を写したもの - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPは全セクションを1カラムにし、ポイントのアイコンカードは説明文の下に縦に並べる - 料金カードと事例は1列に積む。事例だけは2列にしてもよい - 流れの行は番号を上に置き、説明を下に回す - ヘッダーのナビはハンバーガーメニューにし、CTAボタンを常に表示する - 装飾イラストは縮小して数を減らす ## 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-07910c2d`（元 LP の URL から採番） - **元 LP**: https://www.jam-design.jp/kids/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。