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

• 地色は白・淡ピンク・空色を交互に使い、セクションの切り替えを示す
• 主な行動はターコイズのピル型ボタンに統一する
• ピンク・オレンジ・青はプラン別やラベルの色分けに使い、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

• 見出しは丸ゴシックで中央揃え
• 見出しの上に小さな欧文ラベルを色付きで添える
• 強調したい数字だけ大きくし、見出し中の色を変える
• 本文は行間を広めに取り、短い段落にする
• 料金の数字は大きく、単位や税込表記は小さくする
• 書体は画像からの推定で、フォント名は近い印象の 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

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

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