【AIが調べる #11】コードを書かずに「動くアプリ」を作る。無料Google AI Studioで言葉だけでWebアプリを作る3つの技

この記事は、AIが最新情報を調査・整理して執筆したものです。今回扱うのは、ブラウザで「こういうアプリが欲しい」と日本語で説明するだけで、AIが実際に動くWebアプリを作ってくれる、Googleの「Google AI Studio（グーグル・エーアイ・スタジオ）」の「Build（ビルド）」という機能です。いわゆる「バイブコーディング」——コードを1行も書かず、言葉（雰囲気・やりたいこと）を伝えるだけでソフトを作る、という新しいやり方です。Webブラウザ（aistudio.google.com）にGoogleアカウントでログインするだけ・クレジットカード登録なしの無料から使えます（無料の範囲には条件があります。詳しくは後述します）。

このシリーズでは過去に「Geminiで資料を読む」「ChatGPTのメモリ」「チャート作成」「DaVinciで動画編集」「ElevenLabsで作曲」「Cometブラウザ」「Nano Banana Proで画像生成」「Gammaでスライド作成」「Klingで動画生成」「NotebookLMで研究ノート」を扱ってきました。今回はシリーズ初の『言葉でアプリ（ソフト）そのものを作る＝バイブコーディング』回です。

ここで1つだけ、はっきり線を引いておきます。#3の「チャート作成」や#8の「Gammaでスライド作成」と、表面だけ見ると似ています。どちらも「AIに成果物を作ってもらう」話だからです。ですが中身は決定的に違います。#3や#8は「チャート・スライドという“資料（出力物）”を作る」話でした。今回のBuildは「あなたがこれから何度も使う“ソフト（アプリ）”そのものを、コードで作る」話です。一度作れば、買い物リストや家計簿、タイマー、診断メーカーといった自分専用の道具が手元に残り、使い続けられる——「1枚の資料」ではなく「動く道具」が成果物、というのが他の回との決定的な違いです。

そして、いま注目すべき鮮度の話を1つ。Google AI Studioの「言葉でアプリを作る」体験は、2026年3月18日にフルスタック（本格的なアプリまで作れる）対応として大きく刷新され、さらに2026年5月19日のGoogle I/O 2026で、画像生成などを足す「AI Chips（AIチップス）」、作ったアプリを最初の2本まで無料でネット公開できるデプロイ、Androidアプリ対応などが発表されました。そして直近の2026年6月15〜19日には、GoogleとKaggleが「バイブコーディングでAIエージェントを作る」無料の集中講座を開催するなど、この「言葉でアプリを作る」流れは2026年6月のいま、まさに各社が力を入れている旬のテーマです（特定の「◯日前に登場」と断定はしません。土台の刷新は数か月前で、その後も6月まで更新・展開が続いている、という状況です）。本記事は、その中でも初心者がクレカなし・無料で確実に成功体験を得られる範囲にしぼって解説します。

この記事を読み終えると、あなたは次の3つを自分の手でできるようになります。

それぞれに「使う場面」「そのままコピペできる指示文（プロンプト）」「出てくるもののイメージ」「つまずきポイント」を付けます。

Google AI Studio「Build」とは（入手と操作）

Google AI Studioは、GoogleのAI「Gemini（ジェミニ）」を、ブラウザから無料で試せる作業場です。その中の「Build（ビルド）」というタブが、今回の主役です。Buildでは、「こういうアプリが欲しい」と文章で説明すると、AIがその場で動くWebアプリを作ってくれます。作られるのはReact（リアクト）などで書かれた本物のWebアプリで、画面の右側ですぐに動かして確認（ライブプレビュー）できます。

普通のチャットAIは「文章で答える」だけですが、Buildは違います。「動くソフト」を作って、その場で触らせてくれるのです。気に入らなければ「ここをこう直して」と言葉で頼むだけで作り直してくれます。これが「バイブコーディング（雰囲気・やりたいことを伝えて作る）」と呼ばれる理由です。

「プログラミングって難しそう」と思っている初心者にとって、これは最初の成功体験として最高の入口です。コードの文法を覚えなくても、「買い物リストが欲しい」と言えば、本当に動く買い物リストアプリが目の前にできあがります。

使い方（クレカ不要）

注：画面表示は日本語に対応しており、日本から・日本語で利用できます。日本語で指示を書いてかまいません。ただし、タブ名（「Build」）やボタンの配置・名称は、アップデートで変わることがあります（このツールは更新がとても速いです）。実際に触るときは、その時点の公式画面の表示を優先してください。

料金の線引き（無料でどこまで？）

ここが一番気になるところなので、正確に書きます。結論から言うと、「言葉でアプリを作って、その場で動かして確認する」までは、クレカ不要・無料でできます。 ただし、作ったアプリを“ネットに本格公開して大勢に使ってもらう”段階には、無料の範囲と従量課金（使った分だけお金がかかる）の境目があります。ここを誤解すると、思わぬ請求につながりかねないので、はっきり線を引きます。

正直に書いておくべきポイントが3つあります。

注：無料枠の数値（生成回数の上限・無料デプロイ本数）は時期によって変わります。この記事の数字は調査時点（2026年6月）の目安です。実際の上限・料金は、aistudio.google.com の画面表示と公式の料金ページで必ず確認してください。

技1：自分専用のミニWebアプリを、言葉だけで作る

使う場面：「市販のアプリは多機能すぎて使いにくい」「自分の使い方にぴったり合った、シンプルな道具が欲しい」「プログラミングを学びたいけど、最初の一歩がわからない」——自分専用のミニアプリ（買い物リスト、家計簿、タイマー、診断メーカーなど）を、コードを書かずに手に入れたいときです。Buildの一番の入口で、最初の成功体験にぴったりです。

手順：

うまくいくコツは、「作るもの・必要な機能・データの保存方法・見た目」をひとまとまりで具体的に伝えることです。特に「保存（localStorage）」を指定しておくと、ブラウザを閉じても入力した内容が消えません。そのままコピペできる指示文（プロンプト）の例です（カギカッコ内を自分の目的に書き換えてください）。

シンプルな「買い物リスト」のWebアプリを作ってください。要件は次のとおりです。
・テキスト入力欄と「追加」ボタンがあり、入力した品物をリストに追加できる
・各項目にはチェックボックスがあり、買い終わったらチェックすると取り消し線が付く
・各項目に「削除」ボタンがあり、押すとその項目を消せる
・入力した内容はブラウザのlocalStorageに保存し、再読み込みしても消えないようにする
・スマホでも見やすいシンプルで明るいデザインにする
・全部日本語で表示する

出てくるもののイメージは、こんな感じです。

数十秒ほどで、画面右側に本物の買い物リストアプリが表示される。入力欄に「牛乳」と打って「追加」を押すとリストに並び、チェックを入れると取り消し線が付く。ブラウザを再読み込みしても、入れた品物が消えずに残っている（localStorage保存が効いている）。コードは1行も書いていないのに、自分専用の道具が動く形で手に入る。

つまずきポイント：最初の説明が曖昧だと、思っていたのと違うものが出ます。「リストを作って」だけだと、保存されなかったり、削除ボタンが無かったりします。上の型のように「機能を箇条書きで具体的に・保存方法まで指定」すると、一発で狙い通りになりやすいです。それでもズレたら、技3のやり方で「削除ボタンも付けて」のように言葉で足していけば直せます。最初から完璧を狙わず、まず動くものを出して、あとから言葉で育てるのが上達のコツです。

技2：AI Chipsで「AI機能」を足したアプリにする

使う場面：「ただのリストやメモではなく、AIならではの機能（画像を自動生成する、地図と連動する、最新情報を踏まえて答える）を入れたアプリを作りたい」——作るアプリにAIの力を組み込みたいときです。ここで効くのが「AI Chips（AIチップス）」という仕組みです。

AI Chipsは、Googleの便利な機能を、難しい設定なしでアプリに“足せる”部品です。たとえば次のようなものがあります。

普通なら、こうした機能をアプリに組み込むには「APIキーの取得」「認証設定」といった専門的な作業が必要です。AI Chipsは、それを選ぶだけで自動的につないでくれるので、初心者でもAI機能つきのアプリが作れます。

手順：

そのままコピペできる指示文の例です（画像生成のAI Chipを足す前提）。

「旅行先ガイド」のWebアプリを作ってください。要件は次のとおりです。
・テキスト入力欄に「地名」を入れて「ガイド表示」ボタンを押すと、
　その土地の見どころを3つ、初心者にもわかりやすい日本語で提案する
・あわせて、その土地のイメージ画像を1枚、画像生成機能で作って表示する
・結果は、見出し＋箇条書き＋画像のカードとして見やすくまとめる
・スマホでも見やすい、明るくシンプルなデザインにする
※画像生成にはAI Chipsの画像生成機能（Nano Banana）を使ってください

出てくるもののイメージは、こんな感じです。

入力欄に「京都」と打って「ガイド表示」を押すと、見どころが3つ箇条書きで提案され、その下に京都らしいイメージ画像が1枚生成されて表示される。地名を変えるたびに、提案も画像も切り替わる。「文章で答えるだけ」ではなく、AIが画像まで作ってくれるアプリが、コードを書かずに手に入る。

つまずきポイント：AI Chipsを有効にし忘れると、画像が出ない・地図が動かないといったことが起きます。「画像を生成して」と書いても、対応するChip（Nano Banana）を選んでおかないと機能しないことがあるので、指示文で頼む＋Chipを選ぶ、の両方をやってください。また、画像生成や検索は1回ごとにAIの生成枠を使うので、無料のレート制限（技1・料金の章で触れた上限）に当たると一時的に止まります。試すときは少しずつ動かしましょう。

技3：作ったアプリを、言葉だけで直して育てる（反復改善）

使う場面：「最初に作ったアプリを、もっと使いやすくしたい」「機能を1つずつ足していきたい」「でもコードはわからない」——できあがったアプリを、コードを触らずに改良していきたいときです。ここがバイブコーディングの真骨頂で、“育てる”工程です。

Buildの良いところは、一度作ったアプリに対して、チャットで「こう直して」と頼むだけで、AIがコードを書き換えてくれることです。あなたはコードを一切見なくても、言葉で注文するだけでアプリが進化します。

手順：

コツは、「あれもこれも」と一度にたくさん頼まないことです。1回の注文は1つの変更にしぼると、狙い通りに直りやすく、失敗しても戻しやすいです。そのままコピペできる指示文の例です（前の技で作ったアプリに続けて頼む想定）。

今のアプリに、ダークモード（暗い背景の表示）を追加してください。
・画面右上に「🌙 ダークモード」の切り替えボタンを置く
・ボタンを押すと、背景が暗い色・文字が明るい色に切り替わる
・もう一度押すと、元の明るい表示に戻る
・選んだモード（明るい／暗い）はlocalStorageに保存し、次に開いたときも維持する
他の機能やデザインは、できるだけ今のまま変えないでください。

このあとも、たとえば次のように1つずつ頼んでいけば、アプリはどんどん育ちます。

追加した項目を、新しいものが一番上に来る順番（新しい順）で並べてください。

「すべて削除」ボタンを画面の下に追加してください。押す前に「本当に削除しますか？」と確認を出してください。

出てくるもののイメージは、こんな感じです。

「ダークモードを追加して」と頼むと、画面右上に切り替えボタンが現れ、押すと背景が暗く・文字が明るく切り替わる。コードは一切見ていないのに、言葉で頼んだ通りにアプリが変わっていく。1回1要望で積み重ねると、最初はシンプルだったアプリが、自分の使い方にぴったりの道具へと育っていく。

つまずきポイント：一度に複数の変更を頼むと、一部だけ反映されたり、別の場所が崩れたりすることがあります。「1回1要望」を守るのが、遠回りに見えて一番の近道です。また、「他の機能はそのままで」と一言添えると、直してほしくない部分まで作り変えられる事故を防げます。それでも崩れたら、前のうまくいっていた状態（履歴やZIP保存）に戻せるよう、気に入った段階でこまめにダウンロードしておくと安心です。

つまずき・注意点（ここが誠実さの核）

便利な反面、知っておくべき点があります。ここを飛ばすと、誤算や思わぬ請求のもとです。

向いている人・まとめ

Google AI Studioの「Build」が特に向いているのは、次のような人です。

まず aistudio.google.com に Googleアカウントでログイン（クレカ不要）し、「Build」タブで、欲しいアプリを1段落で具体的に説明してみてください。「言葉で作る（技1）→ AI機能を足す（技2）→ 言葉で直して育てる（技3）」の3つを一度通せば、「自分が使う道具を、自分の言葉で作る」という新しい感覚が掴めるはずです。“作って・動かして・確認する”までは無料／本格公開・大規模運用は従量課金になり得る——この線引きと、生成コードは公開前に中身を確認するという1点さえ押さえておけば、期待外れも、思わぬ請求も避けられます。コードを書けないことは、もう「作れない理由」ではありません。

次回も、AIが最新の情報を調べて、初心者がそのまま真似できる形で1つずつツールを掘り下げていきます。

参考：