AI Studioの「Build」で農業アプリを作ってみよう! ブラウザだけでサクッと完成!

Vibe Coding
初級
⏱ 10分(読む+実践)

🔨 AI Studioの「Build」で農業アプリを作ってみよう! ブラウザだけでサクッと完成!

「作って」と依頼 → プレビュー → ワンクリックで公開。たったそれだけ!

1
チャット
コピペで使う
2
Build
ブラウザで完成
3
Antigravity
AIが自律実行

「前回の記事で、Vibe Codingの考え方は分かった。」
「でも、実際にやるとなると…コードをメモ帳にコピペして、保存して、ファイルを開いて…って、ちょっとハードルが高い。」
「もっと簡単に、ポチッとボタンを押したらアプリが完成する方法はないの?」

…あります。

実は、前回ご紹介した Google AI Studio に、「Build(ビルド)」 という機能が追加されています。

これを使えば、コードのコピペは一切不要。ブラウザの中で「作りたいもの」を伝えるだけで、アプリの作成からプレビュー、さらには ワンクリックでインターネット上に公開 まで、全部できてしまいます。

💡
この記事でわかること
  • AI Studio「Build」モードとは何か
  • 従来のやり方(コピペ方式)との違い
  • 農薬希釈計算ツールを「Build」で作る全手順
  • 作ったアプリを公開・共有する方法
  • 知っておきたい注意点
🌱

🌱 「Build」モードってなに?

Google AI Studioには、大きく分けて 2つの使い方 があります。

💬
前回

① チャット(Prompt)モード

  • AIに質問したり、コードを生成してもらう
  • 出てきたコードは 自分でコピー → メモ帳に貼って保存
  • ファイルを開いて動作確認する
🔨
今回

② Build モード

  • AIに「こんなアプリ作って」と伝える
  • 画面右側にアプリのプレビューがリアルタイム表示
  • 修正も「ここを直して」と言うだけ
  • 「Deploy」ボタンでインターネットに公開
🌱

🚜 農業でたとえると?

チャットモード(前回)

JAに「この品種の苗ありますか?」と電話する

「ありますよ。取りに来てください」と言われて、自分で車を出して取りに行く

Buildモード(今回)

JAの窓口で「この苗を圃場に届けてほしい」とお願いする

注文から配達まで 全部やってくれる。あなたは届いた苗を見て「OK」と言うだけ。

つまり、「自分で運ぶ手間」がなくなったのがBuildモードです。

🌱

📊 チャットモード vs Buildモード

💬 チャットモード(前回) 🔨 Buildモード(今回)
コードのコピペ 必要(メモ帳に貼る) 不要
ファイル保存 自分で「.html」で保存 自動
プレビュー ファイルをブラウザで開く 画面右側にリアルタイム表示
修正 コードを再コピペ 「ここ直して」と言うだけ
公開 自分でサーバーに置く(難) ワンクリックで公開(URL発行)
AI機能の追加 自分でAPI設定が必要 自動で組み込んでくれる
料金 無料 無料
🌱

🔧 実践!Buildモードで「農薬希釈計算ツール」を作ろう

前回の記事で「次回作ります」と予告していた、農薬希釈計算ツール。今回はBuildモードで、もっと簡単に作ってみましょう。


AI Studioにアクセスして「Build」を選ぶ
1分
  1. パソコンのブラウザで aistudio.google.com にアクセス
  2. Googleアカウントでログイン
  3. 画面上部のメニューから 「Build」 をクリック(または直接 aistudio.google.com/apps にアクセス)
💡
前回は「Chat」のタブを使いましたが、今回は 「Build」のタブ です。ここが今日のポイント!

AI Studio Buildモードの画面
AI Studio「Build」タブの画面。左に入力欄、右にプレビューが表示されます


「作りたいもの」を伝える
1分

画面に大きな入力欄が表示されます。ここに、作りたいアプリの内容を日本語で入力しましょう。

📋 AIへの指示文(コピーして使えます)

農薬の希釈計算ツールを作ってください。

機能:
– 使う水の量(リットル)を入力する欄
– 希釈倍率(倍)を入力する欄
– 「計算する」ボタンを押すと、必要な農薬量(ml)が表示される
– よく使う倍率(500倍・1000倍・2000倍)はワンタッチボタンにする

デザイン:
– 緑を基調とした、農業らしい温かみのあるデザイン
– スマホでも見やすい大きな文字
– タイトルは「かんたん農薬希釈計算」

入力したら、送信ボタンを押します。


プレビューを確認する
30秒

ここが チャットモードとの最大の違い です。

💬 あなたの指示
“農薬の希釈計算ツールを作って…”
✨ リアルタイムプレビュー
かんたん農薬希釈計算
10 ml

送信すると、画面の右側にアプリのプレビューがリアルタイムで表示されます

コードをコピーする必要はありません。メモ帳を開く必要もありません。
AIが作った結果が、すぐ目の前に動くアプリとして現れます。

実際に数字を入れて、計算ボタンを押してみましょう。
「水の量:10リットル」「希釈倍率:1000倍」→ 結果:「10 ml」と表示されれば成功です。


Buildモードで完成した希釈計算ツール


気になるところを修正する
1〜3分

プレビューを見て「もう少しこうしたい」と思ったら、そのまま入力欄に伝えるだけ。

🗣️
「計算結果をもっと大きく、赤い文字で目立たせて
🗣️
「使用農薬名を入力する欄も追加して。履歴として下に記録されるようにして」
🗣️
リセットボタンもつけて」
🗣️
「上に使い方の説明を3行くらいで追加して」
💡
コツ:一度にたくさん修正しない

「色を変えて、ボタンを増やして、レイアウトも変えて」と一気に頼むより、1つずつ修正を重ねるほうが成功率が高いです。農薬散布と同じで、少量ずつ、確認しながら進めるのが基本です。


ワンクリックで公開する
1分

「これでOK!」と思ったら、画面上部の 「Deploy App(デプロイ)」 ボタンを押します。

🔨
アプリ完成
🚀
Deploy
ボタン
🌐
URL発行!

すると、数分で あなたのアプリに専用のURL が発行されます。

📱
QRコードに変換して作業場に貼っておく
💬
LINEで共有してパートさんに送る

ブックマークしておいて、スマホからいつでもアクセス

これで、あなたが作った農薬希釈計算ツールが、世界中のどこからでもスマホで使えるようになりました。

🌱

✨ Buildモードならではの「うれしい機能」

🎨

Annotation Mode(見たまま修正)

「ここの文字の色を変えたいけど、どう説明すればいいか分からない…」
Buildモードにはプレビュー画面上で直接クリックして「この部分を修正して」と指定できる機能があります。言葉で説明しにくい修正も、指さすだけでOK

🎲

I’m Feeling Lucky(AIにおまかせ)

「何を作ろうか決められない…」というときは、「I’m Feeling Lucky」ボタンを押してみてください。AIがあなたに合いそうなアプリのアイデアを提案してくれます。思いもよらないアプリとの出会いがあるかもしれません。

🔍

Google検索・画像生成が自動で使える

Buildモードで作ったアプリには、Googleの検索や画像生成AI(Nano Banana)などの機能を自動で組み込んでくれることがあります。たとえば「病害虫の名前を入力したら、最新の対処法を検索して表示するツール」も、特別な設定なしで作れます。

🌱

🌾 農業現場での活用アイデア

Buildモードなら、こんなアプリもブラウザだけで完成します。

📐
農薬希釈計算
「水の量と倍率から必要量を計算するツール」
🌡️
積算温度記録
「毎日の気温を入力して合計を表示するアプリ。グラフ付き」
📋
収穫チェックリスト
「作物名・収穫量・品質をスマホで入力できる記録シート」
💰
肥料コスト比較
「3つの肥料の単価と面積から、コストを比較する計算機」
🌤️
作業判断ツール
「今日の天気と気温を入力したら、農薬散布の可否を判定するツール」
📊
出荷記録
「日付・品目・数量・出荷先を入力して一覧で見られるアプリ」
💡
ポイント:「自分の現場のちょっとした面倒」がベストなお題です。

前回の記事で「面倒なことを1つメモしておきましょう」とお伝えしました。そのメモを、今日ここに入力してみてください。

🌱

⚠️ 知っておきたい注意点

💻
スマホでは使いにくい

Buildモード自体の操作はパソコンが必要です。完成したアプリはスマホで使えますが、作る作業はPCで行いましょう。

🔓
公開したアプリは誰でもアクセスできる

「Deploy」で公開すると、URLを知っている人は誰でもアクセスできます。パスワード保護はないので、個人情報や機密データを扱うアプリは公開しないでください。

💾
保存を忘れずに

作業中はこまめに保存しましょう。Buildモードにはプロジェクトの保存機能があるので、途中で中断しても続きから再開できます。

🔢
AIの計算結果は必ず確認する

前回と同じです。特に農薬の使用量など安全に関わる数値は、必ず自分の目で検算してください。

📈
「80点の壁」は健在

Buildモードでも、完璧なアプリを一発で作るのは難しい場面があります。でも、チャットモードのときよりも修正のサイクルが格段に速いので、対話を重ねれば80点→85点→90点と引き上げていけます。

🌱

✅ 今日から試せる!5分アクション

👇 今日はここまでやってみましょう。

  1. パソコンで aistudio.google.com にアクセスしてログイン
  2. 画面上部の 「Build」タブ をクリック
  3. 入力欄に、以下をそのままコピペして送信:
    農薬の希釈計算ツールを作ってください。
    水の量(リットル)と希釈倍率(倍)を入力したら、
    必要な農薬量(ml)を自動で計算して大きく表示してください。
    スマホでも見やすいデザインにしてください。
  4. 右側にプレビューが表示されたら、数字を入れて計算ボタンを押してみる
  5. 「文字をもっと大きくして」と1つだけ修正を頼んでみる

ここまでできたら、あなたはもう「Vibe Coder(バイブコーダー)」です。 🎉

🌱

📐 ステップアップ:チャットモード → Buildモード → その先

ここまでの記事で、Vibe Codingの「段階」が見えてきたのではないでしょうか。

Step 1
AI Studio チャット
コードを生成してもらう(コピペで使う)
📖 超入門
🧑 人間がやること:コピペ&保存
手間がどんどん減る ▼
← 今ここ
Step 2
AI Studio Build
アプリをブラウザ内で完成・公開
📖 本記事
🧑 人間がやること:確認&修正指示
さらに自動化 ▼
Step 3
Google Antigravity
AIが計画〜テストまで自律的に実行
📖 次回
🧑 人間がやること:「OK」と言うだけ

今回のBuildモードで「自分でもアプリが作れる!」という手応えを感じたら、次のステップとして Google Antigravity という、さらに進化したツールをご紹介します。

🌱

まとめ

  • AI Studio「Build」モード = コードのコピペ不要。ブラウザだけでアプリが完成する
  • 「作って」と伝える → 右側にプレビュー表示 → 修正 → ワンクリックで公開
  • Annotation Mode(見たまま修正)や自動AI機能で、初心者にも使いやすい
  • 完成したアプリは URLで共有 できるので、パートさんにLINEで送れる
  • 注意点:公開アプリにはパスワードがない。個人情報は入れない。計算結果は必ず自分で確認

🚀
次回予告
Google Antigravity — AIが「自分で考えて、自分で直す」時代へ

Buildモードでは「作って→確認→修正」を人間が繰り返しましたが、AntigravityではAIが自分で計画を立てて、テストして、修正まで自動で行います

Build(今回)
人間:確認&修正指示
Antigravity(次回)
人間:「OK」と言うだけ

「AI Studioで作った80点のツールを、90点に引き上げたい」という方は、ぜひお楽しみに!

🌱

💬読者の声をお聞かせください

この記事に関するご質問・ご感想をお待ちしています。




この記事は農家の皆さんのAI活用を応援するために作成しました。
ご質問やご感想があれば、ぜひお寄せください。

© 2026 農業AI通信 / Metagri研究所

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人