この記事は、あるお客様から「脱WordPressで」というご依頼をいただいた案件の記録です。
WordPress で動いている約1,700ページのサイトを、WordPress から切り離し、お客様ご自身が AI(Claude)を使って更新できる形にする。そのゴールまでの道のりを、「FUBUKI BLOCKS」という考え方を軸に、順を追って書いていきます。
なぜ、脱WordPressなのか
ご依頼の背景には、WordPress を運用し続けることの負担があります。
PHP のバージョンアップに合わせて本体やプラグインを更新しなければならないこと。セキュリティの問題が定期的に出ること。更新作業のたびに、制作会社の手を待たなければならないこと。サイトの中身を変えたいだけなのに、その手前の保守に時間と費用がかかり続けている状態でした。
そしてもう一つ、私が大切だと考えていることがあります。
お客様ご自身が、AI を直接使ってサイトを更新できるようにすることです。制作会社を介さずに、文章を直し、ページを足し、公開できる。そこまで実現して初めて、脱WordPressに意味があると思っています。
WordPress に AI を直接つないで分かったこと
当初の想定は、今の WordPress に AI を直接つなぐことでした。サーバー側に接続の仕組み(MCP)を入れ、AI から記事や固定ページを作成・更新する方法です。
実際にやってみると、次のことが起きました。
新しいページを作るとき、テキストと構成だけを指示しても、そのサイトのデザインのトーン、文字間、行間、横幅といった決まりが、まったく実装されません。スマートフォン表示も考慮されないため、できあがったページはそのままでは使えないものでした。
既存ページの構成を変える指示も同様です。今の WordPress のページが持っているデザインの規則に沿ったページを、AI は作ることができませんでした。結果として、「ページを足したいなら、全部作り直すしかない」という事態になります。
原因は、AI の能力というより、WordPress 側の構造にあります。デザインの規則はテーマの PHP と CSS の中に散らばっていて、AI がページを作るときに参照できる形になっていないのです。
考え方を変える。FUBUKI BLOCKS
そこで、WordPress を使い続けることをやめ、WordPress が吐き出した HTML を原本にすることにしました。
やることは、次の通りです。
まず、サイト全体を静的な HTML として取り出し、WordPress 固有の残骸を取り除きます。次に、全ページに共通するヘッダー、フッター、CSS を部品として切り出し、各ページは本文だけにします。ページは「部品+本文」から組み立て直し、組み立てた結果が元のページと同じであることを、目視ではなく機械的に照合します。
この形にすると、デザインの規則は部品と CSS の中に集まります。AI が新しいページを作るときは、その部品を使って組み立てるので、文字間や行間や横幅、スマートフォン表示は、既存ページと同じものがそのまま適用されます。
ページの構成(何がどの順に並ぶか)を指示する語彙は、お客様ごとに作らず、FUBUKI BLOCKS 側に持ちます。見た目はお客様のサイトのまま変えません。見た目を変えたくなったときは、語彙と見た目の対応表を差し替えるだけで、構成の指示は書き直さずに済みます。
公開先はサーバーで何も動かさない静的ホスティングにします。PHP のバージョンアップもセキュリティ更新もなくなり、費用は無料枠で収まります。
そして運用は、お客様に引き渡します。原稿を書く人がいて、確認して公開する人がいて、そのあいだに AI がいる。制作会社はそこにいなくてよい、という形です。
今日やったこと
記録として、やったことを並べておきます。サイトの URL は伏せます。
- SiteSucker で落とした複製を解析。8,444 ファイルのうち、本物のページは固定20・記事約580・一覧約1,100と分かった
- 掃除の道具を作った。WordPress のゴミ(RSS、API の残骸、絵文字)を除き、ファイル名と絶対 URL を正規化して「原本」を作る
- フォームは外し、同じ位置に HubSpot フォームの差し込み枠だけ残した
- 取り逃した画像と動画2本を本番から取り直した
- 手元のプレビューで、トップ・会社概要・記事・お問い合わせを本番と並べて同じ表示を確認
- Cloudflare にアカウントを作り、全ページを公開した。ホスティングは無料枠
- 部品化の道具を3本。原本を「骨組み・ヘッダー・フッター・集約 CSS・本文」に分ける道具、部品から組み立てる道具、組み立て結果と原本を機械で照合する道具
- 固定ページ20本を部品化。20本すべて原本と一致
- フッターの文言と従業員数を変えて公開し、戻した。一往復が数分
- 記事と一覧も部品化。1,706 ページすべて一致。ヘッダーを直せばサイト全体に効く状態になった
- 方針を決めた。構造は FUBUKI BLOCKS、見た目はお客様のサイトのまま、管理はお客様に渡す、フォームは最後
- 残っているのは、記事の台帳、関連記事とおすすめの自動生成、一覧の自動生成、記事の投稿フロー、FUBUKI BLOCKS との対応表、引き渡し、DNS の切り替え
次回は、近日。
FUBUKI BLOCKS 構築中