【マジクラ】GoogleスライドのAI図形生成ツールを作ってみた

こんにちは、『チームまじん』のやまじんです。
いつも記事にスキをいただき、ものすごく励みになっております！
本当にありがとうございます🙏✨

さて今回は、まじん式スライドの開発の中で生まれた 「AIに作ってもらった図形をGoogleスライドに編集可能なまま貼り付けられるツール」 を紹介させてください。

Geminiが生成したSVG画像をGoogleスライドで個別に編集が可能状態で貼付け！

技術的にかなり面白い仕組みになっているので、その裏側も含めてお話しします！従来の作りこんでいるツールとは少し異なり、皆さんが業務ですぐに活用できるツールというよりも、面白い技術の共有Tips的な内容ですので、チームまじんのツールに詳しい、マジクラメンバーに向けて情報発信させていただきます！

きっかけは「まじん式スライド」への要望でした

まじん式スライドの開発を進めている中で、ユーザーさんからこんな要望をいただいたんです。

Geminiの Canvas機能 でイラストを生成できる機能は使われていますか？「この業務フローを図にして」「システムの構成図を描いて」とお願いするだけで、一瞬できれいな図形（SVG）を作ってくれるんですよね。もう本当に魔法みたいで、すごい時代になりました。特にGeminiは、このSVGイラストの生成能力が飛びぬけています。

でも、こんな場面で 「うーん……」 と困ったことはありませんか？

AIが書き出してくれたHTMLやSVGのコードって、そのままではスライドに貼れないんですよね。仕方なくスクリーンショットを撮ってPNG画像にして貼り付けると……

拡大したときに線がぼやける！ 文字がギザギザになる！編集できない！😫

かといって、スライド上で一から四角や矢印を手作業で並べ直すのは、さすがに時間がかかりすぎます。AIでラクをするはずが、逆に手間が増えてしまうという……。（笑）

もちろん有料のサービスやソフトを使えば、図形を編集可能な状態で配置できるものは多数存在しています。ただ、チームまじんのポリシーの Googleの環境の中だけで実現せねば……。

で、この要望に応えるために、いろいろと調査を進めていたところ、技術的にもかなり面白いツールができあがったんです。しかも、まじん式スライドの一機能としてだけじゃなくて、単独でも便利に使えそうなものに仕上がったので、今回マジクラメンバーの皆さんに共有させていただくことにしました！

特に Gemini 3.1 はイラストのデザイン能力が非常に高くなっていますよね。そのGeminiが描いたイラストを、 有料サービスやソフトを一切使わずに 、Googleスライドで編集できる状態で取り込めたら、いろんな場面で活用できるんじゃないかなと思ったんです。

そもそも「ベクター（SVG）」と「画像（PNG）」は何が違うの？

ここで少しだけ、図形の仕組みについてお話しさせてください🙏
実はデジタル上の絵って、大きく分けて 2つの種類 があるんです。

🖼️ 画像（PNGやJPEG） ＝ 「ドットの集まり」

小さな点（ピクセル）が集まって絵になっています。

なので、 拡大するとブロックのように粗く、ぼやけて見えてしまいます。

📐 ベクター（SVGなど） ＝ 「数式の集まり」

「ここは丸」「ここは線」というように、 形を計算式で記録 しているんです。

だから、 どれだけ拡大しても絶対にぼやけない。
線がクッキリと美しいまま なんですよね！

🖼️ PNG（画像）の場合：（nanobananaで生成）

• 正体 → ドット（ピクセル）の集まり

• 拡大すると → ボケる・ギザギザになる

• 色の変更 → できない（画像全体を差し替え）

• ファイルサイズ → 大きくなりがち

📐 SVG（ベクター）の場合：（Canvasで生成）

• 正体 → 「ここは丸」「ここは線」という計算式

• 拡大すると → 何倍でもクッキリ！

• 色の変更 → パーツごとに自由に変更できる！

• ファイルサイズ → 軽い

AI（Gemini）がCanvasで作ってくれるのは、後者の 「ベクター（SVG）」 なんです。だからこそ、この「拡大しても美しいベクターのまま」スライドに持っていきたいですよね！

そこで、こんなツールを作りました🎉

AIが作ったSVGコードをコピペするだけで、Googleスライドにベクターのまま挿入できる形式に自動変換するツール をご用意しました！

名前は 「GoogleスライドAI図形生成」 です。

🚀 このツールの5つの特徴！

✅ 完全無料 …… Googleの標準機能（GAS）で動くので0円！
✅ コピペだけ …… コードを貼り付けると自動で変換スタート
✅ 絶対にぼやけない …… 拡大しても劣化なし、クッキリ綺麗な図形のまま
✅ 日本語対応 …… テキスト入りの図も文字化けしません（図形で配置）
✅ インストール不要 …… ブラウザだけで完結！

💡 こんな活用シーンで威力を発揮します

「図をスライドに貼れるだけでしょ？」と思われるかもしれませんが、これ、 実は色々な場面で凄まじい威力を発揮するんです。

✏️ 手書きスケッチ → nanobanana → SVG → スライドで編集！

これが一番お伝えしたい活用法です！

たとえば、紙に描いた 地図 や 部屋の間取り のラフスケッチ。
これを nanobanana に読み込ませると、手書きのラフからきれいなイラストテイストの画像に変換してくれますよね。

そこからさらに「この画像をSVGに変換して」とGeminiにお願いすれば、ベクターデータが手に入ります。あとはこのツールに貼り付けるだけで、 Googleスライド上で自由に編集できる図形 に早変わり！

手書き → AI画像変換 → SVG変換 → スライドで編集可能な図形

この流れが実現すると、たとえばこんなことができます：

• 📍 案内地図 …… 手書きでざっくり描いた地図がきれいな案内図に

• 🏠 間取り図 …… ラフスケッチから編集可能なレイアウト図に

• 🗺️ フロアマップ …… イベント会場の配置図をサクッと作成

• 📋 業務フロー図 …… ホワイトボードのメモを正式な資料に変換

手書きから始まって、最終的にスライドで自由に色や文字を変更できる。
アナログとデジタルがシームレスに繋がる体験 です！

📊 プレゼン資料の図解やアイコン作成の時短に

「この内容をイラストにして」とAIに依頼 → コピペ → スライドにポイッ！

資料づくりの時間が劇的に短縮 されます。

🎨 スライド上でデザイン微調整

AIの図は一つひとつのパーツに分かれているので、「グループ解除」すれば 色変更や要素の移動や削除がスライド上で簡単にできちゃう んです。地味にめちゃくちゃ便利です。

🏗️ システム構成図・ネットワーク図に

「こんなアーキテクチャ図を描いて」とGeminiに頼んで、そのままスライドに。技術資料の説明イラストが一瞬で完成します。もちろん微修正も簡単。

📈 データ可視化グラフもベクターのまま

AIが生成したグラフもSVGで出力されるので、ベクターのまま取り込めば修正可能な見栄えのする資料に！

🔥 Geminiのイラスト生成能力 × このツール

以下のような流れになります。

1. Gemini に「こんな図を作って！」とお願いする

2. 瞬時にSVGコードが生成される

3. そのコードを GoogleスライドAI図形生成 にペースト

4. 自動変換されると、新しいタブで「編集可能な図形」が開く

5. それをコピーして、Googleスライドに「貼り付け」るだけ！

AIが作った図形が、そのまま美しい「編集可能なイラストデータ」に生まれ変わる。
この「流れ」を一度体験すると、無駄にいろいろイラストを作ってみたくなります！（笑）

⚙️ 今回のツール自体の使い方（簡単）

Step 1 ── ツールを開く

デプロイしたWebアプリのURLにアクセスするだけです。

Step 2 ── SVGコードを貼り付け

テキストエリアにGeminiで生成したSVGコードをペーストします。

貼り付けた瞬間に自動で変換が始まります。（早い！）

Step 3 ── スライドに挿入

変換が終わると自動で別タブが開いて、図形が表示されます。

それを 「コピー（Ctrl+C）」して、Googleスライドに「貼り付け（Ctrl+V）」 するだけで、そのまま編集可能なベクター図形として使えます！図形を右クリックしてグループ解除をすれば要素がバラバラに編集可能になります！

✨ さらに嬉しい便利機能たち

• ダブルクリックでワンタッチ変換 …… コピーしたコードを自動で読み取ってくれます！

• 変換履歴が見れる …… 過去に変換したファイルも一覧で管理できます

• 保存先は自由自在 …… あなたの好きなDriveフォルダに保存できます

🤔 なぜこのツールを作ったのか？（技術的な背景）

きっかけは先ほどお話しした通り、まじん式スライドへの要望でした。

技術的な調査を進めていくと、 Googleスライドには直接SVGを入れる機能がない ことが分かったんですよね。既存の方法は「Illustratorで開いて……」「PowerPointを経由して……」と、どれも有料ソフトが必要な面倒な手順ばかり。

「だったら、 コードをコピペするだけでスライドでも使える"変換機"を、Google環境だけで作ればいいんじゃないか！？ 」

……と思い立って（笑）

調べに調べた結果、ある技術的な裏技を発見しました。そこから試行錯誤を繰り返して、ブラウザ上で直接変換するこのツールが完成したんです。（この裏技の詳細は、メンバーシップ限定エリアで解説しています！）

この変換エンジンはまだ完璧ではないですが、将来的にはまじん式スライドのワークフローに組み込んで、 Geminiで図を生成 → 自動でスライドに挿入 という一気通貫の体験を目指しています。

今回、一部機能を切り出して記事にさせていただいたのは、 この変換エンジン自体が単独でも十分に便利 だと感じたからなんです。Gemini 3.1のイラスト描画能力は本当にすごいですし、それを有料ソフトなしで編集可能な状態のままスライドに取り込めるのは、まじん式を使っていない方にとっても大きな価値になるはずです！

🛠️ セットアップ方法（とても簡単です）

必要なもの

• Googleアカウント （いつも使っているものでOKです！）

手順

1. GAS（Google Apps Script）を開く

1. Google Apps Script にアクセスします

2. 「新しいプロジェクト」をクリックして、好きな名前をつけてください

2. コードを貼り付ける（1ファイルだけ！）

記事の最後（メンバーシップ限定エリア）にある AllInOne.gs のコードを、デフォルトの コード.gs に 上書き で貼り付けるだけです。

普通のGASプロジェクトだと コード.gs、無題.html、appsscript.json の3ファイルが必要なんですが、今回は AllInOne方式で1ファイルに統合済み なので、コピペ1回で完了します！（この仕組みについてもメンバーシップ限定エリアで解説しています🙏）

3. 完成！（デプロイ）

1. 右上の「デプロイ」→「新しいデプロイ」

2. 種類の歯車から「 ウェブアプリ 」を選択

3. 次のユーザーとして実行：使いやすいものを選択

4. アクセスできるユーザー：使いやすいものを選択

5. 「デプロイ」ボタンを押して表示されたURLにアクセスすれば、 あなた専用ツールの完成です！ 🎉

💎 マジクラメンバーシップへのご案内

「コードを使ってみたい！」「AIをもっと使いこなしたい！」そんな方は、ぜひ マジクラメンバーシップ にご参加ください✨

この記事のツールを動かすための コード全文（AllInOne.gs） はもちろん、「なぜ3ファイルを1ファイルにまとめられるのか」「SVGをどうやってスライド用に変換しているのか」という 技術の裏話 も、メンバー限定で公開しています！

一緒に楽しくAI×効率化を学んでいきましょう！👇👇