🔨 AI Studioの「Build」で農業アプリを作ってみよう! ブラウザだけでサクッと完成!
「作って」と依頼 → プレビュー → ワンクリックで公開。たったそれだけ!
コピペで使う
ブラウザで完成
AIが自律実行
「前回の記事で、Vibe Codingの考え方は分かった。」
「でも、実際にやるとなると…コードをメモ帳にコピペして、保存して、ファイルを開いて…って、ちょっとハードルが高い。」
「もっと簡単に、ポチッとボタンを押したらアプリが完成する方法はないの?」
…あります。
実は、前回ご紹介した Google AI Studio に、「Build(ビルド)」 という機能が追加されています。
これを使えば、コードのコピペは一切不要。ブラウザの中で「作りたいもの」を伝えるだけで、アプリの作成からプレビュー、さらには ワンクリックでインターネット上に公開 まで、全部できてしまいます。
- AI Studio「Build」モードとは何か
- 従来のやり方(コピペ方式)との違い
- 農薬希釈計算ツールを「Build」で作る全手順
- 作ったアプリを公開・共有する方法
- 知っておきたい注意点
🌱 「Build」モードってなに?
Google AI Studioには、大きく分けて 2つの使い方 があります。
前回
① チャット(Prompt)モード
- AIに質問したり、コードを生成してもらう
- 出てきたコードは 自分でコピー → メモ帳に貼って保存
- ファイルを開いて動作確認する
今回
② Build モード
- AIに「こんなアプリ作って」と伝える
- 画面右側にアプリのプレビューがリアルタイム表示
- 修正も「ここを直して」と言うだけ
- 「Deploy」ボタンでインターネットに公開
🚜 農業でたとえると?
JAに「この品種の苗ありますか?」と電話する
「ありますよ。取りに来てください」と言われて、自分で車を出して取りに行く。
JAの窓口で「この苗を圃場に届けてほしい」とお願いする
注文から配達まで 全部やってくれる。あなたは届いた苗を見て「OK」と言うだけ。
つまり、「自分で運ぶ手間」がなくなったのがBuildモードです。
📊 チャットモード vs Buildモード
| 💬 チャットモード(前回) | 🔨 Buildモード(今回) | |
|---|---|---|
| コードのコピペ | 必要(メモ帳に貼る) | 不要 |
| ファイル保存 | 自分で「.html」で保存 | 自動 |
| プレビュー | ファイルをブラウザで開く | 画面右側にリアルタイム表示 |
| 修正 | コードを再コピペ | 「ここ直して」と言うだけ |
| 公開 | 自分でサーバーに置く(難) | ワンクリックで公開(URL発行) |
| AI機能の追加 | 自分でAPI設定が必要 | 自動で組み込んでくれる |
| 料金 | 無料 | 無料 |
🔧 実践!Buildモードで「農薬希釈計算ツール」を作ろう
前回の記事で「次回作ります」と予告していた、農薬希釈計算ツール。今回はBuildモードで、もっと簡単に作ってみましょう。
AI Studioにアクセスして「Build」を選ぶ
1分
- パソコンのブラウザで aistudio.google.com にアクセス
- Googleアカウントでログイン
- 画面上部のメニューから 「Build」 をクリック(または直接 aistudio.google.com/apps にアクセス)

「作りたいもの」を伝える
1分
画面に大きな入力欄が表示されます。ここに、作りたいアプリの内容を日本語で入力しましょう。
農薬の希釈計算ツールを作ってください。
機能:
– 使う水の量(リットル)を入力する欄
– 希釈倍率(倍)を入力する欄
– 「計算する」ボタンを押すと、必要な農薬量(ml)が表示される
– よく使う倍率(500倍・1000倍・2000倍)はワンタッチボタンにする
デザイン:
– 緑を基調とした、農業らしい温かみのあるデザイン
– スマホでも見やすい大きな文字
– タイトルは「かんたん農薬希釈計算」
入力したら、送信ボタンを押します。
プレビューを確認する
30秒
ここが チャットモードとの最大の違い です。
送信すると、画面の右側にアプリのプレビューがリアルタイムで表示されます。
コードをコピーする必要はありません。メモ帳を開く必要もありません。
AIが作った結果が、すぐ目の前に動くアプリとして現れます。
実際に数字を入れて、計算ボタンを押してみましょう。
「水の量:10リットル」「希釈倍率:1000倍」→ 結果:「10 ml」と表示されれば成功です。
Buildモードで完成した希釈計算ツール

気になるところを修正する
1〜3分
プレビューを見て「もう少しこうしたい」と思ったら、そのまま入力欄に伝えるだけ。
「色を変えて、ボタンを増やして、レイアウトも変えて」と一気に頼むより、1つずつ修正を重ねるほうが成功率が高いです。農薬散布と同じで、少量ずつ、確認しながら進めるのが基本です。
ワンクリックで公開する
1分
「これでOK!」と思ったら、画面上部の 「Deploy App(デプロイ)」 ボタンを押します。
ボタン
すると、数分で あなたのアプリに専用のURL が発行されます。
これで、あなたが作った農薬希釈計算ツールが、世界中のどこからでもスマホで使えるようになりました。
✨ Buildモードならではの「うれしい機能」
Annotation Mode(見たまま修正)
「ここの文字の色を変えたいけど、どう説明すればいいか分からない…」
Buildモードにはプレビュー画面上で直接クリックして「この部分を修正して」と指定できる機能があります。言葉で説明しにくい修正も、指さすだけでOK。
I’m Feeling Lucky(AIにおまかせ)
「何を作ろうか決められない…」というときは、「I’m Feeling Lucky」ボタンを押してみてください。AIがあなたに合いそうなアプリのアイデアを提案してくれます。思いもよらないアプリとの出会いがあるかもしれません。
Google検索・画像生成が自動で使える
Buildモードで作ったアプリには、Googleの検索や画像生成AI(Nano Banana)などの機能を自動で組み込んでくれることがあります。たとえば「病害虫の名前を入力したら、最新の対処法を検索して表示するツール」も、特別な設定なしで作れます。
🌾 農業現場での活用アイデア
Buildモードなら、こんなアプリもブラウザだけで完成します。
前回の記事で「面倒なことを1つメモしておきましょう」とお伝えしました。そのメモを、今日ここに入力してみてください。
⚠️ 知っておきたい注意点
Buildモード自体の操作はパソコンが必要です。完成したアプリはスマホで使えますが、作る作業はPCで行いましょう。
「Deploy」で公開すると、URLを知っている人は誰でもアクセスできます。パスワード保護はないので、個人情報や機密データを扱うアプリは公開しないでください。
作業中はこまめに保存しましょう。Buildモードにはプロジェクトの保存機能があるので、途中で中断しても続きから再開できます。
前回と同じです。特に農薬の使用量など安全に関わる数値は、必ず自分の目で検算してください。
Buildモードでも、完璧なアプリを一発で作るのは難しい場面があります。でも、チャットモードのときよりも修正のサイクルが格段に速いので、対話を重ねれば80点→85点→90点と引き上げていけます。
✅ 今日から試せる!5分アクション
👇 今日はここまでやってみましょう。
- パソコンで aistudio.google.com にアクセスしてログイン
- 画面上部の 「Build」タブ をクリック
- 入力欄に、以下をそのままコピペして送信:
農薬の希釈計算ツールを作ってください。
水の量(リットル)と希釈倍率(倍)を入力したら、
必要な農薬量(ml)を自動で計算して大きく表示してください。
スマホでも見やすいデザインにしてください。 - 右側にプレビューが表示されたら、数字を入れて計算ボタンを押してみる
- 「文字をもっと大きくして」と1つだけ修正を頼んでみる
ここまでできたら、あなたはもう「Vibe Coder(バイブコーダー)」です。 🎉
📐 ステップアップ:チャットモード → Buildモード → その先
ここまでの記事で、Vibe Codingの「段階」が見えてきたのではないでしょうか。
今回のBuildモードで「自分でもアプリが作れる!」という手応えを感じたら、次のステップとして Google Antigravity という、さらに進化したツールをご紹介します。
まとめ
- AI Studio「Build」モード = コードのコピペ不要。ブラウザだけでアプリが完成する
- 「作って」と伝える → 右側にプレビュー表示 → 修正 → ワンクリックで公開
- Annotation Mode(見たまま修正)や自動AI機能で、初心者にも使いやすい
- 完成したアプリは URLで共有 できるので、パートさんにLINEで送れる
- 注意点:公開アプリにはパスワードがない。個人情報は入れない。計算結果は必ず自分で確認
💬読者の声をお聞かせください
この記事に関するご質問・ご感想をお待ちしています。

