今回は、SWELLの「着せ替えデザイン」機能を活かした教室サイト構築の【後編】として、
カレンダー・フォーム・予約システムを連携し、教室運営を“半自動化”する方法を紹介します。
前編では、デザイン構成と導線設計を中心に、
「見やすく・迷わない」トップページを作るポイントをまとめました。
この後編では、XOカレンダー・Googleフォーム・Free予約（tol）・Googleカレンダーなどを組み合わせ、
「電話に出られない時でも機会損失を防ぐ」予約・スケジュール管理の仕組みを実装していきます。
フォーム送信後に自動でカレンダーに反映される流れや、
問い合わせから予約までを一元管理する実践例を通して、
SWELLで作る“動くホームページ”の完成形を目指します。
前編記事はこちら👇
説明アイコンそれではまず、教室スケジュールを「見える化」するために、XO Event Calendarをトップページに設置してみましょう。
STEP5:カレンダーを設置してスケジュールを見える化しよう
トップページの最後に「スケジュールカレンダー」を設置し、教室の予定を見える化しましょう。
XO Event Calendarは、SWELLと非常に相性が良く、ブロックウィジェットから簡単に追加できます。
XO Event Calendarのプラグイン方法は
4-3. トップページの構成を決めよう｜パン屋DEMOで学ぶ基本骨格とウィジェット設計
をご覧ください。
🧩 カレンダーの設置方法
SWELLでは、XO Event Calendarをインストールすると、ウィジェット一覧に「イベントカレンダー」というブロックが出現します。
設置したいエリア（今回はフッター直前）にドラッグ＆ドロップするだけでOKです。
１．WordPress管理画面 → 外観 → ウィジェット
２．「フッター直前」を選択
３．「イベントカレンダー」ブロックを追加
４．タイトルを「スケジュール」などに変更し、保存
５．毎週の予定と、不定期イベントを設定する
🗓 イベント登録の基本
XO Event Calendarでは、「毎週決まっている予定」と「不定期イベント」を分けて登録します。
毎週決まっている予定
例：毎週月・水曜日は定休日
説明アイコン今回、2025-11-21（金）を臨休日に設定しました。その場合、カレンダーにピンク色を反映させるためには、金曜日の設定の、取消日にも2025-11-21を設定する必要があります。
🧠 仕組みの解説
XO Event Calendarで「毎週金曜日にクラスあり」と設定している場合、
そのスケジュールは“自動的に全金曜日に反映”されます。
ところが、特定の金曜日（たとえば 2025-11-21）を「臨時休講」にしたい場合、
ただ“別途イベント（休講）”を追加しても、既存の繰り返しイベントが優先的に描画されてしまうんです。
なので：
✅ 繰り返し設定されたイベントの「取消日」欄に、該当日を入れておく必要がある
というわけです。
これを入れておくと、その日だけ自動スケジュールを除外し、別の色（休講ピンク）を上書きできるようになります。
不定期イベント
例：日曜日の特別講座や、イベント出演
① カテゴリーを作成する
イベントをy表示させるためには、まずはカテゴリーを作成します。
- 管理画面 → イベント → カテゴリー
- 「名前」「スラッグ」（例：special-class）「色」を設定し、「新しいカテゴリーを追加」
説明アイコン今回は、「イベント・特別講座」の①カテゴリーにしました。
イベントの種類ごとに色分けしたい場合は、このカテゴリーを増やしていきます。
② イベント記事を作成（カテゴリーに✔）
「新規イベントを追加」から投稿。
- タイトル・本文・日時・場所を設定
- 必ずカテゴリーをチェック！
- アイキャッチ画像を設定しておくと「detail」を選択した場合に反映される
③ ウィジェットの設定をする
Ⅰカレンダーにイベントを表示させる方法
管理画面 → 外観 → ウィジェット → 「フッター直前」（イベントカレンダーの設置場所）
説明アイコンこれで、カレンダーにイベントが表示されるようになります。
Ⅱ新着イベントを表示させる方法
管理画面 → 外観 → ウィジェット → 「トップページ専用サイドバー」（新着イベントの設置場所）
- 「カスタムHTML」を追加
- タイトルに「新着イベント」
- 内容に以下を入力
[xo_event_list type="detail"]
説明アイコンこの時点では ショートコードが機能しません。
④の作業をすると機能しますので、以下の設定をしてください。
④ functions.php にコードを追記
子テーマの functions.php にショートコード登録のコードを追記します。
（※親テーマではなく「swell_child」などの子テーマ側に入れてください）
〈functions.php の場所と追記の方法〉
- 管理画面の左メニューで
→ 外観 ＞ テーマファイルエディター をクリックします。 - 右上のプルダウンで
→ 「swell_child」または「SWELL CHILD」を選びます。
（※子テーマを有効化していない場合は先に子テーマを有効にしておいてください） - 右側のファイル一覧から
→ functions.php をクリック。 - 編集画面が出たら、一番下にスクロールして、
下記のように貼り付けます。
💡 使用したコードはXakuro公式サイトに公開されています
XO Event Calendar の開発元である Xakuro公式サイト に、
「xo_event_list ショートコードを有効化するためのPHPコード」が掲載されています。
（記事名：「XO Event Calendar イベントリストショートコード」）
そちらを参考に、functions.php にコードを追記してください。
※2025年11月時点の情報です
✅ これでショートコード [xo_event_list type="detail"] が有効化され、
ウィジェットや固定ページに貼ってもイベント一覧が表示されるようになります。
説明アイコン【注意】ショートコードだけでは動かない！
多くの解説サイトには、
「[xo_event_list type="detail"] を貼るだけ」と書かれていますが、
実は、その前にやるべき重要な設定があります。
WordPress側でこのショートコードを正しく認識させるためには、
functions.php に「ショートコードを登録するコード」 を追記する必要があります。
⑤ 新着イベントの表示の方法は3種類
xo_event_list ショートコードは3種類あります
Ⅰ．short
[xo_event_list]
Ⅱ．standard
[xo_event_list type=”short”]
Ⅲ．detail👈今回コレ
[xo_event_list type=”detail”]
説明アイコン「からだリズム体操教室DEMO」では、ウイジェットに新着イベントを設定しましたが、投稿ページ・固定ページにも設定できます。その場合はショートコードブロックを使ってください👇
📌POINT
カレンダーは単なる予定表ではなく、「活動の見える化」「信頼の証明」にもなります。
空白の日があっても構いません。無理に埋めず、「定休日」「準備期間」もそのまま表示することで、実在する教室の安心感を演出できます。
✅ まとめ
- イベント投稿は 「カテゴリー → 記事 → ウィジェット → functions.php」 の順に設定する
- ショートコード
[xo_event_list type="detail"]は登録コードを入れることで有効化される - コードは Xakuro公式サイト を参照するのが安全
- カレンダーと新着イベントを連動させると、「活動が見える」信頼性の高いサイトになる
※2025年11月時点の情報です
STEP6:Googleフォームでお問合せ・申し込みフォームを作成しよう
バナーと固定ページの関係を整理しよう
「からだリズム体操教室」では、サイト全体で申し込み導線を分かりやすくするために、
共通サイドバーにバナーを設置しています。
また、メインメニューの「ご予約・お問合せ」には、
火曜クラス・木曜クラス・個人レッスン・日曜イベントといった子メニューを付けています。
各バナーには、それぞれ
- Googleフォーム
- Free予約フォーム
- 固定ページ（説明付きページ）
へのリンクが設定されています。
今回は、下の図のように「ご予約・お問合せ」メニューを作っていきます。
こうしておくことで、トップページからでも即申し込みができ、
また、子メニューの固定ページでは補足説明を掲載できるようになります。
たとえば、「Googleフォームって何？」という方にも安心して使ってもらえるように、
固定ページ側で簡単な説明を加えています。
申し込みボタン（バナー）がサイトのあちこちにあることで、
どのページから訪れた人でも迷わず申し込みができる環境が整います。
バナーとは？
バナーとは、「画像＋リンク」のことです。
画像にURLを設定することで、クリックした人を特定のページや外部サイトに誘導できます。
下の例のように、画像ブロックにリンク先URLを設定すると、
クリックで指定したページに移動します。
（例）
固定ページのURLを設定した場合：
→ バナーをクリックすると、同サイト内の固定ページへ移動します。
「からだリズム体操教室」では、
ウィジェット機能を使って共通サイドバーにバナーを設置しています。
各バナーには、クラスごとのGoogleフォームやFree予約ページなど、
それぞれの申し込み先リンクを設定しています。
🔸 固定ページリンク → サイト内の案内ページへ
🔸 Googleフォームリンク → 外部フォームへ
🔸 Free予約リンク → 外部予約システムへ
この構成により、どのページからでも「申し込み・問い合わせ」ができるようになります。
Googleフォームを作ってみよう
ここでは例として、「火曜クラス見学・入会フォーム」を作成していきます。
質問内容そのものは省略し、設定の流れを中心に見ていきます。
説明アイコンGoogleフォームの分岐設定については、（再編成）4-5-2-2.Googleフォームの作り方・Googleカレンダーの活用に書いてありますのでそちらもご覧ください。
🔸Ⅰ：Googleフォームを新規作成
- Googleアカウントでログイン
- Googleフォームを開き、「＋」ボタンで新規作成
- タイトルに「火曜クラス見学・入会フォーム」と入力
- フォームの説明欄に、「ご希望の方は以下にご入力ください」など、簡単な案内を記載
🔸Ⅱ：フォーム項目を作成
- 「＋」ボタンで質問を追加し、必要な項目を作成します。
- 質問の種類（記述式・選択式・日付など）を使い分けます。
※今回はフォーム構成の説明のため、質問内容は省略します。
🔸Ⅲ：回答タブの設定
１．「回答」タブを選び、「スプレットシートにリンク」の右横の「︙」をクリック
２．「新しい回答についてのメール通知を受けとる」に✔
→ これで、新しい申込があるたびにGmailに通知されます。
🔸Ⅳ：設定タブの設定
「確認メッセージ（自動返信）」に表示する内容を入力
例：
お申し込みありがとうございます。 内容を確認のうえ、担当者よりご連絡いたします。
🔸Ⅴ：フォームURLを取得する
- 右上の「公開」ボタンをクリッ
- 「URLを短縮」にチェックを入れ、共有用URLをコピー
→ このURLをあとでバナー画像のリンクに設定します。メモしておいてください。
🔸Ⅵ：フォームのデザインを整える（任意）
- 右上のパレットアイコン🎨から、テーマカラーや背景を変更できます。
- 教室の雰囲気に合わせて、明るい色を選ぶと印象が良くなります。
💡ポイント
この時点で「フォームURL＋通知設定＋自動返信設定」が整います。
🔹おすすめの運用方法（スマホでも即確認できる）
1️⃣ フォーム編集画面で「回答」タブを開く
→ 回答一覧が見られる画面になります。
（URLは https://docs.google.com/forms/d/.../edit#responses のような形）
2️⃣ この「回答」タブのURLをブックマーク
→ スマホのブラウザでもすぐ開けるように。
→ ホーム画面に追加しておくとワンタップで開けます。
3️⃣ Gmailの通知を受けたら
→ メール本文を確認して「お、来たな」と思ったら、
→ ブックマークからフォームの回答ページを開いて内容を確認。
💡さらに便利な豆知識
- 「回答」タブ右上の スプレッドシートアイコン をクリックして、
Googleスプレッドシートに連携しておくと、
回答が自動で一覧化 されます。
→ これもURLをブックマークしておくとさらに便利です。
📱スマホでの実用イメージ
- メール通知：「新しい回答があります」
- → スマホのChromeやSafariでブックマークした「回答」ページを開く
- → その場で内容を確認＆対応
つまり：
メール通知＝「届いたよ」の合図
回答タブURL＝「内容を確認するページ」
この2つをセットで使えば、
スマホだけで十分な運用ができます。
説明アイコン次のステップでは、このURLを固定ページとバナーに反映させていきます。
固定ページの中身を作成しよう
「ご予約・お問合せ｜火曜クラス見学・入会フォーム」の固定ページを例に説明します。
本文で説明＋バナー設置です。
🧱 ページ本文（例）
🔸 火曜クラス「体操教室」見学・入会フォームのご案内
火曜クラスの見学・入会をご希望の方は、
下のバナーをクリックしてください。
Googleフォームが開きます（回答時間の目安：約2分）
💬 まずは見学からどうぞ
申し込み前に、教室の雰囲気を見ていただくのがおすすめです。
見学後、「入会してみよう」と思った方は、
同じフォームからお申し込みください。
📧 ご連絡の流れ
- フォームの回答内容を確認次第、こちらから詳細をメールでお知らせします。
- 前日に確認のお電話をいたします。
- フォーム内で、電話の都合がよい時間帯を指定してくださいね。
📎 バナーをクリックするとフォームへ移動します。
（ここにバナー画像を配置 → GoogleフォームURLをリンク設定）
このようにしておくと：
スマホで読んでもわかりやすい
「Topページ→固定ページ→Googleフォーム」という導線が整理される
見学・入会のどちらの人にも対応できる
各バナーにリンクを設置しよう
GoogleフォームURLを、バナー画像のリンク先に設定します。
固定ページ・ウイジェットの共通サイドバーのバナーは、
すべて同じURLを使うことで管理が簡単になります。
STEP7:free予約を活用しよう
💅 free予約とは？
free予約（旧tol） は、
利用者が「空き時間を見ながら希望日時をその場で予約できる」外部サービスです。
管理画面で予約状況を自動整理できるため、
電話やメールのやり取りを減らし、スムーズにスケジュール管理が行えます。
予約ページ上で「空いている日時」をリアルタイムで確認でき、
利用者がそのまま希望日時を選んで申し込みできます。
💡メールフォームとの違い
→ フォームでは一度“問い合わせ”を受けてから調整しますが、
Free予約では、申し込みとスケジュール確定が同時に行える点が特徴です。
💡 どうやって使うの？
WordPress用の予約プラグインもいくつか試しましたが、
デザインと操作性の両立が難しかったため、
本サイトでは 外部サービス「free予約」でURLを発行し、HPにリンクで紐づける方法 を採用しています。
外部URLを使うことで、テーマやプラグインの影響を受けず、安定的に運用できます。
🧱 設置方法の考え方
free予約にアクセス。アプリをダウンロードし、指示に従い設定していきましょう。
ここでは、体操教室DEMOの「個人レッスン」を例に流れを簡単に説明します。
🪄 free予約の設定の流れ（例：個人レッスン）
free予約は、まず「事業所（ショップ）」を作成してURLを発行します。
その後、営業時間やサービス内容を登録していきます。
詳細は、（再編成）4-5-2-3.free予約（無料プラン）で簡単な外部予約サービスを構築に記載しています。そちらもご覧ください。
🔸手順の概要
1️⃣ 事業所を登録 → URLが発行される
これがあなた専用の「予約ページURL」になります。
このURLをホームページやバナーにリンクさせることで、
利用者は直接予約画面へ進めます。
2️⃣ 営業時間を設定
予約カレンダーに表示される時間帯を設定します。
営業時間は後から変更可能ですが、無料プランでは複数の時間帯を登録することはできません。
（午前・午後のクラスを分けたい場合は、ショップを別に作る必要があります）
📘今回の設定例：
- 営業時間：土曜日 16:00〜19:00
- 予約間隔：前後の確保時間 0分
- 所要時間：30分
3️⃣ サービスを設定
1つのショップ内に複数のサービスを追加できます。
今回は「個人レッスン（30分）」を作成し、料金を設定しました。
すると、以下のようなカレンダーが自動で生成されます👇
📷（例：個人レッスン予約画面）
💡運用のポイント
- 営業時間は後から変更可能。ただし、無料プランでは複数パターン登録は不可。
午前・午後・曜日別にしたい場合はショップを分けましょう。 - 予約ブロック機能は有料プラン限定。
無料プランでは、手動で確認・承認する運用になります。 - 予約通知メールが届くので、スマホからもすぐ確認できます。
🧩 WordPressでの使い方
Free予約で発行されたURLを、
固定ページのバナーや共通サイドバーにリンク設定します。
例：
- 固定ページ：「ご予約・お問合せ｜個人レッスン（Free予約）」に説明＋バナーを配置
- 共通サイドバーにも同じバナーを設置
👉 どのページからでも「予約ページ」へアクセスできる導線が完成します。
📱 運用のイメージ
1️⃣ 利用者：スマホから希望日時を選んで申し込み
2️⃣ 管理者：free予約の管理画面で内容を確認
3️⃣ 予約が入るとメール通知が届く
Googleフォームと同様、
「公開＝URL発行 → HPにリンク」するだけなので、とても簡単です。
💬 まとめ
free予約は、
「予約が発生するサービス（教室・レッスン・整体など）」に最適な外部ツールです。
WordPress内部に無理に組み込むよりも、
“外部URLリンク方式”で管理を分ける方が安全で安定的に運用できます。
STEP8:Googleカレンダーで自分のスケジュールを管理しよう
🔸 なぜGoogleカレンダーで管理するの？
ここまでで、
・Googleフォーム（見学・入会）
・Free予約（個人レッスン）
・イベント依頼フォーム（日曜イベント）
と、さまざまな「申し込み窓口」ができました。
これらの情報はすべてメールで届きますが、
日々のスケジュールをメールだけで管理していると、
「どの日に、どの予約が、何件あるのか」
が分かりづらくなってしまいます。
💡そんなときに便利なのが Googleカレンダー です。
フォームや予約内容を確認したあと、自分で予定を登録していくことで、
スケジュールが一目でわかるようになります。
🔸 カレンダーの作り方
1️⃣ Googleカレンダーを開く
Googleアカウントにログインし、Googleカレンダーを開きます。
2️⃣ 専用カレンダーを作成する
左側の「その他のカレンダー」→「＋」→「新しいカレンダーを作成」から、
名前を「からだリズム体操教室」にします。
3️⃣ 色分けルールを作る（おすすめ）
| 分類 | 登録内容例 | 色 |
|---|---|---|
| 火曜クラス | 見学・入会希望など | 💙 青 |
| 木曜クラス | 高齢者施設訪問 | 💚 緑 |
| 土曜クラス | 個人レッスン（Free予約） | 💛 黄 |
| 日曜イベント | 出張依頼・イベント開催 | ❤️ 赤 |
→ こうしておくと、スケジュール全体がとても見やすくなります。
🔸 登録のコツ（あなたにおすすめの方法）
GoogleフォームやFree予約から連絡が来たら、
「確認後に自分の手で登録」するのがベストです。
自動反映もできますが、
教室運営は単なる予約処理ではなく、準備や段取りが必要な仕事です。
📌 たとえば：
- 見学希望 → 事前に会場確認・持ち物案内
- イベント依頼 → 打ち合わせ・見積り・資料準備
- 個人レッスン → 時間調整・道具確認
このように、「登録＝意識して予定を整理する」ことが大事です。
🔸 実際の登録方法（例）
| タイトル | 内容 | 時間 | メモ欄 |
|---|---|---|---|
| 【見学】山田様（火曜クラス） | メール送信済み／持ち物案内済み | 11/12(火) 13:00〜14:00 | フォームNo.23 |
| 【イベント】○○町文化祭 | 親子体操依頼／担当：佐藤様 | 11/30(日) 13:00〜15:00 | 打ち合わせ11/20予定 |
| 【個人】佐々木様（Free予約） | 30分個人レッスン | 12/7(土) 16:00〜16:30 | Free予約No.5 |
→ このように「タイトルで見分け、メモで進行状況を管理」します。
💬 まとめ
Googleカレンダーは、
自分の仕事を整理して、流れを止めないための“確認ボード”です。
自動化よりも、
自分で登録することで
👉 見落とし防止
👉 準備・連絡の計画
👉 教室運営全体の流れの把握
がスムーズになります。
「受ける」「考える」「動く」をセットで管理する──
それがSTEP8の目的です。
✨補足：運用の黄金ルール
- フォーム通知が届いたら、まずカレンダーに入れる
- 確定前でも「仮予約」として記入しておく
- 毎週月曜朝に「今週の予定」を自分で見直す
- 打ち合わせ・連絡予定も全部カレンダーに入れる
これで、
「受ける仕組み（STEP6〜7）」＋「管理する仕組み（STEP8）」が揃いました。
まさに、教室運営のワンストップ導線完成です 🎉
✅ まとめ
ここまでで、「からだリズム体操教室」DEMOサイトの構成がすべて完成しました。
SWELLテーマを使い、トップページから予約・お問合せまでの導線を
一貫して整えることで、見やすく・分かりやすく・使いやすいサイトに仕上がりました。
今回の構成ポイント：
- STEP1〜2：着せ替え導入と固定ページ構成
- STEP3〜4：メニュー・ウィジェットで全体導線を整理
- STEP5〜6：イベントカレンダー紹介・Googleフォームで申し込み窓口を設置
- STEP7：Free予約で個人レッスンのオンライン予約を実装
- STEP8：Googleカレンダーで運営スケジュールを整理
このように、外部ツールを上手に組み合わせることで、
WordPressの操作だけに依存せず、
「運営に必要な動線」をすべて実装できました。
フォームからの申込 → 通知確認 → カレンダー記入
という流れができていれば、
一人運営でも十分に効率的なスケジュール管理が可能です。
🔽次に読むならこちら！
長丁場お疲れさまでした！次は、RESERVAと公式ラインを組み合わせた予約方法の構築です。
LINE公式アカウントの設定方法も紹介しています。
美容・教室・サロン系のサイトを作る方におすすめの記事です。
コメント