本文へ移動
BenriWorks Lab

NanoBanana Play

公開中

Gemini APIを使って、画像の生成・編集・合成をブラウザで試せるプレイグラウンド。プロンプトと元画像を差し替えながら、生成AIで画像がどこまで扱えるかを手を動かして確かめられます

公開日

明るい机でスタイラスペンを手にした人物がペンタブレットに向かい、隣のノートPCの画面にはカラフルな生成画像のサムネイルが格子状に並んでいる

対象ユーザー

  • 資料や販促物の素材づくりに画像生成AIを使えないか試したい人
  • Gemini APIの画像生成・編集を、コードを書かずに確かめたい開発者

画像生成AIが何をどこまでできるかは、記事を読むより1枚作ってみる方が早くわかります。とはいえAPIを試すにはコードと鍵の準備が要り、気軽さとは距離があります。NanoBanana Playは、Gemini APIによる画像の生成、編集、合成をブラウザから試せるプレイグラウンドです。

解決する課題

画像生成を仕事の素材づくりに使えるかを判断するには、自分の用途で試すしかありません。風景は得意でも図解は苦手、日本語の看板は崩れる、というようなモデルの得手不得手は、実際のプロンプトと実際の元画像で確かめて初めて見えてきます。

そのための入口として、このアプリは操作を3つのモードに絞りました。文章から画像を作る生成、既存画像に指示を加えて描き換える編集、2枚の画像を組み合わせる合成です。プロンプトと画像を差し替えながら結果を見比べる、という試行錯誤の回転を速くすることを優先しています。

主な機能

3つのモードはワンクリックで切り替えられ、いずれもブラウザだけで完結します。トップページには、プロンプトの書き方の当たりを付けるためのインスピレーションギャラリーがあり、表示された作例のプロンプト文を出発点にできます。

利用にはGoogleアカウントでのログインを使い、生成の実行はクレジット制です。クレジットの購入にはStripeによる決済を組み込んでいます。画像生成APIの呼び出しには実費がかかるため、試せる気軽さと運用の持続性を両立させるための構成です。

開発の背景

名前の由来は、Geminiの画像生成モデルが「Nano Banana」の通称で呼ばれていることです。もともと画像生成の検証用に作っていたプレイグラウンドを、名前とAPIの構成を整理して単体のアプリとして独立させました。

BenriWorksにとってこのアプリは、公開ツールであると同時に自分たちの実験場でもあります。このサイトの記事のアイキャッチ写真も同じGemini APIの画像生成で作っており、プロンプトの書き方の勘所はここでの試行錯誤から得ています。

技術と設計

Next.jsとTypeScriptで実装し、Vercelで配信しています。画像生成はGemini APIをサーバー側から呼び出す構成で、認証まわりとクレジット残高の管理にはSupabaseを使い、全テーブルに行レベルのアクセス制御を適用しています。決済はStripeで、購入とサブスクリプションの状態はWebhookで同期します。

無料で無制限に開放しない、という判断はこのアプリの性格を決めています。生成のたびにAPI利用料が発生する以上、原価を無視した設計は続きません。ログインとクレジットという摩擦を受け入れる代わりに、継続して提供できる形を選びました。

現在の状態と既知の課題

公開中です。生成される画像の品質と傾向は基盤であるGeminiのモデルに依存するため、モデルの更新によって同じプロンプトでも結果が変わることがあります。生成物を業務で使う場合は、権利や利用条件を利用者自身で確認してください。

同じGemini APIをテキストとリアルタイム処理の側で使うアプリに、対話支援の「LiveBrief」があります。生成AIを道具として日常業務に組み込む試みとして、対になる存在です。

スクリーンショット

  • NanoBanana Playのトップページ。AI画像エディターとして生成・編集・合成の3モードを切り替えて使えることが、ツールのイメージ画像とともに紹介されている
    NanoBanana Playのトップページ。AI画像エディターとして生成・編集・合成の3モードを切り替えて使えることが、ツールのイメージ画像とともに紹介されている

分野・使用技術

関連記事

関連アプリ