コピペで完成する「図解生成プロンプト」とWeb最新実装術
ブログ記事を書いているとき、「ここに図解があれば、もっと伝わるのに」と思う瞬間はありませんか？
これまでは、執筆の手を止めてデザインツールを開き、時間をかけて図形を配置するのが当たり前でした。しかし、最新AI Gemini 3.0 の登場でその常識が変わりました。
はじめに：執筆をもっと軽やかに、クリエイティブに
専用のプロンプト（指示文）を使えば、チャットに文章を投げるだけで、「検索エンジンが内容を理解でき、どんな画面で見てもボヤけない」理想的な図解が一瞬で完成します。
元デザイナーとしてDTPに携わってきた経験を活かし、専門的な知識がなくても、AIとの対話だけで実用的な図解を作成できるワークフローを整理しました。図解作成の負担を少しでも減らし、より本質的な「記事の執筆」や「新しいアイデアを練る時間」を増やすお手伝いができれば幸いです。
なぜ他のツールではなく「GeminiのSVG」なのか？（Canva・ChatGPT比較）
図解作成といえば「Canva」や「ChatGPTの画像生成」が有名ですが、なぜあえてGeminiのSVGなのか。その理由は「運用コスト」と「品質」のバランスにあります。
【2026年最新】図解作成ツールの徹底比較
| 評価項目 | ChatGPT (DALL-E 3) | Canva (手動) | Gemini (SVG生成) |
| 得意な用途 | イメージ画像・挿絵 | バナー・凝った装飾 | 構造図・比較表・フロー |
| 日本語の扱い | ×（ほぼ誤字になる） | ◎（自由自在） | ◎（コードで制御） |
| 指示の難易度 | 低（適当でも描ける） | 中（操作を覚える） | 高（構造化プロンプトが必要） |
| 微調整の工数 | 多（やり直し地獄） | 中（マウス操作） | 少（チャットで指示完結） |
| サイト表示速度 | 遅い（画像） | 普通（画像） | 爆速（コード直貼り） |
| 将来の修正 | 不可能 | 可能（Canva保存必須） | 可能（コードを再利用） |
| 必要な準備 | なし | アカウント作成 | 不要（カスタムHTMLで貼るだけ） |
一言 「SVGって設定が面倒そう…」と思うかもしれませんが、実はWordPressの『カスタムHTMLブロック』にGeminiのコードをそのまま貼り付けるだけで表示されます。プラグインも画像保存も不要。この「身軽さ」が、AIワークフローを資産に変える鍵になります。
【初心者向け補足】「コードを貼るのが怖い」と感じる方へ
「SVGコードをブログに貼る」と聞くと、プログラムを組むような難しいイメージを持つかもしれません。しかし、実際は「YouTubeの埋め込みコード」を貼るのと全く同じ感覚で大丈夫です。万が一コードが間違っていても、その図解が表示されないだけで、ブログのデザイン全体が崩れることはありませんので、安心して挑戦してください。
【コピペOK】Gemini 3.0で図解を作る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に 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程度）で描画してください。
【2026年版：最新オプション指示】
- アニメーション: 重要な要素（見出しや結論の枠）を、ページ読み込み後に1秒ほどかけて滑らかにフェードイン（不透明度0→1）させてください。過度な動きは避け、読者の視線を誘導する程度の穏やかな動きをCSSのみで記述してください。
【図解にするテキスト】 （ここにテキストを貼り付ける）
今回図解にしたテキスト
【コピペOK】Gemini 3.0で図解を作る3つの手順（1分で完成）
特別なツールは必要ありません。Geminiのチャット画面があれば準備完了です。
ステップ1：図解化したい文章を用意する
執筆中の記事から、複雑な解説部分をコピーします。要約などはGeminiが得意なので、長文のままでも大丈夫です。
ステップ2：図解生成プロンプトを投げる
スマホで見やすく、アクセシビリティにも配慮したプロフェッショナルなプロンプトです。そのままコピーして、ご自身のテキストを貼り付けて使ってください。
ステップ3：WordPressへの貼り付け方
【重要】「Canvas機能」を呼び出して仕上げる
SVG図解をスムーズに作成するには、Geminiの「Canvas」機能を正しく呼び出す必要があります。
- エージェント（モデル）で「Canvas」を選択: チャットを開始する際、モデル選択メニューから「Canvas」を選択してください。これにより、コード専用のエディタ窓が利用可能になります。
- Canvasで仕上がりを確認: プロンプトを送信すると、画面右側にCanvasが立ち上がり、そこに直接SVGコードが書き出されます。Canvas上ではプレビュー（表示確認）やコピーが簡単に行えるよう自動整理されます。
- 会話でデザインを追い込む: もし「色をもっと明るくしたい」「配置を変えたい」と思ったら、チャットでそのまま「ここをこう変えて」と伝えてください。GeminiがCanvas上のコードをリアルタイムで書き換えてくれるので、デザインツールを使わずに理想の形へ追い込めます。
納得のいく図解ができたら、ブログへ貼り付けるための最後の仕上げを行います。
追加指示（仕上げ）： 「ありがとうございます。このSVGをWordPressの『カスタムHTML』ブロックに貼り付けたいです。不具合を防ぐため、以下の処理をして最終コードを出力してください。
コード内の不要な改行を詰め、1行の長い文字列（ワンライン）に近くしてください。 WordPressのテーマとCSSが干渉しないよう、必要なスタイルはすべてインライン（style属性）で完結させてください。」
ステップ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.0で作成できる図解のバリエーション
どのような文章が図解に向いているのか、具体的なイメージを紹介します。
- 「AとBの違い」比較図: メリット・デメリットを左右に並べた対比。
- 「3つのステップ」手順図: 1→2→3の流れを矢印でつないだフローチャート。
- 「ピラミッド構造」: 概念の階層や、優先順位を示す図。
- 「サイクル図」: PDCAサイクルなどのループする工程。
これらはすべて、文章を貼り付けて「これを比較図にして」と添えるだけで、数秒でコードが出力されます。
知っておくと安心なQ&A（表示されない・セキュリティの不安）
Q. コードを貼り付けても表示されない・保存できない
A. サーバー設定（WAF）で制限されることがあります。その場合は、プラグイン「Safe SVG」を導入するか、コードを .svg ファイルとして保存して画像としてアップロードすれば解決します。
【初心者のための簡単ヒント】
もしプラグインの導入が難しければ、メモ帳にコードを貼り付けて、名前を zukai.svg として保存してみてください。それを普通の画像と同じようにWordPressにアップロードするだけでOKです。
Q. セキュリティは大丈夫？
A. はい。プロンプトに「script禁止」を含めているため安全です。iPhoneやAndroidで最も見やすいフォントが自動選択される仕組みも入っています。
まとめ：新しい相棒と、ブログをもっと楽しもう
「図解作成」というハードルが下がれば、記事を書くこと自体がもっと楽しくなります。 難しい説明も、Geminiに投げればわかりやすい図にしてくれる。そう思えば、専門的な内容にも積極的に挑戦できそうですよね。
凝ったデザインならCanva、スピードとWeb最適化ならGemini。この柔軟な使い分けが、これからのブログ運営のスタンダードです。
ぜひ次の記事更新で、Gemini 3.0の実力を試してみてください。その手軽さと、進化したクオリティに驚かれるはずです。
真に生産性が高い人は、図解を作る速さではなく「図解を使ってどう価値を届けるか」という全体フローの構築に長けています。私が辿り着いた、デザイン不要でプロの成果を出し続けるための「AI指揮術」の全貌はこちらです。 👉 【AI時代のプロの仕事術】生産性を高めるための完全ロードマップ 2026
前回バージョンはこちら
【コピペ用オーダー文】
あなたはプロのインフォグラフィックデザイナーです。
以下のテキストの内容を整理し、読者の理解を助けるための図解（インフォグラフィック）をSVGコードで作成してください。
【必須要件】
- 形式: SVG
- 安全性: <script>タグや外部リソースの読み込みは絶対に使用しないでください。
- フォント: どのスマホやPCでも見やすく表示できるよう、全ての文字のフォント指定（font-family）には "sans-serif" を使ってください。
- アクセシビリティ: 図の内容を説明する <title> と <desc> タグを必ず入れて、読み上げ機能に対応させてください。
- サイズ設定: スマホでもPCでも綺麗に見えるよう、以下の style 属性を必ず <svg> タグに入れてください。
style="width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto;"
- デザイン: 背景は透明（記事に馴染ませるため）。配色は [青系/信頼感のある色など] をベースに、見やすい色にしてください。
【図解にするテキスト】
（ここにテキストを貼り付ける）
プレビュー画面を見てみてください。あなたの文章が、美しい図解となって表示されているはずです。
参考になれば…