カスタム 3D 舞台美術
シルクやエアリアル器具を用いたインタラクティブな 3D シーンがアーティストの舞台表現を Web 上に再現。環境に応じた自動最適化レンダリングと洗練された静的フォールバック表示を備えています。
Adele Deliss
カスタム 3D シーンによる舞台表現と、レッスン予約・受講プラン・メール管理を統合したスタジオワークスペースを兼ね備える、エアリアルアーティストのための多言語プラットフォーム。
構想から実装までのプロダクトデザインと Full-Stack エンジニアリングシルクやエアリアル器具を用いたインタラクティブな 3D シーンがアーティストの舞台表現を Web 上に再現。環境に応じた自動最適化レンダリングと洗練された静的フォールバック表示を備えています。
定期クラス、サブスクリプション受講枠、出席追跡、休講ルールによって、受講生ポータルとアーティストの管理画面を緊密に連携させます。
受信した問い合わせ、会話スレッド、添付ファイル、ブランド統一された返信メールを、管理ワークスペース内で直接一元管理します。
イベント主催者には公演実績を把握し連絡できる手段が必要であり、新規の受講希望者にはスムーズなレッスン申請、継続受講生にはクラス日程や出席状況を確認できる仕組みが必要でした。またスタジオを運営する Adele にとっては、問い合わせ対応、スケジュール調整、受講生との連絡に追われず、細部まで把握できる管理体制が不可欠でした。
カスタム 3D エアリアルシーンと多言語展開を核とした公開 Web サイトを設計・開発しました。その裏側では、受講生専用ポータルと管理ワークスペースがレッスンの承認、定期クラスのスケジュール、受講プラン、スタジオメールを単一の連携システムとして統合しています。
プロダクトデザイン、フロントエンドおよびバックエンドの開発、スケジュール・受講プランのロジック、受講生ポータルと管理者ワークスペース、メール基盤、そしてクライアント提供のアートワークを世界観に落とし込んだカスタム 3D シーンの制作。

シルクやエアリアル器具を用いたインタラクティブな 3D シーンがアーティストの舞台表現を Web 上に再現。環境に応じた自動最適化レンダリングと洗練された静的フォールバック表示を備えています。

受講生はレッスンの空き状況確認や受講申請を行い、専用のアカウント領域から予約履歴や出席状況を一元管理できます。
参考画面 · サンプルデータ

定期クラス、サブスクリプション受講枠、出席追跡、休講ルールによって、受講生ポータルとアーティストの管理画面を緊密に連携させます。
参考画面 · サンプルデータ

受信した問い合わせ、会話スレッド、添付ファイル、ブランド統一された返信メールを、管理ワークスペース内で直接一元管理します。
参考画面 · サンプルデータ
プロダクトの実績・実証
シルクやエアリアル器具を用いたインタラクティブな 3D シーンがアーティストの舞台表現を Web 上に再現。環境に応じた自動最適化レンダリングと洗練された静的フォールバック表示を備えています。
Web サイトの世界観は、エアリアルパフォーマンスから直結して形作られています。シルク、フープ、ポール、ストラップは単なる写真ギャラリーにとどまらず、インタラクティブな 3D シーンとして表現。ライト/ダークテーマや、視覚効果を抑制する Reduced Motion ビューも設計当初から標準実装されています。
初回のレッスン申請にはアーティストの個別承認が必要であり、定期受講サブスクリプションでは毎週の定期クラス枠が予約されます。すべての予約を画一的な汎用フォームに押し込めるのではなく、空き状況、クラス日程の自動生成、定員枠、出欠、受講生アカウントを連動させた独立の業務フローとして構築しました。
申請は辞退や別日程の提案も可能です。定期サブスクリプションの受講枠には、独自の予約・出席ルールが適用されます。
公演への問い合わせ、レッスン申請、受講生からの返信をクラススケジュールと同一画面で管理できるよう、Mailroom を構築しました。受信メール、会話スレッド、全文検索、添付ファイル、ブランド統一された返信メールをすべて管理者ワークスペースに統合しています。
公開 Web サイト、受講生ポータル、管理者ワークスペースは型安全なサービス契約を介して相互に連携します。スタジオの業務ルールがデータベースやメール処理コードから明確に分離されているため、スケジューリングロジックをローカルでテストし、Cloudflare 上で高信頼に稼働させることができます。
訪問者はアーティストの作品を鑑賞し公演やレッスンを依頼でき、受講生は専用アカウントで予約や出欠を自己管理。Adele はクラス編成、受講プラン、出欠確認、メール対応を一元的に遂行できます。
アプリケーションの基盤は Next.js、React、TypeScript で構築し、Three.js、GSAP、Lenis がインタラクティブな公開体験を駆動します。Cloudflare Workers 上で OpenNext により Next.js アプリケーションを稼働させ、レコード管理には D1、未加工のメール保管には R2 を採用。Better Auth が受講生アカウントの認証を担い、Resend による送信メール配信、Cloudinary によるメディア配信を統合しています。
このプロジェクトの最大のやりがいは、まったく性質の異なる2つの側面を結びつけた点にありました。アーティストの舞台上での表現力をWeb上で生き生きと伝える体験を創出しながら、日々のスタジオ運営を確実に支える実用的なツール群を構築したことです。
新しいプロダクト、より優れたシステム、挑む価値のある困難な課題。
[email protected]