ことり音楽教室
コンセプト・制作背景
料金表・講師紹介・体験申込フォームを持つスクール系サイトを、正面から題材に選びました。既存のポートフォリオ4作（LP・コーポレート・店舗ブランドサイト・EC複合）に欠けていた「申込・問い合わせをゴールにしたコンバージョン特化型」導入。
架空クライアントは、兵庫県西宮市で開講8年目・生徒約60名の個人音楽教室「ことり音楽教室」。体験レッスンの申込が電話のみで、レッスン中は出られず機会損失が起きている——という、実際の個人教室によくある課題からヒアリングを起こしました。
ターゲット設定
ヒアリングをもとに、コース別に流入経路と不安の質が異なる3名のペルソナを設計しました。
高橋美咲（34歳・主婦）
こどもピアノ希望。Instagram経由で夜にスマホ閲覧。不安は「先生が厳しくないか」
中村大輔（38歳・会社員）
こどもヴァイオリン希望。Google検索でコース・料金ページに直接着地。「料金・空き枠が明記されていなければ即離脱」する条件重視型
佐々木春菜（29歳・育休中）
リトミック希望。口コミ→Instagram経由。不安は「1歳半で早すぎないか」
3名で流入経路が異なるという発見が、「TOPを経由しない下層ページ単体でもフォームまで到達できる導線」という設計要件に直結しました。
デザインの狙い（目的→表現）
目的は「ここなら子どもを任せられそう」という保護者の安心と信頼。そこから、暖色×余白で「温かいが上品」というトーンに落とし込みました。
配色：テラコッタ×クリーム×ダークブラウンの3色。装飾用と本文・ボタン用でトークンを分け、WCAG AA基準（白文字と5.3:1）を満たす形に調整
タイポグラフィ：見出しにZen Maru Gothic（丸ゴシック）を採用。「親しみやすさ」と「子どもっぽくなりすぎない」のバランスを、デザインカンプでのレビューを経て確定
コピー：「無理な勧誘は一切いたしません」「その場での入会手続きは行っていません」——教室が“しないこと”を明文化することで、機能を足さずに信頼を作る設計にしました
担当範囲
ヒアリングから実装完了・検収まで、全工程を担当しました。
1. ヒアリングシート（架空クライアント設定つき）
2. ペルソナシート（3名・サイト内行動フロー付き）
3. 仕様書 v1.0 → v1.1（デザイン確定に伴う改訂履歴管理）
4. サイトマップ・ディレクトリ構成（title/description全ページ設計）
5. コンテンツマップ（料金マスタ・FAQ全文・自動返信メール文面まで確定コピー化）
6. ワイヤーフレーム（全8画面 × PC/SP）
7. デザインカンプ（全8画面・AA準拠パレット・共通デザイントークン）
8. 画像プロンプト集（生成AI向け・全18スロット）
9. Claude Codeへの実装引き継ぎ資料（マイルストーン分割・検収条件明記）
10. WordPress実装ディレクション（Claude Code）・修正指示
使用技術・ツール
CMS：WordPress（自作テーマ）
プラグイン：Contact Form 7（reCAPTCHA v3はCF7ネイティブ機能で対応）／SEO SIMPLE PACK
フロントエンド：HTML／CSS（カスタムプロパティによるデザイントークン管理）／JavaScript（Intersection Observerによるスクロールリビール、`prefers-reduced-motion`対応）
タイポグラフィ：Zen Maru Gothic（見出し）＋ Noto Sans JP（本文）
アイコン：Phosphor Icons
計測・SEO：GA4を想定／構造化データ（LocalBusiness）
開発環境：Local by Flywheel
制作のポイント
1. 料金表を「不安の解消装置」として設計
入会金・教材費・発表会費まで含めた総額表記に加え、「1年間でおよそいくらか」という具体例まで踏み込んで明示。検索結果のディスクリプション文言にも、料金の透明性や連絡方法（原則メール対応）を先出しし、クリック前から不安解消を始める設計にしました。
2. ペルソナ起点でCTA配置を再設計
検索流入するペルソナがTOPを経由せず下層ページに直接着地するという発見から、「全下層ページ単体でフォームに到達できる固定CTA」を共通要件として設定。ヒアリング・ペルソナ設計が画面設計に直結した一例です。
3. Claude Codeとの実装ディレクションを構造化
実装はマイルストーン制（M1〜M5）で進行し、各段階でカンプとの差分照合・料金数値の照合・実機での動作確認を実施。実装中に見つかった判断（ナビ開閉UIの追加実装、フォームのHTML構造修正など）は都度ログ化し、検収まで一貫して管理しました。実機テストで見つかったUIの折り返し不具合も、原因を特定したうえでデザインカンプ側を修正し、実装へ差し戻しています。
制作物一覧
| ヒアリング | ヒアリングシート v1.0 |
| ペルソナ設計 | ペルソナシート v1.0（3名） |
| 要件定義 | 仕様書 v1.0 → v1.1 |
| 情報設計 | サイトマップ・ディレクトリ構成 v1.0（title/description定義含む） |
| コンテンツ設計 | コンテンツマップ v1.0（料金マスタ・FAQ全文・メール文面） |
| 画面設計 | ワイヤーフレーム 全8画面（PC/SP） |
| デザイン | デザインカンプ v1.1（全8画面・共通デザイントークン） |
| 画像素材 | 画像プロンプト集 v1.0（生成AI向け・全18スロット） |
| 実装引き継ぎ | Claude Code実装指示書 v1.0 |
| 実装 | WordPressカスタムテーマ（Claude Code実装・M1〜M5マイルストーン管理） |
| 品質管理 | 検収チェックリスト・管理者マニュアル v1.0 |