見出し画像

Google AI Studio入門｜画像生成アプリの作り方｜HTMLテンプレ付き｜ノーコードGemini活用ガイド

SHO – Prompt Designer

Google AI Studioではじめて画像生成アプリを作りました。せっかくなので、みんなも同じようなもの作れるようにしました。AIが僕のアプリの構造がわかるように1枚のHTMLにまとめてAIで再構築。HTMLファイル＋1行プロンプトで誰でもアプリが再現できる仕組みを作りました。AIと一緒に作りながら勉強したプロセスをまとめてます。

こんにちは、SHOです。
前回に続き、僕が最近作ったTRPGを例に、これから「どうやって自分が作ったものをみんなに見てもらおうか」っていうのを、実践していきたいと思います。

あ、要所要所でTRPGのリンク貼っておくって話しじゃないです。

TRPGのPV動画とか作って格好良く作品を紹介できるまでっていうことしていきます。

…題材です。構成上…ね？

一人でも頑張れば簡単に制作から宣伝までできるんだよっていうのを頑張ってやっていこうっていう試みです。

引き続き、僕のゆっくりチャレンジです。

今回はいい加減に画像って安定させたいよねっていうことをやっていきたいと思います。

つまり、Google AI Studioで画像生成アプリを作ればいいんじゃないかっていうことなのでやっていきます。

だからTRPGに限らず動画制作やアプリ構想、とかいろんなコンテンツにも応用できると思うので、是非見てってください。

AI画像生成


今回のテーマはAI画像生成についてです。
これも、ちょっと前に書いてて、プロンプトビルダーなるものを作って僕なりに安定させていました。

画像生成用プロンプトの基本パラメータと選択肢をあらかじめアプリの設定として持ってもらって、プロンプトをいちいち書かなくてもすぐに画像生成出来たらいいよねって思ってやってみたやつです。

このときから使ってたやつはAPI連携も何にもできなくて、出てきたプロンプトをGPTとかで翻訳してもらってから、Geminiで生成っていう流れだったけど、Google AI studioで簡単にアプリがつくれるので、今回作り直しました。

出来上がったのはこれです。

「Prompt Flow Studio」の完成UI画面。左側に画像生成パラメータ、右側にプロンプト入力と出力欄が並ぶノーコードAI画像生成アプリ。
じゃーん！名付けてPrompt Flow Studioです。
一番下に僕の名前もいれちゃった！

Google AI Studioとは？


これのことです。Google AI Studio。

Googleが開発した最新のAI技術を、プログラミングの知識がなくても、ここで自分だけのアプリのプロトタイプを作ったりできるオンライン開発環境です。

つまり、Googleが公開しているAI技術を自分専用にカスタマイズできちゃうところです。要はTRPGってことですね。

主にできること

プロンプトの実験(Prompt Engineering)や、AIの「性格」を設定して、出力を自分好みにカスタマイズするようなAIの調整(Model Parameter Customization)ができたりします。

もちろん、プロンプトやパラメーター設定を、外部のアプリケーションやサービスにAPI連携(API Integration)して接続することができます。

つまり、Google AI Studioは、AI技術をただ使うだけじゃなくって、作ったり、調整したり、応用したりするための場所です。

今回はそんなところで遊んで勉強してました。

僕がつくったPrompt Flow Studioとは？


みなさん、Nanobananaとかで画像生成するとき、いまのUIに満足していますか？

僕はまったくもって必要十分なものに仕上がってると思ってます！

と、いってしまうとここから全然話が進まないので、僕がつくったPrompt Flow Studioを紹介します。

興味持ってくれたみんなも同じようなものがつくれるように、あとでHTMLファイルで共有します（←わざわざHTMLな理由はあとで）。

まずはご紹介です。こんなことできます。僕のはじめての画面録画なので緊張してます。3倍速でお送りします。51秒です。コピペ遅いからとかの発言は禁止です。

※音出ません。さみしいです。

いかがでしょうか？

このアプリは、画像生成に必要な要素を選択し、日本語で考えたアイデアを入力したものが、AIによって最適な英語のプロンプトに変換され、そのまま高品質な画像が生成できるっていうものです。

一言でいうと、

凄く便利でカッコイイものです。

画像生成に必要な要素があらかじめ組み込まれてるので、安定します。

次に、このアプリの使い方を説明します。

使い方


ステップ１（左パネル）：作りたい画像の設計図を組み立てる

まずは、どんな画像を作りたいかAIに教えるための「設計図」を作ります。

基本設定：

画像生成アプリの左パネル。生成モード（Nanobanana・Imagen4）や画像タイプ、絵のタッチなどを設定できるフォームUI。
生成モードはNanobananaとimagen4が選べます。
imagen4はアスペクト比や生成枚数が選べます。Nanobananaは参照画像を添付できます。

  1. AIモデル：

    • 高速モード (Nanobanana)：gemini-2.5-flash-imageというモデルを使います。生成がすっごい速いから手早く作りたい時や、参照画像を元に作りたい時によいです。

    • 高画質モード (Imagen 4)：imagen-4.0-generate-001というモデルを使います。Nanobananaより少し生成時間がかかりますが、より緻密で高品質なイラストを生成できます。最終的な作品作りにおすすめです。（※参照画像は使えません）

  2. 画像の種類：
    「人物」を作りたいのか、「背景」そのものが主役なのか、ここで選びます。選んだものによって、パラメータのパネルの項目が変わります。

  3. 絵のタッチ：
    画像全体のテイストをここで決めます。「日本アニメ風」「水彩画風」「リアル風」など、お好みです。

  4. ネガティブ要素：
    イラストに入れてほしくないもの（例: 余計な文字やロゴ）を書いておきます。

各パラメータ設定：

「人物」「背景」「小物」などの詳細パラメータを入力する設定画面。テキストフィールドとドロップダウンメニューで構成。
自由記述もあるよ！
シーン設定。自由記述、背景の補足、ライティングの設定や色調など、詳細パラメータを入力する設定画面。
綺麗な画像生成に必要な要素はここにまとまってるよ！

  1. 基本設定で設定した被写体によってこのパネルが「人物パラメーター」だったり、「背景パラメーター」とかに変わります。途中でパネルが変わっても入力した内容は保持できるようにしてます。

    • 人物: 人物の概要（例：銀髪ロングで赤い瞳の少女）、服装・アクセサリー（例：黒いゴシック調のドレス）などを自由に記述できます。

    • 背景: 背景の主題（例：近未来の高層都市）、環境タイプ（自然、都市など）、遠近感（背景の奥行き）などを指定できます。

    • 小物: 小物の種類（例：コーヒーカップ）、素材（金属、ガラスなど）、スケール感（大きさ）などを指定できます。

  2. 「シーン設定」のパネルを開いて、選択肢を選んだり、自由な言葉で補足したりします。最も重要な項目はシーンの自由記述です。 ここに書いた内容は他の設定よりも優先されます。他のパラメータと矛盾があったとき用です。

ポイント：すべて埋める必要はないです。「指定なし」の選択肢もあるので、特に要求がなければこままでもOKなやつです。こだわりたい部分だけ設定するのがコツです。

詳細設定（オプション）:

画像生成にはテクニックが沢山あります。覚えるのが大変なので、あらかじめパラメータとして入れておいたやつです。「線の表現」とか「光と影」など、さらに細かく画像を演出したい時に使ってみてください。

線の表現・光と影・カスタムカラーなど、画像の質感を調整するオプション設定パネル。UI右側にスライダーや選択項目が並ぶ。
オプションっていってるくせに画像のクオリティが大きく左右されるパネルです。

  • 線の表現：輪郭線の描き方。くっきりした線、柔らかい線、線なし (ブラシ塗り)とかです。

  • 光と影の強さ：ハイコントラスト（影がくっきり）、ソフト（柔らかい影）などなど。

  • カスタムカラー：「メインカラー」と「アクセントカラー」を具体的に色で指定することで、イラストの配色を細かくコントロールします。

  • 構図エフェクト：ダッチアングル（画面を傾ける）、モーションブラー（動きを表現するブレ）など、特殊なカメラ効果を追加します。

  • エフェクト・効果：光の粒子、霧、雨、火花など、画面に舞う視覚効果を追加します。

  • 強調タグ：AIに対する「おまじない」のようなものです。傑作品質 (masterpiece)やトレンド作品風 (trending)などを選ぶと、クオリティが向上することがあります。

ステップ２（右パネル）：プロンプトを生成する

設計図ができたら、いよいよプロンプトを作ります。

「プロンプト生成」ボタンをクリックするだけ:

日本語プロンプトと英語プロンプトが縦に並ぶ生成画面。中央に「プロンプト生成」「英語プロンプトへ反映」ボタン。
簡単です。

  1. プロンプト生成：

    • まず上の日本語プロンプトの欄に、左パネルの設定を元にした文章が反映されます。

    • 続いて、その日本語をAIが自動で翻訳・画像生成に最適化し、下の英語プロンプトの欄に生成用のプロンプトが表示されます。これを画像生成に使います。

    • 生成されたプロンプトのコピー機能や自動保存（保持）機能もあります。

  2. プロンプトを微調整：

    • 表示されてる日本語にちょっと追加したいな、と思ったら直接編集できます。編集したら、真ん中の「英語プロンプトへ反映」ボタンを押すと翻訳し直してくれます。

    • もちろん、最終的な英語プロンプトも直接編集可能です。だから、既に持ってる英語のプロンプトや日本語のプロンプトもこのパネルの中に直接入れてしまえば特に他の設定をしなくても使えます。

  3. 画像生成：

    • 画像生成ボタンを押せば、最初に選んだ生成モードで生成してくれます。

    • 自動で「生成画像」タブに切り替わって、AIが画像を生成し始めます。

ステップ３（右パネル）：画像生成タブで出来上がった画像を確認する

一番楽しみなところです。生成された画像は、りっぱな作品です。だから保存したほうが絶対よいと思います。

プレビューと保存：

生成された画像の一覧を表示するギャラリー画面。個別保存ボタンとZIP一括保存オプション付きのプレビューUI。
結構工夫しましたところです。

  1. プレビュー表示：
    画像をクリックすると、画面いっぱいにおっきく表示できます。

  2. 個別に保存：
    各画像の下にある「保存」ボタンで、一枚ずつ保存できます。

  3. 一括保存（ZIP形式）：

    • 複数枚生成された場合、画像の左上にチェックボックスが出ます。白っぽい背景だと見えにくいので注意です。

    • 「選択したX枚をダウンロード」： チェックを入れた画像だけをZIPファイルで保存します。

    • 「すべてダウンロード」： 表示されている画像を全部まとめてZIPファイルで保存します。

以上です。

「Prompt Flow Studio」の操作デモ動画サムネイル。
格好いいです。気に入ってます。


はい、お待たせしました。次は作り方です。

本当はこのアプリをGoogle AI StudioでDeploy（公開）して、みんなに遊んでもらえるかなって思ったんだけど、APIキーの扱いかたが僕にはまだイマイチよくわからず。

間違えると料金とかが開発者側に発生するみたいなので、僕にはつらい未来が待ってます。

と、もし理解が違ったらどなたか教えてもらえると嬉しいです。もっと勉強します！

みんなどうやってアプリとか作って無料で公開したり売ったりしてるんだろう？？

このあたりの仕組みが僕にはさっぱりわからないので、ここでは作り方の解説になっちゃいます。ごめんなさい。

でも、僕は０から始めたけど意外に簡単です。2時間くらいでできたので、もし時間があったり、面白そうっておもったらやってみてください。

このアプリの作り方


まずは、Google AI StudioのアカウントとAPIキーが必要です。

Google AI Studioの設定画面。「Get API Key」ボタンが左下に表示され、APIキー取得の案内テキストが見える。
画面左下のGet API KeyからAPIキーの取得ができます。
無料枠と有料枠があります。僕は無料枠の範囲で使ってます。
詳しい料金形態については、こちらです。

もし今回紹介したアプリのUIが気に入ってくれて、同じようなもの作ってみようって思ってくれたら、このUIを基準に作ったほうが早いし便利なので、30個くらいあったファイルを、1個のHTLM形式のファイルにまとめて、後で簡単なプロンプトだけでアプリが作れるようにしました。

※ダウンロード前に必ず本文末尾にある「HTMLファイルのご利用について」をご確認ください。

SHOより

まぁ、今回アプリ作るより、このHTML形式にほとんどのコードをリライトする作業のほうが圧倒的に時間がかかりました。こういうのすぐにできる人うらやましいです。

でも、これがあるから作業しやすいはずです。ぜひ作業しやすいって言ってください。

んで、ここまで準備出来たら、すぐに洗濯機回したり、ご飯炊いたりすると効率がいいです。

Google AI Studioでアプリをつくる


Google AI Studioで作ります。ここにアクセスすると、左側にこんなメニューが表示されます。

「Build」メニュー選択がめん。
「Build」ってかいてあるところをクリックします。


「Build」メニュー選択後のGoogle AI Studioエディタ画面。チャット形式のプロンプト入力欄が中央に配置されている。
すると、この画面でプロンプトが入力できます。

このチャットボックスにどんなアプリを作りたいか伝えます。僕が公開してるHTLMを使う人は、ここにファイルを添付して、以下のプロンプトをコピペしてください。

添付のHTMLファイルのUIや選択項目、パネルなどを忠実にUIとして再現し、API連携をさせて画像生成アプリを作ってください。


すると、こんな感じでHTLMファイルを読み込んで作業してくれます。

AIが裏でコードを自動生成している途中のGoogle AI Studioの出力画面。スクロールログが流れている様子。
裏でゴリゴリコード書いてくれてます。


概ね出来上がります。

Google AI Studioの出力画面。アプリの完成形が表示されている。
このままでも悪くなく使えると思うけど、使い勝手は微調整が必要です。
HTMLですべてを収めるのは流石に無理があったのかもしれないです…


これだけではたぶん不十分なので、左下のチャットボックスに上の方で紹介した僕の「Prompt Flow Studio」の機能を参考に微調整の要望を出して仕上げてください。

「画像を複数枚添付できるように」とか、「英語翻訳にするためのプロンプトをこうして」とかするともっとよくなると思います。

完成したアプリをカスタマイズする方法として、Google AI Studioのチャットボックスをガイド。
作るのに苦労しちゃったらごめんなさい。


作り終わったら、画面右上にある保存ボタンを押せばアプリが保存されます。

Google AI Studioの右上にある保存ボタンがグレーアウト表示されているUI。アプリの保存直前の画面。
グレーアウトされてる一番左のやつです。


んで、Buildのメニュー画面で、Your appsを押すと、作ったアプリが保存されてます。

Google AI Studioの「Your apps」タブ。作成済みのアプリが一覧で表示されている管理画面。
こんどは何つくろっかな。


と、こんな感じでアプリが出来上がる頃に、ご飯も炊き終わってて、洗濯物も干せてたら最強です。乾燥機能ついてたら、うらやましいです。

✨Special Thanksです。是非みんなも見てみてください✨

なんと、こんなにすごい事ができます。みんなの発想が凄いです！

🔷ごまめ さん

自分だけの画像生成アプリを制作してくださいました。その名も「Gomame AI Studio」UIの使い方やアレンジの仕方がめちゃくちゃ参考になります！
今後の機能拡充のアイディアも持っていて、めちゃくちゃ参考になります！


🔷rorosuke さん

LINEスタンプを効率的に生成できるアプリを制作してくださいました。
独自の機能を追加していて、まさに「再構築型アプリ」のお手本みたいな内容です！あの…ホントにすごいんです。


🔷ちくわ｜ひとり情シス さん

noteを書いた後に、地味に手間のかかる「見出し画像」と「SNS投稿文」を一度に生成できるアプリを制作してくださいました。従来の半自動のフローからこのアプリで自動化の領域を広げたお手本のような内容です！


🔷Kurono Sora さん

画像生成の肝といっていい「参照画像」。この反映度を調整できる設計を取り入れた、とっても可愛いアプリを制作してくださいました。AIの扱い方がすっごく上手です。参照画像に引っ張られすぎないようにする設計工夫はとっても勉強になります！



まとめ


いかがでしたでしょうか？今回は画像生成に使えるアプリを作ってみました。

画像生成プロンプトって奥が深くて、僕は覚えきれないのでこういうのをオリジナルで持っておくと便利だと思います。

今回僕がやったことは、一度自分でアプリを作ってから、「後で再構築できるようにHTLMを作った」というのが一番のポイントって思ってます。

つまりレトルトカレーみたいな感じです。

だから、HTMLと1行のプロンプトをGoogle AI Studioにいれたらいくつかファイルができてるはずです。温め完了です。食べれます。美味しいです。

材料から作るより、プロンプト1行でアプリが再構築できるやつです。

アプリは特にUIとかに強いこだわりがなければすぐにできます。コードもAIが書いてくれるから、プログラミングの知識が無くてもなんとかなります。

ノーコードとかローコードって言われてるやつです。

でも、相変わらずAIがサボったりすることがあるので、ちゃんと根気よく何がしたいかを説明するのがコツです。

あと、ちょっとしたコツですが、「プレビューに反映して」っていう言葉をよく使った方がいいです。

「なおしました」っていったくせに直ってないこともあるので。

最後に、このHTLMのファイルは普通にブラウザで開けて、パラメータの内容をまとめてもらう仕様になってるので、過去に書いたnoteの使い方もできます（作られた日本語プロンプトをGPTとかに投げて英語にしてもらうとか。）。

これだけでも役に立つと思います。

もし、面白かったり何か役に立ったら、スキやフォローしてくれるととっても嬉しいです！

そんなこんなで次回はついにTRPGの動画制作をしていきたいと思います。使うのはSora2にしよっかな。んー。

最後に

HTMLファイルのご利用について

このファイルは、みんなが自由に使えるように公開しています。自由に閲覧・学習・カスタマイズ・個人利用ももちろんOKです。

もし、このファイルを使ってアプリを作ったら、ぜひそのnoteも見にいきたいです。その時は是非コメントで教えてください。

ただし、ご利用は自己責任でお願いします。

禁止事項
このファイルを無断で再配布・販売すること。作者を偽って自作発言を行うこと。公序良俗に反する形での利用。

免責事項
このファイルの利用により生じたいかなる損害・トラブルについては一切の責任を負うことができません。また、今後のアップデートやサポートを保証するものではありません。

HTMLのファイルのご利用にあたって

※今回の題材のTRPG

※前回やったこと（僕のTRPGのプロンプトの書き方）

※過去に書いたイラストを安定させる方法。

※こっちは有料記事だけど、動画生成を安定させるプロンプトが作れるツールもあります。