2026.11.14

AIにWebアプリを作らせてみた｜自動開発はローカル動作まで

IT Picks編集部

「AI に Web アプリを作らせる」と聞くと、ボタン1つで完成して公開まで終わる——そんな印象を持つ人も多いはずです。実際には、AI Webアプリ自動開発でどこまで任せられて、どこから人の手が要るのでしょうか。

この記事では、IT Picks の記事制作に使っている AI（Claude Code）に、小さな家計簿アプリを企画から作らせました。範囲は 企画 → 実装 → 自動テスト → ローカルで起動して画面を確認 までです。インターネットへの公開（デプロイ）はしていません。かかった時間、書いたファイルの数、テストの結果、つまずいた所を、記録のとおりに載せます。

あわせて、v0・Bolt・Lovable・Replit などの「作らせる」ツールを公式の料金で比べ、他の人の検証結果も紹介します。AI に任せられる所と、人が決めるべき所の境目をつかむための記事です。

この記事はこんな人向けです

AI に Web アプリを作らせると、どこまで自動でできて、どこで人の手が要るのかを知りたい
v0・Bolt・Lovable・Replit・Claude Code のどれで作らせるか、料金とできることで選びたい
自分でも小さなアプリを AI に作らせてみたいので、頼み方とテストの手順を知りたい

AIにWebアプリを作らせるとは？一言でまとめると
今回の条件：何を・どこまで作らせたか
実際に作らせてみた
結果：どこまで自動で、どこで人の手が要ったか
デプロイの手順：ここから先は公式の手順
自動開発ツールの比較：v0・Bolt・Lovable・Replit
他の人の検証ではどうだった？
選び方：どのツールで作らせるか
AIに作らせるときの手順とコツ
よくある質問
まとめ

AIにWebアプリを作らせるとは？一言でまとめると

一言でまとめると、「何を作るか」を言葉で伝え、コードを書く・動かす・直すをAIに繰り返させる開発のやり方です。英語圏では「バイブコーディング（vibe coding）」とも呼ばれます。

作らせるツールは、大きく2つの型に分かれます。

型	代表的なツール	動く場所	向いている人
ブラウザで完結する型	v0・Bolt・Lovable・Replit	各社のサーバー（ブラウザから使う）	環境の準備をしたくない人、まず画面を見たい人
手元で動かす型	Claude Code・Codex など	自分のパソコンやサーバー	コードを手元に置きたい人、テストや Git まで任せたい人

どちらの型でも、開発は「企画 → 実装 → テスト → 公開」の順に進みます。違うのは、公開（デプロイ）までをツールの中で済ませるか、自分で別のサービスに載せるかです。

AIにWebアプリを作らせる流れ — 各社の公式ドキュメント（2026年11月13日確認）をもとに IT Picks 編集部が作成

今回の検証は「手元で動かす型」で、④ 公開の手前（ローカルで動く状態）までを AI に任せました。

今回の条件：何を・どこまで作らせたか

条件は次のとおりです。外部のサービスにログインしなくても作れるよう、ブラウザだけで動く家計簿を題材にしました。

項目	今回の条件
作らせた AI	Claude Code（IT Picks の記事制作に使っている AI。モデルは Opus 5.5）
作業した場所	テスト用の Linux 環境（Node.js 22・npm 10.9）
作るもの	収入・支出を登録し、月ごとの合計とカテゴリ別の内訳を出す家計簿
技術	Vite（開発サーバーとビルド）＋素の JavaScript。データはブラウザの localStorage に保存
テスト	Vitest（計算・入力チェック）と Playwright（画面の操作）
完成の条件	テストが全部通る・ビルドが成功する・ローカルで画面が表示される
やらないこと	本番へのデプロイ、ログイン、サーバー側の保存、外部の AI サービスの利用

人が決めたのは「小さな Web アプリを、外部サービスなしで、テストとローカル起動まで」という範囲だけです。何のアプリにするか（家計簿）と、機能・技術の選び方は AI が決めました。

実際に作らせてみた

2026年11月13日に、テスト用の Linux 環境で、IT Picks の記事制作に使っている AI（Claude Code）に作らせました。作業の時刻は、AI が作業しながら残した記録（build_log.txt）のものです。

① 企画：仕様を1枚に書かせる

最初に、作るものを SPEC.md という1枚のメモに書かせました。できること6つ、入力のルール、使う技術、完成の条件、やらないこと——の5つを決めています。

SPEC.md（抜粋）

- できること
  1. 収入・支出を登録する（日付・区分・カテゴリ・金額・メモ）
  2. 月を選ぶと、その月の明細・収入合計・支出合計・差額が出る
  3. 支出のカテゴリ別の内訳（金額と割合のバー）
  4. 明細を削除できる
  5. CSV でダウンロードできる
  6. データはブラウザの localStorage に保存
- 入力チェック: 金額は 1〜99,999,999 の整数、日付は YYYY-MM-DD
- 完成の条件: npm test と npm run test:e2e がすべて通り、npm run build が成功し、ローカルで画面が表示される

ここで「完成の条件」を先に書かせたのがポイントです。AI がどこで作業を止めればいいかがはっきりし、後の工程でも「条件を満たしたか」で判断できます。

② 準備：必要な道具を入れる

次に、開発用の道具を npm で入れました。かかった時間は 約10秒です。

ターミナル（テスト用の Linux 環境）

npm install -D vite vitest @playwright/test

実行結果

vite/8.3.8 linux-x64 node-v22.23.4
vitest/5.1.0 linux-x64 node-v22.23.4
Version 1.65.0
found 0 vulnerabilities

package.json の中身（スクリプトの名前など）も AI が書いています。人が入力したコマンドはありません。

③ 実装：画面とロジックを分けて書く

AI は、計算と入力チェックを budget.js、保存を storage.js、画面の操作を main.js に分けて書きました。こうしておくと、画面を開かなくても計算だけをテストできます。

家計簿アプリの構成 — AI が作成した家計簿アプリのソース（2026年11月13日）をもとに IT Picks 編集部が作成

たとえば入力チェックは、次のように「存在しない日付（2月30日など）」まで見ています。

src/budget.js（抜粋）

const [y, m, d] = date.split('-').map(Number);
const dt = new Date(Date.UTC(y, m - 1, d));
if (dt.getUTCMonth() !== m - 1 || dt.getUTCDate() !== d) errors.push('存在しない日付です');

書き始めから画面とロジックがそろうまで、約1分でした。

④ 単体テスト：21件が1回で通った

計算と入力チェックのテストを21件書かせ、実行しました。金額が0・マイナス・小数・空欄のとき、存在しない日付、月をまたぐ集計、CSV のカンマの扱い、壊れた保存データの読み込みなどを確かめています。

ターミナル（テスト用の Linux 環境）

npm test

実行結果

 Test Files  1 passed (1)
      Tests  21 passed (21)
   Duration  241ms

21件すべてが1回目で通りました。

⑤ 画面のテスト：ブラウザが無くて全部失敗した

次に、ブラウザで実際に操作するテスト（登録・削除・月の切り替え・エラー表示・CSV のダウンロード）を5件書かせました。

AI は最初から、この環境に入っているブラウザ（Chromium）を使う設定を書いていたため、その設定では 5件とも1回目で通りました。ところが設定を外して素の状態で実行すると、5件すべてが起動の段階で失敗しました。

ターミナル（テスト用の Linux 環境）

npm run test:e2e

実行結果（ブラウザが無いとき）

✘  1 e2e/app.spec.js:20:1 › 登録すると明細と合計に反映され、再読み込みしても残る (3ms)
Error: browserType.launch: Executable doesn't exist at /opt/pw-browsers/chromium_headless_shell-1254/...
Please run the following command to download new browsers:
    npx playwright install

原因は、Playwright 1.65 が求める版のブラウザが入っていなかったことです。メッセージのとおりブラウザを取得して、やり直しました。

ターミナル（テスト用の Linux 環境）

npx playwright install chromium-headless-shell
npm run test:e2e

実行結果

✓  1 e2e/app.spec.js:20:1 › 登録すると明細と合計に反映され、再読み込みしても残る (915ms)
✓  2 e2e/app.spec.js:34:1 › 金額が不正だとエラーを出して登録しない (514ms)
✓  3 e2e/app.spec.js:40:1 › 削除すると合計から消える (645ms)
✓  4 e2e/app.spec.js:48:1 › 月を切り替えると、その月の明細だけになる (564ms)
✓  5 e2e/app.spec.js:58:1 › CSV をダウンロードできる (564ms)
  5 passed (5.1s)

自分のパソコンで同じことをするときも、画面のテストは「ブラウザ本体を入れる」1手間が要ると覚えておくと、慌てずに済みます。

⑥ ローカルで起動して画面を見る：テストは通ったのに崩れていた

ビルドしてローカルで起動し、明細を7件入れた画面を撮りました。

ターミナル（テスト用の Linux 環境）

npm run build
npm run preview

実行結果（修正後の最後のビルド）

dist/index.html                 2.48 kB │ gzip: 1.06 kB
dist/assets/index-DUUVLFC3.css  2.81 kB │ gzip: 1.03 kB
dist/assets/index-DC4wtFGq.js   5.21 kB │ gzip: 2.52 kB
✓ built in 75ms
  ➜  Local:   http://localhost:4173/

ここで問題が見つかりました。テストは26件すべて通っていたのに、画面を見ると「金額」の入力欄が枠の右にはみ出していたのです。テストは「登録できるか」「合計が合うか」を確かめるもので、見た目の崩れまでは見ていませんでした。

AI はスタイル（CSS）を直しましたが、今度は右上の「表示する月」のラベルが2段に崩れたため、もう一度直しています。また、最初の撮影では日付が「November 2026」と英語で出ました。これはアプリではなく撮影したブラウザの言語設定によるもので、日本語の設定で撮り直しています。

エラー表示を確かめた画面 — 2026年11月13日時点（出典: AI が作成した家計簿アプリをテスト用の Linux 環境のローカルで起動した画面）

上の画像は、金額に「0」を入れて「登録する」を押したときの画面です。仕様どおり「金額は 1〜99,999,999 の整数で入力してください」と出て、明細は増えませんでした。

⑦ 完成：修正後にもう一度テスト

直したあとに単体テスト21件・画面のテスト5件・ビルドをもう一度実行し、すべて成功しました。完成した画面が次の2枚です。

完成した家計簿アプリの画面（パソコン） — 2026年11月13日時点（出典: AI が作成した家計簿アプリをテスト用の Linux 環境のローカルで起動した画面。明細は動作確認用のサンプル）

収入 250,000円、支出 94,680円、差額 155,320円 と、入れた7件の明細どおりに計算されています。支出の内訳は住居が 74% で最も多く、バーの長さも割合に合っています。

スマートフォンの幅で表示した画面 — 2026年11月13日時点（出典: AI が作成した家計簿アプリを幅390pxで表示した画面）

スマートフォンの幅（390px）では、合計のカードと入力欄が縦1列に並びます。この並び替えも AI が最初から CSS に書いていました。

結果：どこまで自動で、どこで人の手が要ったか

作業の時刻を並べると、次のとおりです。

作業の時刻の流れ — AI が作業中に残した記録 build_log.txt（2026年11月13日）をもとに IT Picks 編集部が作成

項目	結果
企画の開始から完成まで	約4分（20:03〜20:07。AI の作業時間。この記事を書く時間は含まない）
AI が書いたファイル	12個（仕様1・アプリ5・テスト2・設定4。ほかに npm が作る package-lock.json）
行数	アプリ 296行、テスト 155行
単体テスト	21件、1回目ですべて成功
画面のテスト	5件。ブラウザが無いと全部失敗 → 取得して成功
見た目の不具合	1件（入力欄のはみ出し）。直したら別の所が崩れ、計2回直した
ビルドの大きさ	HTML 2.48kB・CSS 2.81kB・JS 5.21kB

工程ごとに「AI だけで済んだか」を整理すると、こうなります。

工程ごとの自動化の度合い — 今回の作業記録（2026年11月13日）と各社の公式ドキュメントをもとに IT Picks 編集部が作成

コードを書く・テストを書く・テストを通すまでは、AI だけで済みました。一方で、次の4つは人の手が要ります。

何を・どこまで作るか：今回も「外部サービスなし・ローカルまで」という範囲は人が決めました
画面を見て判断する：テストが全部通っても見た目は崩れていました。最後に画面を見る工程は欠かせません
公開（デプロイ）：Vercel や Cloudflare のアカウント・ログインが要り、公開してよいかの判断も人がします
ドメインとお金：独自ドメインの取得・有料プランの契約は人がします

なお、今回のアプリはかなり小さいものです。ログイン・データベース・決済のあるアプリは、決めることも確かめることも一気に増えます。「4分でできた」は、この規模での結果と考えてください。

デプロイの手順：ここから先は公式の手順

ここからは、今回は実行していない、公式ドキュメントに書かれた公開の手順です。Vite で作ったアプリは npm run build で dist フォルダに出力され、これをサービスに載せます。Vite のドキュメントでは、npm run preview はビルド結果を手元で確かめるためのもので、本番用のサーバーではないとされています。

Viteの公式ドキュメント「静的サイトのデプロイ」 — 出典: Vite「Deploying a Static Site」（2026年11月13日時点）

① Vercel に載せる

Vercel の CLI を入れて、プロジェクトのフォルダで vercel を実行します。Vercel は Vite のプロジェクトを自動で見分けて、ビルドの設定をしてくれます。

ターミナル（ローカルの PC）

npm i -g vercel
vercel

Vercel の料金ページには「Hobby は無料で、最初のデプロイにはアカウントが要らない」とあります。ただし、公開してよいか・どのアカウントで管理するかは人が決めることです。Hobby は使用量の上限を超えても追加で買えず、多くの機能は30日待つことになります。

あわせて読みたい

Vercelの高額請求を防ぐには？予算と自動停止の設定【2026年版】

② Cloudflare に載せる

Cloudflare Workers に載せる場合は、Cloudflare の Vite プラグインと Wrangler（Cloudflare の CLI）を入れます。

ターミナル（ローカルの PC）

npm install --save-dev @cloudflare/vite-plugin wrangler

vite.config.js

import { defineConfig } from 'vite';
import { cloudflare } from '@cloudflare/vite-plugin';

export default defineConfig({
  plugins: [cloudflare()],
});

ターミナル（ローカルの PC）

npx wrangler login
npm run build
npx wrangler deploy

wrangler login を実行するとブラウザが開き、Cloudflare のアカウントで Wrangler を認可します。ここが、AI だけでは進められない所です。

公開先	無料の範囲	有料の最安	AI だけで進められない所
Vercel（Hobby）	月0ドル。上限を超えると追加購入できない	Pro 月20ドル	公開してよいかの判断、管理するアカウント
Cloudflare Workers（Free）	1日 10万リクエスト。静的ファイルへのリクエストは無料・無制限	Paid 最低月5ドル	`wrangler login` でのアカウント認可

独自ドメインで公開したい場合は、ドメインの取得も必要です。

あわせて読みたい

Vercel Pro無料ドメインの選び方：2年目の更新料【2026年版】

自動開発ツールの比較：v0・Bolt・Lovable・Replit

今回は手元で動かす型の Claude Code を使いましたが、ブラウザで完結する型なら環境の準備が要りません。主なツールを、2026年11月13日時点の公式ページで比べます（米ドル・税別）。

ツール	無料プラン	有料の最安	公開（ホスティング）	コードの持ち出し
v0（Vercel）	○ 1日 7メッセージまで	Plus 月30ドル	Vercel へデプロイ（Free でも可）	GitHub 連携（Free でも可）
Bolt	○ 1日 30万トークン・月100万	Pro 月25ドル	ホスティング込み。独自ドメインは Pro	—
Lovable	○ 1日 5クレジット（月30まで）	Pro 月25ドル	公開あり。独自ドメインは Pro 以上	Git 連携は全プラン、ダウンロードは Pro 以上
Replit	○ Starter（Agent は Lite build だけ）	Core 月20ドル	Starter は1つまで・30日で停止	—
Claude Code	×（Free は対象外）	Pro 月20ドル	なし（自分で Vercel などに載せる）	手元にそのまま残る

※ 料金は2026年11月13日時点。Lovable の Pro は月100クレジットの場合で、年払いなら月21ドル相当。Claude の Pro は年払いなら月17ドル相当です。

有料プランの最安の月額 — 各社の料金ページ（2026年11月13日確認）をもとに IT Picks 編集部が作成

v0の料金ページ — 出典: v0「Pricing」（2026年11月13日時点）

表から分かるのは、無料で試すならブラウザ型の4つ、作ったコードを手元に置きたいなら Claude Codeという分かれ方です。Replit の無料プランは公開リンクが30日で止まるので、長く使うアプリには向きません。Bolt は無料プランでも公開できますが、Bolt の表示が付きます。

Boltの料金ページ — 出典: Bolt「Pricing」（2026年11月13日時点）

手元で動かす型のツールどうしの比較は、次の記事も参考になります。

あわせて読みたい

ChatGPTとCodexの利用枠が12月から共通に【2026年10月】

他の人の検証ではどうだった？

ブラウザ型のツールは IT Picks ではログインして試していないため、他の人の検証を紹介します。どれも少し前の記事なので、今の版とは結果が違う可能性があります。

GoPractice 編集部の検証（2025年9月8日）：Slack 風のチャット画面を、同じ順番の指示で7つのツールに作らせました。Lovable・Bolt.new・v0 は無料アカウントでエラーなく作れた一方、Replit と Tempo Labs は無料アカウントでは動く試作品ができなかったと報告しています（出典）
Google のエンジニア Addy Osmani 氏の比較（2025年1月11日）：v0・Bolt・Lovable を比べ、どれも従来の開発の流れを完全には置き換えないと結論づけています。複雑になると手元でコードを直す必要が出る「70%の問題」にも触れています（出典）
Zenn の yamamoto44 氏の体験（2025年6月21日）：Claude Code でサブスクの管理アプリを作り、1日でデプロイまでできたそうです。ただし Vercel と Supabase の設定は手作業で、そこが一番時間がかかったと書いています。1回目は設計が足りずにやり直したとのことです（出典）
Zenn の八神翔大氏の体験（2025年9月30日）：Claude Code で PHP のセミナー管理システムを約3時間で作成。未定だった仕様を決める・細かいバグを直す作業は人が行ったと書いています（出典）

誰の記録か	作ったもの	時間	人の手が要った所
今回（Claude Code）	家計簿（ローカルまで）	約4分	範囲の決定・画面の確認・公開
yamamoto44 氏（Claude Code）	サブスク管理（公開まで）	1日	Vercel・Supabase の設定、設計のやり直し
八神翔大氏（Claude Code）	セミナー管理	約3時間	仕様の決定、細かいバグの修正

共通しているのは、「何を作るか」と「公開の設定」は人が担っている点です。今回の記録とも一致します。

選び方：どのツールで作らせるか

ここまでの比較から、選び方をチャートにまとめました。

AIに作らせるツールの選び方 — 各社の料金ページ（2026年11月13日確認）と今回の作業記録をもとに IT Picks 編集部が作成

まず画面を見てみたい・お金をかけたくない：v0・Bolt・Lovable の無料プランから。1日の上限があるので、小さな画面1つから試すのがおすすめです
ログインやデータベースのあるアプリを作りたい：Lovable や Bolt はデータベースとの連携をうたっています。ただし公開の設定やデータの扱いは、自分で理解しておく必要があります
コードを手元に置いて、テストや Git まで任せたい：Claude Code や Codex のような手元で動かす型。今回のようにテストを書かせて通るまで直させる使い方ができます
長く使うアプリ：Replit の無料プランは公開が30日で止まるので、有料プランか、自分で Vercel・Cloudflare に載せる方法を選びます

Claude Code の権限の設定（どこまで確認なしで任せるか）は、次の記事で解説しています。

あわせて読みたい

Claude Code「auto mode」とは？承認地獄から解放される新モードを解説【2026年3月】

AIに作らせるときの手順とコツ

今回の記録から、AI に作らせるときに効いた手順を順番にまとめます。

順番	やること	理由
①	仕様を1枚に書かせる（できること・入力のルール・完成の条件・やらないこと）	AI がどこで止めればいいかが決まる
②	画面とロジックを分けさせる	計算だけを素早くテストできる
③	テストを書かせて、通るまで直させる	「動いたつもり」を防げる。今回は21件＋5件
④	画面を開いて自分の目で見る	テストが通っても見た目は崩れることがある
⑤	直したら全部のテストをもう一度	1か所直すと別の所が崩れることがある（今回も2回直した）
⑥	公開は人が決める	アカウント・費用・公開してよいかは人の判断

AI への最初の頼み方は、たとえば次のような形です。

AI への依頼の例

家計簿の Web アプリを作ってください。
- 外部サービスは使わず、ブラウザだけで動くこと（データは localStorage）
- できること: 収入・支出の登録、月ごとの合計、カテゴリ別の内訳、削除、CSV 出力
- 最初に SPEC.md に仕様と「完成の条件」を書いてから実装すること
- 計算のテストと画面のテストを書き、全部通るまで直すこと
- デプロイはしないこと

「デプロイはしないこと」まで書いておくと、AI が勝手に外部サービスに接続しようとするのを防げます。パスワードや API キーなどの秘密の情報は、AI に渡すファイルに書かないようにしましょう。

ブラウザだけで作らせる別の例として、Google のサービスでの動きは次の記事でまとめています。

あわせて読みたい

Google AI Studioのバイブコーディングがフルスタック対応に。Antigravity＋Firebase統合で何が変わったか【2026年3月】

よくある質問

Q. プログラミングを知らなくても AI にアプリを作らせられますか？ A. 小さなアプリなら作れます。今回も人が入力したコマンドはありません。ただし、画面を見て正しいか判断すること、公開の設定をすることは人の仕事です。ログインや決済のあるアプリは、仕組みを理解していないと安全に運用できません。

Q. 本当に4分で作れるのですか？ A. 今回の家計簿（アプリ296行）では、AI の作業時間は約4分でした。ただし、作業環境の準備は済んでいた状態で、作るものも小さく、範囲もローカルまでです。他の人の記録では1日・約3時間といった例もあり、規模と公開の有無で大きく変わります。

Q. AI が書いたコードはそのまま使って大丈夫ですか？ A. テストが通っていても、見た目や想定外の使い方までは保証されません。今回もテストが全部通ったあとに見た目の崩れが見つかりました。画面を自分で確かめ、テストを増やしてから使うのが安全です。

Q. 無料でどこまで試せますか？ A. v0（1日7メッセージ）・Bolt（1日30万トークン）・Lovable（1日5クレジット）・Replit（Starter）に無料プランがあります。Claude Code は無料プランでは使えず、Pro（月20ドル）からです。公開は Vercel の Hobby（無料）や Cloudflare Workers の Free で始められます。