生成AIを使って図解やスライドのたたき台をつくる流れは、すでに多くの現場で当たり前になっています。
中でも Google の画像生成AI Nano Bananaは、構図の整理やレイアウトづくりが非常に得意で、 文章を渡すだけでスライド風の構成や図表を自動で組み立ててくれることから、 「複雑な内容をわかりやすく図にしたい」「まずは原案だけでも欲しい」といった場面でよく使われています。

ただ、業務として使う時に、ブランドカラーを反映したい、文字の階層を整えたい、図形単位で再利用したい、等の可変が必要な場合があります。その際にPNG/JPGといったラスター画像では自由度に限界があります。

そこで、本記事では、Nano Bananaで作った図解を、ほぼNano Bananaの見た目そのままでSVG（編集可能なベクター）に変換する方法を紹介します。

Nano Bananaで図解づくりのメリット

Googleが提供する画像生成モデル Nano Banana は、一般的なAI画像よりも 「構造のある画像」 を作るのが得意です。
プロンプト内の文章から情報を読み取り、資料デザイン的な構造 を組み立てる能力が高いです。

ただし、Nano Bananaが出力するのは PNGやJPGといったラスター形式の画像です。
ラスター画像は 一枚の絵として固定されてしまうため、図形や文字を要素単位で操作したり、後から編集可能な素材として再利用・調整ができなくなります。

GeminiでNano Banana図解を編集可能なSVG化する

Geminiを使い編集可能なSVGに変換すると、図解を実務用のデザイン素材として扱えるようになります。

1. Nano Bananaで図解を生成する（PNG画像をつくる）

① Geminiアプリ or PCブラウザ（gemini.google.com）を開く
テキスト入力欄左の 「ツール」→「🍌（画像を作成）」 を選ぶ　
→ ここが Nano Banana を使う入口

② 作りたい図解のプロンプトを入力

③ 生成された画像をPNGで保存

2.Geminiを使いSVGに変換

① 生成された画像を読み込みSVGコード化のプロンプトを入力

② 出力されたコードをすべてコピー
Windowsの場合メモ帳、Macの場合テキストエディタに貼り付け
（テキストエディタは［フォーマット］→［標準テキストにする］）

③ファイル名を「svg」で保存、
拡張子を.svg にし、今回はdiagram.svgで保存
これで編集可能なSVGファイルの完成！

3.FigmaやPowerPoint等で実際に編集

①Figmaを開き、SVGファイルをドラッグ＆ドロップする
取り込んだSVGはグループごとになっている

② SVGとして取り込んだ図解は、Figma上で図形やテキストをパーツ単位で編集可能

Nano Banana × Geminiで図解作成

生成AIで図解をつくるなかでも Nano Banana の「構図を瞬時にまとめる力」と、Gemini の「編集可能なSVGへ変換する力」を組み合わせることで、 図解制作は 柔軟で、再利用しやすい素材作成が可能です。

SVGは、図形やテキストをパーツ単位で編集できるため、ブランドカラーの反映やレイアウト調整もスムーズです。
これで、ブログ記事や資料、クライアント案件など、用途に応じて図解を育てていける素材が作成できました✨

---

KOHIMOTOはAIを活用したウェブサイト制作のプランから、最終調整・SEO設計・WordPress化までまるっとサポートできます。

貴社の社内Web担当として伴走しますので、お気軽にご相談ください！