入会金0円／契約期間の縛りなし
セミナー開催レポートブログ
Google AI StudioのBuild機能を使うと、プログラミングをほとんどせず、自然な言葉の指示だけでNano Banana（Geminiの画像生成・編集機能）を組み込んだオリジナルアプリを作れます。線画ジェネレーターを題材に、APIキーの取得から公開、PWA化までの流れを押さえると、同じ手順でほかの画像生成アプリにも応用できます。
2025年9月17日のProcevoの講座では、講師のKEITOがGoogle AI StudioのBuildを使い、画像を線画に変換するアプリを実際に作りました。扱ったのは、APIキーの取得、修正の重ね方、アスペクト比がずれるときの対策、Google Cloudへのデプロイ、スマートフォンでアプリのように使えるPWA化までです。
Nano Bananaは、Geminiに搭載された画像生成・編集の機能です。画像をアップロードして「精密な線画にしてください」「アメコミ風の絵にしてください」と指示するだけで、その通りに変換された画像が得られます。髪色や服装の変更、3Dアセット風の画像作成など、幅広い加工に対応します。
本講座の目的は、このNano Bananaの機能を入れたオリジナルアプリを作ることです。講師のKEITOが事前に作った例として、アップロードした写真からLINEスタンプ風の画像を生成するアプリが紹介されました。裏側に「LINEスタンプ風の画像を作る」というプロンプトを固定で仕込み、文字入力欄などのUIを指示しただけで、コードは一切書いていないといいます。ただし、画像内に日本語の文字を入れると崩れやすいという課題も見られました。
アプリに組み込むプロンプトのアイデアとしては、文字の加工、3Dモデル化、線画化、髪色変更、LINEスタンプ化などが挙げられています。
講師のKEITOによると、資料作成のために1日いろいろ検証しても費用はごくわずかだったとのことです。料金や無料枠は変わることがあるため、最新の条件はGoogle AI Studio（https://aistudio.google.com/）とGoogle Cloud（https://cloud.google.com/）の公式ページで確認してください（2026年11月時点）。
最初にGoogle AI Studio（aistudio.google.com）にアクセスし、APIキーを作成します。
作成後、画面下に「お支払い情報を設定」などの表示が出ていれば準備は完了です。プランの表示が「無料（Free）」の場合は、どこかの時点で使えなくなる可能性があります。その場合は「Open Cloud Console」からGoogle Cloudに支払い情報を登録します。
アプリ作成には、Google AI Studioのトップページにある「Build」を使います。作りたいアプリを自然な言葉で伝えるだけで、アプリが組み上がっていきます。講座で使った指示の要点は次のとおりです。
BuildではAPIキーを自分で組み込む指示をしなくても、取得済みのキーが内部的に使われ、Nano Bananaや画像解析（Vision）などGeminiの機能がアプリに自動で入ります。そのため画像生成以外にも、チャットボットやPDF要約アプリなども簡単に作れます。
一度で思い通りのアプリができることはまれで、最も時間がかかるのは修正作業です。講座では次のような修正を指示しました。
Geminiで画像生成アプリを作るときによく起きるのが、アスペクト比の設定がUI上は追加されても実際の画像に反映されない問題です。縦長を選んでも、縦長の枠の中に正方形の画像を置いただけの「それらしい」出力になってしまいます。
講師のKEITOが試行錯誤の末に見つけた対策は、16:9・9:16・1:1の無地の画像をあらかじめ用意し、アプリに組み込む方法です。「ユーザーが選んだアスペクト比の画像とアップロードした画像を合わせて線画を作成し、アスペクト比画像に合わせた大きさで、画像全体が線画になるように生成してください」と指示したところ、選んだ比率どおりの画像が生成されるようになりました。
講座の後半では、手書きの文字をもとに金属風の文字画像を作るアプリも作りました。「まず手書きのスケッチから文字の画像を作り、次にその文字をメタリック加工する」という2段階の処理と、色の選択機能を指示しています。
プロンプトを細かく調整したい場合は、BuildのCode画面でファイルを検索し、プロンプトが書かれている箇所を直接編集することもできます。
Buildのプレビュー画面でもアプリは使えますが、その画面を離れると使えず、プレビュー共有ではチャットのやり取りも見えてしまいます。URLで公開するには、保存（Save）したうえで「アプリをデプロイ」を押します。
Google Cloudのプロジェクトを選ぶ画面が出るので、APIキー作成時にできたプロジェクトを選び「Deploy app」を押すと公開が完了します。完了まで数分かかることがあります。アプリはCloud Runのサービスとして公開され、APIキーはアプリ内には露出しない仕組みです。
完了画面の「Open in Google Cloud」からは、公開したサービスの稼働状況やリクエスト数を確認できます。費用はGoogle Cloudの「お支払い（課金）」ページで確認します。アプリを編集した場合は、再度デプロイ（再デプロイ）しないと公開版に反映されません。
公開したアプリが使われるほど、自分のGoogleアカウントに課金されます。また、バイブコーディングで作ったアプリはセキュリティ面の責任を取りにくいため、講師のKEITOは「基本は自分だけのオリジナルアプリとして使う」ことを勧めています。サービスとして提供する場合は、課金とセキュリティを学んでからにすべきだとしています。
ローカルで動けば、自分のサーバーと独自ドメインで公開する道も開けます。なお、以前の講座で扱った静的サイト（HTMLとCSSのみ）と違い、このようなアプリはユーザーの操作で画面が変わる動的サイトです。サーバーに手作業でアップロードするだけでは動かず、実行環境（バックエンド）が必要になります。
Buildで作ったアプリは、特に指示しなくてもスマートフォン表示に対応していました。さらに「PWA（プログレッシブウェブアプリ）に対応して」と指示すると、ホーム画面にアイコンを追加して、アドレスバーのない専用アプリのように起動できます。パソコンでもアプリとしてインストールできました。
パソコンで開いているURLをスマホに渡すには、ブラウザのQRコード作成機能が便利です。Chromeの場合は、右上のメニュー（︙）の「保存して共有」にある「QRコードを作成」から表示できます。
ワークショップでは、漫画風画像のジェネレーター、アイコン作成ツール、風刺画メーカーなど多様なアプリが作られました。応用アイデアとして次のようなものも挙がっています。
決まったスタイルで画像を量産したいSNSやショート動画の制作に向いています。講師のKEITOによると、API経由で生成した画像にはGeminiアプリで付くウォーターマークが付かないとのことです。Google AI Studioの「Generate media」などには、参考になるサンプルが多数用意されています。
参加者から、Cursorなどと比べた使いやすさについて質問がありました。講師のKEITOの見立てでは、Google AI StudioのBuildはあらかじめ決まったテンプレートに沿って作るため、きれいに仕上がりやすい反面、突飛な要求には応えにくく、作品同士が似通いやすい傾向があります。Cursorなどはより自由度が高いとしています。
AI機能の入ったアプリを手を動かして作る回はAIスケジュール帳の作り方｜Codex App Serverでアプリを作って試すとAIアプリをMacにする方法｜Codex App BuilderでDMG配布までで扱っています。
基本は無料で使えますが、回数制限があります。無料の範囲を超えた場合や、アプリをGoogle Cloudに公開する場合は、支払い情報の登録が必要です。最新の条件は公式ページで確認してください（2026年11月時点）。
Buildの最初の画面にある「Your apps」から開けます。保存（Save）していないと残らないので、こまめに保存し、必要に応じて「Copy app」でコピーを取っておくと安心です。
UIだけが追加され、実際の生成に反映されていないことがよくあります。講座では、16:9・9:16・1:1の無地画像を用意してアプリに渡し、選んだ比率の画像と合成して生成するよう指示する方法で解決しました。
使われた分だけ自分のGoogle Cloudに課金されます。またセキュリティ面の責任もあるため、講座では自分専用のアプリとして使うことを勧めています。
「PWAに対応して」とBuildに指示し、再デプロイします。スマホでURLを開いてホーム画面に追加すると、アイコンから専用アプリのように起動できます。
アーカイブ動画はProcevoで見られます
プランは登録のあとに選べます
