DESIGN.md — コーラル×ティールのやさしい教室 LP（Coral and Teal Friendly Lesson School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ポップ・元気、情報量多め・訴求型
• キーワード: コーラル・ティール・角丸カード・線画キャラクター・吹き出し・淡いピンク地
• 地の質感: 白と淡いピンク・淡いグレーのフラットな面。背景に菱形や雲形の薄い柄を重ねる
• 形: 大きめの角丸、ピル型ボタン、吹き出し、雲形、丸い文字バッジ、ギザギザの星形バッジ
• 温度感: 暖色寄り。コーラルの温かさとティールの爽やかさを組み合わせる

Colors

• 地は白・淡いピンク・淡いグレーを交互に使い、セクションを分ける
• コーラルは強調語・カード枠・バッジ・予約ボタンに使う
• ティールは見出し帯・表ヘッダー・電話 CTA・自社列の囲みに使う
• 強調したい数字はコーラルで大きく、前後の語は濃いグレーで小さく
• CTA 帯は淡いコーラル地に、下へ広がる円弧の濃いピンクを重ねる
• 写真背景には白い半透明のベールをかけて文字を読みやすくする
• button-tel は文字 #F3FDFC × 背景 #01BAC2 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018085、4.58:1）を使う。
• button-reserve は文字 #F3FDFC × 背景 #FE6473 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E90218、4.52:1）を使う。
• badge-popular は文字 #FE6473 × 背景 #FEFEFE のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EB0218、4.57:1）を使う。

Typography

• 見出しは丸ゴシックの太字で、やわらかく見せる
• FV のサブコピーは 1 文字ずつ丸いバッジに入れる
• 数字は前後の語より 1.5〜2 倍大きくし、コーラルで塗る
• 本文は中央揃えで、行間を広めにとる
• 強調語は太字にし、下に淡いティールのマーカーを引く
• 見出しの上に小さな集中線や 3 つの点を飾る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカード・料金表を 2〜3 カラムに並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードの幅は画面の 70〜90% にし、中央に置く
• セクションの最初は中央揃えの見出しとイラストで始める
• CTA 帯は料金比較のあとと FAQ のあとの 2 回入れる
• 料金表は 2 列。偶数行に淡いグレーの縞を入れる
• 比較表は自社の列をティールの太枠で囲む

Elevation & Depth

• 料金表カードや吹き出しには、やわらかい影をつける（0 4px 12px rgba(0,0,0,.12)）
• CTA ボタンには白いフチと下向きの軽い影をつける
• 悩みカード・理由カードは影を使わず、線で区切る

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の四角にコーラルの枠をつける。人物は白フチ付きの切り抜き
• セクション境界: FV の下端と CTA 帯の下端は円弧。ほかは直線で地の色を切り替える
• ボタン・ラベル・バッジはピル型
• カードは 16〜24px の角丸にし、1〜2px のコーラル枠かティール枠をつける
• 吹き出し・雲形・ギザギザの星形バッジをアクセントに使う

Components

• 電話 CTA ボタン（button-tel）: ピル型のボタン。上に受付時間を小さく書き、下に電話アイコンと大きな番号を置く。白フチ付き
• 予約ボタン（button-reserve）: コーラルのピル型ボタン。白い太字の文字を置く
• 悩み提起カード（worry-card）: ティールの見出し帯がついた大きな角丸カード。中にティール枠の項目を縦に 4 つ並べ、左にうずまきアイコンを置く
• 理由カード（reason-card）: 白地にコーラル枠の角丸カード。上から見出し・ハート背景のイラスト・本文の順に並べる
• 料金表カード（price-table）: 上端をティールの角丸帯にしてプラン名を入れる。その下にグレーのヘッダー行と縞の行を並べる。上にピル型ラベルを添える
• 人気バッジ（badge-popular）: 白地の丸にコーラルの文字と枠を入れ、下にリボンの角をつける。カードの左上に重ねる
• FAQ アコーディオン（faq-item）: 白地にコーラル枠の角丸行。左にコーラル丸の Q、右にコーラルの＋を置く
• 吹き出し・雲形ラベル（speech-bubble）: 白地の吹き出しや雲形の中に、数字を大きくした実績や最寄り駅の案内を書く
• お客様の声スライダー（voice-slider）: 上半分が写真、帯に受講科目、下に本文の角丸カード。ティールの丸い矢印とドットで送る

Do's and Don'ts

Do - 主な色はコーラルとティールの 2 つに絞る - どのセクションにも、茶色の線で描いたキャラクターイラストを添える - 数字や実績は大きなコーラルの数字で見せる - 角丸と吹き出しを多めに使い、親しみやすく見せる - CTA は電話とフォームの 2 つのボタンを上下に並べる

Don't - 黒やネイビーなど重い地色は使わない - 角が直角のボタンやカードは作らない - 明朝体や細すぎる書体は使わない - 写真を全面に敷いたあとにベールをかけず、そのまま文字を載せない - 原色の赤や青を足して、色数を増やさない

Page Structure

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

1. ヘッダー（ロゴとメニューを見せる）: 白地。左にロゴ、右にハンバーガーメニュー
2. ファーストビュー（誰に向けた何の教室かを一目で伝える）: 教室の写真の上に、1 文字ずつの丸バッジのコピーと、コーラルの大きな角丸ボックスに入れたメインコピーを重ねる。下端は円弧
3. 悩みの提起（初心者の不安を 4 つ挙げて共感を得る）: ティール帯の大きなカードに、枠付きの項目を 4 つ並べる。下に困った顔のイラスト
4. 講師・実績紹介（地域での歴史と受講者の実績を示す）: 講師の切り抜き写真と、受講者の写真 3 枚を街の写真の上に置く。白い吹き出しに大きな数字を入れる
5. 選ばれる理由（特長を 3 つ伝える）: 淡いピンクの菱形柄の地に、コーラル枠の理由カードを縦に 3 枚並べる
6. コース・料金（プランと料金を示す）: 見出しの下にティールの線を引く。ティール帯の料金表カードを 2 つ置き、人気バッジとピル型ラベルを添える
7. 他社比較（料金が割安なことを示す）: コーラルのヘッダーの比較表。自社の列をティールの太枠で囲み、左右に悩むイラストと喜ぶイラストを置く
8. CTA（無料体験へ誘う）: 淡いコーラルの地にイラスト 2 体を置き、電話ボタンと予約ボタンを並べる。下端は円弧
9. お客様の声（受講者の体験談で安心してもらう）: 雲形の見出しと、写真付きカードのスライダー。下に小さな注釈
10. よくある質問（疑問を解消する）: 淡いグレーの地に、コーラル枠のアコーディオンを 5 つ並べる
11. CTA（再掲）（最後にもう一度申し込みを促す）: 上の CTA と同じ作り
12. 教室アクセス（教室の場所を案内する）: ベールをかけた街の写真の地に、コーラル枠のカードを置く。中に住所・電話・地図。駅からの距離は吹き出しで示す
13. フッター（トップへの導線とコピーライトを置く）: 白地に、中央揃えの HOME リンクとコピーライト

Imagery

• 茶色の線で描き、フラットに塗ったキャラクターイラストを使う（にこやかな顔のノートパソコン、エプロン姿の女性など）
• イラストの背景に、淡いピンクのハートや集中線を添える
• 受講の様子の写真は明るい室内で撮り、角丸の四角にコーラル枠をつける
• 人物写真は白フチ付きで切り抜く
• 地域の街並み写真は、白い半透明のベールをかけて背景にする
• 背景の柄は、淡い菱形・三角・雲形を小さく繰り返す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では悩み項目を 2×2 に並べ、中央にイラストを置く
• 理由カードは PC で 3 カラムにする
• 料金表は PC で 2 カラムに並べる
• PC の CTA ボタンは左右に並べ、イラストを両端に置く
• お客様の声は PC で 3 枚を同時に見せる
• 教室カードは PC で 2 カラムにする

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