#28 Nano-bananaで作るLineスタンプメーカーを開発してみた

はじめに

このブログは、ClaudeCode等を使って、生成AIだけでの開発により何ができて、何ができないのか？を考えるブログ を書いています。
今回はその第28回です。
少し間が空いてしまいましたが、今回もNano-bananaことGemini 2.5 Flash Image Previewを使っていろいろ試していきたいと思います！

前回のNano-bananaツールは、広告
https://zenn.dev/acntechjp/articles/175b838396a01f

前々回は漫画
https://zenn.dev/acntechjp/articles/d5bc45df13b9af

ときて、今回は何をしようかと考えたときに、「破綻なく画像を動かせる」という特徴に注目をして、LINEスタンプが無限に作れるのでは？　と考え始めました。

ということで作ってみたいと思います。

作ったもの

今回作ったものは以下のようなツールです
https://youtu.be/GR4JBJ7OkIg

1. 生成したいスタンプの雰囲気をテキストベースで入力
2. テキストに合わせて、Gemini 2.5 Flash Image PreviewがLINEスタンプを生成（画像はティムバートン風のすこし怖いけど、かわいい猫を生成したもの）
3. テキストベースで修正変更も可能（画像は、まるまって寝ている感じに修正を依頼したもの）
4. 画像をアップロードして、修正を依頼することも可能な仕様
5. ギャラリーとしてまとめて、作ったものを選んで修正することやダウンロードも可能

これにより、破綻なく、一貫したスタンプを作れるというものになっています。
なかなかいいですよね。

今回の学び ChatGPTでプロンプト生成　→Claude Codeで製造の流れ

今回はChatGPTにまずは大まかな仕様を伝えてClaudeCode用のプロンプトを作ってから、そのプロンプトを連携しました。
実際に依頼した文面は以下の通りです。

ClaudeCodeで以下のWebアプリを作るためのプロンプトを書いて
モックではなく、製品としてリリースできるものを作ります

LINEスタンプを作るためのLINEスタンプクリエイターのWebアプリを作ります
#要件
1:Webアプリ上で、画像をアップロード（任意）し、Gemini 2.5 flash imageでプロンプトから画像を生成（文字なし）
2:生成した画像から、Gemini 2.5 flash imageによりプロンプトで画像を修正（もっと笑顔で、真顔でなどなど）
3:作った画像は、ローカルに保存が可能
4:作った画像はサイト上で閲覧し、再表示してプロンプトで再修正も可能

#作成する画像の制約
画像は必ず文字を入力せず、透過にすること

これで依頼をすると、ChatGPT（GPT5）さんはいること、いらないことをたくさん話してくれるので、その文面を精査してClaudeCodeに伝えます。
例えばGeminiのAPIの使用はClaudeCode側で理解しておらず旧APIを使おうとしたりするので、そのあたりの仕様はマストで記載。一方で、画面の仕様はClaudeCode側で決めてもらいたいので、いったん記載から外す等をしています。
また、記載内容は必要に応じて最適なものがあるのであれば無視して自分で考えるように、ClaudeCodeに伝えることで、ClaudeCode側でも最適解を考えるように工夫をしました。

その結果、生まれたのが、今回のツールで、おそらく2時間程度でできています

終わりに

いかがでしたか？
今回もNano-banabaを使ったツールを作ってみましたが、破綻なく、画像を作れる能力は今後いろいろなことに応用できそう（ぱっと思いつく限り、UIとか、パワポとか作れると面白いかも？）ですので、もう少し研究を重ねてみたいと思います。

それでは、今後も生成AIを使ったツール作成をしていくので、引き続きご覧ください。