「比較されている瞬間」に向けた構成
コース、時間割と空席状況、誰が教えるのか、費用、場所、始め方。保護者が知りたい順にセクションが並んでいます。
10
トップページのセクション
4
専用ページテンプレート
0
カスタム投稿タイプ
WCAG 2.2 AA
準拠を目標に設計
こんな塾のために
サイトも自分で回す、オーナーのためのテーマ
想定するのは大手チェーンではなく、個人経営〜数教室規模の塾です。保護者が比較検討中に知りたいことに順番に答え、最後は無料体験の申し込みで終わる構成になっています。
全部ブロックエディタで編集できる
各セクションはコアブロックだけで作られたブロックパターンです。ページビルダーもショートコードも独自設定画面もありません。カードを選んで上書きするだけです。
「読みやすさ」がそのまま強み
読むのは保護者世代、しかも夜のスマホがほとんどです。ゆったりした行間、ネイビー＋アンバーの落ち着いた配色、そしてヘッダーの文字サイズ・コントラスト切り替え。
トップページ
10セクション、積み上げ済み
トップページは1ページ完結型のLP構成です。各セクションは独立したブロックパターンなので、サイトエディターで並べ替え・削除・個別ページへの複製が自由にできます。
- ヒーロー見出し・リード文と、2つの主要CTA（無料体験の予約／電話）。
- コースの紹介写真・特徴・対象学年チップ付きのコースカードと、詳細ページへのリンク。
- 週間スケジュール曜日×時限の時間割。空席状況は色ではなく文字で表示。
- 講師紹介顔写真・担当科目チップ・経歴・ひとことメッセージのプロフィールカード。
- 合格者の声・体験談保護者・生徒の声を静的グリッドで。カルーセルは使いません。
- 入塾までの流れ問い合わせから初回授業までを4ステップで図解。
- よくある質問ネイティブの
core/detailsブロックによるアコーディオン。 - 教室案内地図カード・道順・開講時間・電話パネル。
- 無料体験CTA電話とフォームの導線を並べた、締めのコンバージョン帯。
- お知らせ「announcements」カテゴリーの最新記事を3件表示。記事が無いうちは空状態メッセージを表示。
差し替え用として 合格実績（写真オーバーレイ） パターンも同梱しています。全面写真の上に暗幕を80%固定で重ねる作りなので、オーナーがどんな明るさの写真を入れても数字が読めるコントラストを保てます。実績が一番の売りなら、ヒーローの上に差し込んでください。
この場で試せます
ふつうならプラグインが要る部分
テーマ本体のコンポーネントを、このページ上で動かしています。テーマ内での挙動もこのままです。
週間スケジュール
状態は色ではなく文字で
| 時限 | 月 | 火 | 水 | 木 |
|---|---|---|---|---|
| 1限 · 16:00–17:30 | 小学生開講 | — | 小学生開講 | — |
| 2限 · 17:40–19:10 | 中学生開講 | 中学生満席 | 中学生開講 | 中学生空席少し |
| 3限 · 19:20–20:50 | — | 高校生開講 | — | 高校生空席少し |
オーナーが手で更新する静的なテーブルです。予約システムにはしていません（この価格帯で作り込めば、保守コストがそのまま塾側の負担になるため）。
アクセシビリティツールバー
押して試せます
まずは1回、授業を受けてみてください。
入塾テストなし、勧誘の電話もありません。
空席少しテーマ本体では、どちらの設定もlocalStorageに保存され、次回訪問時は描画前に復元されます。設定が一瞬戻って見える「ちらつき」が起きません。
FAQアコーディオン
ネイティブ <details>／JS不要
振替授業はできますか？
このように、質問5件がサンプルとして入った状態で届きます。1件ずつが core/details ブロックなので、その場で書き換えるだけです。
体験期間はありますか？
キーボード操作もスクリーンリーダー対応もブラウザ標準の機能に任せているため、独自ウィジェットのようにWordPress更新で壊れる心配がありません。
デザイントークン
すべて theme.json 側
骨格は深いネイビー、アンバーはCTA専用、下地は温かみのあるアイボリー。書体はPlus Jakarta Sans / Be Vietnam Pro / Work Sansで、それぞれに日本語ゴシックのフォールバックを指定しています。色・文字サイズ・余白・角丸はすべてプリセットなので、印象を変えたいときもCSSではなく値を変えるだけです。
トップページの先へ
スラッグを付けるだけで組み上がる4ページ
該当のスラッグで固定ページを作成すると、レイアウトが自動で適用されます。貼り付け作業はありません。
コース紹介
学年別のコース詳細。集団指導と個別指導を並べて比較できる構成です。
授業料
料金表本体と、入塾金・教材費などの共通費用を別枠に分けた構成。
お問い合わせ
問い合わせフォームのレイアウト、地図、受付時間、電話バナー。
教室案内
教室ごとに1カード。カードを複製すれば教室が増やせ、1教室なら余りを削除するだけです。
投稿一覧・ブログホーム・個別投稿・固定ページ・アーカイブ・検索・404の各テンプレートも同じデザインで揃えてあります。加えてテンプレート選択に Blank と Page (No Title) の2つを追加しているので、自分でゼロから書きたいページにも使えます。
アクセシビリティ
保護者がページに留まる理由をつくる
WCAG 2.2 AAを基準に開発し、axe DevTools・WAVE・WebAIM Contrast Checkerでの自動チェックに加え、キーボードのみの操作確認とNVDAでの読み上げ確認を行っています。後付けではなく、開発工程の一部として組み込んでいます。
文字サイズ・高コントラスト切り替え
文字サイズは3段階の個別ボタン（押すたびに変わる循環トグルにはしていません）。どちらの設定もlocalStorageに保存し、描画前に復元します。
状態を色だけで表さない
空席状況をはじめ、状態表示には必ず文字ラベルを併記。高コントラストモードでも、色覚特性のある方にも同じ情報が伝わります。
キーボードと読み上げを前提に
セマンティックなランドマーク、スキップリンク、2pxのフォーカスアウトライン、そして独自アコーディオンではなくネイティブの <details>。
動きは「任意」
「動きを減らす」設定の環境ではスクロール演出を完全にスキップ。JavaScriptを無効にしても全セクションが表示されます。
Abira Academy独自のパターンについて、第三者機関による正式な監査は受けていません。アクセシビリティは各リリースの中で継続的に確認しています。詳細はテーマ同梱の accessibility.txt に記載しています。
つくりかた
あえて単純に。だから動き続ける
やらないと決めたこと
- カスタム投稿タイプを使わない — テーマを乗り換えてもデータが消えない
- 予約システム・料金シミュレーター・カルーセルを載せない
- ページビルダー、ショートコード、独自フレームワークを持ち込まない
- 外部画像サービスに依存しない — デモ写真はテーマ内に同梱
そのかわりに
- 全セクションがコアブロック。編集・複製・削除がオーナーの手で完結する
- 1ページ完結から、教室やコースが増えたら複数ページ構成へ拡張できる
- 日本語翻訳（ja.po / ja.mo）と、他言語対応用の .pot を同梱
- 子テーマ対応・GPLv3。Google Fontsの読み込みはフィルターでオフにできる
スペック
仕様
| テーマ名 | Abira Academy |
|---|---|
| バージョン | 1.1.0 |
| 価格 | ¥5,500（買い切り） |
| 種別 | 有料WordPressブロックテーマ（フルサイト編集対応）。独自配布で、WordPress.orgには掲載していません。 |
| ベース | WordPress公式配布の無料ブロックテーマ「Abira」を土台とした独立テーマ。アドオンでもフリーミアム版でもありません。 |
| 動作要件 | WordPress 6.5以上 ／ PHP 7.4以上（WordPress 7.0まで動作確認済み） |
| 言語 | 英語（原文）・日本語（ja.po / ja.mo）。翻訳用の .pot も同梱。 |
| タイポグラフィ | Plus Jakarta Sans / Be Vietnam Pro / Work Sans をGoogle Fontsから読み込み、それぞれに日本語システムゴシックのフォールバックを指定。読み込みは abira_academy_load_google_fonts フィルターで停止できます。 |
| 画像 | デモ画像2点を同梱（Google Geminiで生成、© 369work）。公開前に塾自身の写真へ差し替えることを推奨しています。 |
| ライセンス | GNU General Public License v3 以降 |
| 制作 | 369work ／ 369theme.com |
購入前に
よくある質問
無料テーマ「Abira」も必要ですか？
いいえ。Abira Academyは同じ土台から作られた独立テーマです。単体でインストールしてお使いください。無料版のAbiraはこれまで通りWordPress.orgで配布を続けており、購入とは関係ありません。
デモ写真と電話番号はどこで差し替えますか？
写真は通常の画像ブロックです。サイトエディターで選択し、「置換」→「メディアライブラリを開く」から入れ替えてください。電話番号はヘッダー・モバイル用アクションバー・ヒーロー・体験CTAに tel:03-XXXX-XXXX というプレースホルダーで入っています。トップページ内を検索して、それぞれ実際の番号に置き換えてください。
教室を2つ目以降に増やすには？
スラッグ classrooms で固定ページを作成すると、教室案内のレイアウトが自動で読み込まれます。教室を増やすときはカードのブロックを複製し、1教室ならほかを削除するだけです。管理すべき教室用の投稿タイプはありません。
あとから複数ページ構成に分けられますか？
できます。そのためのパターン設計です。各セクションを「Blank」テンプレートの個別ページに複製し、ナビゲーションのリンク先とページ内アンカーのリンクを差し替えてください。テーマの買い替えも作り直しも不要です。
親テーマとして使えますか？
はい。子ブロックテーマを作れば、テンプレート・パターン・スタイルのどれでも上書きできます。GPLv3なので、制作するサイトに合わせた改変も自由です。
Google Fontsの読み込みを止められますか？
止められます。子テーマまたはサイト専用プラグインに add_filter( 'abira_academy_load_google_fonts', '__return_false' ); を追加してください。theme.jsonのフォント指定が日本語システムゴシックにフォールバックするため、読みやすさは損なわれません。
日本語と英語で書体が違って見えるのはなぜですか？
同梱の3書体は日本語のグリフを持たないため、theme.jsonでそれぞれに日本語ゴシックを組み合わせています。欧文はブランド書体、和文はシステムゴシックで表示される仕様です。
この週末に、塾のサイトを公開する。
有効化して、写真と電話番号を差し替える。それだけで保護者に見せられる状態になります。¥5,500の買い切り、GPLライセンス。