バレエ教室のサイト / Dummy
STUDIO-RISE
東京都小平市の本格派バレエスタジオを想定した架空サイトです。バレエの優雅さと、高い指導力を裏付ける信頼感の両立を図りました。保護者の方へ安心感を届ける、透明感のあるクリーンなデザインを目指しています。
project-data
- Duration : 4 weeks (2026.04)
- Role : Planning, Design, Coding (All)
- Stack : HTML, CSS, JavaScript, WordPress
- Tools : Figma, Photoshop, Illustrator, VS Code
design process
制作意図
Challenge
- • 詳細情報の不足
- Instagram等のSNS発信のみでは、教室の理念や指導レベルが伝わりきっていない。
- • 集客経路の硬直化
- 公式Webサイトがないため、新規入会経路がほぼ紹介経由のみに限定されている。
- • 機会損失の発生
- 連絡手段が電話のみで、受付不在時やレッスン中の問い合わせに対応できず、機会損失が発生している。
Goal
- • 最終目標（KGI）
- 体験レッスンへの申し込み数（新規入会者数）を増やすこと。
- • 中間指標（KPI）
- Webサイトを通じた問い合わせ数の増加、および教室情報の網羅的な提供。
Target
- • メイン
- お子様にバレエを通じた豊かな情操教育を検討されている、小平市近郊の保護者様。
- • サブ
- より質の高い指導環境を求めている、中高生のバレエ経験者。
解決手法
Approach
- • 直感的なメニュー構成
- 「指導理念」「講師紹介」「クラス案内」など、ユーザーが特に必要とする情報へヘッダーから迷わずアクセスできる構造にしました。
- • 体験申込のオンライン化
- 単なる質問だけでなく、体験レッスンの申し込みまでサイト上で完結できるようにし、検討者のアクションを逃さない動線を確保しました。
Key Points
- • 独自テーマによる一括管理
- お知らせ、クラス、実績など多岐にわたる項目を、クライアント自身で手軽に更新・管理できるようWordPressの独自テーマを開発しました。
- • 管理しやすいフォーム設計
- お問い合わせフォームの氏名や電話番号の入力欄を細分化し運用側のデータ管理のしやすさを追求しました。
視覚設計
Typography
- • Noto Sans JP（和文）
- デバイスを問わず可読性が高く、モダンであり、信頼感も表現できるため採用しました。
- • Cormorant Garamond（欧文）
- 優雅な曲線で、スタジオの気品や歴史を感じる情緒的な表情を演出する意図です。
Color Palette
- • 配色意図
- バレエが持つ「気品」と、指導者への「信頼感」、そして教室としての「クリーンな印象」を視覚的に統合することを意図しました。
- • 色彩設計
-
- #F9F8F6
- #F2EFED
- #2D374B
- #BB964F
- #5A6772
layout overview
横スクロールして複数ページをご覧いただけます
