DESIGN.md — 山吹色と生成りのイラスト保育施設 LP（Sunny Yellow Childcare Playful LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、やさしい・柔らかい
• キーワード: 山吹色・生成り・フラットイラスト・角丸カード・波形の区切り・点線
• 地の質感: ベタ塗りのフラットな面。生成りの地にうっすらドット柄や大きな星形シルエットを敷く。
• 形: 大きめの角丸カード、写真の右下を角丸で切り欠いた形、波形やなだらかな丘形のセクション境界、ギザギザの星形装飾。
• 温度感: 暖色寄りで、明るく陽だまりのような温かさ

Colors

• 地は白→山吹色→生成り→写真→山吹色→白の順で切り替える。
• 山吹色の地の上には白カードを載せ、文字は必ず濃い茶にする。
• 主ボタンとカテゴリタグはオレンジで統一し、白文字にする。
• 地域タグは白地にオレンジ枠のアウトラインで区別する。
• 黒は使わず、文字は濃い茶、補足は灰みのある茶にする。
• 緑はヘッダーの問い合わせボタンだけに限定する。
• 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

• 和文は丸ゴシックで統一し、字間を広め（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

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

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