チュートリアル
Tutorials index

語学スクール用のオンライン予約システムを作成

このチュートリアルは、リソーススケジュールと同期するサービススケジュールの例です。
語学レッスンのオンライン予約スケジュールとして、別スケジュールとなる教師のリソーススケジュールから同期してレッスンをサービスする予約システムを構築します。

定員のあるグループレッスンが必要な場合は定員制スケジュールがより適しています。
マンツーマンレッスン等スケジュール予約を予定している場合は、リソーススケジュールを参照ください。

リソーススケジュールは予約に対して1対1の関係ですが、サービススケジュールを用いることで複数のリソーススケジュールを同時に予約することができます。

このチュートリアルは、個別のリソースが別途存在する、車の修理や電話会議などでの活用シーンやニーズのサービスに適用可能です。

サービスを予約

サービススケジュールは、登録されたサービスを予約するスケジュールです。
予約可能なサービスを複数登録できます。
多数のサービスを提供する場合、ユーザーはサービスをリストから選択することが可能です。

ここでは、複数の教師からなるリソーススケジュールと同期する、語学レッスンをサービスとして予約するスケジュールを作成します。

チュートリアル概要

  • 複数のサービスを提供
  • サービススケジュールとリソーススケジュールの同期
  • 各予約に価格を設定

このチュートリアルで作成した予約システムのデモは、
語学スクール用のオンライン予約システムデモで実際の動作を確認可能です。 さらに、SuperSaaSスケジュールをいわゆるウィジェットとして統合することもできます。ウィジェットは、次のようにサイト上の小さなフレームまたは小さなボタンとして表示されます。:

5ステップで簡単セットアップ

簡単な手順で構築できますので、繰り返し試しながらニーズに合わせて調整ください。

新スケジュールを作成Step

まず最初に

このチュートリアルの手順を実行するには、別途リソーススケジュールを事前に作成する必要があります。
アカウントを用意してログインしダッシュボードを開いてください。

スケジュールタイプを選択

ダッシュボードの右側にあるメニューで新しいスケジュールをクリックし、新しいスケジュールウィザードに移動ください。

まず、サービスの元となる各教師のリソーススケジュールを作成します。
リソーススケジュールは、教師(リソース)の時間と予約をダブルブッキングすることなく、1対1でスケジューリングできる理想的なスケジュールです。
リソーススケジュールに関してはこちらを参照ください。

新しいスケジュールウィザードリソーススケジュールを選択した後、予約または予約システムを選択します。
このチュートリアルでは、リソーススケジュールに教師を複数登録しますので、リソースは複数を選択します。

続いて、リソースに「佐藤先生」、「鈴木先生」、「高橋先生」の3人の教師を登録します。
設定方法はリソーススケジュールページも合わせて参照ください。

複数のリソース名の登録イメージ

スケジュールの設定ができましたら、ここではスケジュール名を「tutorials Conversation terchers」としてスケジュール作成を完了します。
これで、サービススケジュールを作成する準備が完了です。
改めてサービススケジュールを作成するためダッシュボードに戻り、再び画面の右側にある新しいスケジュールからサービススケジュールを選択してください。

サービススケジュールでリソーススケジュールが同期する場合、予約時にそのリソーススケジュール名とリソース名が表示されます。
「スケジュール名 リソース名」
サービススケジュールでの利用を前提としたリソーススケジュールを作成する場合は、そのスケジュール名をリソースに対する項目名のように設定するとスマートに見えます。
例えば、このチュートリアルであれば、リソーススケジュール名は「担当教師」などにすることがわかりやすいかもしれません。
リソーススケジュール、定員用スケジュール、サービススケジュールの特徴と機能を理解して使い分けることで、様々なシーンで活用できる予約システムを構築することができます。

スケジュール名の設定

スケジュール名はそのままURLとなります。
スケジュールを簡潔でわかりやすい名前とすることを推奨します。

スケジュール名の設定イメージ

スケジュール名前は後から変更することも可能です。
ただし、スケジュール名はURLともなりますので、公開運用中の場合はユーザーに通知する必要があります。
ここでは「tutorials Conversation lessons」として、次へをクリックします。

サービスをリソースと関連付ける

続いてサービススケジュールの基本設定画面になります。

すでにリソーススケジュールを作成している場合は、各サービスの横にあるセレクターを使用して、サービスと同期して必要となるリソースを設定することができます。

「初級者用英会話」を最初のサービス名として入力ください。
このサービスに先ほど作成した教師のリソーススケジュールと同期します。
すべての教師が担当可能として、必須リソースのプルダウンメニューから、「tutorials Conversation terchersの全て」を設定します。
合わせて、期間の設定で予約の長さを任意に設定ください。サービススケジュールの予約の長さは必須であり固定です。
これで「初級者用英会話」の予約が、教師のリソーススケジュールのリソースである教師のいずれか一人を同期して予約することになります。

サービスの対象となるリソースが複数のリソースを含むリソーススケジュールの場合、どのリソースが同期するか選択できます。
デフォルトでは、ユーザーが選択可能なプルダウンメニューとなります。
「設定」→「サービス」にある「もし複数リソースが利用可能な場合」の設定項目で、昇順で空いているリソースの割り当てや、空いているリソースをランダムに割り当てる設定も可能です。

加えて、サービス名「フランス語会話の初心者」を設定します。
「佐藤先生」のみ担当として、先ほど作成した教師のリソーススケジュールから「佐藤先生」を選択し、予約の長さを設定します。
これで「フランス語会話の初心者」の予約は、教師のリソーススケジュールのリソースである「佐藤先生」を同期して予約することになります。
今回、サービスと同期するリソーススケジュールやリソースを一つにしていますが、必須リソースの対象としてリソーススケジュールやリソースを複数設定することも可能です。

ここでは事前にに作成したリソーススケジュールを必須スケジュールに設定していますが、必須スケジュールを未設定のままとすることでリソーススケジュールと同期しないサービス単体の提供も可能です。

設定できましたら終了をクリックください。
この時点でスケジュールが公開され、所定のURLから利用できます。
次のステップに進み、期待どおりに機能することを確認しましょう。

スケジュールを実際にテストStep

スケジュールのURLをブラウザで開くか、ダッシュボードからスケジュールの使用をクリックしてスケジュールを表示ください。
下の画面キャプチャは管理者としてログインしている場合の表示です。

スケジュール表示イメージ

通常のユーザーは右上のスケジュール管理メニューなどは表示されません。

管理者でログインしている場合、スケジュールの管理メニューが表示されるため、ダッシュボードやスケジュールの設定へ便利にアクセスできます。
もちろん、管理画面はブラウザでブックマークすることも可能です。

サービスを予約

複数作成したサービスは左側の列に表示されますので、クリックすることでサービスを切り替えることができます。
選択されたサービスで設定された利用可能な予約領域がスケジュール上に表示されます。 実際にサービスを予約するには、カレンダー上に表示される利用可能な領域をクリックします。

必要事項を入力し、予約の作成をクリックすると、スケジュールが更新されます。
予定を編集する場合は、もう一度クリックして変更を可能です。
予約の更新確定には必ず予約の更新をクリックしてください。

予約された情報にリソーススケジュールが同期している場合、同時に同期しているリソーススケジュールにも予約登録されます。
この予約はサービススケジュールから行われているため、リソーススケジュールに表示されますが、そこでは編集できません。
編集可能なスケジュールへのリンクが予約詳細にありますので、リンクをクリックしてサービススケジュールに移動して編集します。

設定を調整Step

サービススケジュール登録後に設定を調整する方法です。

設定で可能な項目は、スケジュールの概要タブを参照ください。

サービスを設定

サービスタブから、登録したサービスの設定ができます。
画面の上部の設定箇所で、サービスを作成・更新することができます。
登録されたサービスをドラッグするすることで順序の変更も可能です。

新規サービスを作成と登録サービスの内容編集

新しいサービスをクリックするか、既存のサービスの編集アイコンをクリックすると、サービスの設定が表示されます。
設定の右上隅にある色付きの矩形ボックスは、サービスの表示色の設定で任意の色を選択できます。

ノーマル隠すのラジオボタンで、隠すを選択することで、管理者とスーパーユーザだけが利用できるサービスとすることが可能です。
隠しサービスは、通常のユーザーのサービスリストには表示されません。

リッチエディタからは、サービスが選択されたときに表示されるサービスの説明を入力できます。
書式設定と写真を含めることができますが、オンラインで使用できる写真にのみリンクすることができます。

サービス設定イメージ
サービススケジュールは、提供されるサービスの長さが固定されています。
アクセスにある管理者とsuperusersは開店時間や予約制限のある時間帯も無視出来ます。にチェックをいれることで、管理者またはスーパーユーザーのみ、終了時刻を任意に入力修正することが可能にできます。

リソースを決定

必須リソース項目のプルダウンは、アカウント内で作成された全てのリソースから選択が可能です。
サービスに必要なリソースは複数設定することができます。

エントリー名

スケジュール設定のサービスにあるエントリー名の項目で、 「予約」以外にも「予約」を示す用語をカスタマイズできます。
リストから用語を選択するか、サービスを適切に記述する独自のカスタム用語を使用することができます。
このチュートリアルでは、「予約」よりも「レッスン」と設定するなどが適しています。
この用語は、すべてのダイアログウィンドウ、ヘルプテキスト、電子メールで用いられます。

設定される用語は、自動的に必要に合わせて複数形に変換されます。
日本語で利用の場合、英語などで一般的な複数形「s」の機械的な付与は不適切である場合があります。
設定は、「単数形,複数形」と指定設定することが可能です。
「レッスン」などの場合、複数形表示時に「レッスンs」としないためにも、「レッスン,レッスン」と設定することが推奨されます。
用語の変更はレイアウト設定で、「ユーザー」を示す用語を「クライアント」に変更するなど同様なカスタマイズが可能です。

ユーザーの上限

ユーザーがあなたのスケジュールで行うことができる、予約数の制限の設定が可能です。
最大に達すると、予定は変更または削除のみ可能となります。

時間制限

サービスがリソーススケジュールと同期している場合、そのスケジュールに設定されている制限もここで適用されます。
チェックボックス同時間帯に可能な複数エントリーが選択されていない場合、サービススケジュールは独立して各予約に必要なリソースがあるかのように動作します。
リソースに対してサービスの予約が1対1の場合など、リソースを重複して予約を受け付けない場合はチェックを外さないでください。

開始時間の制約

開始時間を制限する項目で任意の開始時刻を設定できます。
この設定はそのまま視覚的にスケジュールに表示されるため、ユーザーは視覚的表示される予約可能な領域を選択するだけで予約を開始することができるメリットがあります。

価格

サービスに金額を設定している場合は、リスト内に価格を表示にチェックを入れることで予約時に表示することができます。
価格設定からは、サービスの金額を基本価格として、条件を指定して価格のルールを設定できます。
価格のルール設定に関しては、スケジュールに支払い設定を追加を参照ください。

価格表示イメージ
ユーザーとしてスケジュール表示を確認Step

管理者のままのスケジュールテストでは、管理者権限を有したままとなるため不十分です。
必ずユーザーの視点からテストし、動作を確認することを推奨します。
管理者とユーザーのアクセスを切り替える必要がありまので、詳細は作成したスケジュールのテストを参照ください。

スケジュールのURLは概要で確認できます。
ユーザーを特定のスケジュールに直接誘導したい場合など、このURLをリンクとして電子メールやSMSで送付することができます。

スケジュールイメージ
スケジュールの公開Step

スケジュールの動作確認で問題がなければ、公開して運用することができます。

ユーザーに予約システムを提供する方法

  1. 自社サイトから予約スケジュールへリダイレクトするリンクやボタンを設置
  2. ユーザーがサイト上で予約できるウィジェットを配置
  3. メールやソーシャルメディアチャネルに"今すぐ予約"ボタンを追加

詳細についてはスケジュールをウェブサイトへ統合を参照ください。

Integration examples

SuperSaaSのスケジュールの提示方法は活用シーンに合わせて選択できます。

SuperSaaSスケジュールの上部はレイアウト設定で説明など追加できます。 サイトに埋め込まずに単体で活用する場合など、案内などに活用できます。
詳細はスケジュール上部の表示を参照ください。
また、レイアウトとしてスケジュールの外観や配色の変更も可能です。
スケジュールのデザイン変更も合わせて参照ください。