予約ブロック：クロール可能なスケジュール設定と予約UX

予約ブロックは、読者が予約を選択またはリクエストできるようにしながら、必須情報をHTMLに保持します。特定のアクション、サービスと拠点のコンテキスト、対象条件、スケジュール設定、および代替手段を組み合わせます。

家電修理の訪問を予約する 食器洗い機の診断・約60分 ノースサイドサービスエリア内のご家庭が対象です。診断料がかかる場合があります。 予約時間を選択 オンライン予約が利用できない場合は、（555）014-0186までお電話ください（月曜～金曜、午前8時～午後6時）。

スケジューラーはインライン、ダイアログ、または外部サイトに配置できます。これを削除しても、サービス、所要時間、エリア、条件、または代替手段が削除されてはいけません。

この要素が重要な理由

スケジュール設定は、関心を確約に変えます。その瞬間、読者は通常3つのことを同時に確認しています。「これは正しい予約ですか？」「この事業者は自分に対応できるか？」「選択した後はどうなるのか？」「今すぐ予約」とだけ表示するブロックでは、読者はページを離れるかウィジェットに入力してこれらの疑問を解決する必要があります。この不確実性は、間違った支店、タイムゾーン、サービスエリア、または予約タイプが予約を無効にする可能性があるローカルサービスでは特にコストが高くなります。

明確さは行動のリスクを減らします。「30分の初回相談を予約する」は「始める」よりも明確な期待を設定します。対象条件、費用、準備、キャンセル条件、連絡先詳細を表示することで、読者が個人情報を共有する前に不一致を明らかにできます。

機械による抽出が重要なのは、多くのスケジューラーがサードパーティのiframeやスクリプトを通じて提供されるためです。クローラー、AI回答システム、同意ブロックされたセッション、または支援技術は空のフレームを受け取る可能性があります。その場合、何が予約できるのか、どこで、どのような条件下で、どのように復旧するのかを判断できません。

ライブの空き枠を散文にコピーしないでください。それらは急速に変化し、スケジュールシステムに属します。安定したコンテキストをホストページにレンダリングしてください：予約名、拠点、所要時間、対象条件、準備、費用、タイムゾーン、プロバイダー、および代替手段。ウィジェットは現在の日付と時刻を追加します。

このコンポーネントを選択する前に、要素作成ルール を適用してください。目的が外観に優先します。ブロックが時間制限のあるインタラクションをスケジュールする場合、現在のデザインが通常のコールトゥアクションのように見えても、それは予約ブロックです。販売の問い合わせを収集するだけで予約を提供またはリクエストしない場合は、代わりにフォームまたはCTAです。

使用するタイミング

読者が明確な予約アクション（サービスの訪問予約、アポイントメントのリクエスト、相談枠の選択、物件の内覧手配、支店での打ち合わせのスケジュール、指定されたサービスのウェイティングリストへの参加）を行える場合に予約ブロックを使用します。事業者は、リクエストを受け取り、確認、拒否、または再スケジュールできる運用手順を持っている必要があります。

類似しているが異なるケースはよくあります：

• 一般的な問い合わせフォームは、日付、時間、または予約リクエストが含まれていない場合、予約ブロックではありません。問い合わせとしてラベル付けし、返答の期待時間を明記してください。
• コールトゥアクションボタンは、説明のないカレンダーに読者を送るだけでは完全な予約ブロックではありません。安定した予約コンテキストと代替手段を追加してください。
• 営業時間は事業者がいつ営業しているかを説明しますが、予約の空き状況を証明するものではありません。営業時間とライブの空き枠は区別してください。
• イベント登録は、個別のサービス時間を調整するのではなく、固定イベントへの参加を予約します。適切なイベントまたは登録パターンを使用してください。
• 緊急ルートは通常のカレンダーに依存してはいけません。緊急または救急のヘルプが対象範囲に含まれる場合は、スケジューラーより前に適切な即時連絡先を明記してください。

配置する場所

予約ブロックは、ページがサービスの適合性を確立した後、二次的なプロモーションコンテンツの前に配置してください。ロケーションページ では、支店の識別情報、住所またはサービスエリア、営業時間、および利用可能なサービスの簡単な説明の後に配置します。サービスページ では、範囲、適合性、および主要な条件の後に配置します。コンパクトな繰り返しアクションが終了近くに表示されることもありますが、2つ目のプロバイダーインスタンスを初期化するのではなく、同じ予約領域を指すようにしてください。

ブロックを別の主要フォーム、異なるスケジューラー、説明のない電話CTA、またはプロモーションカウントダウンのすぐ隣に配置しないでください。競合するアクションがあると、どのルートが正規のものか不明確になります。タブ、カルーセル、アコーディオン、比較表のセル、クリッカブルカード、または同意レイヤーの内部に配置しないでください。必須条件が無関係な推薦文やオファーの下に置かれてはいけません。

重要なサービスの場合は、読者が予約すべきかどうかを変えるような制限事項は、アクションの直前に配置してください。時間を選択することで対象条件が確認されることを示唆してはいけません。

構成要素

ラベル付きキャプチャは以下の部分を特定する必要があります：

1. アクション固有のタイトル： 予約可能な内容を「今すぐ予約」だけでなく具体的に示します。
2. サービス概要： 目的を1文で説明します。
3. 拠点コンテキスト： 支店名、サービスエリアまたはリモート形式、およびタイムゾーンを示します。
4. 予約情報： 所要時間、対象者、料金条件、および対象条件を表示します。
5. 準備メモ： 成功に影響する要件を記載します。
6. 主要アクション： 特定のアクセシブルなラベルを使用します。
7. スケジューラー領域： ライブの空き枠、バリデーション、およびプロバイダー帰属表示を含みます。
8. プライバシーコンテキスト： サードパーティのデータ処理を特定します。
9. 確認期待値： 確認とリクエストを区別します。
10. 代替ルート： 監視されている代替手段とその営業時間を提供します。

デザイン例

すべてのバリエーションは同じクロール可能なコンテキストを持ちます。ライブ選択の場所と複雑さのみが異なります。

インラインスケジューラー

プロバイダーがアクセシブルで安定している場合、1つのサービスと拠点に使用します。レイアウトシフトを避けるために十分な高さを確保してください。

ダイアログまたはドロワースケジューラー

インラインカレンダーがページを圧迫する場合に使用します。ダイアログにラベルを付け、閉じる機能を提供し、背景を隔離し、終了時にフォーカスを戻します。

プロバイダーホスト型予約ページ

認証、支払い、複雑なインテーク、またはプロバイダーの信頼性がプロバイダーのサイトを優先する場合に使用します。宛先を明記し、代替手段を表示したままにします。

アポイントメントリクエスト

スタッフが対象条件、移動、機器、または専門家の空き状況を確認する必要がある場合に使用します。希望時間を尋ね、応答チャネルと期待値を明記します。

電話優先およびアシスト予約

トリアージや安全な割り当てのために会話が必要な場合に使用します。電話番号を選択可能にし、スタッフ対応時間と音声以外の代替手段を提供します。

マルチロケーションセレクター

複数の支店にまたがって使用します。時間の前に支店を確定し、その住所とタイムゾーンを表示し、確認まで選択を維持します。

パラメーター

「ソース」は、レンダラーが正規の値を取得する場所を示します。プロバイダー側の設定がライブ在庫を制御する場合がありますが、以下の表示コンテンツフィールドを置き換えるものではありません。

fallbackPhone または fallbackUrl の少なくとも一方が、サードパーティコードを使用する場合は必須です。最初の見出しが title、最初の段落が summary、残りの本文が情報、確認、プライバシー、および代替手段にマッピングされます。ライブの空き枠は作成者コンテンツに決して属しません。

構文とコード例

3つの表記法はすべて、同じサービス、支店、所要時間、プロバイダー、確認モード、および代替手段を保持します。URLは例示です。

ポータブルMarkdownディレクティブ

:::booking-block{id=dishwasher-repair service="Dishwasher diagnosis" variant=inline duration=PT1H location=northside timezone=America/Chicago provider="Example Scheduler" src="https://scheduler.example.com/northside/dishwasher" ctaLabel="Choose an appointment time" confirmationMode=instant fallbackPhone="+15550140186"}
## Book an appliance repair visit

Choose a 60-minute dishwasher diagnosis at our Northside branch.

Available for homes within the Northside service area. A diagnostic fee may apply and will be confirmed before the visit.

Your appointment is confirmed only when you receive an email with the date, time, address, and reference number.

Scheduling is provided by Example Scheduler. If it does not load, call (555) 014-0186, Monday–Friday, 8:00 a.m.–6:00 p.m.
:::

Hugoショートコード

これは意図されたアダプター契約であり、ショートコードがすでに存在するという主張ではありません。名前付きパラメーターのみを使用します。

{{< booking-block id="dishwasher-repair" service="Dishwasher diagnosis" variant="inline" duration="PT1H" location="northside" timezone="America/Chicago" provider="Example Scheduler" src="https://scheduler.example.com/northside/dishwasher" ctaLabel="Choose an appointment time" confirmationMode="instant" fallbackPhone="+15550140186" >}}
## Book an appliance repair visit

Choose a 60-minute dishwasher diagnosis at our Northside branch.

Available for homes within the Northside service area. A diagnostic fee may apply and will be confirmed before the visit.

Your appointment is confirmed only when you receive an email with the date, time, address, and reference number.

Scheduling is provided by Example Scheduler. If it does not load, call (555) 014-0186, Monday–Friday, 8:00 a.m.–6:00 p.m.
{{< /booking-block >}}

Hugoレンダラーはサーバー上で安定したコンテンツと代替手段を出力し、その後プロバイダーをラベル付き領域に読み込みます。

WordPressブロック

<!-- wp:amicited/booking-block {"id":"dishwasher-repair","service":"Dishwasher diagnosis","variant":"inline","duration":"PT1H","location":"northside","timezone":"America/Chicago","provider":"Example Scheduler","src":"https://scheduler.example.com/northside/dishwasher","ctaLabel":"Choose an appointment time","confirmationMode":"instant","fallbackPhone":"+15550140186"} -->
<h2>Book an appliance repair visit</h2>
<p>Choose a 60-minute dishwasher diagnosis at our Northside branch.</p>
<p>Available for homes within the Northside service area. A diagnostic fee may apply and will be confirmed before the visit.</p>
<p>Your appointment is confirmed only when you receive an email with the date, time, address, and reference number.</p>
<p>Scheduling is provided by Example Scheduler. If it does not load, call <a href="tel:+15550140186">(555) 014-0186</a>, Monday–Friday, 8:00 a.m.–6:00 p.m.</p>
<!-- /wp:amicited/booking-block -->

登録されたブロックはPHPを通じて安定したコンテンツをレンダリングし、プロバイダーコードをプログレッシブエンハンスメントとして扱います。

例

良い例：復旧可能なルートを備えた1つの予約

30分の税務書類レビューを予約する

ブロックは、ダウンタウン支店、現地のタイムゾーン、持参する書類、およびミーティングが記録を確認するが提出資格を保証しないことを明記しています。「レビュー時間を選択」ボタンがカレンダーを開きます。その下のページには、確認はメールで届くこと、およびプロバイダーが利用できない場合のスタッフ対応時間付きの監視対象電話番号が記載されています。

データ入力前に適合性が明確であり、カレンダーがなくても意味が成立するため、これは有効です。スケジューラーは空き状況を管理し、ページは耐久性のあるサービス情報と復旧手段を管理します。

悪い例：コンテキストのないiframe

今すぐ予約 ラベルなしのiframeがプロバイダーのカレンダーを読み込みます。支店、タイムゾーン、予約タイプ、所要時間、費用、対象条件、確認ステータス、および代替連絡先が欠落しています。

悪いバージョンでは、読者と抽出ツールがサードパーティのUIから提供内容を推測することを強いられます。障害が発生すると空のセクションが残り、リクエストが確認と誤認される可能性があります。HTMLによる予約契約、ラベル付き埋め込み、保存された選択、確認文言、および代替手段で修正してください。

スキーママークアップとアクセシビリティ

予約ブロックは自動的にスキーマ要件を生み出しません。包含ページは、適切な LocalBusiness、より具体的なビジネスタイプ、Organization、または Service エンティティで表示されているビジネスまたはサービスをすでに説明している場合があります。それらの情報を予約テキスト、特に名前、拠点、電話番号、サービスエリア、および営業時間と一貫させてください。

ReserveAction は、そのターゲットが表示されている動作可能なルートを開き、そのアクションが記述されているエンティティに正確に属する場合に、実際の予約アクションを表すことができます。枠が利用可能であること、リクエストが確認されたこと、またはすべての訪問者が対象であることを暗示してはいけません。予約日を Event として公開したり、通常の営業時間を予約可能在庫として扱ったり、ページとスケジュールシステムが検証できない構造化値をでっち上げたりしないでください。

アクセシビリティは読み込み前から始まります。実際の見出しと、そのアクセシブル名に目的を含むアクションを使用してください。iframeには「ノースサイドの食器洗い機修理予約を選択」などの具体的な title を付けてください。プレースホルダーテキストを唯一のフィールドラベルとして使用しないでください。

キーボードユーザーはフォーカストラップに陥らずに入力、操作、終了ができなければなりません。ダイアログには名前、初期フォーカス、閉じるアクション、背景の隔離、およびフォーカスの戻りが必要です。バリデーションはフィールドと修正方法を特定します。日付の状態は色のみに依存できず、ステータスの更新はアナウンスされなければなりません。

代替手段は通常の読み順で、JavaScriptなしで表示可能にしてください。フローは200%ズームおよび狭い幅でも動作する必要があります。タイムゾーンを表示し、曖昧な数値日付を避けてください。

プロバイダーがキーボード、スクリーンリーダー、コントラスト、プライバシー、または復旧要件を満たさない場合は、同等のアシストルートを提供してください。CAPTCHA、支払い、および本人確認もアクセシブルな復旧手段が必要です。

作成ルール

• アクションと予約を組み合わせた3～10単語のタイトルを作成してください。「スケジュール」や「始める」ではなく「聴力検査を予約する」とします。
• サービス、形式、所要時間、および拠点を記載した12～35単語の要約を1つ作成します（それらの情報が既知の場合）。
• 5つ以下の対象条件または準備条件を記載します。より長いポリシーからは、決定を変えるルールのみを要約してください。
• 2～8単語の具体的なアクションラベルを使用してください：「相談時間を選択」、「自宅訪問をリクエスト」、「評価のための電話」。 「送信」、「続行」、「ここをクリック」は避けてください。
• 即時確認と予約リクエストを区別してください。スタッフの承認がまだ必要な場合に「予約済み」を使用してはいけません。
• 読者がタイムゾーンをまたいで予約する可能性がある場合、または予約がリモートの場合は、タイムゾーンを明記してください。確認では曖昧さのない書面の日付を使用してください。
• 予約、デポジット、キャンセル、診断、または無断キャンセル料が発生する可能性がある場合は、読者が時間を選択する前に料金を説明してください。必須の支払いをプロバイダーのステップ内に隠してはいけません。
• サービス名、所要時間、拠点、対象条件、必須の準備、確認動作、および代替手段をiframeまたはクライアントサイドアプリケーションの外部に保持してください。
• データ転送の前にプロバイダーを明記し、サポートされていないプライバシー動作を約束せずに引き継ぎを説明してください。
• 代替ルート、スタッフ対応時間、応答期待値、および提供すべき予約コンテキストを提示してください。
• 複数拠点予約の場合、トリガー、スケジューラー、および確認で選択された支店を明記してください。事前選択または明示的な拠点選択を必要とせずに、組織全体の「今すぐ予約」リンクを再利用してはいけません。
• 緊急時の指示、臨床アドバイス、保証、推薦文、割引カウントダウン、無関係なオファー、および2つ目のリードフォームを予約ブロック内に配置しないでください。
• ライブ在庫から生成され、取得時間がラベル付けされていない限り、静的な「次の空き枠」の主張を書かないでください。空き状況はクロール、クリック、確認の間で変化する可能性があります。
• 所有者を割り当て、営業時間、拠点、料金、対象条件、プロバイダーの動作、またはインテークポリシーの変更後にレビューを行ってください。

使用する投稿タイプ

postTypes フロントマター配列がこのマトリックスを駆動します。含まれていることは、実際の予約アクションが存在する場合にそのページが予約ブロックを使用できることを意味し、すべてのページにスケジュール設定を必須とするものではありません。

QAチェックリスト

• ブロックは一般的な問い合わせを収集するのではなく、定義された予約をスケジュールまたはリクエストする。
• 表示されるタイトルが予約を指定し、アクションラベルが次のスケジュールステップを説明している。
• サービス、所要時間、拠点またはサービスエリア、タイムゾーン、対象条件、および重要な料金条件が正確である。
• 安定した予約情報が、プロバイダー、iframe、同意マネージャー、またはJavaScriptに依存せずにHTMLとしてレンダリングされる。
• ライブの空き状況は正規のスケジュールシステムから取得され、静的な散文にコピーされていない。
• 選択されたサービスと拠点が、トリガーからカレンダー、バリデーション、確認、復旧まで維持される。
• ページは即時確認と、スタッフが承認する必要があるリクエストを区別している。
• サードパーティプロバイダーがデータ転送前に特定され、プライバシー文言が実際のフローと一致している。
• 失敗、空きなし、バリデーション、キャンセル、再スケジュールの各状態が、それぞれ有用な次のアクションを提供する。
• 監視対象の代替電話またはアクセシブルな代替ルートが、ウィジェットが失敗した場合に表示されたままになる。
• 代替手段の指示には、スタッフ対応時間または現実的な応答期待値が含まれている。
• スケジューラーには特定のアクセシブル名があり、キーボード、スクリーンリーダー、タッチ、ズーム、および狭い画面で動作する。
• フォーカスはダイアログに予測可能に入退場し、バリデーションは以前に有効だった選択を消去しない。
• 日付と時刻は曖昧さがなく、関連するタイムゾーンを含み、色のみに依存していない。
• 緊急または重大な制限事項はアクションの前に表示され、スケジューラーに依存しない。
• 主要アクションの隣に競合するスケジューラー、リードフォーム、カウントダウン、または無関係なプロモーションがない。
• 構造化データは、空き状況や確認をでっち上げることなく、表示されている検証済みのビジネスおよびサービス情報を反映している。
• 選択された投稿タイプが postTypes に表示され、配置が上記のマトリックスに従っている。
• コンテンツ、代替連絡先、プロバイダー統合、および確認動作について、所有者とレビュートリガーが存在する。

FAQ

予約ウィジェットをページ上の唯一の予約情報としてもよいですか？

いいえ。サードパーティのウィジェットは失敗する可能性があり、同意が必要だったり、クローラーをブロックしたり、一部の支援技術で使用できない場合があります。サービス、拠点、対象条件、準備、連絡手段、および代替手段は、ウィジェットの外部にあるサーバーレンダリングされたHTMLに保持してください。

スケジューラーはページ上で開くべきですか、それともプロバイダーのウェブサイト上で開くべきですか？

アクセシブルで高速、かつ復旧が容易な場合は、インラインまたはモーダルスケジューラーを使用してください。プロバイダーが自社ドメインでより確実に動作する場合は、明確にラベル付けされた外部リンクを使用してください。いずれの場合も、同じクロール可能なコンテキストと、ウィジェットに依存しない代替手段をページ上に保持してください。

予約ブロックにはスキーママークアップが必要ですか？

自動的に必要になるわけではありません。周囲のページが LocalBusiness、Service、またはその他の関連タイプに該当する場合があります。ReserveAction は、アクションターゲットが実際に存在し、安定しており、表示されている予約経路を正確に表している場合にのみ追加してください。構造化データで実際の予約空き状況をでっち上げてはいけません。

複数拠点のビジネスは予約をどのように処理すべきですか？

読者がスケジュールフローに入る前に拠点を明示し、選択された拠点をすべてのステップで維持し、その住所、タイムゾーン、および代替連絡先詳細をHTMLで表示してください。すべての支店ページをフィルタリングなしの組織全体カレンダーに送信してはいけません。

予約可能な枠がない場合はどうすればよいですか？

ビジネスが閉鎖していると示唆せずに、次の有効なルートを説明してください。別の拠点、ウェイティングリスト、電話番号、リクエストフォーム、または再度確認するための明確な日付を提供してください。読者が最初からやり直す必要がないよう、選択されたサービスと拠点を保持してください。