🍌
AI画像生成機能（Nano Banana Pro 連携）
機能概要
1. 概要
本機能により、Click 上から直接、高品質なAI画像生成を実行できます。
さらに、最新の Gemini 画像生成モデルに対応。
作成した画像を、そのまま次回生成のプロンプトとして再利用できます。
試行錯誤の効率が飛躍的に向上し、直感的かつスピーディな画像制作を実現します。
対象プラン
Freeプランから
対象環境
Webアプリ、ネイティブアプリ
事前準備
Gemini APIを取得します。
※Gemini APIの利用料金は別途発生いたします（Google Cloud側での課金となります）。
下記のページにアクセスし、ログインします。
右上の「API キーを取得する」をクリックします。
Google AI Studioに遷移しますので、右上の「APIキーを作成」をクリックしてください
キー名の設定をします。
プロジェクトを選択からプロジェクトを作成＞プロジェクトに名前をつける＞プロジェクトを作成をクリックし、「キーを作成」ボタンをクリックしてください。
APIキーが発行されました。
キーをコピーしてくださいl。
実装の手順
環境変数の設定
Clickアプリのキャンバス画面左上の「設定」ボタンをクリックし、「環境変数」タブを選択します。
キーには、ご自分で分かりやすい名前を、値には、APIキーを入力し、追加、保存をしてください。
UIの作成
Clickのキャンバスでページを作成します。
上から、インプット、ボタン1、インプット、画像エレメントを配置します。
それぞれのエレメント名をわかりやすく上から、「プロンプトインプット」「生成画像URL」「生成画像」とします。
アクションの設定
ボタンにアクションを設定します。
アクションを追加＞AI機能＞NanoBanana 画像生成と選択します。
アクションNanoBanana 画像生成内項目の、API Keyを環境変数で設定した値に選択し、Modelを選び、Prompt項目を変数から「プロンプトインプット」に設定してください。
続いて、アクションを追加＞その他＞エレメントの値変更と選択してください。
エレメントの値変更＞インプットを「生成画像URL」と設定してください。
値をNano Banana Pro Response>ImageURLと選択してください。
画像エレメントの設定
画像エレメントのURLの変数追加＞Form Inputs＞生成画像URLを選択してください。
プレビューで確認してください。
[応用1]作成した画像を、そのまま次回生成のプロンプトとして利用する方法
ボタンのアクション内のNanoBanana 画像生成に、Image URLの変数を追加＞Form Inputs＞生成画像URLを選択します。
[応用2]取り込んだ画像をプロンプトとして利用する方法
プロンプトの下に画像インプットを配置してください。
ボタンのアクション内のNanoBanana 画像生成に、Image URLの変数を追加＞Form Inputs＞生成>Image-picker1>URLと選択してください。
プレビューで確認してください。
最終更新日：2026/02/27