気軽にオンライン予約を受け付けたいと考えたとき、TeamsやMicrosoft Bookingsを自社サイトに埋め込んで運用できるととても便利です。しかし最近は「Book with Me」への移行など仕様の変更が進んでおり、従来の方法では思うように埋め込みできないケースも増えてきました。本記事では最新の情報をもとに、代替策や注意点、具体的な設定手順を詳しく解説します。
TeamsやMicrosoft Bookingsを埋め込むメリットとは
Teamsの「Virtual Appointments」やMicrosoft Bookingsをウェブページへ埋め込む意義を押さえておくと、導入の必要性や導入後の活用方法が明確になります。特に、オンライン予約やWeb会議の受付をスムーズに行うことができるため、業務効率や顧客満足度を高めるうえで役立ちます。
オンライン予約の簡易化
多くの企業やサービス提供者は、電話やメールで予約を受け付ける方法からオンライン予約への移行を検討しています。オンライン予約は以下のようなメリットがあります。
- 顧客が24時間365日いつでも予約できる
- 電話対応の負荷が軽減される
- オペレーションミスが減少する
- 予約確定メールやリマインドメールを自動送信できる
TeamsやMicrosoft Bookingsを埋め込めば、サイト内で完結して予約を取得できるため、顧客のストレスを減らし、ビジネスチャンスを逃しにくくなります。
ブランドイメージの向上
外部のサービスに飛ばさず、自社サイト内で全行程が完結するとブランド価値が高まります。利用者が別タブを開く手間や不安感も少なくなり、結果的に予約率の向上やリピート率のアップが期待できます。
運用・管理の容易さ
Microsoft BookingsやTeamsのVirtual Appointmentsは、Microsoft 365の管理画面から一元的に設定できます。スタッフのスケジュール調整や休暇情報などをMicrosoft 365と連携させやすいため、予約の取りこぼしや二重予約の問題を最小限に抑えられます。
旧UI（従来型のMicrosoft Bookings）での埋め込み手順
従来型のMicrosoft Bookingsでは、以下の手順で埋め込み用のiFrameコードを簡単に取得できました。旧UIをまだ利用できるテナントや、リニューアル前のBookings画面が表示される環境であれば、この方法を試してみる価値があります。
1. Bookingsで予約ページを公開する
Microsoft Bookingsの管理画面にアクセスし、まずは以下の設定を行います。
- 「予約ページ」タブなどに移動し、「公開」や「ページの公開」ボタンを探す
- 予約ページを公開できる状態にして「URLの取得」ボタンや「Embed」オプションを確認
通常、古いUIでは「Embed Code」としてiFrameタグが表示されます。
2. iFrameコードの貼り付け
公開状態になったら、表示されたiFrameコードをコピーし、自社サイトのHTMLに埋め込むだけです。下記のような形でHTMLを編集します。
<iframe src="https://bookings.yourdomain.com/BookingPage?xx=xxx"
width="100%"
height="800"
frameborder="0"
scrolling="yes">
</iframe>- src属性: Bookingsから取得したURLを貼り付ける
- width / height属性: レイアウトや画面サイズに合わせて調整する
- scrolling属性: コンテンツの縦スクロールが必要な場合は”yes”に設定
この方法は非常にシンプルで、コードを一行埋め込むだけで予約機能を自社サイト上に表示できます。
3. 表示崩れやデザイン調整の注意点
iFrameで埋め込むと、表示領域が狭かったり、スマートフォンでの表示が崩れたりする場合があります。その際は、CSSを工夫してレスポンシブに対応させると見栄えを維持しやすくなります。例えば、widthを100%にして高さをCSSで動的に調整する等の工夫が必要です。
最近の仕様変更と「Book with Me」への移行
2024年以降、Microsoft Bookingsは大幅なリニューアルが進められており、新しいUIや機能が導入されています。その中で特に注目されているのが「Book with Me」という名称での新しい予約機能です。
旧仕様との主な違い
| 項目 | 旧Microsoft Bookings | 新「Book with Me」 |
|---|---|---|
| UIデザイン | シンプルなタブ構成 | よりモダンかつOutlookカレンダーとの連携が強化 |
| iFrameコードの取得 | 「埋め込みコード」から簡単にコピー | メニューの場所が変わった、または一部廃止された可能性 |
| 機能連携 | 主にBookingsアプリ内で完結 | Microsoft TeamsやOutlookなどの他サービスと深く連動 |
特にiFrameコードが取得できない、もしくは手順が明確に示されていないという報告が増えています。地域やテナントの設定によっては旧UIが残っている場合もあるため、まずは自分の環境がどちらのUIになっているかを確認することが重要です。
埋め込みコードが見つからない理由
新しい「Book with Me」では、ユーザーごとの個人設定画面でスケジュールを管理し、相手が予約を取れる仕組みになっています。これまでは「組織全体で一つのBookingsカレンダーを運用」というスタイルが主流でしたが、「Book with Me」は個人やチームごとに細かく管理を行う設計に変わっているため、従来の埋め込み機能がメニューから消えた、あるいは分かりにくい場所に移動したと言われています。
現時点での対応策
- 新しい管理画面をチェック: Microsoft 365管理センターやTeams管理センター内に、埋め込み用URLやコードを発行するオプションが追加されていないか確認しましょう。
- 公式ドキュメントの更新状況を確認: Microsoftの公式ヘルプやコミュニティフォーラムで、同様の問い合わせが多数挙がっています。最新情報をこまめにキャッチアップすることで、埋め込み方法が再度追加される可能性をチェックできます。
実際に埋め込みが難しい場合の代替策
埋め込み機能が利用できない場合でも、以下のような方法でオンライン予約を運用できます。埋め込みがベストでないケースもあるため、自社の運用形態や顧客層に応じて選択するとよいでしょう。
方法1: BookingsやBook with Meの直接リンクを使う
もしiFrameコードを取得できなかったとしても、公開設定をオンにすれば専用の予約ページURLは発行されます。このURLを自社サイトの「予約ボタン」やテキストリンクに設定すれば、ワンクリックで外部タブを開いて予約ページへアクセスできます。
ユーザーは自社サイトを離れる形になりますが、URLを直接案内するだけなので導入のハードルが非常に低い点がメリットです。
方法2: SharePoint WebパーツやPower Appsを使う
Microsoft 365環境を活用している場合、SharePoint OnlineのWebパーツやPower Appsを駆使することで、より高度な埋め込みやデザインを作り込むことが可能です。例えば、Power Appsで作成した予約フォームをSharePoint Onlineサイトに埋め込み、そのサイトをさらに外部公開するケースもあります。
- Power AppsからBookings APIに接続して独自のフォームを作成
- SharePoint Webパーツでページデザインを統合
- 外部共有機能を使って一般ユーザーにも閲覧可能に設定
この方法はやや高度ですが、自由度が高いぶんカスタマイズが豊富にできます。
方法3: 他の予約システムとの連携
もしMicrosoft Bookingsの機能やTeamsのVirtual Appointmentsが制約を受ける状況であれば、サードパーティの予約システムを利用し、Teams会議URLを予約完了後に自動送信する仕組みを構築することも検討できます。
例として、以下のようなワークフローが挙げられます。
- サードパーティの予約フォームでユーザーが日時を選択
- 予約が確定すると、Power Automate等を用いてTeams会議リンクを自動生成
- ユーザーにメールで会議リンクを通知
予約システムによっては埋め込み用のウィジェットやiFrameが準備されているため、そのままコピペでサイトに統合できます。
埋め込み時の注意点とヒント
無事にコードを取得でき、HTMLに貼り付けても、思わぬところで不具合が生じる場合があります。以下のポイントを押さえておくと、よりスムーズに運用できます。
1. スマホ対応の確認
埋め込んだフォームがスマートフォンやタブレットで適切に表示されるかどうかはとても重要です。デモ的にPC画面で問題なく表示されても、モバイル端末ではスクロールできず、予約ボタンが押せないケースもあります。CSSメディアクエリやレスポンシブデザインを適切に組み合わせて、モバイルユーザーに配慮しましょう。
2. ドメイン・セキュリティ設定の影響
iFrameで外部サイトを読み込む場合、ブラウザのセキュリティポリシーによっては動作しないことがあります。特に、企業独自のセキュリティ設定（X-Frame-Optionsなど）を行っている場合、iFrameの読み込みをブロックしている可能性があります。システム管理者やWeb担当者と相談し、必要に応じて設定を調整してください。
3. マルチユーザー・複数サービスの予約管理
「Book with Me」は個人単位でのスケジュール管理にフォーカスしていますが、組織全体で複数のサービスを提供する場合は、複数カレンダーの一元管理が課題となります。従来のBookingsであれば、スタッフやサービスごとにアカウントを追加するだけで管理できましたが、新仕様ではユーザー単位の紐付けが必要となるケースもあります。
具体的な活用シナリオ
実際のビジネスシーンを想定したサンプルシナリオをいくつか紹介します。自社の業種や規模感に近いケースを当てはめ、導入のヒントにしてください。
ケース1: 小規模サロンでのオンライン予約
従来の電話予約だと店側が営業時間外の予約を受け付けられず、機会損失が発生していました。そこでMicrosoft Bookings（旧UIが使える間は旧UIを使用）を導入し、埋め込みページを公式サイトに配置。サロンスタッフの休暇日や対応可能メニューをBookingsに登録しておくことで、オンライン予約の自動受付が可能になります。
もし新UI（Book with Me）へ切り替わったら、直接リンクをサイト内の「オンライン予約はこちら」ボタンに設定し、外部タブでBook with Meのページが開く形へ移行。カスタマイズの自由度は落ちる一方、運用の負担は最小限に抑えられます。
ケース2: BtoB企業のオンライン商談・サポート
製品のデモやサポートを行う場合、相手企業の担当者とオンライン会議を調整する時間帯が合わないことが多々あります。TeamsのVirtual Appointments機能や「Book with Me」を利用して、「商談の空き枠」をあらかじめ登録。自社Webサイトの「お問い合わせ」ページに埋め込むか、リンクを貼ることで、ユーザー側が自由に空き時間を選んで予約できる仕組みを作ります。
この際、Microsoft Teamsの会議URLを自動で生成し、予約者にメール配信する設定も可能なので、別途メールを送る手間が大幅に削減できます。
ケース3: 学校や学習塾の面談予約
学校や学習塾では、保護者面談や個別指導の枠をオンラインで管理したいという要望が多く見られます。Microsoft Bookingsを利用すれば、アカウント管理も比較的容易です。複数の教職員や講師の空き時間を一括管理する機能を活用し、面談希望者がWeb上から予約枠を選択できる仕組みを構築できます。
ただし、2024年以降の新UI移行が進むことで、従来のBookingsでの一括管理ができなくなる可能性もあります。組織内で複数人の対応が必要な場合は、旧UIと「Book with Me」の機能差をよく理解し、連携方法を事前に検証しておくことが大切です。
今後のアップデート情報の追い方
Microsoft 365は頻繁にアップデートされ、機能が追加・変更・統合されることが多々あります。特にMicrosoft BookingsやTeams周りはリニューアルのペースが早いので、継続的に情報を収集しましょう。
1. Microsoft 365管理センターやMessage centerのチェック
Microsoft 365の管理者権限を持っている場合、「Message center」にアップデート情報が随時通知されます。たとえば「○月からBookingsの○○機能が廃止予定」など事前予告があるため、この情報を見逃さないようにしてください。
2. Microsoft公式ドキュメント
Microsoft Bookings ヘルプ や Teamsのドキュメント を定期的に参照すると、機能の追加や仕様の変更がいち早くキャッチできます。特に埋め込みコードの取得方法などは、公式ドキュメントで更新され次第反映される可能性があります。
3. Microsoft Tech Communityや公式フォーラム
公式フォーラムやユーザーコミュニティには、同じ悩みを抱えるユーザーが多く集まります。新機能の先行プレビュー情報や、問題発生時の対処方法などがいち早く共有されることもあるため、フォーラムを活用するのがおすすめです。
まとめとアクションプラン
TeamsやMicrosoft Bookings（新UIの「Book with Me」含む）をウェブページに埋め込むことで、オンライン予約やアポイント管理が大幅に効率化できます。しかし、2024年以降のリニューアルによって、従来のiFrameコード取得手順が使えない可能性があるため、以下のステップを踏むとスムーズです。
- 現在のUIを確認: 自分のテナントが旧UIか、新UI「Book with Me」かを見極める。
- 旧UIが使える場合: Bookingsの「公開設定」→「埋め込みコード取得」の従来手順を試す。
- 新UIの場合: 埋め込みコードが用意されているか、公式ドキュメントや管理者画面をチェック。利用できない場合はリンクによる誘導や代替策を検討。
- セキュリティやデザイン面の最適化: iFrameを使う際はレスポンシブ対応やセキュリティ設定を整備。
- 継続的なアップデート情報の収集: Microsoft 365のMessage centerや公式ドキュメント、コミュニティを定期的に確認し、リリース情報を追いかける。
上記を実施することで、オンライン予約の利便性を損なわずに最新機能へスムーズに移行できるでしょう。埋め込みが難しい場合でも、直接リンクや他のMicrosoft 365機能との連携を検討し、自社の運用スタイルに最適な形でオンライン予約を提供するのがベストです。
コメント