ヨガ・ピラティス・フィットネススタジオのWebサイトに時間割を載せる方法。予約システムの埋め込みかCMSか、変更の反映、スマホでの見やすさ、構造化データの考え方

この記事の結論：ヨガ・ピラティス・フィットネススタジオのWebサイトに時間割（レッスンスケジュール）を載せる方法は、①画像やPDF、②予約システムの埋め込み、③CMSで時間割を持つ、の3通りです。選ぶ基準は「時間割の正本（いちばん正しい元の記録）をどこに置くか」で、予約をWebで受けているなら予約システムを正本にし、サイトはその内容を見せる側に回すのが、休講や代行の反映漏れをいちばん減らせます。CMSで持つ場合は、毎週の定番の枠と、その日だけの変更を別々に入力する作りにします。スマホでは曜日ごとの縦のリストで見せ、表の横スクロールに頼りません。構造化データは、時間割よりもスタジオの所在地と営業時間を正しく書くことを優先します。

この記事は、ヨガやピラティス、グループレッスンのフィットネススタジオの運営者で、Webサイトの時間割のページを作る、または見直したい方と、そのページを作る制作担当者に向けた記事です。回数券や月謝の残りの管理など、予約の裏側の仕組みには深入りせず、「サイトにどう載せるか」に絞ります。

時間割の載せ方は3通りあり、正本をどこに置くかで選ぶ

時間割をサイトに載せる方法は、画像やPDF、予約システムの埋め込み、CMSでの管理の3通りで、どれを選ぶかは「休講や代行が出たとき、どこを直せば全部に反映されるか」で決めます。正本が2か所あると、片方だけ直して食い違う事故が起きます。

最後の行は、予約システムがクラスの一覧を外へ渡す機能（APIやカレンダー形式の書き出しなど）を持っている場合だけ選べる方法です。使っている予約サービスの機能を、選ぶ前に確かめます。

画像やPDFの時間割は、変更の反映と読みやすさで困る

画像やPDFの時間割は作るのが手軽な一方、変更のたびに作り直しが要り、スマホで読みにくく、文字としても読まれないという3つの弱さがあります。時間割が月に何度も変わるスタジオには向きません。

すでに画像で載せている場合は、まず同じ内容を文字の一覧でも載せ、画像は印刷用のおまけに回すところから始めると、作り直しの負担が小さく済みます。

予約システムの埋め込みは、予約の操作だけを任せる

予約システムの画面をサイトに埋め込む方法は、空き状況と予約の操作を1か所で済ませられるのが利点ですが、埋め込んだ部分の見た目と検索での扱いは予約サービス側の作りで決まります。クラスの説明は自社のページに文字で書き、予約の操作だけを埋め込みに任せる分け方がおすすめです。

埋め込みは、多くの場合 iframe という仕組みで、予約サービスのページを自社ページの中の枠に表示しています。robots メタタグについてのGoogleの説明では、iframe などで別のページに埋め込まれたコンテンツはインデックスに登録されうること、埋め込まれる側のページが noindex に indexifembedded を組み合わせると、埋め込まれたときだけ登録の対象になることが書かれています。埋め込んだ時間割が、自社ページの内容として読まれるかどうかは、予約サービス側の設定次第ということです。

埋め込みがうまく収まらないときは、時間割のページには曜日ごとの一覧を文字で載せ、各クラスの「予約する」ボタンから予約サービスの画面へ移る形にしても、予約の操作は予約システムの1か所にまとまります。

CMSで持つなら、毎週の定番の枠とその日だけの変更を分けて入力する

CMSで時間割を持つときは、「毎週火曜の19時からピラティス初級」のような定番の枠と、「10月14日は代行」「10月21日は休講」のようなその日だけの変更を、別々の入力欄にします。1週間分の表を毎回入力し直す作りにすると、手間が増えて更新が止まります。

ページを表示するときは、定番の枠から表示する週の予定を組み立て、その日だけの変更を上から重ねます。データの形のイメージは次のとおりです。

{
  "regular": [
    { "weekday": "tue", "start": "19:00", "end": "20:00", "class": "pilates-basic", "instructor": "staff-a", "validFrom": "2026-10-01" }
  ],
  "exceptions": [
    { "date": "2026-10-14", "weekday": "tue", "start": "19:00", "type": "substitute", "instructor": "staff-b" },
    { "date": "2026-10-21", "weekday": "tue", "start": "19:00", "type": "cancel", "note": "館内点検のため" }
  ]
}

適用を始める日と終える日を定番の枠に持たせておくと、来月からの新しい時間割を前もって入力しておき、切り替えの日に自動で入れ替わるようにできます。

変更の反映は、誰がどこを直すかを1つの手順にする

休講や代行を反映する作業は、正本を直す人と、その確認の手順を1つに決めておきます。予約システムとサイトの両方に時間割がある場合は、予約システムを先に直し、サイトはそれに合わせる順番を固定します。

1. 代行や休講が決まったら、担当者が正本（予約システムまたはCMS）の「その日だけの変更」を入力する
2. すでに予約している人がいれば、予約システムやLINEから連絡する
3. サイトの時間割のページをスマホで開き、変更が表示されているか確かめる
4. 店頭の掲示や、SNSの固定投稿に時間割を載せている場合は、そこも直す

予約システムを正本にしていても、回数券や月謝で来る人の受講の記録が店頭と予約システムに分かれていると、別の二重管理が起きます。その設計は、クラス予約と回数券・月謝の管理の記事で扱っています。

スマホでは曜日ごとの縦のリストにし、表の横スクロールに頼らない

スマホの時間割は、1週間分の表を横にスクロールさせるより、曜日ごとのタブや見出しで区切った縦のリストにし、開いたときに今日の曜日を最初に出す作りが読みやすくなります。1つのクラスを1行のカードにし、時刻、クラス名、レベル、担当、予約ボタンを並べます。

アクセシビリティの国際的な指針であるWCAG 2.2の達成基準1.4.10（リフロー）は、幅320 CSSピクセル相当の画面で、縦方向のスクロールだけで情報と機能を失わずに読めることを求めています。データの表のように2次元の配置が意味を持つ部分は例外とされていますが、時間割は曜日ごとのリストに組み替えても意味が変わらないので、リストにしておくほうが無難です。

色だけで情報を伝えないことは、WCAG 2.2の達成基準1.4.1（色の使用）でも求められています。休講の枠を灰色にするだけでなく、「休講」と文字でも書きます。

構造化データは、時間割よりスタジオの情報を正しく書くことを優先する

時間割のページに構造化データを付けて、検索結果に時間割を出すことは、今のところ期待しないほうが無難です。それよりも、スタジオの名前、住所、営業時間を、ページの文章と構造化データで同じ内容にそろえることを優先します。

イベントのマークアップに関してGoogleがまとめた開発者向けの説明は、イベントの検索機能が使える地域と言語の一覧に日本を含めておらず（2026年10月3日確認）、イベント機能は1つのイベントを対象にしたページだけをサポートし、スケジュールや複数のイベントを並べたページではなくイベント情報のページにマークアップするよう案内しています。また、営業時間の情報をイベント扱いでマークアップしないことも求めています。

構造化データより大事なのは、時間割とクラスの説明が、ページの本文に文字で書かれていることです。検索エンジンもAIの検索も、まず本文の文字から内容を読み取ります。

株式会社bundlyzeではサイトの制作をお受けしており、スタジオのような予約で動くお店のサイトでも、時間割を見せるページと予約の入口のつなぎ方から一緒に考えられます。制作の流れはサイト制作についてのページに載せています。

このページで参照した資料（2026年10月3日に読んだ版）

• Google 検索セントラル：イベント（Event） 利用できる地域と言語／1つのイベントを対象としたページ／営業時間をイベント扱いにしない
• Google 検索セントラル：robots メタタグの仕様 indexifembedded の項
• Google 検索セントラル：LocalBusiness 型の説明
• Schedule の型（schema.org）
• Web Content Accessibility Guidelines (WCAG) 2.2（W3C）：1.4.1 色の使用、1.4.10 リフロー
• Understanding Success Criterion 1.4.10: Reflow（W3C）：2次元の配置が要る内容の例外