DESIGN.md — パステル×紙質感の児童発達支援スクール LP（Pastel Crayon Texture Kids Education LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: やさしい・柔らかい、かわいい、親しみ・手作り感、信頼・誠実
• キーワード: パステル・紙の質感・クレヨン枠・マスキングテープ・マスコット・子ども
• 地の質感: 生成りの和紙・画用紙風ノイズ地。三角や水玉のスタンプ模様を背景に薄く散らす。帯やボタンにもかすれた紙のテクスチャを乗せる。
• 形: 角丸のピル型ボタン、少し傾けたテープ風の見出し帯、楕円・不定形に切り抜いた写真、波線で区切るセクション境界。
• 温度感: 暖かい。ピンクとベージュが中心で、ミントとブルーで少し爽やかさを足す。

Colors

• 地は生成りの紙色と淡いピンクを交互に使い、セクションの切り替えを示す。
• ピンクはブランドの色。見出し帯・本文の強調・メインの導線に使う。
• 申込や問い合わせのボタンはサーモン、電話はピンクのピルにして役割で色を分ける。
• ミントとラベンダーは情報ブロックの枠やプログラムごとの色分けに限定する。
• 地域や分類の色分けは、彩度をそろえたパステル 8 色程度にする。
• 文字は純黒を避け、ダークブラウンで柔らかくする。
• button-primary は文字 #FEFAF6 × 背景 #E3A98D のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B5592C、4.56:1）を使う。
• button-tel は文字 #FEFAF6 × 背景 #ECB2CB のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE397A、4.5:1）を使う。
• button-secondary は文字 #FEFAF6 × 背景 #94C5C2 のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#437D79、4.55:1）を使う。
• heading-tape は文字 #FEFAF6 × 背景 #ECB2CB のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE397A、4.5:1）を使う。

Typography

• 見出しは丸ゴシックの太字にして、子ども向けらしい柔らかさを出す。
• 本文中のキーフレーズはピンクの太字にし、1 段落につき 1〜2 か所までにする。
• 本文は字間を少し広げ、行間を 1.9 前後にして読みやすくする。
• プログラム名はそれぞれのテーマ色（ピンク・ミント・サーモン）で塗り分ける。
• ボタンの文字は白の太字で中央に置き、右端に「>」を付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績の数字は 3 つの円を横に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算）
• 写真は横幅いっぱい近くまで大きく見せ、その下に見出しと本文を置く。
• セクションの見出しは中央に置き、テープ帯かアイコン付きにする。
• プログラム紹介は点線で上下を区切り、対象・名称・写真・本文・ボタンの順に並べる。
• CTA ブロックは白い八角形のパネルに縦 3 段のボタンを入れ、クリーム地に置く。
• スライダーやスクロール付きのリストは、枠の色で内容を区別する。

Elevation & Depth

• 影はほぼ使わない。立体感は紙の質感と色面で出す。
• ボタンには、ごく薄い影か紙のかすれテクスチャのみ付ける。
• 写真はクレヨン調の太い枠と少しの傾きで浮いて見せる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: クレヨン枠付きで少し傾けた長方形、または楕円・不定形の雲形に切り抜く
• セクション境界: 波線（スカラップ）と色面の切り替え。ギザギザの境界も使う
• 見出しの帯は端が少し斜めに切れたマスキングテープ風にする。
• 実績の数字は紙テクスチャ入りの大きな円に入れる。
• 悩みは角丸の吹き出しにしてマスコットの周りに散らす。
• CTA パネルは角を落とした八角形にする。

Components

• 申込のピル型ボタン（button-primary）: サーモンの紙テクスチャ入り。白文字で右に「>」を付ける。
• 電話のピル型ボタン（button-tel）: ピンクの大きなピル。左に白丸の電話アイコン、中央に番号と受付時間。
• 一覧を見るボタン（button-secondary）: ミントやラベンダーのピル。それぞれの情報ブロックの色と合わせる。
• テープ帯見出し（heading-tape）: ピンクのかすれた帯に白抜き文字を置く。少し傾けたテープ風。
• 実績の円（stat-circle）: ミント・ピンク・ブルーの紙質感の円に、大きな数字と単位を入れる。
• 悩みの吹き出し（worry-bubble）: パステル色の角丸の吹き出しに、手書き風の短い悩みを入れる。マスコットを囲むように配置する。
• 枠付き情報パネル（info-panel）: 色付きの太い枠と見出しヘッダーの中に、白いスクロール領域やスライダーを入れる。
• No.1 メダル（badge-no1）: 黄色のギザギザメダルに、No.1 などの実績表記を入れる。
• 地域アコーディオン（region-accordion）: 地域ごとにパステル色の帯を付け、左に地域名、右に下向き矢印を置く。
• CTA パネル（cta-panel）: クリーム地の上に白い八角形パネルを置き、申込・問い合わせ・電話のボタンを縦に積む。下に SNS アイコンを並べる。

Do's and Don'ts

Do - 地には必ず紙のテクスチャを敷き、フラットな単色だけにしない。 - パステルの彩度をそろえ、くすみ寄りのトーンを保つ。 - マスコットのイラストを悩み・検索・CTA の近くに添える。 - 写真は笑顔の子どもと大人の関わりを中心に選ぶ。 - CTA ブロックはページの中盤と終盤で同じ形のものを繰り返す。

Don't - 原色の赤や純黒、ビビッドなネオン色を使わない。 - 直角でシャープな枠や、硬いグリッドだけのデザインにしない。 - 濃い影やグラデーションの光沢ボタンにしない。 - 強調のピンク文字を多用しない。 - 写真を無加工の長方形のまま並べない。

Page Structure

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

1. ヘッダー（ロゴと主要導線を見せる）: 白地にロゴとハンバーガーを置き、下に無料体験（ミント）と問い合わせ（サーモン）の小さなピルを並べる。
2. ファーストビュー（紹介動画と実績で信頼をつくる）: 動画の下に、クリームのテープ帯の見出しと、数字を入れた 3 つの円を置く。
3. コラムへのバナー（読み物へ誘導する）: 写真の上に、水色の縁取りをした太いポップ文字を重ねる。
4. お客様の声・更新情報（利用者の実感と運営が動いていることを示す）: ミントとラベンダーの枠のパネルにスライダーとスクロールリストを入れ、下に一覧ボタンを置く。
5. コンセプト（考え方を一文で伝える）: 上下が波線のクリームの帯に、中央揃えの太字を置き、一部をピンクで強調する。
6. 悩みの提起（保護者の不安に共感する）: マスコットの周りに、短い悩みを入れた吹き出しを 5 つ散らし、下に解決を示す一文を置く。
7. 特長（教育方針と強みを伝える）: 淡いピンク地に、クレヨン枠の写真、テープ帯の見出し、本文を置く。続けて楕円形の写真とピンクの大見出しを 4 つ繰り返す。
8. CTA（体験申込と問い合わせを促す）: クリーム地に白い八角形パネルを置き、ボタンを 3 段積む。下に SNS アイコンを並べる。
9. プログラム紹介（対象年齢別のコースを見せる）: 生成り地に、点線で区切った 3 ブロックを並べる。それぞれテーマ色の名称、色付きクレヨン枠の写真、詳細ボタンを持つ。
10. 教室検索（近くの教室を探してもらう）: パステルで色分けしたブロック地図と虫眼鏡を持つマスコットを置き、その下に地域別のアコーディオンを並べる。
11. CTA（再掲）（最後にもう一度申込を促す）: 中盤と同じ八角形パネルを繰り返す。
12. フッター（関連情報への導線を置く）: クリーム地に矢印付きのリンクリストを並べ、その下に規約リンクとコピーライトを置く。

Imagery

• 明るい自然光の室内で、子どもと先生の笑顔のやり取りを撮る。
• 教材や玩具をカラフルに並べた俯瞰写真を使う。
• 線の太い水色のくまのマスコットを、ポーズを変えて各所に置く。
• 木琴・車・絵の具などのクレヨン調イラストを写真の角に添える。
• 背景には三角のスタンプ柄や水玉を薄いグレー〜白で散らす。
• 写真の縁にマスキングテープ柄の模様を重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せで、コンテンツ幅を約 1000px 相当にする。両脇に子どもの丸い写真や装飾を浮かせる。
• PC ではお客様の声と更新情報を 2 カラムで横に並べ、一覧ボタン 3 つを横一列にする。
• PC の特長は写真と本文を左右に並べ、提供内容 4 つを 2×2 のグリッドにする。
• PC のプログラム紹介は写真と本文を左右交互に配置する。
• PC の教室検索は地図上に県名リストのカードを直接配置し、アコーディオンをなくす。
• PC のヘッダーは横並びのグローバルナビにし、電話番号と色分けしたボタンを常に表示する。

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 行書くと起動時に読み込まれる。