2026.05.11

音楽教室の WordPress を全面改修、Astro と自前 CMS で丸 1 日でリビルドした

技術日記業務

はじめに

前回の記事(5/11 朝)を公開した直後から、丸 1 日で 72 コミット入りました。5/10 の終わりには「次はターゲット 3 業種に対する具体的な営業の動きに入る」と書いていたんですが、結局この日は 家族が営む音楽教室「Waltz」の旧 WordPress サイトを改修するために、Astro + 自前 CMS でリビルドする ことに1日。

ざっくり言うと:

WordPress + Lightning から Astro + Tailwind v4 へ全面移行: 朝 9:56 に scaffold。1 ヶ月前に「現状維持」と決めたばかりのサイトを全面改修
Cloudflare D1 + Pages Functions で自前 CMS を 5 分間で投入: Stage A → D を立て続けにコミット。途中で deploy が「Invalid database UUID」で落ちた。
タブ UI を 3 回作り直した: 2x2 グリッド → 4 列単行 + 指追従スワイプ
Hero デザインを 30 回イテレート: 雲・水彩丸・フォント(Yusei Magic → Hachi Maru Pop → Nikumaru 自前ホスト)・スクロールボタン
NewsSection の PICKUP 帯を 13 分で撤回: 全幅帯 → 上下細線スタイル
絶対音感トレーニング(ear-training)を統合: 教室サイトに音感ゲームを載せる差別化
公式 HP も並行で刷新: Hero タイポを Shippori Mincho に、StickyStack 演出移植、お知らせ 2 件公開、ページトップに戻るボタン追加

72 コミットあるので、時系列で書いていきます。

ピアノ教室のサイトの全面改修を決定。

Waltz の旧サイトは WordPress 6.9.4 + Lightning theme + Snow Monkey Blocks + VK Blocks という、いかにも国産有料テーマ系の構成でした。1 ヶ月前(2026-04-10 頃)には「現状の柔らかい個人教室感を維持したい」という結論で着地していました。

改修に至ったきっかけは小さくて、/onbit:blog:new-sprint(このスキル自体)を朝 8:23 に追加して 5/8〜5/10 のスプリント記録を draft 保存した直後、ふと「Onbit の自前 CMS を Waltz で本当に使ったらどうなるんだろう」と思ったこと。Onbit が 4/30 に設計した「Cloudflare Pages Functions + D1 + R2 のゼロコスト顧客向け CMS」を、商品として外に出す前に、まず妻の教室サイトで試したいという興味です。

そう思った時点で、WP の継続運用は選択肢から外れました。

旧サイト資産(投稿・画像・カスタム CSS)は .company/projects/waltz/ に Git 管理で保管
コード枠は apps/waltz/ に Astro 6 + Tailwind v4 で scaffold(1545897)
Cloudflare Pages の Root directory は apps/waltz/ に分離。repo root の wrangler.toml は Onbit 公式(apps/website/)用なので干渉しない

2.5分間で D1 + Pages Functions の自前 CMS を A → D で撃ち込んだ

ここが今回の山場。12:40 から 12:45 までの 5 分間に、Stage A → B → C → D の 4 コミット を連続で入れています。

時刻	Stage	内容	コミット
12:40	A	D1 schema + 認証基盤(users / sessions テーブル)	`48b7187`
12:41	B	スケジュール CRUD API(`functions/api/posts/`)	`891679d`
12:43	C	admin UI(login + 一覧 + 新規 + 編集)	`dd65fc4`
12:45	D	公開スケジュール(client-side fetch)+ seed スクリプト + README	`8d7ae80`

ここまでは綺麗だったんですが、初回 deploy で 「Invalid database UUID」エラーで Functions deploy が落ち、静的サイトの deploy も含めて全体が rejected されるというハマり方をしました(2f08861)。

Cloudflare Pages は wrangler.toml の database_id を deploy 時に厳格に validate する。REPLACE_WITH_ACTUAL_DATABASE_ID というプレースホルダが入ったままだと、まだ D1 を作っていない段階でも deploy が落ちる。しかも全体が rejected されるので、古い build が serve され続けて、別途やった「タブ中身が空で表示されないバグ」の修正(6fd520d)まで反映されない、という二次災害も発生しました。

解決は単純で、binding 全体をコメントアウトして静的サイトだけ先に publish。

# [[d1_databases]]
# binding = "DB"
# database_name = "waltz-cms"
# database_id = ""

CMS を稼働させるタイミングで npx wrangler d1 create waltz-cms で実 UUID を取り、コメントを外して push する運用に切り替えました。wrangler.toml のコメントにそのまま手順を書き残してあります。

posts テーブルは午後にもう一度拡張して(95e7682)、post_type を announcement(お知らせ)| schedule(スケジュール)の 2 種類に、category を piano | rhythmic | common の 3 種類に、さらに「全体で 1 件だけ」の is_pickup フラグを足しました。is_pickup=1 で投稿/更新するとほかのレコードの pickup は API 側で自動で解除する仕様。

学び: 「placeholder のまま deploy」は、deploy が部分的に通って気付かないのが一番怖い。Cloudflare Pages のように 全体 rejected で落ちるなら、まだマシ。気付ける。

3. タブ UI を 3 回作り直した

トップに「講師 / 料金 / スケジュール / アクセス」の 4 タブを置く構成にしたんですが、ここは見た目で 3 回作り直しています。

版	構成	結果
v1	4 タブを 1 行で並べる(`5b0498d`)	タブ中身が空のまま表示されないバグ → 修正(`6fd520d`)
v2	2x2 グリッド + 色分け縁取り(`b5b6891`)	4 つだと縦長すぎる
v3	4 列単行 + icon 上 / text 下 + 指追従スワイプ(`f5930b4`)	これに着地

タブパネル切替時に背景が一瞬白く抜ける見栄えの悪さも残っていて、ba62aa7 で背景を統一して解消。

学び: タブは「項目数 × 画面幅」で正解が変わる。4 項目 + モバイル幅なら 2x2 より 4 列単行 + 指追従スワイプの方が、サムネ感が出てタップしやすい。

4. Hero デザインを 30 回イテレートした

ここが今日一番カオスだった部分。Hero 周りのコミットだけで 30 を超えています。試行錯誤の流れをざっくり並べると:

フォント遍歴

版	フォント	結果
v1	Zen Maru Gothic(旧 WP 時代から踏襲)	無難すぎる
v2	Yusei Magic(手描きポップ、`f3c040b`)	良いが太字が弱い
v3	Hachi Maru Pop で 2 行表記化(`c34e3e9`)	フォーマル寄りすぎ
v4	にくまる(Nikumaru)を自前ホスト(`78e0c15`)	着地

Nikumaru は Google Fonts に載っていないので、配布元の woff2 を /public/fonts/ に置いて @font-face で読む構成にしました。CSS の @import url(...) を残すとレンダーブロックの警告が出るので、Google Fonts 側は <link> 経由に切替済(b0c340c)。

装飾アクセントの遍歴

雲: 1 個 → 流れる雲(2b40a80)→ 6 個に増量 + 黒枠線(01c4183、e654e15)→ 最終的に枠線なしの透過 PNG(871e034)
水彩丸: 3 個 → 8 色の水彩タッチ丸を漂わせる(cf6f791)→ 大中小 3 サイズに分散(e654e15)→ 全ページに展開(df422b7)
画像: 旧イラスト → 透過 PNG に差し替え + 黒背景を撤回(9f679b3)→ デスクトップ用に新イラスト + キャプションオーバーレイ(54f63f2)

Hero caption の位置

モバイル: 画像下に出す → 画像にオーバーレイ(7a81c03)→ 位置を下方に調整(abce787)
デスクトップ: 左上にオーバーレイ + 多層クリームグロー(f8b55a1)+ 半透明バックドロップ(7f9507f)で可読性確保

学び: Hero は「捨てた版」も含めて 30 回回した。途中で「やりすぎ」と言われそうだが、こういうところは紙の上で考えるより、実際にブラウザで触る方が早い気がする。手数で殴る方が結果的に安く済むケース。

5. NewsSection の PICKUP 帯を試行錯誤

午後の NewsSection 周りで、PICKUP(ピックアップお知らせ)の見せ方を 1 回作ってすぐ撤回しました。

15:52 全幅の帯デザイン に変更(ef88928)。背景色をしっかり敷いて目を引かせる
16:05 撤回 → 上下細線スタイル に戻す(d6cebe0)

帯を入れたら、教室サイトの落ち着いた雰囲気から浮いて、「強調しすぎ」になった。Onbit 公式 HP の感覚で作ると視覚的に強くなりがちで、教室サイトには合わないと判断。上下の細線スタイルだと「ここ、ちょっと注目してね」というぐらいの控えめな強調にとどまる。

ついでに NewsSection の eyebrow(章の上に出る小さなアイコン)も、CSS で描いた丸から 水彩タッチの画像アイコン に差し替えました(c3d7850)。これも Hero と同じ「全ページの装飾要素を統一する」流れ。

学び: 同じ作り手でも、サイトの「気分」が違うと、効くデザインが違う。Onbit 公式の感覚を教室サイトに持ち込まないように、毎回気分を切り替える必要がある。

6. 絶対音感トレーニング(ear-training)を統合

教室サイトに 音感トレーニングゲーム を載せる差別化を入れました(22b9edb)。/games/ear-training/ で動く Web ゲームで、ヘッダの「Game」ナビから入れる構成。

最初は背景にピアノ写真 + 半透明オーバーレイを載せて雰囲気を出したんですが(3c4d3e8)、夜にもう一度見たら情報量が多くて操作に集中できなかったので、最終的に 背景画像を撤去してダークモード切替を左上に移動(dd66865)。ゲーム本体だけが浮き立つ構成に落ち着きました。

音楽教室のサイトに「教室の紹介ページ」しかないと、検索流入の動機が弱い。「絶対音感トレーニングをタダで遊べる」を入口にすると、教室を探していない層も触りに来る。SEO + 体験の二段構えで、これは音楽教室向けの提案テンプレにも転用できそう。

7. 公式 HP の並行刷新も挟んだ

Waltz をやっている裏で、Onbit 公式 HP も少し動かしています。

Hero タイポを Shippori Mincho に刷新(b80c930)。和文明朝で重心が出る
StickyStack 演出コンポーネント を旧 mainStakky から移植(f06554c)。スクロールに合わせてカードが積み上がる演出
Hero アクセント下線を余白=半透明白 / 彩り=半透明虹に分岐(26de5a5)
Hero リード文を 3 回書き直して最後に削除(9ac7929 → c55cb8e → d404d13)。「成果物ベース」に書き直して、削って、最後にセクションごと削除
ページトップに戻る追従ボタン(78bce3a)。スクロール後に右下に出る
お知らせ 2 件を公開(b34929b): 「onbit.jp ドメインに切り替えた話」と「自社 CMS のドッグフード」

公式 HP の方は手数を絞って、Waltz に主な労力を回した形。

振り返り

5/11 9:56 〜 20:45 で 72 コミット。1 日の量としては過去最大級になりました。テーマで分けるとこう:

Waltz リビルド: WP 撤去 → Astro + Tailwind v4 → 自前 CMS 投入 → デザイン迷走 → 着地
自前 CMS の初本番: Onbit 4/30 設計の D1 + Pages Functions CMS が、Waltz で初の本番投入になった
公式 HP の並行刷新: Hero タイポ・StickyStack・お知らせ 2 件公開

学びを 3 つだけ:

「現状維持」は判断として正しいが、自分の商品をドッグフードする機会が見えた瞬間に前提が変わる。1 ヶ月前の「現状維持」を朝に撤回したのは、振り返ると正解だった
placeholder のまま deploy は、全体 rejected で落ちる Cloudflare Pages の挙動に助けられた。部分的に通って気付かないのが一番怖いという話
Hero は手数で殴る のが意外と安い。紙の上で考えるより、ブラウザで 30 回回す方が結果的に早く着地する

次は Waltz の本番 D1 binding 有効化と、旧 music-waltz.com からのドメイン切り替え が控えています。CMS が動き出した後の運用フェーズの方が、商品としては大事な部分。

関連リンク: