Overview
概要
| サービス | Almo Online（運営: 株式会社HLT / レッスン: Almo） |
| 分野 | 子ども向けオンライン運動教室 |
| 提供範囲 | 企画・設計・デザイン・開発・運用 |
| 技術スタック | Next.js / TypeScript / Firebase / LiveKit / MediaPipe / Phaser / Stripe / Astro（LP） |
| サイトURL | online.almo-sports.com |
Background
背景・課題
Almoは岡山県内で運動教室を運営しています（almoスポーツ教室のWebサイトもHLTが制作）。教室に通うことが難しい、発達特性のあるお子さまや不登校のお子さまにも、からだを動かす機会を届けたいという思いから、オンラインの教室を立ち上げました。
対象は2〜15歳。アプリを入れずに、カメラ付きのPCやタブレットだけで参加できること、そして画面越しでも「できた!」を感じられることが求められました。
Solution
サービスの内容
1. ブラウザだけでLIVEレッスン
会員サイトの「LIVEレッスン」から入るだけで、Almoのコーチとビデオ通話でつながります。はじめはカメラをオフにして見ているだけの参加もできます。
2. カメラが動きを読み取る
Webカメラでお子さまの姿勢を読み取り、ジャンプやポーズに画面が反応します。ゲームのように楽しみながら、からだを動かせます。
3. ひとりで遊べる練習ゲーム
レッスン以外の時間にも使える練習ゲームを用意しました。がんばりは「できた!スタンプ」として貯まり、記録とコーチのメモは保護者もいつでも見られます。
4. チケット制の予約と月額プラン
月3回分のチケットで、カレンダーから参加しやすい日を予約します。料金は月額5,500円（税込）の単一プランで、14日間の無料体験から始められます。
Implementation
実装の工夫
通話・ゲーム・決済を1つの会員サイトに
会員サイトはNext.js + TypeScriptで作り、Cloud Run（東京）で動かしています。ビデオ通話とレッスンの録画にはLiveKit、姿勢の読み取りにはMediaPipe、ゲームにはPhaser、月額課金にはStripeを使っています。
データはサーバーからだけ読み書きする
会員情報や予約はFirebase（Auth・Firestore・Storage）に保存し、読み書きはすべてサーバーを通します。画面から直接データベースを読めないようにして、お子さまの記録を守っています。
紹介ページは軽く、別に作る
サービス紹介のページ（online.almo-sports.com）は会員サイトとは別に、Astroで静的なページとして作りました。初めて訪れた保護者がすぐに内容を読めるようにするためです。
Crowdfunding
CAMPFIREでのクラウドファンディング
Almo Onlineを全国の発達特性・不登校の子どもたちへ届けるため、クラウドファンディングサービス「CAMPFIRE」でのプロジェクトを準備しています。すでに完成している1つ目の運動ゲームを土台に、次の3つに支援を充てる計画です。
- 特性や年齢の違う子が楽しめる、新しい運動ゲームを増やす
- たくさんの子が同時に、安定して受講できる配信の環境を整える
- 子ども一人ひとりに寄り添えるコーチを育てる
HLTは、サービスの開発に加えて、プロジェクトページの掲載文や公開後の進め方の資料づくりも支援しています。