🍌
AI画像生成機能（Nano Banana Pro 連携）
機能概要
1. 概要
本機能により、Click 上から直接、高品質なAI画像生成を実行できます。
さらに、最新の Gemini 画像生成モデルに対応。
作成した画像を、そのまま次回生成のプロンプトとして再利用できます。
試行錯誤の効率が飛躍的に向上し、直感的かつスピーディな画像制作を実現します。
対象プラン
Freeプランから
対象環境
Webアプリ、ネイティブアプリ
事前準備
Gemini APIを取得します。
※無料枠はありませんので、必ずお支払い情報を設定してください。
下記のページにアクセスし、ログインします。
右上の「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