Google AI StudioでAIアプリをつくって遊ぶ方法
はじめに
Google AI StudioでAIアプリをつくって遊ぶ方法を説明してみます。基本無料で遊べます。
- 注意
- この記事は2025年6月ぐらいの時点の話です。Google AI Studioはちょくちょく進化するので、内容が変わる可能性がが多分あります
Google AI Studioとは？
- なんかAIを使って色々できるやつです
- 「Google AI Studio」と聞くと、なんか難しそうに思えるかもしれません。
- しかし実はこれは「なんか色々作れて遊べるAIアプリメーカー」だったりします。
- 「こういうアプリあったら面白いかも？便利かも？」とか何かアイデアがあれば、自分だけのAIアプリが作れてしまったりします。
- そして、開発したアプリケーションを実際に操作し、その反応を確認し、さらに改良を加えるといった、デジタル工作のようなプロセスを体験できます。
- 作るのは全部AIに任せられるので、技術的な知識が特になくてもなんとなく作れます。また、無料で使用できます。
遊びに必要な道具たち
まずはこれだけあればOK(のはず)
- Googleアカウント（Gmail持ってたらもうあるはず）
- パソコン（スマホは遊ぶ専用で作るのは無理）
AIアプリを実際に作ってみる
Step 1：AI Studioにアクセス
https://aistudio.google.com/ にアクセスしてログインする。
左のメニューから「Build」をクリックして、「Build apps with Gemini」に移動する
Step 2：「こんなの作って！」とお願いしてみる
ページ上部の入力欄に、「作ってみたいアプリのアイデア」を自由に書いてみる。
例：
- 「おみくじAI作って」
- 「猫の名前をつけてくれるやつ」
- 「何言ってもつっこんでくれるAIチャット作って」
入力したら「Build」ボタンをクリックする。するとアプリ編集画面に移動し、あとはAIが一気に形にしてくれる。内容にもよるが早ければ大体1分〜2分くらいで作成完了するはず。
Loading...
作ったAIアプリで遊ぶ
遊ぶその1：とりあえず動かしてみる
アプリ編集画面の右側にプレビューが表示されるので、そこでアプリを触ってみる。 何かがなんとなくできてるはず。思い通りに動くかもしれないし、そうでないかもしれない。
遊ぶその2：直したり改造したりする
画面左の Code Assist(AIアシスタント) に以下のような感じで入力すると、アプリの中身を修正してくれたりする。
- 「ボタンを押したら効果音が鳴るようにして」
- 「これの内容をイメージした絵も生成して表示して」
- 「もっとツッコミ強めに返して」
AIが修正したらまた触ってみてまた修正して...を繰り返していい感じにしながら遊んでいく。
ちょっとしたアレ
AIアシスタントへの入力フォームで日本語で長文打つと、変換でEnter押した瞬間に途中送信されてしまう場合があったりする。 メモ帳とかで書いてからコピペした方がいいかもしれない。
遊ぶその3：作ったアプリを保存する
- アプリ編集画面の右上あたりに保存ボタンとコピーボタンがあるのでそこを押すと保存やコピーが行える。
- 初回作成時点で既に保存されている。最後に保存されてから何か変更するまで保存ボタンは押せない。コピーはいつでもできる。
遊ぶその4：スマホでも遊ぶ
- 作ったアプリは、スマホからGoogle AI Studioにアクセスすれば使える
- 「Build apps with Gemini」ページの中央あたりに「Your Apps」というタブがあるので、それをクリックすると保存されたアプリ一覧が表示されるのでそこからアクセスできる
- ただし、スマホでは編集はできなくて「遊ぶだけ」。
自分のローカルPC上で動かす方法(もっとディープに遊びたい人向け)
必要な準備
- npm / node.js のインストールが必要
- インストール方法は適当にネットで調べてください
- Gemini API KEY（無料で取れる）を用意
- → API KEYはAI Studioの右上「Dashboard」から発行できる
- プロジェクト名は適当でもOK。課金なしでも作れる。
- → API KEYはAI Studioの右上「Dashboard」から発行できる
ざっくりとしたやり方
- アプリ編集画面の右上にダウンロードボタンがあるので、それをクリックしてダウンロードする
- 解凍して中のREADME通りに以下のような内容を実行する
npm iを実行してパッケージをインストール.env.localファイルを編集しAPIキーを設定するnpm run devで起動
ブラウザで http://localhost:5173 を開けば、AIアプリにアクセスできる。
そのままファイルを編集したりして追加開発できたりする。
ローカルで編集したアプリのコードをまたGoogle AI Studioに戻すには？
- 編集画面の中央のファイル編集ウィンドウの左上の「ファイルツリー」を開いて、右上のアップロードボタンからファイルをアップできる
- ただし、フォルダ単位ではアップできないみたいなので使い勝手は悪い
- 場合によってコードをコピペした方が早いかもしれない。
- ただし、フォルダ単位ではアップできないみたいなので使い勝手は悪い
APIキーに関する注意
- APIキーは秘密情報 絶対に人に見せたりSNSに貼ったりしてはいけない。
- 無料のAPIキーだと一部機能（例えば一部の画像生成とか）は使えなかったりする。
- 使えない機能を使用しようとすると、コンソールに無課金APIキーでは利用できない旨のエラーメッセージが出る。
- AI Studio上だと特別なAPIキーが使用されてるっぽくてその辺の制限がないっぽい
その他補足
アプリのコードを直接編集する
- アプリ編集画面の中央にファイル編集ウィンドウがあるので、そこで自力でファイルを修正したりもできる。
- 内部で使用するプロンプトの調整など、AIに修正させるよりは自分で修正した方が早い場合があったりするかも。
- どの辺を修正すればいいかわからない時は、code assistに聞いてみるのがいいかもしれない。
誰かと共有する
- アプリ編集画面の右上あたりにシェアボタンがあるのでそこを押すとシェアするためのURLがコピーできる。
- シェアされる人もGoogle AI Studioにログインできないと使えない
- コード全部共有されることになるので、個人情報とか秘密情報とかが含まれてたりしないかどうか注意する必要がある。
- アプリデータはgoogleドライブのファイルに紐づいていて、公開範囲や編集権限とかをgoogleドライブの機能で管理する必要がある。
- データの所有者としてのアカウント情報も知られる可能性があるので、全世界とかには気軽に公開はしない方がいいかも。
- 知り合いにとかに渡してデータをコピーしてもらった後に、また非公開とかにするのがいいかもしれない。
- アプリ編集画面の右上あたりにCloud Runデプロイボタンがあるのでそこを押すとデプロイできる。
- 開発者向けで課金が必要
- 筆者は無課金ユーザーなので使ったことがない。
そのほか
- 公式のFAQ(要AI Studioログイン) https://aistudio.google.com/apps?source=faq
- わからないことがあったら、AI Studioの中のCode Assistに聞いてみるのが多分色々知ってるかもしれないのでいいかもしれない。
- ただ、 AIに過度な期待をしない方がいいです。 普通に色々間違えます。遊びとして割り切るのがおすすめです。
おわりに
- 結構気軽に作れるので、何か思いついたらとりあえずパッと作ってみるといいかもしれません。
- 自由度が結構高い気がするので、ハマってしまう人はハマってしまうかもしれません。
- 今後別記事で作ってみたものとかを紹介してみたりしたいと思います。
