沢芽市ミライスターミュージカル

“舞台が始まる感じ”を、Webの入口にする。

Overview

沢芽市ミライスターミュージカルは、子どもたちが歌・ダンス・お芝居を通して成長する、 地域密着型の子どもミュージカル劇団サイトです。

サイト全体では、演者の切り抜きPNGを“動く写真”として扱い、 Hero intro・各セクション・隠し演出・送信完了まで、舞台らしい体験を積み重ねています。

Challenge

子ども向けの明るさだけでなく、保護者が知りたい情報の整理も必要でした。
・活動内容が楽しく伝わること
・公演や年間予定が分かりやすいこと
・見学や体験参加への不安を減らすこと
この3つを同時に満たすため、世界観演出と情報設計のバランスを重視しました。

Approach

• Heroでは、幕とcastの登場で“開演前のワクワク”を演出。
• 各セクションに動くcastを配置し、読み進めるほど劇団らしさが続く構成に。
• 年間スケジュールは季節アイコンで視覚的に分かりやすく整理。
• Contactフォームは、保護者向けに学校区分・学年選択・送信前チェックを追加。
• 送信完了まで舞台演出にして、最後まで世界観が途切れない体験に。

Design

ピンク、スカイブルー、イエローを中心に、舞台照明や紙吹雪のような明るいトーンで構成。 子どもらしい元気さを出しながら、本文やフォームは読みやすく、保護者が安心して確認できる余白を残しました。

Result

サイト全体に“舞台が続いている感じ”を持たせることで、 劇団の明るさや子どもたちの楽しさが伝わるCaseになりました。

一方で、年間予定・募集情報・問い合わせフォームは整理して見せることで、 保護者が安心して見学や体験参加へ進める導線も確保しています。

Role & Deliverables

• 企画：子どもミュージカル劇団の世界観設計
• 情報設計：活動紹介 / 公演情報 / 年間予定 / 募集導線の整理
• UI設計：保護者向けContactフォーム / 学校区分・学年選択
• 演出設計：幕演出 / castモーション / 隠しcast / 送信完了アニメーション
• 実装：HTML / CSS / JavaScript