今回は、SWELLの「着せ替えデザイン」機能をベースに、
教室サイトのトップページ構成を実際に設計していきます。
デモサイト「からだリズム体操教室」を例に、
教室紹介・スケジュール・レッスン案内・アクセス情報など、
サイト全体をつなぐ導線を整理しながら“見せ方の設計”を行いました。
この【前編】では、主にデザインと構成を中心に、
SWELLのブロック・ウィジェットを活用した作り方を紹介します。
※後編では、XOカレンダーやGoogleフォームなどを連携し、
実際に「動くホームページ」を作る実装編を解説しています。
説明アイコン 今回のデモでは、体育学科出身の先生が個人で運営する体操教室を想定しています。
曜日ごとに活動場所が違うため、SWELLの着せ替え＋カレンダー連携＋free予約（旧tol）で、スケジュールや予約をわかりやすく見せる工夫に挑戦します！
この記事は、パン屋さんDEMOサイトからの応用編です。
・各種ナビゲーションの設定
・ウイジェット設定
・固定ページの作り方
などは解説していません。そちらは
4-1. トップページを設定しよう｜SWELL子テーマで固定ページをフロント化
4-2. トップページの中身を作ろう｜固定ページとつなげる構成の考え方
4-3. トップページの構成を決めよう｜パン屋DEMOで学ぶ基本骨格とウィジェット設計
4-4. メニューを設置しよう｜グロナビ・フッターナビ・スマホナビの作り方
でご確認ください。
✅ 架空デモサイト設定
サイト名：「からだリズム体操教室|DEMO」
🏫 教室プロフィール
屋号： からだリズム体操教室
代表： 山本 恵（やまもと めぐみ）
経歴： ○○大学 体育学科 卒業。
子どもの発達支援運動、高齢者向け介護予防運動、ジム指導員など幅広く活動中。
現在は、各施設を巡回しながら、幅広い年代へ「体を動かす楽しさ」を伝えている。
📅 活動スケジュール
| 曜日 | 内容 | 場所 | 対象 | 時間 |
|---|---|---|---|---|
| 月曜 | お休み | － | － | － |
| 火曜 | 体操教室 | ○○市体育館 | 小・中学生 | 16:00〜18:00 |
| 水曜 | お休み | － | － | － |
| 木曜 | 高齢者健康体操 | ○○高齢者施設 | 高齢者 | 10:00〜11:30 |
| 金曜 | エアロビクス教室 | ○○ジム | 一般女性中心 | 13:00〜14:00 |
| 土曜 | 個別レッスン | ○○市体育館・他 | 小・中学生 | 16:00〜19:00（30分単位） |
| 日曜 | イベント・特別講座 | 各地・学校・ジム | 全年齢 | 不定期 |
💡 特徴
- 教室を「固定スタジオ」ではなく、出張型・巡回型で運営
- 教室内容や場所が日によって異なるため、スケジュール管理が重要
- 予約フォームやカレンダー連携などを使って、自動化・見える化を検討中
🌐 サイト構成（SWELL着せ替えデモ想定）
| ページ | 目的・内容 | 備考 |
|---|---|---|
| トップページ | 教室紹介・スケジュール・お知らせ | 着せ替えデザインで「活発＆清潔感」 |
| 教室について | 講師紹介・理念・対象年齢など | 経歴と安心感 |
| スケジュール | XO Event Calendar | 曜日毎の予定・イベントを入力 |
| レッスン案内 | 内容・料金・開催場所案内 | 地図リンクあり |
| ご予約・お問合せ | Googleフォーム＋LINEリンク＋free予約＋Googleカレンダー | 予約自動化を試行 |
| ブログ／活動記録 | イベント報告や体の豆知識 | 更新頻度を自由に設定 |
🧠 自動化アイデア（SWELL＋WordPress＋外部ツール連携でできること）
| 機能 | 実装アイデア | 運用メモ |
|---|---|---|
| ✅ スケジュール管理 | XO Event Calendarで週ごとの定期教室＋不定期イベントを登録。 生徒にはカレンダーで見せ、講師側はGoogleカレンダーで内部管理。 | Googleカレンダーは非公開の「自分用予定表」として利用。 |
| ✅ 教室申込フォーム | Googleフォームで「見学希望」「入会希望」などを1次受付。 チェック式・記述式で必要情報を自動収集。 | 授業中に電話を取れない課題を解消し、やり取りの記録も残せる。 |
| ✅ 個人レッスン予約 | **Free予約（旧tol）**を活用。 30分単位の個人レッスン枠を設定し、WordPressの「個人レッスン」ページにリンクを設置。 | tol側で自動受付・リマインド・キャンセル管理まで完結。 予約の管理はGoogleカレンダーで。 |
| ✅ 定期予定表示 | 毎週の固定スケジュール（例：火・金・土）をXO Event Calendarで登録。 単発イベント（日曜）も同カレンダーで一元管理。 | トップページや「スケジュール」ページに埋め込み。 |
| ✅ 地図表示 | 使用施設ごとにGoogleマップを埋め込み、 「アクセス」ページにまとめて掲載。 | 体育館・ジム・福祉施設など、複数拠点運営にも対応可能。 |
📮 作成するGoogleフォーム一覧（運用目的別）
| フォーム名 | 想定ユーザー | 主な目的 | 設問内容例 | 備考 |
|---|---|---|---|---|
| ① 火曜日の体操教室フォーム | 保護者・生徒本人 | 見学希望・入会申し込み | 名前／学年／希望日／連絡先 | XO Event Calendarの「火曜クラス」ページからリンク誘導 |
| ② 木曜・高齢者施設向けフォーム | 施設運営者・担当者 | 出張教室の依頼・問合せ | 施設名／希望日時／対象人数／電話・メール | 「法人向け案内ページ」からリンク誘導 |
| ③ 日曜イベント・特別教室フォーム | 一般参加者・親子・団体 | イベント参加申し込み・質問受付 | 名前／人数／希望プログラム／連絡先 | スケジュールページまたはお知らせ投稿から誘導 |
🎯 tol（Free予約）の役割
- 対象：個人レッスン（土曜16:00〜19:00）
- 運用方法：
- tolで30分単位の枠を設定
- 予約ページURLをWordPress固定ページ「個人レッスン」に設置
- tolで自動返信・キャンセル処理
- Googleカレンダーで全体スケジュールを管理（非公開）
- メリット：
- 保護者が即予約できる
- 講師側は自動で予定が入る（メール通知＋リマインド）
🚪 ジム開催クラスの扱い
- 対象：金曜の○○ジム教室
- 方針：ジムの公式HPが案内・受付を担っているため、
→ 自サイトでは「紹介＋リンクのみ」に留める。 - WordPress上の記載例：
> 金曜日は○○ジムにてエアロビクス教室を行っています。<br>詳しい内容・お申し込みは○○ジム公式サイトをご覧ください。
✅ この構成でできること
ホームページは「連絡手段」ではなく「業務の仕組み」にできる。
SWELL＋Googleフォーム＋tol（Free予約）＋XOカレンダーで、
ひとりでも、見やすく・伝わりやすく・無理なく続けられる教室運営が実現できる。
説明アイコンすべてを一つの仕組みに詰め込む必要はありません。
定期教室はカレンダーで見える化、申込はGoogleフォーム、個人レッスンはtolで予約受付。
これだけで、ひとり運営でも無理なく管理できる仕組みになります。
🎨 デザインテーマ方針（着せ替え）
- カラー： 青 × オレンジ（スポーティで爽やか）
- フォント： 丸ゴシック（親しみやすい印象）
- ヒーロー画像： 体育館やエアロビ風景、子どもたちの笑顔、ストレッチ姿勢など
- キャッチコピー案：
「動くって、こんなに楽しい！」
「子どもも大人も、いきいきカラダ時間」
それでは、この体操教室の設定をもとに、実際にホームページを作っていきましょう。
SWELLの「着せ替えデザイン」機能を使えば、初期デザインの導入からカスタマイズまで、驚くほど短時間で整ったサイトが完成します。
この記事では、次の流れで進めていきます。
- STEP1： 着せ替えデザインを導入する（SWELLデモデータの読み込み）
- STEP2： 固定ページの構成・各種ナビゲーションを設定する（グローバル・フッター・スマホ用）
- STEP3： ウィジェットで構成を整える（バナー・カレンダー・サイド等）
- STEP4： トップページの内容を設計する（導線・見せ方を決める）
- STEP5： カレンダーを設置してスケジュールを見える化する（XO Event Calendar）
- STEP6： Googleフォームでお問い合わせ・申し込みフォームを作成する
- STEP7： フォーム回答をGoogleカレンダーで管理する（非公開運用）
説明アイコンこの章では、体操教室デモサイトを実際に作りながら、
見た目のデザインだけでなく、問い合わせ・予約・スケジュール管理まで仕組みを整える流れを体験していきます。
STEP1：着せ替えデザインを導入する（SWELLデモデータの読み込み）
💡 ここでやること
- SWELL公式の「着せ替えデザイン」を使って、初期デザインを導入
- トップページ・ブログ・見出しデザインなどが一瞬で整う
- あとで自分の写真や文章に差し替えるだけの状態を作る
説明アイコンSWELL子テーマを有効化したところから話を進めますよ。
🔧 着せ替え手順
着せ替えDEMOが6種類用意されています。今回はDEMO２を選択しました。下のボタンから公式サイトに移動します。お好きなものをダウンロードしてください。
Zipファイルをダブルクリック→展開をクリック。これで、解凍されたファイルが出来ます。
STEP２で解凍したファイルを選択し、インポートをクリック
📷 デモインポート後の表示
💡 ポイント
- SWELLの「着せ替え」では、ウィジェット・トップページ構成・メニュー位置まで自動設定される。
- HTMLやCSSの知識がなくても、5分で“形のあるサイト”が完成。
- あとは文字・写真を差し替えるだけで、オリジナルサイトに仕上がります。
STEP2： 固定ページの構成を考える（どんなページを作るか整理）
体操教室デモサイトに必要な固定ページと、その配置（ナビゲーション構成）を考えていきます。
まずは、どんなページを作る必要があるかを一覧で整理してみましょう。
📘 必要な固定ページ一覧
| タイトル | スラッグ | ナビゲーション |
|---|---|---|
| トップページ | / | グロナビ |
| 教室について | /about/ | グロナビ |
| レッスン案内 | /lesson/ | グロナビ |
| スケジュール | /schedule/ | グロナビ |
| ご予約・お問合せ | /contact/ | グロナビ／フッター |
| アクセス | /access/ | グロナビ／フッター |
| ブログ（お知らせ） | /blog/ | グロナビ |
| プライバシーポリシー | /privacy-policy/ | フッター |
中でも、曜日によって活動内容や会場が異なるため、
次の3つの項目では「子メニュー」を設ける構成にします。
📂 子メニューを設けるページ
| 親ページ | 子ページタイトル | スラッグ |
|---|---|---|
| レッスン案内 | 火曜クラス（体育館） | /lesson/tuesday/ |
| 〃 | 木曜クラス（高齢者） | /lesson/thursday/ |
| 〃 | 金曜クラス（ジム） | /lesson/friday/ |
| 〃 | 土曜クラス（個人レッスン） | /lesson/saturday/ |
| 〃 | 日曜イベント | /lesson/sunday/ |
| ご予約・お問合せ | 火曜クラス見学・入会フォーム | /contact/tuesday/ |
| 〃 | 木曜クラス（施設向け）フォーム | /contact/thursday/ |
| 〃 | 日曜イベント申込フォーム | /contact/sunday/ |
| 〃 | 個人レッスン予約（tol） | /contact/private/ |
| アクセス | ○○市体育館 | /access/gym1/ |
| 〃 | ○○ジム | /access/gym2/ |
💬 ポイント
まずは、内容が空のままで構いません。
ここで挙げた固定ページをすべて作成し、ナビゲーションに配置してみましょう。
メニュー構成を形にするだけで、サイト全体のイメージがぐっと具体的になります。
「からだリズム体操教室」の設定解説
１．メインビジュアルに動画を設定。
・メインビジュアルの高さ | ウインドウサイズにフィットさせる
・PC用とSP用でそれぞれ作成（１６：９と９：１６）文字を入れる場合は、切れないか確認しながら作成
・ポスター画像もPC用、SP用それぞれ作成
２．「ヘッター」設定
・ヘッダーの会計を透明にするかどうか→する（文字色：白）
・透過時のロゴ画像を設定（ファビコンと同じものを設定）
・ヘッダーの追従設定→追従させるに✔
説明アイコン透過することで、動画が全画面に表示され迫力があります。
グロナビが見にくいですが、追従させることで、下に帯色が出ます。
３．お知らせバーを非表示にする
・サイト全体設定→お知らせバー→表示しない
・各種ナビゲーションを設定する
👆はグロナビです。今回、子メニュー（サイドメニュー）を採用しました。
STEP3：ウィジェットで構成を整える（バナー・カレンダー・サイド）
🧭 サイト全体の構成図（ウィジェット配置イメージ）
サイドバーに“曜日別バナー”を設置する
- 外観 → ウィジェット → 共通サイドバー
- 「画像」ウィジェットを9個追加
- バナー画像を作成し（今回360×180で作成）＋各種固定ページへのリンク設置
説明アイコンSWELLではサイドバーに「バナー」を並べると、
見た目にも分かりやすく、スマホでは本文下に表示されます。
グロナビと重複しても問題ありません。行動導線を増やすのが目的です。
フッター直前に「イベントカレンダー」を設置
- XO Event Calendarを使用
- 外観 → ウィジェット →「イベントカレンダー」を フッター直前 に追加
💬 ポイント
フッターの手前にカレンダーを置くことで、
更新がなくてもサイトが“動いて見える”効果があります。
フッターエリア3分割に情報を配置
| カラム | 内容 | ウィジェットタイプ |
|---|---|---|
| 左（PC1） | 最近の投稿・アーカイブ | 最近の投稿・アーカーイブウィジェット |
| 中央（PC2） | カテゴリー | カテゴリーウイジェット |
| 右（PC3） | アクセス（体育館・ジム） | テキスト or カスタムHTML |
説明アイコンこのように、ウィジェットとナビゲーションを整えるだけで、
サイト全体の骨格ができあがります。
次のSTEPでは、それぞれのページに具体的な内容を入れていきます。
STEP4:トップページの内容を設計しよう
今回のデモサイトでは、トップページの中に
「教室紹介 → スケジュール案内 → レッスン紹介 → 予約・お問合せ → アクセス・地図 → ブログ投稿一覧」
の流れで構成しました。
それぞれ、対応する固定ページの抜粋（要約）を掲載し、
最後に「▶詳しくはこちら」ボタンで固定ページへ誘導する形です。
この方法をとると、トップページだけでサイト全体の概要が伝わるうえ、
どのページからでも目的の情報へ迷わず進めるようになります。
いわば、トップページを“サイトマップ兼ランディングページ”にする構成です。
💡今回のテクニック紹介
ここでは、実際に構築する中で気づいたポイントや、
SWELLならではの便利な使い方をいくつか紹介します。
背景画像設定と「コンテンツ背景を白にする」
背景画像を設定する場合、
「コンテンツの背景を白にする」をオフにすると、
文字を背景の上に直接配置することができます。（カスタマイズ→基本デザイン）
ただし、背景を写真にすると文字が読みにくくなることが多いので、
基本的にはオンのままが無難です。
淡い色やパターン柄の背景なら、オフにしても見やすく仕上がります。
フッター直前のカレンダーへジャンプする
今回、XOカレンダーは「フッター直前」というウィジェットに設置しています。
ただ、トップページが長くなったため、すぐにカレンダーが見られません。
そこで、スケジュール案内の最後に「📅 カレンダーはこちら」というリンクを配置し、
クリックするとページ下部のカレンダーまで自動でスクロールするようにしました。
ジャンプ先を指定するため、
「フッター直前」ウィジェットの中に 「カスタムHTML」ブロック を追加し、
以下のコードを入れています👇
<!-- wp:html -->
<a id="calendar"></a>
<!-- /wp:html -->
これで、ボタンブロックのリンク先を「#calendar」に設定するだけで、
ページのどこからでもXOカレンダーの位置までスムーズに移動できます。
固定ページの抜粋をトップページに載せる
まず最初に、「教室紹介」「レッスン案内」「アクセス」など、
各コンテンツの固定ページをしっかり作り込みます。
そのあと、トップページでは、
それぞれのページの大事な部分だけをコピーして抜粋し、
「▶ 詳しくはこちら」ボタンで本ページ（固定ページ）へ誘導する構成にしています。
こうしておくと、
トップページを読むだけで全体像がわかり、
気になった部分はすぐに詳細ページに進めます。
「抜粋を載せて、深掘りはリンクで見せる」――
とてもシンプルですが、閲覧者にとって分かりやすい構成です。
レッスン案内セクションに「リッチカラム」を使用
「レッスン案内」セクションでは、
SWELLの リッチカラムブロック を使い、
各教室のバナーを 横スライド形式で1列表示 にしました。
各バナーには、
- 教室の写真（バナー画像）※クリックで各固定ページに移動
- 教室内容を2行程度で紹介するテキスト
を配置しています。
この構成により、
見た目はシンプルでも、どの教室も統一感のあるデザインで紹介できます。
また、同じバナーを 共通サイドバー にも設置し、
どのページからでも各教室ページへスムーズに誘導できるようにしています。
SWELLのウィジェットにブロックを埋め込む裏ワザ
SWELLのウィジェットでは、
通常ブロックをそのまま追加できません。
ただし、「ブロックHTML」を利用すれば埋め込みが可能です。
１．投稿または固定ページで目的のブロック（例：投稿リスト）を作る
２．右上メニュー → 「コードエディター」に切り替える
３．コードをすべてコピー
４．外観 → ウィジェット → 「ブロックHTML」欄に貼り付け
これで、ブロックのデザインをウィジェットでも再現できます。
投稿リストやボタンブロックなども使えるようになるので、
サイドバーやフッターの自由度が一気に広がります。
🔽次に読むならこちら！
ここまでで、トップページの構成と導線が完成しました。
次回は「後編」として、
XOカレンダー・Googleフォーム・tol（Free予約）・Googleカレンダーを連携し、
教室運営を“自動化”する仕組みを作っていきます。
後編はこちら👇
コメント