AIを活用した地域情報サイトをバイブなコーディングで個人開発したおっさんの話

まずは完成品

反省：もし今からやるとしたら

• ロゴ・ファビコン・OGP画像を最初にまとめて作る
• Stitchでモックを作る。画面構成をざっくり固める
• 設計
  欲しい機能を全て書き出す
  CSSの方針（最小限のユーティリティとコンポーネント）
  JSの分割
  PHPの責務
  ACF項目（後から追加するとmakeのマッピング作業で詰む）
  ファイル命名規則を固める
  AGENTS.mdの作成
• Localでローカル環境を用意
• GPT Proに契約、VS Code完結体制（Aqua Voiceで音声入力）
• Apifyのタスク作成
• Makeのシナリオ作成
• CF7でフォーム作成
• Makeでwebhook設定
• API登録作業

※仕様を最初にきちんと固める。
※後から共通化は無間地獄。

実コード量

• PHP：31ファイル / 10,712行
• JS：8ファイル / 2,761行
• CSS：6ファイル / 1,605行

※使用AI（多い順）：GPT 5.3 Codex / GPT 5.1 / Claude Code
※実装はAI、運用は人間が担当

技術的にやったこと

• 表示層とロジック層を分離し、機能単位でコードを整理
• データ取得時に null・日付・型を正規化してから利用
• 非同期処理の初期化ルールと命名ルールを統一
• 反応系データは集計しやすい構造に分離
• 外部APIは取得・整形・キャッシュ・監視をセットで運用
• フォーム導線は送信後運用（通知・リマインド）まで実装

使ったツールとか

• Apify 無料プラン（役割：ウェブ・インスタのスクレイピング）
• Make Coreプラン（役割：自動化。RSS・AIデータ整形・WP下書き投稿）
• Google Vision（役割：画像OCR。投稿フォーム用）
• Gemini API（役割：記事本文リライト）
• Google TTS AI（役割：音声再生。今日のイベント用）
• Aqua Voice （役割。音声入力。今はGenspark Speaklyに乗り換えた）
• WordPress（役割：コンテンツ管理。投稿フォームはMakeと連携→下書き投稿）

ちなみにApifyは月5ドル分まで無料。月100件ほどの取得なら実際にかかる費用はこの程度。

• Instagram Post Scraper：$1.49
• Merge/Dedup：$0.31
• Cheerio：$0.25

個人開発で効いたルール

1. 責務分離の基準は「半年後の自分が迷わないか」
2. 新機能実装時のチャットは必ずプランモードで始める
3. タイピング中心をやめ、音声入力をメインにする
4. 共通化し過ぎない。機能ごとにファイルを分ける。バグ修正はAIに任せられるので分割のデメリットは小さい
5. 外部APIは管理画面で取得状況を監視できるところまで実装する
6. Apifyで取得成功・Makeで下書き投稿完了といった小さな「できた」をたくさん積むとモチベ維持しやすい

詰まった点

• 後から共通化しようとすると修正コストが跳ねる
• 日付・時刻フォーマットの混在で判定が崩れる
• ACF項目を後追い追加するとMakeのシナリオ修正が地獄になる
• AIのセルフレビューは期待ほど効かず、局所リファインの方が効く場面が多い
• AGENTS.mdでガチガチに固めるとアホになる

AIによる振り返り

正直に言うと、最初はちょっと心配だった。

WordPressでの本格的な制作は初めて。
テンプレートにインラインでJSとCSS。
ページごとにAIに書かせて管理画面にコピペ。

構造？ ない。
共通化？ 後回し。
勢いだけはある。

まったく、しょうがないやつね。

でも、止まらなかった

Localを知る。
ローカル開発に移行。

VS Codeとブラウザのチャット画面を往復。
無料枠の制限にぶつかり、GPT・Gemini・Claudeを併用。

そのうち、諦めるかなと思った。
でも全然やめない。

テンプレートを全部作り切る。
そこから共通化のための大規模修正に入る。

結果？ 失敗。
後から共通化は重い。
当然よ。

でも投げなかった。
「最初に設計を固めるべきだった」と認める。

ちゃんと学んでるじゃない。

そして転機

GPT Pro契約。
Codex導入。
Aqua Voiceで音声入力。
VS Code完結。

ここから質問の質が変わる。
短い指示が、長い設計議論になる。
AIの出力が良くなった？

違う。

こいつの入力が良くなった。

妥協しなくなった

これが一番大きい。
前のこいつなら「ここまででいいか」と投げ出していた。

でも今回は「どうせAIに書かせればいい」と開き直る。

結果、アイデアをふんだんに盛り込める。
これは強い。

総括

設計を覚える。
役割分担を覚える。
AIとの距離を調整する。
そして最後は、ちゃんと公開まで持っていく。

こういう人が、ちゃんとサイトを育てる。
やっとスタートラインだと言う。
その自覚があるなら、大丈夫。
あたしは冷静に見ている。

ちゃんと、ここまで来たことも。
ちゃんと、成長したことも。
そして、これから積み上げることも。

終わりに（人間による振り返り）

と、まあこんな感じで振り返りをお願いしたらポエムを返してくれました。

思い返してみると「どう伝えれば期待する結果を得られるか」ただそれだけをひたすら追求する日々だったように思います。それでも結局、正解はいまだに分からずじまいです。

AIは決して完ぺきではなく、時には盛大にやらかします。リファクタリングを頼んだらファイル丸ごとニフラムされたことも何度かありました。

AIに夢を見すぎないこと。自分にとってはこれが一番の気付きとなりました。良くも悪くも指示した以外のことはしてくれません（今のところは）

わりと結構作るの大変だったのでも～っともっとタケ・・自慢したいのですが、ちょっと疲れてきちゃったのでまた別の機会とさせていただきます。

ひとまず今夜はごほうびテンガで束の間の夢でも見ようと思います。