【この記事は4分で読めます】
こんにちは、Lantern開発チームです。
ここでは、開発したサービスの情報を公開いたします。
ココナラを使い、仕事を依頼されるかた・仕事を受けるかた双方に、
「こんなことも出来るんだ」と感じていただくことで、新しいジョブに繋がり、日本全体のデジタル化を少しでも進めることができればと思っております。
会議室予約システム
今回は、私たちが最近開発したお客様向けの「会議室予約システム」について、その特徴や開発の裏側をご紹介します。
オフィスにおける「会議室の空き状況がわからない」「ダブルブッキングしてしまう」「予約手続きが面倒」といったこれまでの課題を解決し、誰もがストレスなく利用できるUI/UXを目指して設計しました。
完成したシステムの概要
まずはこちらが今回開発したシステムのメイン画面です。
こだわりの機能とUI/UXデザイン
開発にあたり、特に注力したポイントは以下の3点です。
1. 視認性に優れた週間カレンダー表示
これまでリスト形式やバラバラのツールで管理されていた予約状況を、ひとつのカレンダーに集約しました。
色分け表示: 予約はチームやプロジェクトごとに色分けされるため（例：画像内の黄色、緑、赤のブロック）、誰がどの部屋を使っているかが瞬時に把握できます。
ドラッグ＆ドロップ（想定機能）: カレンダー上の予約ブロックは、ドラッグ＆ドロップで時間の変更や会議室の移動が直感的に行えるように設計しています。
2. 迷わない予約作成フロー（モーダルウィンドウ）
カレンダーの空き時間をクリック、または「新規予約」ボタンを押すと、右側に予約作成用のモーダルウィンドウ（画像右側）がスライド表示されます。
画面遷移することなく、現在のカレンダーを見ながら以下の情報をサッと入力できます。
会議名
日時（カレンダーから選択可能）
参加者（社内メンバーの検索・追加）
備品（プロジェクターなどの選択）
入力項目を必要最低限に絞り、フォームも大きく配置することで、入力ミスを防ぎ、数クリックで予約が完了する体験を実現しました。
3. 会議室の情報を写真付きで表示
左側のサイドバーには、利用可能な会議室が写真付きでリストアップされています。「会議室A（10名）」「大会議室（20名）」のように収容人数も併記されているため、会議の規模に合わせて適切な部屋をすぐに選ぶことができます。
採用した技術スタック（例）
今回の開発では、モダンでスピーディーな開発が可能な以下の技術スタックを採用しました。（※想定のスタックです。実際のものに合わせて変更してください）
フロントエンド: React (TypeScript), Material-UI (MUI)
カレンダーコンポーネントには、カスタマイズ性の高いライブラリを採用し、独自の要件に合わせて調整しました。
バックエンド: Node.js / Firebase Functions
データベース: Firebase
インフラ: Google Cloud Platform
開発の裏側：苦労した点
一見シンプルに見えるカレンダー機能ですが、開発にはいくつかの壁がありました。
特に「ダブルブッキングの完全な防止」は最重要課題でした。複数のユーザーがほぼ同時に同じ時間帯を予約しようとした際、データベースのトランザクション処理を厳密に行うことで、データの整合性を保つ仕組みを構築しました。
また、タイムゾーンの扱い（海外拠点との連携も視野に入れ、内部的にはすべてUTCで管理）にも注意を払いました。
今後の展望
今後は、以下の機能追加を検討しています。
GoogleカレンダーやOutlookカレンダーとの双方向同期
会議室前のタブレット端末への「使用中」表示連携
利用実績の分析機能（どの会議室が人気か、空予約の可視化など）
私たちは、このような業務効率化システムの開発を得意としています。「自社にも使いやすい予約システムが欲しい」といったご相談がありましたら、ぜひお気軽にお問い合わせください。
.jpg)
.png)
