AI駆動開発で効くのは「AIが読める仕様」を先に置くこと
このサイトはAI駆動開発で作りました。やってみて一番効いたのは、コードを書かせる前に「AIが読める仕様」をリポジトリに置いたことです。
具体的には、どのファイルが何を担当するか、記事はどこに置くか、公開前に何を通すか、をMarkdownで書いておく。これがあるとAIへの指示が毎回短くなり、生成されるコードのブレも小さくなります。逆に、口頭で毎回説明していた時期は、同じ修正を何度も指示し直すことになりました。
同じ考え方をiOSアプリの公開品質へ応用する場合は、バイブコーディングで作ったアプリのApp Store提出前チェックも確認できます。
※ 用語：リポジトリ＝ソースコード、記事、設定、変更履歴をまとめて管理する保存場所。Markdown＝見出しや箇条書きを簡単な記号で書ける文書形式。
ひとりで作るときこそ仕組みで補う
個人開発にはレビュアーがいません。設計の相談相手も、コードの間違いを指摘してくれる人もいない。ここがAIと相性のいいところです。
ただしAIは、指示が曖昧なら曖昧なまま作ります。だから「人がレビューでやっていたこと」をスクリプトに落として、機械が落とせるようにしておくのが実質的なレビューになります。
最初はチェックを頭の中だけで持っていましたが、疲れている日ほど飛ばしてしまいました。手順を文章で書いておくだけでも足りません。実行できるコマンドにして初めて守られるようになりました。
- 決めごとは文章ではなくコードで強制する
- 通らなければ公開できない状態にする
- チェックの内容は、あとから読んで理由がわかるように書く
※ 用語：検証スクリプト＝決めた品質条件をコマンドで自動確認し、問題があれば処理を失敗させるプログラム。
このサイトの構成
技術選定は「個人が無料枠のまま運用できること」を基準にしました。
| 領域 | 使ったもの |
|---|---|
| フレームワーク | Next.js (App Router) + TypeScript |
| スタイリング | Tailwind CSS |
| 記事 | Markdownファイル + Qiita / note の RSS 連携 |
| ホスティング | Vercel |
記事は content/articles/ にMarkdownを置くだけで公開されます。データベースもCMSも使っていません。ファイルを追加してコミットすれば、ビルド時に静的ページとして生成されます。
QiitaとnoteはRSSから自動で取得して一覧に混ぜているので、外部に書いた記事も勝手に並びます。更新は1時間ごとです。
CMSを入れなかったのは、個人開発だと管理画面のメンテナンス自体が負債になるからです。Markdownならエディタで書けて、差分がGitに残り、AIにそのまま渡せます。バックアップも別途考えなくて済みます。
作ったアプリはアプリ一覧にまとめています。
※ 用語（構成）：App Router＝Next.jsでURLごとの画面やレイアウトをファイル構成から定義する仕組み。TypeScript＝JavaScriptへ型チェックを加えた言語。Tailwind CSS＝短いクラス名を組み合わせて見た目を作るCSSフレームワーク。
※ 用語（運用）：CMS＝記事の作成・管理画面を提供する仕組み。RSS＝サイトの更新情報を配信する形式。静的生成＝公開前のビルド時にHTMLを作る方式。Vercel＝Webサイトのビルドと公開を自動化できるホスティングサービス。Git＝ファイルの変更履歴を記録する仕組み。
記事投稿そのものを仕組みにする
いま一番手を入れているのがここです。記事を書く手順を、AIが実行できる形にまとめました。
- 公式サイト・公式ドキュメントを必ず開いて事実を確認する
- 参照したURLを記事末尾に出典として表示する
- アイキャッチ画像を1枚必ず作る
- 検証スクリプトを通らない記事は公開しない
検証スクリプトは、出典が2件以上あるか、画像が実在するか、本文が3〜5分で読める分量か、といった項目を機械的に見ます。書き手が自分に甘くなる部分を、コミット前に落としてくれます。
アイキャッチ画像も手順化しました。記事に公式画像や公式マークがあるかを先に確認し、背景とオリジナルの黒猫だけを画像生成で作ります。公式マークは生成で似せず、公式データを元の比率のまま最後に合成します。本文画像も公式の図や製品画面を優先し、出典URLを画像直下へ表示します。
この記事のアイキャッチも同じ手順で作っています。
※ 用語：アイキャッチ画像＝記事一覧やSNSのリンク共有で最初に表示される代表画像。ベクター画像＝拡大しても輪郭が荒れにくい、座標と図形で表す画像。
まとめ
AI駆動開発で個人開発を進めるなら、押さえるところは3つでした。
- AIが読む仕様をリポジトリに置く。指示が短くなり、結果が安定する
- レビュアーの代わりに検証スクリプトを置く。人の意志より機械のほうが確実
- 生成物は必ず自分の目で見る。特に画像と、事実が絡む文章
まずはcontent/にMarkdownを1枚置くところからで十分です。仕組みは、面倒だと感じた場所から順に足していけば間に合います。
※ 用語：AI駆動開発＝仕様整理、実装、検証、文章作成などの工程でAIを使い、人が結果を確認しながら開発を進める方法。