コピペで完成する「図解生成プロンプト」とWeb最新実装術
ブログ記事を書いているとき、「ここに図解があれば、もっと伝わるのに」と思う瞬間はありませんか？
これまでは、執筆の手を止めてデザインツールを開き、時間をかけて図形を配置するのが当たり前でした。しかし、最新AI Gemini 3.1 の登場でその常識が変わりました。
と言いたいところでしたが実際は…僕的には残念な結果でした。
正直に言います。SVGコードはGemini3.1に出力してもらいましたが一発では上手くいかずに、Antigravityでコードを調整しましたしかもモードはGemini3Flash。
その辺りを念頭に入れてお読みください。
はじめに：執筆をもっと軽やかに、クリエイティブに
専用のプロンプト（指示文）を使えば、チャットに文章を投げるだけで、「検索エンジンが内容を理解でき、どんな画面で見てもボヤけない」理想的な図解が一瞬で完成します。
元デザイナーとしてDTPに携わってきた経験を活かし、専門的な知識がなくても、AIとの対話だけで実用的な図解を作成できるワークフローを整理しました。図解作成の負担を少しでも減らし、より本質的な「記事の執筆」や「新しいアイデアを練る時間」を増やすお手伝いができれば幸いです。
なぜ他のツールではなく「GeminiのSVG」なのか？（Canva・ChatGPT比較）
図解作成といえば「Canva」や「ChatGPTの画像生成」が有名ですが、なぜあえてGeminiのSVGなのか。その理由は「運用コスト」と「品質」のバランスにあります。
特に、最新のGemini 3.1では空間推論能力とコード生成の正確性が飛躍的に向上しました。以前のバージョンで見られたような「要素の配置ズレ」や「複雑な図形の破綻」が解消され、実用レベルの精緻な図解が安定して出力可能になっています。
【2026年最新】図解作成ツールの徹底比較
| 評価項目 | ChatGPT (DALL-E 3) | Canva (手動) | Gemini (SVG生成) |
| 得意な用途 | イメージ画像・挿絵 | バナー・凝った装飾 | 構造図・比較表・フロー |
| 日本語の扱い | ×（ほぼ誤字になる） | ◎（自由自在） | ◎（コードで制御） |
| 指示の難易度 | 低（適当でも描ける） | 中（操作を覚える） | 高（構造化プロンプトが必要） |
| 微調整の工数 | 多（やり直し地獄） | 中（マウス操作） | 少（チャットで指示完結） |
| サイト表示速度 | 遅い（画像） | 普通（画像） | 爆速（コード直貼り） |
| 将来の修正 | 不可能 | 可能（Canva保存必須） | 可能（コードを再利用） |
| 必要な準備 | なし | アカウント作成 | 不要（カスタムHTMLで貼るだけ） |
一言 「SVGって設定が面倒そう…」と思うかもしれませんが、実はWordPressの『カスタムHTMLブロック』にGeminiのコードをそのまま貼り付けるだけで表示されます。プラグインも画像保存も不要。この「身軽さ」が、AIワークフローを資産に変える鍵になります。
【初心者向け補足】「コードを貼るのが怖い」と感じる方へ
「SVGコードをブログに貼る」と聞くと、プログラムを組むような難しいイメージを持つかもしれません。しかし、実際は「YouTubeの埋め込みコード」を貼るのと全く同じ感覚で大丈夫です。万が一コードが間違っていても、その図解が表示されないだけで、ブログのデザイン全体が崩れることはありませんので、安心して挑戦してください。
【コピペOK】Gemini 3.1で図解を作る3つの手順（1分で完成）
特別なツールは必要ありません。Geminiのチャット画面があれば準備完了です。
ステップ1：図解化したい文章を用意する
執筆中の記事から、複雑な解説部分をコピーします。要約などはGeminiが得意なので、長文のままでも大丈夫です。
ステップ2：図解生成プロンプトを投げる
スマホで見やすく、アクセシビリティにも配慮したプロフェッショナルなプロンプトです。そのままコピーして、ご自身のテキストを貼り付けて使ってください。
【コピペ用：図解生成プロンプト】
あなたはプロのインフォグラフィックデザイナーです。以下のテキストの内容を整理し、読者の理解を助けるための図解（インフォグラフィック）をSVGコードで作成してください。
【必須要件】
- 形式: SVG
- 安全性:
<script>タグや外部リソースの読み込みは絶対に使用しないでください。- フォント: 日本語環境で明朝体にならないよう、font-familyには “Helvetica Neue”, Arial, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif を使用してください。
- アクセシビリティ: 内容を説明する
<title>と<desc>タグを必ず入れてください。- サイズ設定: 外側のdivまたはsvgタグに直接 style=”width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05);” を設定してください。
- デザイン: 背景は完全に白（#ffffff）で固定。配色は「信頼感のある青系」をベースにし、各セクションの境界線は濃いグレー（#bbbbbb程度）で描画してください。
【構造とアニメーションの重要指示】
- 二重構造の徹底: 各要素の「配置位置（座標）」を決める
<g>タグと、「アニメーション」を適用する<g>タグを必ず**入れ子（二重構造）**にしてください。- 位置ズレの防止: アニメーションの
transformプロパティが、要素本来の配置座標を上書きして全ての要素が重なってしまうのを防ぐため、必ず移動（translate）の基準点を分離して記述してください。- フェードイン: 重要な要素を、ページ読み込み後に1秒ほどかけて滑らかにフェードイン（不透明度0→1）させてください。
- マイクロインタラクション: マウスホバー時に要素がわずかに浮き上がるCSSエフェクト（translateY）を加えてください。
【図解にするテキスト】 （ここにテキストを貼り付ける）
今回図解にしたテキスト
【コピペOK】Gemini 3.1で図解を作る3つの手順（1分で完成）
特別なツールは必要ありません。Geminiのチャット画面があれば準備完了です。
ステップ1：図解化したい文章を用意する
執筆中の記事から、複雑な解説部分をコピーします。要約などはGeminiが得意なので、長文のままでも大丈夫です。
ステップ2：図解生成プロンプトを投げる
スマホで見やすく、アクセシビリティにも配慮したプロフェッショナルなプロンプトです。そのままコピーして、ご自身のテキストを貼り付けて使ってください。
ステップ3：WordPressへの貼り付け方
【重要】出力されたコードを「そのまま」コピーして仕上げる
Geminiが図解のコードを書き出したら、あとはコピーするだけです。以前のように特別な機能を呼び出す必要はありません。
1. コードをコピーする: Geminiが出力したコードブロックの右上にある「コピー」アイコンをクリックします。
2. 対話で微調整する: もし「色を変えたい」「文字を大きくしたい」と感じたら、デザインツールを開く必要はありません。そのままチャットで「ここをこうして」と伝えるだけで、Geminiが修正版のコードを即座に再出力してくれます。
3. スマホ表示の確認: 納得のいく図解ができたら、いよいよWordPressへ貼り付けます。
ステップ3：WordPressへの貼り付け方
Geminiが「コード」を作成したらコピーし、WordPressの「カスタムHTML」ブロックに貼り付けるだけです。
現場で役立つ「微調整」と「トラブル解決」はどうすればいい？
AIが生成したコードが 100%完璧でないこともあります。そんな時の「追加指示」をまとめました。
1. ダークモードで文字が見えなくなる時
閲覧者の環境がダークモードの場合、黒い文字が背景に溶け込んで読めなくなることがあります。
追加指示: 「ダークモード対応（prefers-color-scheme: dark）を使い、閲覧者の設定に合わせて文字色や枠線が自動で反転するようにCSSを追記してください」
2. 文字が枠からはみ出してしまう時
SVGは文字数が増えると枠を突き抜けることがあります。
追加指示: 「文字が枠からはみ出さないよう、
<foreignObject>タグを使用してテキストを自動折り返しさせてください」
3. もっとプロフェッショナルな印象にしたい時
アイコンや色の配置が単調な場合に有効です。
追加指示: 「もっとビジネス資料らしい、清潔感のあるフラットデザインにして。重要な手順には番号アイコンを付けてください」
4. パワポや資料に流用したい時
Webだけでなく、プレゼン資料に使うのも賢い方法です。
コツ: 生成されたSVGをPowerPointにドラッグ＆ドロップし、「図形に変換」を選択。これでAIが作った図を、使い慣れたパワポ上で1ミリ単位で動かせるようになります。
【実践例】Gemini 3.1で作成できる図解のバリエーション
どのような文章が図解に向いているのか、具体的なイメージを紹介します。
- 「AとBの違い」比較図: メリット・デメリットを左右に並べた対比。
- 「3つのステップ」手順図: 1→2→3の流れを矢印でつないだフローチャート。
- 「ピラミッド構造」: 概念の階層や、優先順位を示す図。
- 「サイクル図」: PDCAサイクルなどのループする工程。
これらはすべて、文章を貼り付けて「これを比較図にして」と添えるだけで、数秒でコードが出力されます。
実践例1：「比較図」（Before/After）
左右の対比構造が正確に描画されています。カーソルを乗せると、それぞれのカラムが独立して浮き上がります。
実践例2：「3ステップの手順図」（フロー）
記事の核となる3ステップを可視化。矢印での繋がりと、ステップごとのホバーエフェクトが実装されています。
実践例3：「ピラミッド構造図」（階層）
情報の優先度や階層を示す図です。下層から上層へ、積み木のように正確に配置されており、各層がホバーで反応します。
実践例4：「サイクル図」（PDCAなど）
Gemini 3.1の空間認識能力が活きる、円環状の配置です。各セグメントが正確に配置され、ホバー時に強調表示されます。
実践例5：「動くシステム図」（連動アニメーション）
Gemini 3.1の真骨頂である「複数の要素が連動して動く」図解です。中央のAIエンジン（歯車）が回ると、左右の成果（歯車）も連動して回ります。全体にホバーエフェクトも効いています。
知っておくと安心なQ&A（表示されない・セキュリティの不安）
Q. コードを貼り付けても表示されない・保存できない
A. サーバー設定（WAF）で制限されることがあります。その場合は、プラグイン「Safe SVG」を導入するか、コードを .svg ファイルとして保存して画像としてアップロードすれば解決します。
【初心者のための簡単ヒント】
もしプラグインの導入が難しければ、メモ帳にコードを貼り付けて、名前を zukai.svg として保存してみてください。それを普通の画像と同じようにWordPressにアップロードするだけでOKです。
Q. セキュリティは大丈夫？
A. はい。プロンプトに「script禁止」を含めているため安全です。iPhoneやAndroidで最も見やすいフォントが自動選択される仕組みも入っています。
まとめ：新しい相棒と、ブログをもっと楽しもう
「図解作成」というハードルが下がれば、記事を書くこと自体がもっと楽しくなります。 難しい説明も、Geminiに投げればわかりやすい図にしてくれる。そう思えば、専門的な内容にも積極的に挑戦できそうですよね。
凝ったデザインならCanva、スピードとWeb最適化ならGemini。この柔軟な使い分けが、これからのブログ運営のスタンダードです。
ぜひ次の記事更新で、Gemini 3.1の実力を試してみてください。その手軽さと、進化したクオリティに驚かれるはずです。
真に生産性が高い人は、図解を作る速さではなく「図解を使ってどう価値を届けるか」という全体フローの構築に長けています。私が辿り着いた、デザイン不要でプロの成果を出し続けるための「AI指揮術」の全貌はこちらです。 👉 【AI時代のプロの仕事術】生産性を高めるための完全ロードマップ 2026