プレビュー内で移動した画面も、このタブの「戻る」履歴に残ります。じっくり見て回るなら、新しいウィンドウで開いてください。
ひと目でわかる概要
CocodeがFlutter・CoUI・Serverpodで作った、オンラインクラスサービス向けアプリのサンプルです。受講生アプリでは、分野・並び替え・検索でクラスを探し、受講形式と開始日を選んで、初回申込クーポンを適用した金額でお支払いまで試せます。管理コンソールでは、受講生・クラスの管理、レッスン追加フォーム、今月の売上を扱います。Cocodeは、このようなオンライン講座アプリを企画から開発・リリース・保守まで、外注として請け負います。
- 種類
- オンラインクラスのための申し込み・運営アプリ
- 構成
- 受講生アプリ · 管理コンソール · Widgetbook · ゴールデンギャラリー · プロジェクト文書
- 技術
- Flutter · CoUI · Serverpod · Widgetbook
- 体験方法
- 登録不要・ブラウザ上のサンプルデータで動作
- 開発元
- Cocode Inc.
主な機能
6つの機能
- クラスを探すドローイング・料理・運動・外国語の分野、人気順・新着順・価格順の並び替え、検索で8つのクラスから選べます。
- 申し込みの流れクラス詳細で学び方と開始日を選び、初回申込クーポンを適用した金額をカード・銀行振込・かんたん決済で支払うと、申し込み完了画面が表示されます。
- 管理者ホーム回答待ちの質問、生徒数・今月の収入・平均達成度、マイクラスの公開状態、今週の新しい生徒をひと目で確認できます。
- 生徒管理学習中・修了・期限切れのタブとクラスで生徒を絞り込み、達成度と最終学習日を確認できます。
- クラス管理・レッスン追加クラスごとの生徒数・平均達成度・平均点・今月の収入と、レッスンごとの公開・予約公開の状態を確認し、レッスン追加フォームの入力と下書き保存もできます。
- 収入今月の収入・申し込み・客単価・返金率、週ごとの収入グラフ、人気のクラス3件を確認できます。
体験用アカウント
アプリもコンソールも、最初の画面の「デモアカウントを選択」でアカウントを選ぶと、パスワードなしで入れます。
- 受講生クラス閲覧・申し込み・支払い・マイページ
- 先生・管理者ダッシュボード・クラス・生徒・レッスン追加・収入
見て回れる画面
ブラウザですぐに開ける5か所 — すべて新しいウィンドウで開きます。
技術スタック
デモ環境について
- 架空のオンラインクラスサービスを題材にした体験デモです。実際の申し込み・決済・SMS送信は行いません。
- サーバーなしで、このブラウザ内のサンプルデータで動き、再読み込みすると最初の状態に戻ります。実際の個人情報は入力しないでください。
- 言語を切り替えても同じ画面にとどまり、受講生や先生の名前、クラス名などのサンプルデータも選んだ言語に変わります。
- アプリのマイレッスンとレビュー、コンソールの質問と設定はまだ準備中で、案内画面だけが表示されます。
よくある質問
オンライン講座のプラットフォームも外注で開発できますか？
はい。Cocodeは、このデモのように受講生が使うアプリと、講師・運営チームが使う管理コンソールをまとめて作ります。まず相談でサービスの受講方法と運営方法を確認し、続けて1週間で画面一覧を整理して、見積もりと契約に進みます。
費用はどのように決まりますか？
作る範囲によって変わります。まず範囲を一緒に整理してからお見積もりをお出しします。費用が決まる基準と契約形態は進め方と費用ページでご確認いただけます。
期間はどのくらいかかりますか？
作る範囲によって異なります。お考えのサービスを教えていただければ、期間から一緒に検討します。進行中は、毎週動く中間バージョンをリンクとテストアプリでご確認いただけます。
著作権と所有権は誰にありますか？
検収完了および代金の完済をもって、著作財産権のすべてが貴社に帰属します — 二次的著作物の作成権を含み、当社は成果物について著作者人格権を行使しません。契約書に明記します。
CoUIのように複数のプロジェクトで共通して使う部品は譲渡の対象外となる代わりに、ソースコードの複製と、期間・数量・地域の制限のない使用・改変の権利をあわせてお渡しします。貴社固有の業務ロジック・データ構造・ブランド要素は、すべて貴社に帰属します。
動画の再生や決済も開発範囲に含まれますか？
動画再生・進捗・権限などの機能は、サービスごとに範囲が異なるため、相談で決めます。このデモで見られるのは申し込み・模擬決済・管理画面までです。実際の決済や動画配信など外部サービスと連携する部分は、見積もりに影響する項目です。
このようなシステムが必要ですか
3行だけ書いて送っていただくのでも大丈夫です。範囲の整理はそこから始めます。