Claude CodeからNano Bananaによる 画像生成チャレンジ！

NextFreelance様主催、Next AI Synergy #10にてLTをさせていただいた時の発表資料となります。
私の作っている登山アシスタントAI「碧衣」に使われている技術の話になります。

本機能の考案開始時にNano Bananaを使用していたためNano Bananaですが、仕組み的にはGPT-Image-2でも転用可能です。

該当のイベントページはこちら: https://nextfreelance.connpass.com/event/388083/
発表で使用しているGithubリポジトリはこちら: https://github.com/yoichi-kaneko/lineai_aoi_profiles

https://nextfreelance.connpass.com/event/388083/

Transcript

1. Claude CodeからNano Bananaによる 画像生成チャレンジ！ 2026/05/20 金子陽一 1
2. 自己紹介 金子陽一 フリーランスのエンジニア サーバーサイドがメイン 趣味：登山　日本百名山67/100 2
3. 近況報告 ポートフォリオ リニューアルしました 3
4. はじめに 4
5. ここまでの振り返り 5 • 登山アシスタントAI「碧衣」作りました！ ◦ ベースはEC2+Claude Code ◦ 完全に自分用のため、自分特化にチューニング
6. 「碧衣」の基本設計 6 設計思想 アクティビティ駆動フレーム ワーク ユーザーの日常の活動（アクティビ ティ）を起点として、 AIが自律的に思 考・行動するフレームワークで設計さ れています。 命名：金子 動作フロー 1 情報の収集 サードパーティーサービスからアクティビティ情報を横断的に収集 2 AIによる解釈 人格（ペルソナ）を持った AIが、収集した内容を深く解釈 3 メッセージの還元 解釈に基づいた最適なメッセージをユーザへフィードバック
7. 次にやりたいこと 7  画像生成の自動化 Nano Bananaにアクセスして、登山やア クティビティに関連する画像を自動的に 生成。  完全自動運用 1日1回のスケジュール実行により、人 の手を介さずに完全自動で画像を生成 ・更新。  AIによる最適化 その日のアクティビティ情報を Claude Codeが解析し、最適なプロンプトを自律 的に生成。
8. 関連情報の調査（システム構成編） 8
9. 9  Gemini REST API Google AI Studioにて公開中。画像生成に関する詳細なド キュメントも完備されている。  疎通の確認 標準的なREST APIリクエストが可能な環境であれば、技術 的な疎通自体に問題はない。  コスト面での留意点（従量課金） APIは従量課金制。目安として、 1k画像1枚あたり約15円程度のコストが発生する。 Nano BananaをAPIでリクエストできるか
10. Line Messaging APIに画像送信できるか 10  画像受付フォーマット API側には画像を受け付けるための専用フォーマットが定義さ れている。  URLベースの取得フロー ファイルを直接送るのではなく、公開 URLを送り、LINE側がそ こから画像を取得する。  2種類のURL送信 メイン画像とプレビュー画像の URLを個別に送信する必要が ある仕様。  実装上の工夫 上記の仕様をクリアするため、システム構成における事前の 工夫が不可欠である。
11. 画像送信の実現手段 11  ストレージサービスの選定 Cloudinaryを選定。今回の利用範囲では無料で利用可能で あり、導入コストを抑えられる。  公開URLの活用 アップロードした画像を取得できる公開 URLが存在し、外部 サービスからの参照が容易。  動的なリサイズ機能 URLのGETクエリのみで、必要に応じたサイズ調整済み画像 を取得可能。  LINE仕様との親和性 リサイズと公開URLの特性が、LINEの画像送信仕様と非常 に相性が良い。
12. システム構成イメージ 12 以下の仕組みで実現は可能そう Claude Code Gemini (Nano Banana🍌) LINE Cloudinary 1. 画像生成 2. 画像保存 3. メッセージ送信 (画像URLベース ) 4. 画像の取得
13. 関連情報の調査（プロンプト編） 13
14. 悩みポイント 14  「AIに画像生成用プロンプトを作ってもらう」ってどうすればいいんだろう？  意図したキャラクターを出すにはどうすればいい？  登山の画像を出して欲しいが、風景のディテールをプロンプトで表 現するのはかなり難しいはず ...
15. 唐突な疑問 15 • 「AIの、風景画像の認識精度」ってどれくらいなんだろうか？
16. 風景画像の認識精度検証 16  AI(Claude)による画像解説 山頂付近から撮影された夏の稜線風景です。手前右 側に積み重なった岩石（山頂の岩場）があり、その奥に はハイマツ帯が広がっています。 正面には複数の峰が連なる山脈が見え、緑豊かな斜 面と岩稜が混在しています。空は青く晴れており、右側 に積乱雲が発達しているのが見えます。 典型的な夏の晴天時の景色で、南アルプス系の山々 を撮影したものと思われます。 検証用：南アルプス系 夏の稜線風景
17. 仮説とコンセプト 17  風景やアクティビティの取 得 Claudeに風景画像を読み込んでも らい、それをベースにテキストプロン プトを考案する。 他のアクティビティ情報も入力値に する。  キャラクターの固定 ベース画像を使い「このキャラが◦◦ している」と指定することで、描写の ブレを防ぐ。  ガイドラインの活用 構成を明確にするガイドラインファイ ルを用意し、アウトプットの安定性を 高める。 …これらがあればいけるのでは？
18. 実践 18
19. 19 MCP -> skillsへの移行  API利用の最適化 元から1サービスごとに呼び出す外 部APIは限られているため、MCPで パッケージ化されているメリットが少 ない。  リソース消費の抑制 MCPはコンテキストもメモリ消費も 大きい。画像生成時のコンテキスト ウィンドウを節約したい。  システムの簡略化 MCPサーバーから必要な機能を skillsに移行し、全体の構造をシン プルにする。 ※ このあたりの話は次回のテーマにでも ...
20. 各種サービスとの連携 20 • 色々調べながらAPI接続しました • 大きく詰まった箇所はなかったので省略！
21. 碧衣の参考資料作成 21 • Nano Bananaで衣装データ作りました
22. 22 構築プロセス Gemini & Claudeと対話しながら構築 学習ソース AI画像生成ノウハウを「付け焼き刃」で学習 重要なポイント 1. 風景再現の割り切り 主要要素さえ押さえていれば、厳密な風景の再現 には拘らない 2. 「天気」と「光源」への拘り キャラクターが「登山の天気予報」を主体とする ため、ここには詳細な説明を付与 ガイドラインファイルの作成
23. 実際の出力例 23
24. 出力例　登山前日 24
25. 出力例　登山当日 25
26. 出力例　GPT-Image-2に切り替え 26 ※ i2iではありません
27. 出力例　飛行機からの写真ベースで生成 27
28. 出力例　下山連絡からの返信（Line連携強化） 28
29. まとめ・所感 29 再現性と品質向上 • 風景の質感がかなり綺麗に再現できている • 雰囲気がかなり近いところまで寄せてくる • 途中でGPT-Image-2に切り替えたら明らかに品質上がった LLMの特性と課題 LLMの性質上「もっとも妥当そうな選択肢」を選びたがるので、あまり「冒険」はしてくれない 💡 改善の方向性 ここは冒険をしてくれるよう意識的なチューニングが必要そう