PencilとClaude Codeの組み合わせが良すぎる

このWatchContentsというサイトは、2014年から更新しているのですが、早くも干支が一周したようです。最近の投稿は約6年前で、ここ最近ほとんど動かしていませんでした。

WordPressはブログサイトを立ち上げるにはかなりとっつきやすいですが、フロントがPHPベースということもありAIを使ったデザイン生成、自分の知識的な問題もありますが、実装との相性もあんまり良くないです。ここ数年だとAstroなどのように静的コンテンツを扱いやすくするWebフレームワークも登場していて、安定して高品質な”ブログ機能”というものがより作りやすくなったと感じています。

ということで今回は、ユーザ側のフロントエンドをWordPressから引き剥がしつつ、WordPressのCMS機能だけを使ったブログサイトにこのWatchContentsを改良した話になります。
ベースはheadlessCMSとしてWordPressを使うという内容なんですが、今回デザイン、実装のほとんどをClaudeCodeが行ったので、その辺りを中心に紹介できればと思います。

EmDashについて

CloudflareからEmDashというWordPressの精神的後継としてTypeScriptで書かれたCMSが登場しています。WordPressからの移行もサポートされているようなので、今からやるならEmDashも選択肢に入るのかなと思います。

参考
emdashgithub.com

技術スタック

バックエンド

レンタルサーバ
Cloudflare Workers（SSR）
TypeScript

フロントエンド

Astro
TypeScript

ツール

Claude Code
Pencil
VSCode

参考
Pencilwww.pencil.dev

具体的な話

構造としてはこんな感じです。

現状のレンタルサーバで稼働しているWordPressのAdminの機能をサブドメインで運用して、Adminに関係するところ以外を404を返す。
公開されるページは、Astroで作りCloudflare Workersに載せて配信。
データは、WordPress REST APIを使ってCloudflare Workers（SSR）で取得し、適宜Workers KVをデータのキャッシュとして使い画面を構築して配信。

レンタルサーバの云々

Admin機能の話は、.htaccessにホワイトリストで通過できるリクエストを定義してそれ以外は404を返すだけです。

サブドメインへの移行に関しても、ディレクトリの中身を丸ごとサブドメインの方へ移動させるだけです。サブドメインの設定と若干Configを修正する必要がありますが、そもそもこんなことをやろうとしてる方には、説明しなくても良いでしょう。

フロント、SSRの云々

フロントのフレームワーク自体でやってることは、Astroの公式に載っていることをなぞっているだけなので、大して話すことはないです。

SSRの諸々

特に変わったことはしてないです。

Cloudflare WorkersでSSRをしているのですが、そこでは基本的にKVでキャッシュされたデータを取得するようにしています。
ただし、検索とランキング、関連記事はWordPressのプラグインを導入してWeb API経由で毎回引っ張ってきています。

使っているプラグイン

WP Popular Posts
Yet Another Related Posts Plugin (YARPP)

ブログ自体あまり更新されることもないので、キャッシュ間隔は長め1週間にしていて、最悪短期間でリフレッシュする必要がある時には、手動でKVをワイプする方針にしました。
現在は、特定の記事、全記事などのスクリプトを作ってそれ経由で削除するようにしています。Claude Codeがあれば一分ほどで作れてしまうので良いですね。

デザインの諸々

自分が本業でデザイナーっぽいこともしているので微調整しつつ、Claude CodeとPencilの組み合わせでPencil上にUIを作りました。
このプロジェクトを通して、感動＋可能性を感じたのがここでした。

この組み合わせで一つ作り切ってみようという気持ちでこのプロジェクトをやったのですが、精度が良かったのであまり手をかけずにUIデザインが完成しました。細切れではありましたが、全てのページを1日くらいで作れたので満足です。

デザイン量的には、レスポンシブ考慮すると20画面あったので人力でやろうとすると、3日くらいかかりそうな感じです。AIパワーを感じました。

Pencil自体は、普段Figmaに慣れている人であれば直感的に使えると思います。また一部Figmaのデザインをコピペで持っていけるのも良かったです。（次に書きますが、サポートされてない場合があるので、簡単なやつ構成のものだけだと思ったほうが良さそうです。写真などのアセットも持っていけないです。）

作り込まれているデザインツールではないので、Figmaでいうこれがやりたいんだけど、Pencilにはないみたいなことが多々あります。フォントまわりは最低限のことしかできないと思った方が良いですし、SVGを使おうとしたりすると若干バグっぽい挙動になったりもしました。コントリビューターの方の労力と時間が解決してくれそうではあります。

AIとの連携（今回はClaude Codeとの話）では、Pencil側の仕組みがよくできています。

画面のサイドエリアやポップアップで指示できるのですが、選択中のUIを参照として提示しながら指示できますし、並列実行もできます。また、一回の指示の中で作業をブレイクダウンできそうな部分は勝手に分けて作業もしてくれます。最近のコーディングでの動作と同じようなことをしてくれる感覚と同じです。

あと実際にデザインされている様子がリアルタイムで反映されます、見ていて面白いですし、どこで何の作業をしているかがパッと理解できるのも良いです。Figmaに複数人が入って作業している雰囲気そのものです。

Claude Code Max（$100/Month）を契約しているので、コストやトークン数はさほど気にしていなかったのですが、デザインだけでWeeklyの半分近く消費した気がします。

とにかく、この組み合わせはデザイン時にはかなり良い手段でした。別のプロジェクトでも小さいプロジェクトであれば使っていきたいです。

例えば

「このコンポーネント（選択している）を他の同じ箇所のUIでも使って」とすれば複数画面あればそれぞれ並列で置き換えてくれます。それぞれが別のコンテキストを持っているので、この画面はこのBotにやらせるみたいな感じの運用もできます。

注意

最近、AnthropicはOpenClawなど一部のサードパーティツールについて、Claude Codeの利用枠とは別に費用がかかる可能性があると言っていますが、PencilはMCP経由で操作している形なので、OpenClawのような常駐型・大量実行型ツールとは性質が違うとは思います。今後の展開では対象外になる可能性もありそうです。

参考
「Claude」で「OpenClaw」などの利用がサブスク対象外に　API利用や追加使用量購入が必要www.itmedia.co.jp

実装の諸々

Claude Codeに対してこのUIに沿ってHTML、CSSを書いてなどと指示できます。これは、Figma MCPなどでも同じような体験ができると思いますが、デザインからその実装に至るまでをClaude Codeが行う体験が良かったです。

例えば、ちょっと修正したくなったらPencilに戻って「このItemのRoundを8pxにして」みたいなことを言えばデザインが修正され、実装側ではデザイン修正したら反映してと言えば良いです。
常にPencil側のデザインをソースとしてHTML側を構築できます（若干ズレることもありますが、ほぼ同じ状態を保てていると思いますし、編集に対するコストがかなり低いのは良いです）

正直Figmaでやりたいとめちゃくちゃ思いました。
これを見て、試せる環境がある方は一度ご自身で試してみてください！

仕様の諸々

その他のロジック、SSRに関しては、OpenSpecを使って事前に全体の構成と機能を定義して作りました。OpenSpecは、Claude Codeとの会話などをベースに仕様をまとめて、その仕様をタスクにまで落とし込んでくれます。
これを行ってからAIコーディングをすると人間の目線とAIの目線、例えば、作業情報だったり実装方法だったりを同じレベルに合わせることができるので、実装もれがなくなったり、こうじゃないみたいなものを削減できます。
公開当初から使用していて、だんだんと使い方も慣れてきたので、今では他のプロジェクトでも大体の機能を作る際は使用しています。