DESIGN.md — 紫の丸バッジと白地の音楽教室 LP（Purple Circle Badge Music Lesson LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 紫・円形バッジ・帯見出し・白地・整理された情報・写真3分割
• 地の質感: グラデーションや影のないフラットな塗り。薄いグレーの面と点線の区切りで情報をまとめる。
• 形: 円形のポイントバッジと丸く切り抜いた人物写真。それ以外は角のない長方形の帯や表。
• 温度感: 白とグレーが中心でやや涼しい。紫が上品さと明るさを足している。

Colors

• 地は白。目次や声のカードだけ薄グレーの面にする。
• セクション見出しはくすみ紫の帯に白文字で統一する。
• 鮮やかな紫は円形バッジと表ヘッダーに限って使い、強調の要にする。
• 淡いラベンダーとライラックはサブコピー帯や検索 UI など補助的な面に使う。
• フッターだけ黒地に白文字で締める。
• 赤や緑などの他の色相は入れず、紫の濃淡だけでまとめる。
• button-primary は文字 #FFF9FF × 背景 #D6A4EB のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AA42D5、4.55:1）を使う。

Typography

• 装飾的な書体は使わず、太さの差で強弱をつける。
• 大見出しだけ極太で大きくし、FV で目を引く。
• POINT 番号は縦長の欧文サンセリフで白抜きにする。
• 本文は 13px 前後、行間はゆったり 1.8 にする。
• 帯見出しは白文字・太字で左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントは左が円バッジ、右がテキストの 2 列
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 32px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右に 10px ほどの余白を取り、帯見出しは画面いっぱいに近い幅にする。
• ポイント同士は点線で区切り、上下に 40px ほど空ける。
• 目次は薄グレーの面に 2 列のリンクで並べる。
• 料金表は罫線入りの表にし、ヘッダーは紫にする。
• エリア検索は 2 列×4 行のグリッドにする。

Elevation & Depth

• 影は基本的に使わず、フラットに作る。
• 立体感は面の色の差と罫線だけで出す。
• 浮遊する検索ボタンだけ、上に重なる形で目立たせる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: FV の写真は 3 分割の矩形。受講者の声の写真は正円に切り抜く。
• セクション境界: 直線。グレーの点線、またはくすみ紫の帯で区切る。
• 円形はバッジと人物写真に限る。
• 帯見出し・表・ボタンは角丸なしの矩形にする。
• エリア検索ボックスだけ 8px の角丸とライラックの枠線を付ける。
• 声のカードには写真の方を指す三角の吹き出しを付ける。

Components

• 円形ポイントバッジ（point-badge）: 紫の正円に POINT 番号・アイコン・短い数字訴求を白抜きで載せる
• 帯見出し（section-band）: くすみ紫の横帯に白い太字を左揃えで置く
• 縦線付き見出し（heading-bar）: 左に太い縦線、下に細い罫線を引いた見出し
• 目次ボックス（toc-box）: 薄グレーの面に、丸矢印アイコン付きのリンクを 2 列で並べる
• 料金表（price-table）: 紫のヘッダー行と灰色の外枠を持つ表。セル結合を使う
• Q&Aラベル（qa-label）: Q は白地に紫の枠、A は紫の塗りの横長ラベル。下に質問文と回答を置く
• お客様の声カード（voice-card）: 丸い写真の下に三角の吹き出しを付けたグレーのカード。中に白い属性ボックスを入れる
• エリア検索ボックス（area-search）: ライラックの見出しの下に、矢印付きの地域リンクを 2 列で並べる
• 教室を探すボタン（button-primary）: ライラックの矩形に虫眼鏡アイコンと白文字を載せた浮遊ボタン
• 詳細リンクボタン（button-outline）: 白地に灰色の細い枠を付けた横長ボタン

Do's and Don'ts

Do - 紫の濃淡だけで色を組み立てる。 - 訴求ポイントは必ず円形バッジ＋短い数字で見せる。 - セクションの始まりは帯見出しで揃える。 - 情報は表・Q&A・グリッドで整理して見せる。 - 人物写真は自然光の明るいものを正円に切り抜く。

Don't - 影やグラデーションの強い装飾は入れない。 - 紫以外の派手な強調色は使わない。 - ボタンをピル型にしない。 - 本文を詰めすぎたり、行間を狭くしたりしない。 - 手書き風やポップな書体は使わない。

Page Structure

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

1. ヘッダー（ブランドの提示と回遊）: 白地の中央にロゴ、左にメニュー、右に検索アイコンを置く
2. ファーストビュー（受付中の告知と商品名）: 淡いラベンダーのマーカー付き告知、写真 3 枚の横並び、極太の大見出しの順に重ねる
3. 特典訴求（無料特典とお試し期間を伝える）: 左右の写真で紫のパネルを挟み、白丸で「無料」を強調する。下に淡紫のサブコピー帯を置く
4. 導入文と目次（概要を伝え、ページ内を移動しやすくする）: 短い導入文の下に、グレーの面の 2 列目次を置く
5. 特長（ポイント）（始めやすさの理由を 5 つ示す）: 左に円バッジ、右に小見出しと本文を置き、点線で区切って縦に並べる
6. 料金（料金の明示）: 帯見出しの下に、紫ヘッダーの表を置く
7. よくある質問（不安を解消する）: Q/A ラベルの下に質問と回答を置き、点線で区切る
8. お客様の声（年代の異なる受講者の共感を得る）: 丸い写真の下に吹き出し付きのグレーカードを 3 つ並べる
9. 教室検索（近くの教室へ誘導する）: Q&A に続けて、ライラックの見出し付きエリアグリッドを置く
10. 申込方法（問い合わせの手順を説明する）: STEP 見出しごとに、左に画面キャプチャ、右に手順文を置く
11. 安全への取り組み・お知らせ（安心感を補う）: 短文と枠線ボタン、バナーのスライダーを置く
12. フッター（会社情報とリンク）: 黒地に開閉できるリンク一覧と社名を置く

Imagery

• 鍵盤楽器を弾くシニア・女性・子どもなど、幅広い年代の人物写真を使う。
• 明るい室内の自然光で、笑顔か演奏に集中している表情を撮る。
• アイコンは白一色のシンプルな線画にし、紫の円の中に置く。
• 申込手順の説明には、フォームの画面キャプチャを縮小して添える。
• バナーは淡いグレーの地に紫のアイコンと太い文字で作る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも 1 カラムを基本とし、本文の幅を広げて行を長くする。
• PC では声のカードを写真と横並びにし、写真の左右を交互に入れ替える。
• PC では Q&A のラベルと文を横並びにして、詰めて見せる。
• ポイントの円バッジと本文は PC でも左右に並べ、余白を広げる。
• PC のフッターは複数列のリンク一覧にする。
• 教室を探すボタンは、SP・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 行書くと起動時に読み込まれる。