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

対象ユーザー
- 資料や販促物の素材づくりに画像生成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モードを切り替えて使えることが、ツールのイメージ画像とともに紹介されている
分野・使用技術
関連記事

ガイド公開
高圧受電とは — 低圧との違いとキュービクルの基本
建物の電気の受け方には低圧受電と高圧受電があります。契約電力による使い分け、キュービクルの役割と中身、保安管理の義務、CB形とPF-S形の違いまで、基本を一気に解説します
#高圧受電#キュービクル関連アプリ: 高圧受電設備 単線結線図ジェネレータ

ガイド公開
白地図をパワポ資料に使う方法 — 塗り分けから貼り付けまでと権利の注意点
営業資料や報告書に日本地図を載せるときの実務手順を解説します。地図画像の著作権・利用条件の確認ポイント、塗り分け地図の作り方、PowerPointで崩れない貼り付け方をまとめます
#白地図#資料作成関連アプリ: 白地図 Studio

開発記事公開
LLMの読み取り結果を、検算を通ったときだけ信じる
構造化スタジオで、見積書の算術的な冗長性を利用し、決定論の検算を通過したデータだけを蓄積する設計を紹介します
#LLM活用#個人開発関連アプリ: 構造化スタジオ

開発記事公開
音声認識ストリームの時間制限を、利用者に見せずに乗り越える
対話支援アプリLiveBriefで、クラウド音声認識のストリーム上限や無音切断を透過的なローテーションで吸収した実装を紹介します
#音声認識#個人開発関連アプリ: LiveBrief
関連アプリ

プロトタイプ
LiveBrief
対面の商談やヒアリング中の音声をリアルタイムに文字起こしし、会話中の判断を支えるカードを提示する個人向け対話支援アプリ
業務効率化

公開中
MermaidLayoutFinisher
Mermaidのフローチャートを自動レイアウトで描画し、直しきれない配置をドラッグと整列で仕上げてから、SVG・PNG・PowerPointへ書き出すWebツール。データはブラウザ内にのみ保存されます
業務効率化

ベータ版
白地図 Studio
日本の都道府県・市区町村を塗り分けて、プレゼン資料向けの白地図を書き出すWebアプリ。ExcelやCSVの貼り付けから一括で色分けでき、PNG・PPTX・PSD・SVGで出力できます。編集はブラウザ内で完結します
業務効率化

公開中
AI Detective
暗号化された現場記録を観察し、証言や物、時系列の食い違いと、その記録がどこから来たのかを検証していく静かなSF推理ゲーム。3ステージ・全14事件を収録し、根拠が足りなければ「保留」も正式な選択肢です
ゲーム