Google AI Studioの「Build apps with Gemini」について徹底解説しました。
Build apps with Geminiの基本的な操作方法、テキストとテンプレートを使った具体的なアプリ作成手順、困った時の対処法、そして僕が作成した5つのアプリ(プロンプト付き)を共有しています。わかりやすく理解できるようにまとめました。
Google AI Studioの機能について興味がある人、Build apps with Geminiを使いこなしてみたい人は、ぜひ最後までお読みください。
- ▶︎はじめに：Google AI Studioの使い方を学ぶ
- ▶︎まずは「便利な神機能5選」を活用する
- ▶︎Generate Mediaの使い方を学ぶ
- ▶︎Google AI Studioにアクセスする
- ▶︎Build apps with Geminiにアクセスする
- ▶︎Build apps with Geminiとは？
- ▶︎Google AI Studioを日本語表記にして活用する
- ▶︎Build apps with Geminiでアプリを作成する(想像以上に簡単に作成できます)
- ▶︎Build apps with Geminiを活用する際の注意点：アプリが正しく作成されない場合があります(対処法)
- ▶︎Showcaseから「Googleオリジナルのアプリ」を活用する
- ▶︎Your appsから「作成したアプリ」を確認する
- ▶︎Recent appsから「活用履歴」を確認する
- ▶︎FAQ(よくある質問)から「Build apps with Geminiの疑問点」を解決する
- ▶︎Build apps with Geminiで作成したアプリと活用したプロンプトを「5つ」共有
- ▶︎Build apps with Geminiを活用してみて感じた率直な感想
- ▶︎まとめ(今後予想されるアップデートポイント)
▶︎はじめに：Google AI Studioの使い方を学ぶ
Google AI Studioを活用したことがない人は、以下の記事を読むことをおすすめします。この記事だけで、Google AI Studioはどんなツールなのか、どんなことができるのか、どう活用するのかを理解できます。
Build apps with Geminiを活用する前に読んでおくと、スムーズに活用することができます。
▶︎まずは「便利な神機能5選」を活用する
Google AI Studioには、本記事で共有するBuild apps with Geminiの他にも便利な機能が満載です。その中でも「特に便利だと感じた機能5選」を、以下の記事にまとめました。
「まだ使いこなせている段階ではないから、簡単に活用できる機能を知りたい」と考えている人に、上記の記事がおすすめです。
▶︎Generate Mediaの使い方を学ぶ
Google AI Studioでは、その他にも非常に優れたツールを活用できます。その機能は「Generate Media」です。この中ではGemini image generation、Gemini speech generation、Imagen、Veo、Lyria RealTimeのツールを活用することができます。どのツールも非常に優秀で、競合と比較してもトップクラスの精度です。
以下の記事でこれら「5大ツール」の活用方法、活用例などを網羅的にまとめました。僕は初めて活用した時、純粋に驚きました。
▶︎Google AI Studioにアクセスする
以下のリンクから、Google AI Studioにアクセスできます。
https://aistudio.google.com/app/prompts/new_chat
アクセスするのも活用するのも無料です。にも関わらず、高性能なツールが満載です。
▶︎Build apps with Geminiにアクセスする
まず最初に、上記のリンクをクリックしてホーム画面を開きます。
左サイドバーに表示されているBuildをクリックします。
クリックすると、以下の画面が表示されます。
この画面でアプリを作成したり、アプリを活用したり、履歴をチェックすることができます。
▶︎Build apps with Geminiとは？
操作方法やできることを共有する前に、「Build apps with Geminiについて」共有します。最初にこの章を読むことで、 「Google AI StudioのBuild apps with Gemiとは何なのか」を理解することができます。
◼︎簡単に説明すると・・・
Build apps with Geminiとは、Google AI StudioのBuildタブにある「テキスト入力だけでウェブアプリを作れる開発機能」のことを指します。
初めてでも、数分でアプリの作成が可能です。
◼︎何ができるの？
◻︎プロンプトだけでアプリを作成できる
「○○なアプリを作って」と入力すると、テキストと数百行のコードを自動で出力してくれます。
◻︎その場で動作確認&編集ができる
生成直後にプレビュー画面が開き、動きを確認しながらチャット指示でコードを微調整できます。初心者でも安心して活用可能です。
◻︎ワンクリックで公開できる
共有リンクを送ることで、無料で作成したアプリを公開できます。
◼︎初心者に優しいポイント
先述の通り、Google AI StudioのBuild apps with Geminiは初心者にも優しい設計となっています。以下にポイントをまとめました。
✓初心者に優しい「3つのポイント」
・ノーコード感覚→コードは自動で生成してくれるので触る必要がありません
・APIキー不要→アプリをシェアしても利用者側の無料枠が使われます
・失敗しても安心→チャットで指示を出すだけでアプリを修正できます
▶︎Google AI Studioを日本語表記にして活用する
上記の画像を見ていただくとわかりますが、 基本的にGoogle AI Studioは英語表記です。このままでは活用しにくいです。
「英語だとスムーズに使えない・・・」「日本語で活用したい・・・」という人は、「▶︎Google AI Studioを日本語で活用する方法」を参考にして、日本語表記にしてみましょう。
▶︎Build apps with Geminiでアプリを作成する(想像以上に簡単に作成できます)
さっそく、Build apps with Geminiでアプリを作成していきます。アプリを作成する方法は2つあります。1つ目はゼロからテキストを入力して作成する方法、そして2つ目はテンプレートを活用して作成する方法です。それぞれの方法について実例を交えながら、わかりやすくまとめました。
ChatGPTではGPTsのようなアプリ、そしてDifyでもアプリの構築が可能です。しかし僕が活用したことのあるツールの中では、最も簡単にアプリを構築できました。Build apps with Geminiは、非常に優れた機能と言えます。
テキストだけで自由に作成していきたい場合は①の方法、組み込みたい動作をテンプレートで組み込み、その後に簡単なテキストを用いて作成していきたい場合は②の方法をおすすめします。
◼︎①テキスト入力欄からアプリを作成する
ます最初に、テキスト入力欄からアプリを作成する方法を共有します。僕自身が実際にアプリを作成しながら共有していきます。
◻︎プロンプト(指示文)を入力する
テキストを入力してアプリを作成する際、以下の入力欄に入力します。
ここでは、「中国語能力を高めるための質問形式の単語アプリ」を作成していこうと思います。その際、以下のテキストを入力しました。
✓プロンプト(指示文)
【アプリ名】Beginner Chinese Vocab Quiz
【モデル】Gemini 2.5 Pro
【目的】中国語（HSK1〜2 相当）の必須単語をクイズ形式で無限に出題し、楽しく暗記できる Web アプリを作成したい。
【機能仕様】
- Top ページに「スタート」ボタン
- 出題画面
● 問題文：中国語（簡体字＋拼音） を表示
● 5 つの選択肢：日本語訳 をランダムに並べる（正解×1 + 誤答×4）
● 「答えを送信」ボタン→ 正誤フィードバック（○/× と正解表示）
● 1 問終了後に「次の問題へ」ボタン、無限ループで出題 - 単語データ
- 下記の初心者向け単語リスト(100語)を JSON 配列でコード内に埋め込み
- 出題ごとに
Math.random()で別単語を抽出
- スコア表示
- 連続正解数と累計正解数を画面右上にリアルタイム表示
- UI デザイン
- モバイル対応のシンプル 1 カラム
- フォントは Noto Sans SC / 日本語は Noto Sans JP
- 色：背景 #fafafa、カード #ffffff、正解 #4caf50、誤答 #f44336
- 生成後のプレビューで動作確認できるよう、ボタン・レイアウトまで自動実装
【データ例】
[
{“zh”:”你好”,”py”:”nǐ hǎo”,”ja”:”こんにちは”},
{“zh”:”谢谢”,”py”:”xièxie”,”ja”:”ありがとう”},
{“zh”:”再见”,”py”:”zàijiàn”,”ja”:”さようなら”},
{“zh”:”请”,”py”:”qǐng”,”ja”:”どうぞ”},
{“zh”:”是”,”py”:”shì”,”ja”:”はい／〜です”},
…（100語まで続けて追加）
]
【補足】ユーザーは API キーを入力せずに利用できるよう、代理キー方式で実装する
◻︎アプリの作成を開始する(作成工程もご覧いただけます)
矢印のマークをクリックして、アプリを作成していきます。
クリック後、以下のように出力されていきます。出力の全工程は以下の動画で確認できます。
◻︎出力されたアプリはこれ！(あまりにも簡単で驚きました)
以下のアプリを作成することができました。
操作をしてみると、初心者向けの中国語単語のクイズができるようになっていました。
作成するのにかかった時間は2分程度です。
プロンプトを入力した後は、Geminiが勝手にアプリを作成するためのコードを出力して、作成が完了します。Google AI Studioのこの機能、実際に活用してみて「ヤバい機能だな」と思いました。
作成できた中国語クイズのデザインもシンプルで洗練されており、問題なく操作もできました。またクイズに関してはランダムに出力されるようになっているため、「学習者向け」の仕様です。
これが無料で作成できてしまうんです。
入力するプロンプトの精度を高めれば、思いのままに設計、デザインをすることができます。作れるアプリの範囲に制限はありません。自分が頭の中で考えているものは、大抵形にすることができます。
◻︎作成した「Chinese Vocab Quiz」を活用してみる
ここで作成したChinese Vocab Quizを活用してみたい人は、以下のボタンをクリックしてみてください。もちろん無料で活用できます。2分程度で作成したアプリだとは到底思えません。
◼︎アプリを作成する際の「プロンプト入力」のコツ
おそらく、「アプリの作成をするためのプロンプト」を見た時に「こんなプロンプト作成できない・・・」と思ったかもしれません。しかし、僕自身も「ひとりでは作成できなかった」ので安心してください。
◻︎ChatGPTに「アプリ作成用のプロンプト」を出力してもらう
なので僕自身は、ChatGPTを用いてプロンプトを作成しました。生成AIを用いてプロンプトを作成することで、「想像しているアプリを作成するためのプロンプト」は簡単に作成できます。やるべきことは「イメージするだけ」です。
中国語単語クイズのアプリ用のプロンプトを作成する際、ChatGPTに以下のプロンプトを入力しました。
✓プロンプト(指示文)
Build apps with Geminiで「中国語能力を高めるための質問形式の単語アプリ」を作成するためのプロンプトを出力してください。ランダムに網羅的な単語が学べるようにしたいと持っています。５つほどの選択肢からひとつの正しいものを選択するような形式で、問題が無限に続くようにしたいと思っています。初心者用のものが作成できるようなプロンプトにしてください。
◻︎出力内容を確認する
入力後に矢印のマークをクリックすることで、中国語単語クイズを作成するためのプロンプトが出力されました。以下が出力内容になります。
覚えておきたいポイントは、「出力のたびにプロンプトが若干変化する」という点です。
なので、実際に出力したプロンプトでアプリを作成した時に「ちょっと違うな・・・」と思ったら、調整をしていきます。もちろんここで共有している方法は、中国語単語クイズのアプリを作成すると時だけではなく、「全てのアプリを作成する時」に役立つ方法です。
このように競合の生成AIを活用することで、一気に作成の幅が広がります。活用していてワクワクするような感覚を味わえます。
◼︎②テンプレートを活用してアプリを作成する
2つ目の方法は「テンプレートを活用する方法」です。Google AI Studioでは「作成したいアプリ」に合わせてテンプレを活用しながら作成を進めることができます。最初見た時は「ん？これのどこが便利なんだろう」と感じましたが、活用するうちに「テンプレを活用できるのはすごく便利だ・・・！」と思えるようになりました。
テンプレートを選択した後にやるべきことは「簡単なテキストを入力するだけ」です。この方法では、これだけでアプリを作成できます。
◻︎活用できるテンプレートを表示する
テンプレートを活用してアプリを作成する際、以下の画面のStart from a templateをクリックします。
クリックすると、以下の項目が表示されます。
ここに表示されているのは「活用できるテンプレート」になります。2025年6月の時点では、11のテンプレートを活用できます。作成したいアプリに合わせて使用するテンプレートを選択し、作成を進めていきます。
次の節では、それぞれのテンプレートの特徴、そしてテンプレートを活用して作成するおすすめのアプリについて「表」にまとめています。
☐「各テンプレでできること」と「活用するべきおすすめのアプリ」を表にまとめました(2025年6月時点)
テンプレートを使うとできることとおすすめの作成アプリについて、わかりやすい表にまとめました。テンプレを活用してアプリを作成したい人は、ぜひ参考にしてください。なお、こちらの情報は2025年6月時点での情報になります。
活用できるテンプレート
Empty
まっさらなアプリ枠。UIだけ自作したいときに便利
主な学べる API 機能
—
おすすめの作成アプリ
既存サイトにAI機能を後付けするカスタムダッシュボード
Prompt
1プロンプト→1レスポンスの超基本例
主な学べる API 機能
Gemini APIクイックスタート
おすすめの作成アプリ
キャッチコピー生成ツール／即席翻訳ボックス
Live
双方向ストリーミングで“エージェント”を作る例
主な学べる API 機能
Live API
おすすめの作成アプリ
リアルタイム翻訳チャット／同時通訳ウィジェット
Chat example
マルチターン対話チャットのサンプル
主な学べる API 機能
チャット用ストリームSDK
おすすめの作成アプリ
FAQボット／キャラクターチャット
Count tokens
入力テキストのトークン数を取得して表示
主な学べる API 機能
count_tokens API
おすすめの作成アプリ
プロンプト料金シミュレーター／長文入力チェック
Embeddings
ベクトル埋め込みを生成してRAGなどに利用
主な学べる API 機能
Embeddingsエンドポイント
おすすめの作成アプリ
社内文書検索／RAG QAボット
Streaming
画像＋テキストを逐次ストリーム出力
主な学べる API 機能
Streaming Quickstart
おすすめの作成アプリ
途中経過を見せる画像生成ビューア／ライブ長文応答
Code execution
GeminiにPythonを書かせてサンドボックス実行
主な学べる API 機能
Code Executionツール
おすすめの作成アプリ
Python実行学習環境／自動テスト生成ツール
Function calling
外部関数を定義してGeminiに呼ばせる
主な学べる API 機能
Function Callingガイド
おすすめの作成アプリ
天気API連携プランナー／タスク実行アシスタント
React example
React + Gemini連携の最小SPA
主な学べる API 機能
公式サンプルコード
おすすめの作成アプリ
Next.jsサイトに埋め込むAIチャットパネル
OpenAI SDK compatibility
OpenAI SDKを3行差し替えてGeminiに置換
主な学べる API 機能
OpenAI互換性ドキュメント
おすすめの作成アプリ
OpenAI⇔Gemini比較ベンチ／移行検証サンプル
◻︎テンプレートを活用してアプリを作成する
実際に表示されているテンプレートのひとつを活用してアプリを構築してみようと思います。ここでは「Function callingのテンプレート」を活用して、「URLを分析してその記事に見合ったメタディスクリプションを自動で出力してくれるアプリ」を構築していきます。
☑︎作成手順その１：活用するテンプレートを選択する
まず最初はテンプレートの選択です。Start from a templateをクリックした後に表示されるテンプレートの中から、ここではFunction callingを選択します。
テンプレートを選択すると、以下の画面が表示されます。
中央にFunction callingのコードのテンプレートが表示されました。
「なんか難しそう・・・」と感じてしまうかもしれませんが、このテンプレートの構造を理解する必要はありませんし、自分で書き換えたりする必要もありません。「Function callingのテンプレを活用するとこうやって表示されるんだね」程度に思って頂くだけで問題ありません。
この記事を書いている僕自身も、プログラマーではありません。わからないことが多いながらも、「これはすごく便利なんだな」と感じることができました。
☑︎テンプレートのどこが便利なの？
この節を読むことで、上記のテンプレートがどれだけ便利なのか理解できます。
テンプレのどこが便利なのかと言うと、「自身でコードを入力しなくても、対象の機能をアプリ内に実装できる」という点です。「こんなふうに動いてもらいたいんだけど、そのためにどんなコードを活用するべきなんだろう」と疑問に思っている時でも、テンプレートを活用すれば、その疑問を解決することができます。
先述の通り、僕はこの記事内でFunction callingのテンプレートを活用しています。活用できるテンプレートの表を見てみると、「体験できること」の中に、「外部関数を定義してGeminiを呼ばせる」と記載されています。これができると、外部のデータベースやAPIにアクセス可能となり、最新情報をリアルタイムに取り込み、モデル自身の知識を補うことができます。
結果として、このテンプレートを活用すれば「URLを分析してその記事に見合ったメタディスクリプションを自動で出力してくれるアプリ」が作成できます。
「このアプリにはこの機能を実装した方がいい」とあらかじめ理解している場合は、テンプレートを活用した方がより簡単にアプリを作成できます。作成したアプリが正確に動く確率も高まります。
しかし「テンプレートだけを活用すればアプリが作成できる」というわけではありません。テンプレート選択+テキスト入力を実施することで、初めてアプリを作成できます。次の節で、方法を共有します。
☑︎作成手順その２：「作成したいアプリに関するテキスト」を入力する
活用したいテンプレートを選択後、左下の欄にテキストを入力します。
ここに入力するテキストは、通常のテキストになります。また、すでにテンプレートで「このアプリに実装するもの」は入力済みです。なので、ここではテキストを作り込む必要はありません。僕の場合は、以下のようなテキストだけでも全く問題なくアプリを作成できました。
✓テンプレート選択後に入力したプロンプト(指示文)
「URLを分析してその記事に見合ったメタディスクリプションを自動で出力してくれるアプリ」を構築してください。
☑︎作成手順その３：アプリを作成する
入力後、矢印のマークをクリックしてアプリの構築を開始します。
クリック後、以下のアプリが構築されました。
こんな感じで、作成が完了しました。
非常に多くのテキストが入力されていますが、僕がやったことは「’テキスト入力」と「矢印のボタンをクリックする」だけでした。このアプリを作成するまでにかかった時間は66秒でした。たったの66秒で、記事に最適なメタディスクリプションを生成してくれるアプリを構築することができました。
☐作成した「メタディスクリプションジェネレーター」を使ってみる
作成した「メタディスクリプションジェネレーター」は、以下のボタンから活用できます。
▶︎Build apps with Geminiを活用する際の注意点：アプリが正しく作成されない場合があります(対処法)
この章では、僕自身が「Build apps with Geminiでアプリを作成する際に起きたこと」をもとに、ひとつの注意点を共有します。非常に便利で優れたツールである反面、「まだまだ課題もあるな」という感じでした。しかしこれが「悪い」というわけではありません。なおここで共有している内容は、純粋なテキストで作成しても、テンプレートを用いて作成しても、どちらの方法でも起こることです。
「こんなことが起こるんだ」と理解しつつ、活用のヒントとなれば幸いです。
◼︎作成したアプリを活用して回答を出力する
テンプレートを活用してアプリを構築した際、「ん？何これ」と感じた箇所がいくつかありました。そこで、作成直後のアプリの中身を共有していきます。
上記でも共有したように、テンプレートを用いて作成したアプリはURLから最適なメタディスクリプションを生成する「メタディスクリプションジェネレーター」です。
試しに活用してみます。実際に、以下の記事のURLを入力しました。
「メタディスクリプションを生成」をクリックして出力します。
◼︎出力内容を確認する
クリック後に出力されましたが、以下の画像ように背景とテキストが白くなってしまいました。
これでは何が書いてあるかわかりません。また、メタディスクリプションなのにも関わらず、出力されたテキストの文字数が「588」と非常に多くなってしまっています。
これではメタディスクリプションとして活用することができません。
「どのように構築ミスをするのか」は構築するたびに変化しますが、今回のケースのように、割と頻繁に「これはおかしい」と感じるアプリが作成される印象でした。
◼︎アプリの作成ミスがあった時の対処法
しかし、作成ミスは簡単に修正できます。ここでも方法は「テキスト入力」です。
◻︎作成し直したいアプリの構築画面を開く
アプリの作成ミスを修正する際、まず最初にアプリの構築画面を表示します。
◻︎修正のためのテキストを入力する
この画面の左下にあるテキスト入力欄に、「修正のためのテキスト」を入力していきます。
例えば僕が作成したアプリの場合だと、背景もテキストも白くなったこと、そしてメタディスクリプションが長すぎることが作成ミスとして挙げられます。
この2点を修正するために、ここでは以下のテキストを入力しました。
✓プロンプト(指示文)
生成されるメタディスクリプションと背景が同じ色になってしまっているので、背景は白、テキストは黒になるように修正してください。また、記事の中で活用するメタディスクリプションなので、SEOに優位に働くような文字数、そしてテキストを生成するようにしてください。
◻︎アプリの作成ミスを修正する
矢印のマークをクリックして、修正を開始します。
クリック後、以下のように修正をしてくれます。再構築の全工程は以下の動画で確認できます。
今回は、再構築するのに1分もかかりませんでした。すでに作成されているアプリの構造自体は変えずに、「指示した箇所」だけを正しく修正してくれました。
なおミスを修正する時間は、作成するアプリによって変化するので注意が必要です。
◻︎ミスが修正されているか確認する(テキストの色/メタディスクリプションの内容)
修正後のアプリが以下のものになります。実際に活用してみたい人は、「メタディスクリプションジェネレーターを使ってみる」から活用可能です。
外見からは修正されているのかわかりません。なので先ほどと同じように、記事のURLをペーストしてメタディスクリプションを生成してみようと思います。
☑︎テキストの色を確認
クリック後、以下のように出力されました。
今回はしっかりと黒字のテキストが出力されました。次に、出力されたメタディスクリプションを見ていきます。
☑︎メタディスクリプションを確認
✓出力されたメタディスクリプション
【NotebookLM モバイル完全ガイド】スマホ・タブレットでの使い方を徹底解説。アプリ有無、便利機能、活用術まで網羅。どこでも快適にNotebookLMを使いこなそう！
対象の記事を反映したメタディスクリプションが出力されました。もちろんこのまま活用するには問題がありますが、精度は非常に高いように感じました。
さらに、生成されたメタディスクリプションのポイントまで丁寧に出力されています。以下のテキストになります。
このように出力されると、頭を抱えがちなメタデイスクリプションの作成もスムーズに進んでいきそうです。
こんな感じで、作成ミスがあっても簡単に修正を実施することができ、「作成ミスのないアプリ」にすることができます。
▶︎Showcaseから「Googleオリジナルのアプリ」を活用する
Showcaseは、Build apps with Geminiを開いた後に表示される画面です。
この画面では、Google AI Studioが公式に提供するアプリを活用できます。どのようなアプリがあるのか、どんなアプリが構築できるのかをイメージすることができます。どれも、アイデアに富んだ優れたツールです。活用することで「こんなアプリが作れるんだ、自分も使ってみようかな」と感じることができるかもしれません。
2025年6月の時点で、以下のようなアプリを活用することができます。「例」として一部を表にまとめました。
Build apps with Geminiで活用できるアプリ
Mumble Jumble
ネイティブ音声をリアルタイム生成しながらおしゃべりを楽しめる“声の遊園地”
Live Audio
3Dビジュアル付きの低遅延ボイスチャットをワンクリックで構築
Prompt DJ / Prompt DJ MIDI
テキストやMIDIで曲を即生成＆リアルタイムでリミックス
p5js playground
「〇〇なアートを描いて」→ Geminiがp5.jsコードを生成し即プレビュー
Gemini Co-Drawing
ラフスケッチをアップ→AIが補完・着彩し一緒にお絵描き
Flashcard Maker
キーワードを入力するだけでQ&A形式のフラッシュカードを量産
Video to Learning App
YouTube動画からインタラクティブ学習アプリを自動生成
Tiny Cats
かわいいネコのスライドで難しい概念をかみ砕いて説明
Gemini 95
Windows 95風デスクトップを再現、ノスタルジックUIで遊べる
Magical GIF Maker
プロンプトからGIFアニメを自動合成して一瞬で共有
Dictation App
マイク音声をリアルタイム文字起こし＋フィラー除去オプション
Maps Explorer
Gemini×Google Mapsで世界中の興味スポットをチャット探索
Maps Planner
行き先を入力すると最適な旅行ルートを自動プランニング
Spatial Understanding
画像や画面共有からオブジェクトを検出し2D/3Dボックスで表示
Video Analyzer
動画をアップしてシーン要約・テキスト抽出・オブジェクト検索
Image to Code
画像を読み込み→p5.jsなどで再現する複数のコード案を生成
ChatterBots
複数AIキャラを作成し、相互に会話させながらプロンプトを検証
▶︎Your appsから「作成したアプリ」を確認する
◼︎画面を表示する
Your appsをクリックすることで、作成したアプリを確認することができます。
クリック後、以下の画面が表示されます。
ここに表示されているのが「作成したアプリ」です。「アプリ名」や「アプリの紹介文」が表示されています。過去に作成したアプリを活用したい場合は、Your appsをクリックしましょう。
◼︎作成したアプリを削除する
この画面から作成したアプリを削除することもできます。その際、「削除したいアプリ」に表示されているゴミ箱のマークをクリックします。
次に、OKをクリックします。
クリック後、選択したアプリが削除されます。
アプリが増えてくると管理するのが面倒です。定期的に確認をして、不要になったアプリは削除するようにしましょう。スマホのアプリと同じような感覚で、少ない方が管理しやすいです。
▶︎Recent appsから「活用履歴」を確認する
過去に活用したアプリを確認する際、Recent appsをクリックします。
クリックすると、以下の画面が表示されます。
この画面から、Build apps with Geminiで活用したアプリを確認できます。いわゆる「履歴画面」です。アプリを活用した後、Recent appsに自動的に記録が残ります。
「あの時活用したアプリ、どこで使ったか忘れた・・・」という時に便利な機能です。
▶︎FAQ(よくある質問)から「Build apps with Geminiの疑問点」を解決する
FAQをクリックすることで、Build apps with Geminiの疑問点を解決することができます。
クリック後、以下の画面が表示されます。
上記の画像は日本語表記にしたものです。ここには、Build apps with Geminiに対して「多くの人が抱く疑問の回答」が掲載されています。
一例として、以下のような感じの内容が掲載されていました。よりわかりやすく理解していただくために、表にまとめています。
FAQ の一例
「Build with Gemini」とは何ですか？
アプリはどのように実行されますか？
自分のAPIキーが他の人に公開されませんか？
作成したアプリのアクセス権はどうなりますか？
作成したアプリをデプロイできますか？
自分のPC（ローカル環境）で開発できますか？
「もっとBuild apps with Geminiを理解したい」という人は、FAQを見ることで知識が深まるはずです。そこまで多くの内容は記載されていませんが、活用する際に役立つ内容でした。
本記事とあわせてチェックするのがおすすめです。
▶︎Build apps with Geminiで作成したアプリと活用したプロンプトを「5つ」共有
最後の章では、僕自身がBuild apps with Geminiで作成したアプリと、活用したプロンプトを共有します。ここに表示されているプロンプトは一見すると「難しそう」ですが、僕自身は一切書いていません。すべてChatGPTが提案したものになります。そこに、少しだけ修正を加えました。「ChatGPTにアプリ構築用のプロンプトを出力してもらう方法」を理解することで、どんな人でも自分が作成したいアプリを作成できるようになります。
アプリを作成する際の参考になれば幸いです。
◼︎①パーソナライズ旅行プランナー「旅とも」
✓このアプリでできること
・日別スケジュールを 1時間単位で提案
・費用内訳と合計予算を自動計算(交通・宿泊・食事・観光)
・おすすめ持ち物リストと「現地の天候／服装ヒント」付き
✓活用したプロンプト
system:
あなたは「旅とも」パーソナライズ旅行プランナーです。
- 旅行条件を受け取ったら最適な日別行程と費用見積を JSON で返します。
- 必要に応じて最新レート換算・フライト検索・現地イベント取得のために
function:get_api_data を呼び出してください。 - API が失敗または 0 件の場合は推定値で計算し “概算” と明記してください。
- 出力は 必ず 次の構造に従ってください：
{
“itinerary_summary”:””,
“daily_plan”:[
{
“day”:1,
“schedule”:[{“time”:”09:00″,”activity”:””,”cost”:}]
}
],
“estimated_total_cost”:
}
functions:
- name: get_api_data
description: 外部 API からフライト・イベント・為替を取得
parameters:
type: object
properties:
query: {type: string}
user:
## 入力
旅行期間 (YYYY-MM-DD〜YYYY-MM-DD): {{travel_dates}}
人数: {{people}} 名
予算上限 (JPY): {{budget}}
興味 (グルメ / 文化 / アクティビティ など): {{interests}}
移動手段の好み (例: 飛行機・鉄道・レンタカー): {{transport}}
作成されたアプリのホーム画面になります。
以下のボタンから、パーソナライズ旅行プランナー「旅とも」を活用してみてください。
◼︎②スマート買い物メモ
✓このアプリでできること
・献立や食材を入力するとカテゴリ別の買い物リストを自動生成
・概算価格や合計予算を算出し、アレルギー食材があれば警告
✓活用したプロンプト
system:
あなたは「スマート買い物メモ」AI です。
- 入力に献立名があれば食材へ展開、重複をマージしカテゴリ別に並べます。
- 各アイテムに概算価格とチェックボックス用 ID を付与してください。
- アレルギー食材を含む場合は “alert”: true として赤色カードを推奨。
- JSON:
{
“items”:[
{“id”:1,”category”:”青果”,”name”:”玉ねぎ”,”price”:120},
…
],
“total_price”: ,
“alert”: ,
“alert_items”:[“”, …],
“ui_hints”:{
“card_title”:”買い物リスト”,
“group_by”:”category”,
“show_checkbox”:true,
“accent_color”:”#27ae60″ // alert 時は #e74c3c
}
}
user:
献立または必要食材 (カンマ区切り): {{menu_or_items}}
アレルギー食材 (なければ空欄): {{allergies}}
作成されたアプリのホーム画面になります。
以下のボタンから、スマート買い物メモを活用してみてください。
◼︎③リアルタイム翻訳メッセンジャー
✓このアプリでできること
・日本語メッセージを貼ると英語、中国語、韓国語に瞬時翻訳＋カジュアル／フォーマル切替
・それぞれの言語を音声で聴くこともできます
✓活用したプロンプト(これに修正を加えてます)
system:
あなたは「リアルタイム翻訳メッセンジャー」です。
- 入力文を英語・中国語・韓国語へ翻訳。tone に応じ敬語レベルを調整。
- JSON:
{
“翻訳”:[
{“言語”:”英語”,”文”:”<string>”,”音声URL”:”<tts_url>”},
{“言語”:”中国語”,”文”:”<string>”,”音声URL”:”<tts_url>”},
{“言語”:”韓国語”,”文”:”<string>”,”音声URL”:”<tts_url>”}
],
“ui_hints”:{
“カードタイトル”:”即時翻訳”,
“アクセントカラー”:”#2980b9″,
“copy_button”:true
}
}
user:
メッセージ本文: {{本文}}
トーン (カジュアル / フォーマル): {{トーン}}
作成されたアプリのホーム画面になります。
以下のボタンから、リアルタイム翻訳メッセンジャーを活用してみてください。
◼︎④ノイズウォーブ・シナプスフィールドジェネレーター
✓このアプリでできること
・パーリンノイズ×立体波合成による、まるで脳波のように揺らめくアニメーションフィールドを生成
・周波数(freq)、オクターブ数(oct)、スムージング強度(smooth)をスライダーでリアルタイムで調整
・フレームレート(fps)を自由に設定し、滑らかなループアニメーションを制御
✓活用したプロンプト(これに修正を加えてます)
system:
あなたは「ノイズウォーブ・シナプスフィールド」ジェネレータです。
- 周波数 freq、オクターブ oct、滑らかさ smooth を基に 800×400 キャンバスを生成。
- パーリンノイズ値を y 座標、高速正弦波を色相シフトに使用。
- fps に応じてアニメ周期 = 1/fps 秒。SVG <animate> でループ。
- JSON:
{
“svg”:”<svg …>”,
“fps”: {{fps}},
“ui_hints”:{
“card_title”:”Noise-Wave”,
“accent_color”:”#00ffc6″,
“show_svg”:true,
“animate”:true
}
}
user:
基本周波数 freq (0.5–4.0): {{freq}}
オクターブ数 oct (1–6): {{oct}}
ノイズ平滑度 smooth (0–1): {{smooth}}
フレームレート fps (10–60): {{fps}}
作成されたアプリのホーム画面になります。
以下のボタンから、ノイズウォーブ・シナプスフィールドジェネレーターを活用してみてください。
ノイズウォーブ・シナプスフィールドジェネレーターを使ってみる
◼︎⑤ハイパーフラグメントSVGアートエンジン
✓このアプリでできること
・基準色、配色アルゴリズム(サイケデリック／補色／モノクローム)を選択
・全画面SVG表示対応：画面いっぱいに鮮やかな重ね合わせグラデーションを描画
・SVGとしてダウンロードも可能
✓活用したプロンプト(これに修正を加えてます)
system:
あなたは「ハイパーフラグメント」SVGアートエンジンです。
必ず次の要件を守ってください。
- <svg> タグには
width=”100%” height=”100%” viewBox=”0 0 1000 1000″ preserveAspectRatio=”xMidYMid slice”
を必ず付与し、全画面表示に対応させること。 - 入力値が空欄でもデフォルトで生成できるよう、下記既定値を使用:
base_color=”#ff0080″, algorithm=”psychedelic”, complexity=5,
motion_type=”rotate”, export_png=”no” - 出力は JSON のみ、キー名も日本語:
{
“ＳＶＧ”:”<svg …>”,
“ＰＮＧデータＵＲＩ”:”data:image/png;base64,… または 空文字”,
“使用パレット”:[“#…”,”#…”,”#…”],
“アニメ秒数”:<整数>,
“ui_hints”:{
“カードタイトル”:”ハイパーフラグメント”,
“アクセントカラー”:”{{基準色}}”,
“表示ＳＶＧ”:true,
“アニメ”:true,
“レイアウト”:”full”
}
}
user:
■入力
基準色 (#HEX) 【デフォルト #ff0080】: {{基準色}}
配色アルゴリズム (psychedelic / complementary / monochrome) 【既定 psychedelic】: {{配色}}
複雑度 1–10 (ステップ1) 【既定 5】: {{複雑度}}
動き (morph / rotate / pulse / none) 【既定 rotate】: {{動き}}
ＰＮＧも出力? (yes / no) 【既定 no】: {{ＰＮＧ出力}}
作成されたアプリのホーム画面になります。
以下のボタンから、ハイパーフラグメントSVGアートエンジンを活用してみてください。
▶︎Build apps with Geminiを活用してみて感じた率直な感想
最後に、「Build apps with Geminiでアプリを作成して感じた率直な感想」を共有します。
結論からお伝えすると、「コンテンツ作成の自由度がさらに広がって今まで以上に想像を形にできるようになった」と感じました。
注意点の章で「アプリが正しく作成されない場合がある」ことを共有しましたが、それ以上に「アプリを簡単に作成できること」、「テキスト入力だけで数百行のコードを出力できること」、「複雑さがないこと」というメリットが強く、活用すること自体が楽しかったです。ここまで簡単に想像をアプリにできるツールは他にはありません。使い込んでみて、改めて感じました。
ひとつだけ「難点」があるとしたら、「基本言語が英語」という部分です。しかしこれに関しては「Google AI Studioを日本語表記にして活用する」の中で、問題解決の方法を共有しています。
▶︎まとめ(今後予想されるアップデートポイント)
以上になります。
Build apps with Geminiで「どうアプリを構築するのか」、「どんな方法で構築するのか」、「どんなアプリが構築されるのか」、そして「注意点」まで理解できたかと思います。
2025年6月の時点で、Build apps with GeminiはExperimental版となっています。つまり「試験版」です。とは言っても、実際に作成できるアプリの精度は「すでに高い」です。それにもかかわらず、この機能はまだ試験版としての機能となっています。
今後、Google AI StudioのBuild apps with Geminiでは、以下のようなアップデートが予想されています。
今後予想されるアップデート
UI/UX の洗練化
トップバーやダッシュボードで主要操作をワンクリック化
メディアモデル統合
画像・動画・音声生成をワークフロー内でシームレスに利用
最新モデル対応
2.5 Flash/Pro や専門用途モデルをプレビュー利用可能に
思考プロセスの可視化
「思考サマリー」「思考バジェット」で品質とコストを自由に管理
開発支援の強化
リアルタイム編集・フォーク・共有機能で本番移行をスムーズに
このツールがどのように変化していくのかを期待しつつ、実際に活用して「すごさ」を実感してみてください。アプリの作成ができるのは「有識者だけ」ではありません。
この記事がBuild apps with Geminiの理解と、コンテンツ作成の喜びを得るきっかけとなれば幸いです。
なお、こちらのページを最後までスクロールするとコメント欄があります。そちらのコメント欄に気づきや感想等がございましたらご記入ください。さらに質の高い情報を発信するための学びとさせていただきます。
最後までお読みいただきありがとうございました。
コメント