今回は、WordPressのブロックランナー（Block Runner）を使って、AIでWebサイトを作ってみた話をしたいと思います。
ブロックランナーとは
ブロックランナーとは、HTMLとCSSを渡すことで、WordPressのコアブロックに変換してくれるターミナル利用のシステムです。WordPressの制作会社として知られるHuman Madeが開発しているオープンソースのツールで、npmパッケージとして提供されています。
- 公式サイト：Block Runner
基本的にはローカル環境にWordPressを用意して、ClaudeなどのAIを使って作業します。 WordPressにMCPを使えるプラグインをインストールすることで、ClaudeとWordPressを接続できます。 あとはClaude Codeに指示をするだけで、ブロック変換まですべて丸投げすることができます。
検証環境
今回の検証環境は以下のとおりです。
| 項目 | 内容 |
|---|---|
| Block Runner | ver 0.9.8 |
| WordPress | 7.1.2 |
| テーマ | Twenty Twenty-Five |
| ローカル環境 | Local（Flywheel） |
| MCPプラグイン | Royal MCP（無料） |
| AI | Claude（Proプラン） |
| デザイン作成 | Claude |
Block Runnerはまだ開発が活発なツールなので、バージョンによって挙動が変わる可能性があります。 あくまでこの環境での検証結果として読んでいただければと思います。
実際に作ってみた
今回は、Claudeでデザインを作成し、そのデザインの画像をそのまま渡してHTML・CSSに変換、さらにブロックとして落とし込むところまで、すべてAIにやってもらいました。 デザインの作成から変換まで、Claudeだけで完結しています。
実際にWordPressのコアブロックを使って再現してくれています。 見出しやグリッドブロックなどを使ってくれているので、「案外素直にブロック変換してくれたな」という第一印象を持ちました。
結論：現状、実案件ではまず使えない
さて、今回の結論ですが、「現状、実案件ではまず使えないだろうな」というのが私の結論です。 確かに、分かりやすいブロックデザインであれば、意外と再現してくれると思います。 ただ、作業自体がものすごく楽になったか、時短になったかと言われると、正直微妙なんですよね。
自分で組んだほうが早くて正確
まずそもそも、私がブロックエディターにだいぶ慣れているというのもあります。 自分でブロックを組んだほうが精度が高く、早くWebサイトが完成してしまうという、スキルの問題もあると思います。 レスポンシブデザインもかなり甘いので、そのあたりの微調整も結局自分の手でやらなければなりません。
ヘッダー・フッターは結局自分で触る必要がある
また、デザインを丸投げといっても、ヘッダーやフッターといったパーツの知識は必要です。 「ブロックランナーとAIを使えば、誰でも簡単にきれいにブロックに収められる」というものではないなと思いました。
デフォルトテーマが前提
あとは、ブロックランナーはコアブロックへの変換になるので、今回はデフォルトテーマのTwenty Twenty-Fiveで検証しました。基本的にはデフォルトテーマとの組み合わせが一番素直に動きます。 デフォルトテーマは正直あまり使いやすいものではないと思っているので、その点も微妙ですね。
見えてきた、AIとWordPressの未来
ただ、AIとWordPressの未来が少しずつ見えてきたというのも、今回の実験で分かったことです。
特にRoyal MCPのようなMCPプラグインを使えば、自然言語でデザインやWordPressの設定をいじることができます。 今後は一度AIにつなげてしまえば、AI上で「ここのデザインをちょっと修正して」とか「こういった記事を投稿して」といったこともできるようになるのかなと思いました。
ただ、これに関しては「わざわざWordPressである必要があるのか」というところも少し疑問。 WordPressの魅力は、なんといっても分かりやすいコントロールパネル、設定画面です。
それをわざわざAIの自然言語で操作するというのは設定漏れもありそうですし、WordPressの良さが削られてしまいそうです。 それであれば、最初から静的サイトを作ったほうが良いのではないか、という気持ちもありました。
あとは、ブロックランナーはまだできたばかりなので、これからどんどん精度は上がっていくと思います。 精度が上がれば、もう少し使える場面も広がってくるのかなと思いました。
まとめ
ブロックランナーの存在を知ったときは、「WordPressの制作自体がガラッと変わるゲームチェンジャーになるのでは」と期待していました。 ですが現状では、手で組んだほうが早いし確実なので、実用には程遠かったです。
実案件で使うとすれば、例えばクライアントがWordPressサイトを要望していて、なおかつ短納期で安く作りたい、というようなときは、選択肢の一つとしてアリかなと考えていました。 とはいえ、少なくとも私自身は、現状ブロックランナーを実案件で使うことは今のところないかな、というのが感想です。
最後までお読みいただき、ありがとうございました。