はじめに
私は普段エンジニアとして働く一方、地域の町内会ホームページをボランティアで更新しています。
現在のホームページはWordPressで構築されており、町内会だより、イベント情報、季節の花などを掲載しています。
WordPressは便利です。しかし、長く運用していると、更新のたびに発生する細かな作業が少しずつ負担になってきました。
そこで今回、ホームページの制作だけでなく、技術選定、実装、公開環境、日々の更新作業まで、できる限りAIに任せることにしました。
結果から書くと、新しいホームページは想像以上に簡単に完成しました。
しかも、最初は花の写真を11枚掲載するだけの実験だったはずが、数日後にはサイト全体の移行がほぼ終わっていました。
この記事では、町内会ホームページをAI駆動で作り直してみた経緯と、実際に運用して分かったことを紹介します。
WordPress運用で感じていた課題
これまでの更新作業には、次のようなものがありました。
- ポスターや町内会だよりをPDFにする
- 必要に応じてJPEG画像も作る
- WordPressへファイルをアップロードする
- 記事や固定ページを作る
- 画像やリンクを配置する
- スマートフォンでの表示を確認する
- 「町内の彩り」では、写真ごとに花の名前やキャプションを設定する
- 過去の記事をバックナンバーページへ追加する
- MetaSliderなど、WordPressプラグイン固有の操作を行う
一つひとつは難しい作業ではありません。
ただし、町内会ホームページの更新は本業ではなく、あくまでボランティアです。イベントの準備などで忙しい時期ほど掲載物も増えるため、細かな作業の積み重ねが負担になります。
これまでもAIは使っていた
以前からChatGPT（以下、いつもの呼び方で「チャッピー」）には、ホームページ更新を手伝ってもらっていました。
例えば、次のような作業です。
- 花の写真を見て、名前やキャプションを考えてもらう
- イベントの紹介文を作ってもらう
- バックナンバーページへ追加するHTMLを生成してもらう
- CSSやJavaScriptの修正案を作ってもらう
- WordPressプラグインに合わせたコードを作ってもらう
かなり便利でしたが、この段階では役割分担が次のようになっていました。
| 担当 | 作業 |
|---|---|
| AI | 文章、HTML、CSS、JavaScriptを作る |
| 人間 | WordPressを開き、貼り付け、画像を登録し、公開する |
つまり、AIに部品は作ってもらえるものの、WordPressを操作して公開するのは人間でした。
AI駆動にするなら、プラットフォームから全部任せてみる
あるとき、部分的にAIを使うのではなく、AIが扱いやすいホームページを最初から作ってもらったらどうなるのかと思いました。
そこで、次の条件だけを伝えました。
- 現行のWordPressサイトには触らない
- 新しいサイトとして並行して構築する
- WordPressやCMSを使うことを前提にしない
- AI自身が継続して更新しやすい構成にする
- まずは町内で撮影した花の写真11枚を掲載する
- 可能な限り無料枠で運用する
- 技術選定もAIに任せる
人間側で先にフレームワークを決めることはしませんでした。
「AI駆動に向いている構成を考えて、そのまま作ってほしい」と依頼しました。
採用した構成
最終的な構成は次のようになりました。
| サービス・技術 | 役割 |
|---|---|
| Astro | 静的なホームページ本体 |
| GitHub | ソースコードと変更履歴の管理 |
| Cloudflare Pages | GitHubの変更を自動でビルド・公開 |
| Cloudflare R2 | 写真やPDFなどのファイル保管 |
| ChatGPT / Codex | 調査、設計、実装、確認、Git操作 |
GitHubのリポジトリへ変更が反映されると、Cloudflare Pagesが自動でビルドし、ホームページを公開します。
写真やPDFなどの比較的大きなファイルはCloudflare R2へ保存します。
新しいホームページは、試験運用サイトとして公開しました。
最初の依頼は「花の写真を掲載して」
最初に行ったのは、町内で撮影した花の写真11枚の掲載でした。
写真をチャッピーへ渡して、花の名前や紹介文を整理し、ギャラリーとして掲載してもらいました。
私が行ったのは、おおむね次の作業だけです。
- 写真を渡す
- 掲載してほしいと伝える
- プレビューを見る
- 気になる点を伝える
- 公開を承認する
これだけで、ページの作成、画像の配置、キャプションの作成、スマートフォン表示の調整まで進みました。
ここまでは「AIにホームページを作ってもらった」という話です。
驚いたのは、その後でした。
お花だけの予定が、サイト全体の移行になった
花のページが完成したあと、過去の「町内の彩り」も移行できるか試してみました。
最初は10回分のバックナンバーを移行する予定でしたが、作業はそのままサイト全体のアーカイブへ広がりました。
その後も、会話の中で次々と追加しました。
- 町内会だより
- イベントのお知らせ
- ラジオ体操や草刈りの日程
- リサイクル広場の開催日
- 夕涼み会の特設ページ
- ポスターやPDF
- トップページのお知らせ
- スマートフォン向けの表示調整
- LINE公式アカウントへの更新通知
最初は花の写真を掲載する実験だったのに、数日後にはホームページ全体が移行できる状態になっていました。
実際の更新は「更新してー」
新しい構成で一番変わったのは、日々の更新方法です。
例えば、町内会だよりを掲載するときは、PDFを渡して次のように依頼します。
町内会だより8月号を載せるの忘れてた。追加してー
チャッピーは既存ページの構成を確認し、PDFを配置し、一覧へ追加し、プレビューを作ります。
内容を確認したあとの会話は、ほぼ次のようになります。
私：いいね。マージよろしくー
AI：マージして公開しました。
私：トップページ反映確認できましたー
文章を変えたいときも同じです。
せっかくなので、テストっぽくない文章にしたいな。
「新しいホームページができたよー」みたいな感じで。
すると、AIがサイト内の該当箇所を探し、文章を修正し、表示を確認し、GitHubへ反映します。
人間がWordPressの管理画面を開く必要はありません。
実家へ帰省中、スマートフォンから写真を渡すだけで、花の記事を公開できたときには、さすがに驚きました。
更新前後の違い
従来の方法とAI駆動化後を比較すると、次のようになります。
| これまで | AI駆動化後 |
|---|---|
| AIに文章やHTMLを作ってもらう | AIがサイトそのものを変更する |
| 人間がWordPressに貼り付ける | AIがGitHubへ反映する |
| 人間が画像を加工・登録する | 元データを渡して掲載を依頼する |
| 人間が公開操作を行う | Cloudflare Pagesが自動公開する |
| 人間が細部を操作する | 人間はプレビューを確認する |
| WordPressの操作方法を覚える | 掲載したい内容を自然な言葉で伝える |
CMSがなくなったというより、AIがCMSの管理画面を肩代わりしている感覚に近いです。
もちろん、すべて一発ではなかった
「想像以上に簡単だった」と書きましたが、何の問題も起きなかったわけではありません。
実際には、次のような場面で試行錯誤しました。
- GitHubとCloudflare Pagesの初期接続
- Cloudflare R2のバケットやシークレット設定
- WordPressから大量の画像を移行する方法
- 日本語URLがエンコードされたまま表示される問題
- Astroの型エラー
- カウントダウン表示が更新されない問題
- AIが意図とは少し違うデザインに変更すること
- 外部サービスのログインや権限承認
特に、GitHubやCloudflareなど外部サービスの認証は、人間が操作する必要があります。
また、AIが変更内容を誤解することもあります。公開前のプレビュー確認と、Gitによる変更履歴は重要です。
それでも、問題が起きた画面やエラーログをそのまま渡し、
なんかエラーになった
スマホだと少しずれている
元の形から極力変えないで直して
と伝えると、原因の調査から修正まで進めてもらえました。
人間の役割は「作業者」から「編集責任者」へ
AI駆動化後も、人間が不要になったわけではありません。
人間が担当するのは、主に次の部分です。
- 何を掲載するか決める
- 写真や資料を用意する
- 文章やデザインの方向性を伝える
- 地域の人にとって分かりやすいか判断する
- プレビューを確認する
- 公開してよいか承認する
一方で、HTMLを編集したり、画像の配置を調整したり、管理画面の操作方法を思い出したりする時間は大きく減りました。
人間の役割が、ホームページの「作業者」から「編集責任者」へ変わったと感じています。
まとめ
今回の実験で、AI駆動ホームページとは、単にAIにHTMLを書いてもらうことではないと分かりました。
技術選定、実装、画像の配置、文章作成、テスト、デプロイまでをAIに任せ、人間は目的を伝えて結果を確認する。
CMSが不要になったというよりも、AIがCMSの管理画面を肩代わりしてくれるようになった、と表現するのが近いかもしれません。
そして、AIに任せることで人間が考えなくなるのではありません。
これまで更新作業に使っていた時間を、
- 何を掲載するか
- 地域の人に何を伝えるか
- どんな町内会にしていきたいか
を考える時間に使えるようになりました。
AI駆動で町内会ホームページを作ってみたら、想像以上に簡単でした。
そして、想像以上に実用的でした。
現在は従来のWordPressサイトと並行して試験運用しています。今後、本番サイトへ切り替えたあと、実際の町内会運用でどこまでAI駆動化できるのかも改めてまとめたいと思います。