はじめに
昨今のAIツールの目覚ましい進歩でコーディングの自動化等、開発工数の短縮に大きく寄与しています。
コーディング工数は短縮できるけど、デプロイとなるとインフラ周りの設定等考えなきゃなので、そこに時間とられるんじゃないかなと思ってましたが、
AIコーディングツール（Google Antigravity）と Vercelを組み合わせて、簡単なアプリを１時間でデプロイまでやってみたのでその体験記を共有します！!
作成したアプリ
vercelでデプロイすることを目的にしたので、アプリ自体はFEのみのシンプルなものです
（今も公開中ですのでよければ触ってみてください🐕️🐈️）
公開URL: https://dog-cat-diagnosis.vercel.app/
リポジトリ: https://github.com/NatsukoItou/DOG-CAT-DIAGNOSIS
使用したツール
Google Antigravity
2025年11月にリリースされた Google の最新 AI コーディングツールです
主な特徴
- AI エージェントが自律的にコード生成
- 指示するだけで計画・実行・検証まで自動
- 無料で使える（プレビュー期間中）
ClaudeCodeでもよかったんですが、どんな感じか試したかったので、使ってみました。
Vercel
GitHub と連携してアプリを自動デプロイしてくれるホスティングサービスです。
主な特徴
- GitHub リポジトリと連携のみで設定が簡単
- push すると自動でビルド＆デプロイ
- 設定ファイルほぼ不要
- 無料枠で個人開発には十分
実際の開発タイムライン
0:00〜0:20 | Antigravity でコード生成
Antigravity を起動し、以下プロンプト実施しました。（モデルは Gemini 3 proを使用しました）
React + Vite で犬派・猫派の性格診断アプリを作って。
5問の質問に答えると結果が表示される形式で、
結果はSNSシェアできるようにしてください。
Antigravity が自動で以下を生成しました。
- プロジェクト構造
- 診断ロジック
- UIコンポーネント
- Material UI のスタイリング
よかったところ
- 質問と結果の紐付けロジックまで自動生成
- デザイン等何も指定していないのに、思ったよりもそれっぽいものになった
- 軽微な修正以外はほぼ想定通りのUXのアプリができた
0:20〜0:40 | ローカルで動作確認・微調整
生成されたコードをローカルで実行して動作確認。
調整した箇所
- 診断結果のテキストを少しカスタマイズ
- SNSシェアボタンのデザイン調整
- 質問の文言を変更 基本的なコードは完璧だったので、細かい調整をいくつか実施しました。
0:40〜0:50 | GitHub にプッシュ → Vercel 連携
コードが完成したら、GitHub にリポジトリを作成してプッシュ。
次に Vercel で GitHub 連携
- Vercel にログイン
- 「New Project」をクリック
- GitHub リポジトリを選択
- 「Deploy」をクリック
0:50〜1:00 | デプロイ完了！動作確認
デプロイが完了すると、Vercel が自動で本番URLを発行してくれます。
https://[プロジェクト名].vercel.app
無事デプロイできました！！
Vercel の「ここがすごい」ポイント
1. 設定ファイル不要で動く
設定ファイルを書かなくても、Vercel が自動で判断してビルドしてくれます。
- フレームワーク自動検出（React, Next.js, Vue など）
- ビルドコマンド自動設定
- 環境変数も UI から簡単設定
2. プッシュするだけで自動デプロイ
GitHub に push したら、自動でデプロイされます！
[git push] mainブランチへpush
↓
自動でビルド開始
↓
数分で本番反映
3. PR ごとにプレビュー URL が発行される
プルリクエストを作ると、自動でプレビュー環境が立ち上がります。
これにより
- 本番に影響せずに確認できる
- レビュワーが実際に動かして確認できる
- マージ前に不具合を発見しやすい
4. 無料枠で十分使える
お試しで使用する分には無料プランで十分操作できました！
AI コーディング × 自動デプロイの威力
今回の開発で実感したのは、AI コーディングと自動デプロイの組み合わせは恐ろしいほどに開発スピードが早いことです。
これにより、要件定義〜デプロイまでの一気通貫した開発のハードルが格段に低くなったと思います。
今回の開発フロー
AI にて要件等をプロンプトで指示
↓
コード自動生成（10分）
↓
微調整（20分）
↓
GitHub push
↓
vercel自動デプロイ（5分）
↓
完了！
vercelはこういう用途で使用する方が向いているかも
- 個人開発でアイデアを素早く形にしたい人 → AI でコード生成、Vercel で即公開
- ポートフォリオを作りたい人 → 短時間で複数のアプリを公開できる
- プロトタイプを素早く作りたい人 → アイデアを形にして検証するスピードが段違い
AIコーディングの注意点
爆速で開発できるのは素晴らしいですが、注意すべき点もあります。
- コードの理解 - 生成されたコードを必ず読んで理解すること
- セキュリティ - APIキーのハードコーディングやバリデーション不足に注意すること
- 依存関係 - 不要なパッケージが入っていないか確認すること
- テストコード - 生成時に明示的に依頼し、重要な部分は自分でも確認すること
レビュー負荷の軽減 今回は Gemini Code Assist を GitHub に導入し、PR 作成時に自動レビューを実施しました。これにより、基本的なコード品質やセキュリティチェックを自動化でき、レビュワーは本質的なロジックや要件に集中できます。（今回は一人で完結させました笑）
開発のハードルの低下
「環境構築で1日消える」 「デプロイ設定で詰まる」 「サーバー管理が面倒」
こういった悩みが、AI コーディングツールと Vercel の組み合わせで解消されます。
なので、こういうもの作りたいな〜アイデアを思いついたら即実行でき、AIコーディングでできるので
アイデアを思いついたら、1時間後には公開できる時代になりました🔥
ただし、AIに生成されたコードを鵜呑みにして依存するのではなく、品質や安全性は常にしっかりチェックすることが重要です。
コーディングの時間が短縮できるようになった分、その時間を品質チェックやセキュリティレビューに充てることが今後より重要視されるのではと
考えています。
今回は個人のやってみた体験記を書かせていただきましたが、
SHIPのNoteの方では業務の内容やAIツールを用いたPJの進め方等の記事もあるのでこちらもぜひチェックお願いします👀
最後まで読んでいただきありがとうございました！！
