ブログやWebサイトの解説記事を書く際、「ここに1枚、分かりやすい図解を入れたい」と感じる場面は多いはずです。
しかし、Canvaなどの画像編集ツールを開いてテンプレートを選び、文字を打ち直して画像として書き出す作業は、積み重なると意外に時間がかかります。
そこで注目されているのが、「Google Geminiなどの生成AIに指示を出し、ベクター形式のSVGコードを直接生成させる」というアプローチです。
本記事では、単に「コピペで完成する」という表面的な使い方にとどまらず、実際に生成した際に発生することがある「文字のはみ出しやレイアウトの崩れをどう修正するか」「WebやWordPressへ安全に実装するにはどうすればいいか」という一連の実践手順を、一人の制作者の検証記録として率直にお伝えします。
1. なぜ画像ではなく「SVG図解」なのか？Canva・通常画像との違い
拡大してもボヤけず、コードとして扱えるベクターの強み
Webサイトで一般的に使われるPNGやJPEGは「ピクセル（ドット）の集まり」で描画されるラスタ画像です。そのため、高解像度のスマートフォン画面で見ると文字がボヤけたり、綺麗に見せようと画像サイズを大きくするとファイル容量が増えてしまうというジレンマがあります。
これに対し、SVG（Scalable Vector Graphics）は「数式とコード」で描かれるベクター画像です。
- 画面サイズを問わず鮮明: どんなに拡大・縮小しても輪郭や文字が一切ボヤけません。
- コードとして直接編集可能: 色や文字、サイズをテキストエディタ上で直接修正できます。
- Webページへの直埋め込み: HTML内にコードとして直接貼り付けることで、画像ファイルをサーバーにアップロードせずに表示できます。
もちろん、複雑なイラストやグラデーションを多用した図解ではSVGコードが長くなるケースもありますが、概念図や比較表、ステップ解説のような「シンプルな図解」においては、非常に相性の良いフォーマットです。
【比較表】PNG画像 vs Canva vs Gemini（SVGコード生成）
| 比較項目 | PNG / JPEG画像 | Canva（デザインツール） | Google Gemini（SVGコード生成） |
|---|---|---|---|
| 主な制作方法 | ペイントソフト等で作成 | テンプレートを選んで編集 | テキストで指示（プロンプト）入力 |
| 画像の鮮明さ | 拡大するとボヤける | 拡大するとボヤける（※ラスター出力時） | どんな画面でも常にくっきり鮮明 |
| 修正の手間 | 元データを開いて再書き出し | Canvaを開いて再書き出し | コードの文字や数値を直接打ち替え可能 |
| サーバーへの保存 | メディアとしてアップロード | メディアとしてアップロード | HTMLコードとして直接貼り付け可能 |
| 向いている用途 | 写真、複雑なイラスト | リッチな装飾のバナー、SNS画像 | 概念図、比較図、フローチャート、手順図 |
Canvaを否定するのではなく、「リッチなアイキャッチはCanvaで作り、記事内の解説図解はGeminiのSVGで素早く組む」というように、適材適所で使い分けるのが最も効率的です。
2. Google Geminiで図解SVGを生成する基本手順と指示の出し方
基本の指示プロンプト（指示の骨格）
GeminiにSVGコードを出力させる際は、単に「〇〇の図解を作って」と頼むだけでなく、「描画領域の比率（viewBox）」「配色」「日本語テキストの配置」を明確に指定するのがコツです。
【指示】
以下の内容を説明する「わかりやすい解説図解」をSVGコード形式で出力してください。
【図解の内容】
（ここに解説したい内容や手順、比較したい項目を箇条書きで入力）
【デザインの要件】
1. viewBoxは "0 0 800 450"（16:9の横長比率）に設定してください。
2. 背景色はダークグレー（#1e1e1e）、アクセントカラーはグリーン（#7DCA7E）とホワイト（#FFFFFF）基調にしてください。
3. 日本語フォントは sans-serif を指定し、文字が図形や枠からはみ出さないよう十分な余白を取ってください。
4. 出力はMarkdownの ```xml または ```svg コードブロックでSVGコードのみを返してください。※今回の検証環境：Google Gemini（Gemini 3.1 Flash / Pro）
生成されたコードの構造
Geminiから出力されたコードは、概ね以下のような <svg> タグで囲まれたXML形式のテキストになります。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="100%" height="auto">
<!-- 背景 -->
<rect width="800" height="450" fill="#1e1e1e" rx="12"/>
<!-- タイトル -->
<text x="400" y="50" fill="#7DCA7E" font-size="22" font-family="sans-serif" font-weight="bold" text-anchor="middle">
3ステップでわかる制作フロー
</text>
<!-- 各ステップの図形とテキスト -->
...
</svg>このコードをブラウザでプレビューするか、HTMLファイルとして保存して開くと、ベクター図解として描画されます。
3. 【リアルな一次体験】生成後に「崩れた・はみ出た」ときの修正手順
今回実際にGeminiへ図解の指示を出し、SVGコードを生成してみました。
最初の出力結果は骨格としては使えそうなものでしたが、日本語の文字配置や要素間の余白には明確な修正が必要でした。そこで、生成されたコードを確認しながら再指示と手動修正を行いました。
よくある崩れ①：日本語テキストの文字重なり・はみ出し
日本語テキストを含むSVGでは、使用されるフォントや文字幅、配置方法などの違いによって、生成時に想定したレイアウトと実際の表示が一致しないことがあります。その結果、「文字が四角い枠からはみ出す」「隣のテキストと重なって読みにくくなる」といった現象が起きることがあります。
【対処法】:
- Geminiへ具体的に再指示を出す:
「ステップ1の枠幅（rectのwidth）を30px広げて、文字フォントサイズを16pxから14pxに小さくしてください」とピンポイントで指示します。 - Antigravity等のエディタで直接打ち替える:
AntigravityやVS Codeなどのコードエディタで開き、該当箇所の<text font-size="16">を14に、x="100"の数値を少し動かすだけで、AIと再対話するよりも遥かに速く微調整できます。
よくある崩れ②：viewBoxの比率ズレとスマホ表示の崩れ
PCのブラウザでは綺麗に見えていても、スマホの狭い画面で見ると図解の端が切れてしまうことがあります。
【対処法】:<svg> タグの冒頭に width="100%" height="auto" viewBox="0 0 800 450" が正しく入っているか確認します。固定値（例：width="800px"）のままになっているとレスポンシブ表示に対応できないため、必ず比率を viewBox で制御するのがポイントです。
4. 生成したSVGを「ファイル（.svg）」として保存・確認する方法
HTMLへ直接埋め込むだけでなく、SVGコードを単体の画像ファイルとして保存して手元でプレビュー・管理することも可能です。
- テキストエディタに貼り付け:
Antigravityやメモ帳、VS Codeなどのテキストエディタを新規作成し、出力された<svg>〜</svg>コードを貼り付けます。 - 拡張子を
.svgにして保存:
ファイル名をflow-diagram.svgのように.svg拡張子で保存します（文字コードは UTF-8）。 - ブラウザへドラッグ＆ドロップ:
保存した.svgファイルをChromeやSafariなどのブラウザ画面にドラッグ＆ドロップすると、画像として正常に描画されるか即座に確認できます。
※WordPressのメディアライブラリへ直接 .svg ファイルをアップロードする場合は、セキュリティ上の理由から標準で制限されていることが多いため、専用のプラグイン（SVG Support等）や権限設定が必要になる点に留意してください。手軽かつ安全に使うなら、次章で解説する「カスタムHTMLブロックへの直貼り」が最も確実です。
5. WordPressやWebサイトへ安全に実装・貼り付ける方法
WordPressの「カスタムHTMLブロック」に貼り付ける手順
WordPressのブロックエディタ（Gutenberg）でSVG図解を表示する最も手軽で安全な方法は、「カスタムHTMLブロック」の活用です。
- 記事編集画面で「＋（ブロックを追加）」をクリック。
- 「カスタムHTML」ブロックを選択。
- Geminiが生成（および微調整）した
<svg>〜</svg>のコードをそのまま貼り付ける。 - 「プレビュー」ボタンを押して、記事上で正しく描画されているか確認する。
安全性への配慮：生成コードの事前チェック
外部のAIが生成したコードをWebサイトに埋め込む際は、セキュリティ面での最低限の目視確認が推奨されます。
<script>タグが含まれていないか: SVG内に意図しないJavaScriptの<script>要素が含まれていないかを確認します。- 外部URLの読み込み（
href）がないか: 外部サーバーの画像やフォントを勝手に参照していないか、自己完結したコードになっているかを確認します。
これらを確認してから貼り付けることで、不要なスクリプトや外部参照を含むコードをそのまま公開してしまうリスクを減らせます。
6. よくある質問（FAQ）
Q1. Geminiで生成したSVG図解は商用利用できますか？
Geminiで生成したSVGを商用サイトや自社ビジネスで利用する場合は、利用しているGeminiサービス（無料版、Gemini Advanced、Google Workspace等）の最新の「Google利用規約」および「生成AIに関するサービス固有の追加規約」をご確認ください。また、生成された図解やアイコンの中に、第三者の商標や著作物に酷似した意匠が含まれていないか、ご自身で最終確認を行うことが大切です。
Q2. WordPressに貼り付けても図解が表示されません。
以下の点を確認してください。
- カスタムHTMLブロックではなく、通常の段落ブロックにコードを貼っていないか。
<svg>の閉じタグ（</svg>）まで漏れなくコピーされているか。- テーマやセキュリティプラグインでインラインSVGの出力が制限されていないか。
Q3. デザインソフトを触ったことがない初心者でも作れますか？
はい、十分作れます。まずはプロンプトを投げてSVGを出力させ、崩れた箇所があれば「文字が重なっているので余白を空けて」とGeminiにお願いするだけで、デザインソフトの操作を覚えなくても実用的な図解を完成させることができます。
7. まとめ：AI生成と微調整を組み合わせ、Web制作を身軽にする
Google GeminiによるSVG生成は、「デザインソフトを起動して1からレイアウトを組む手間」を大きく減らしてくれる実用的なアプローチです。
大切なのは、「AIが完璧なものを一瞬で作ってくれる」と過度に期待することではなく、「AIにおおまかな骨格を作らせ、気になるところは自分の手や再指示で整える」という軽やかなスタンスで付き合うことです。
記事の要点を視覚的に伝えたいとき、ぜひ一度GeminiでSVG図解を試してみてください。