AI Navigate

いろんなモデル(GPT・Grok・Claude・Gemini)にSVGコードで絵を描いてもらったらびっくり!個性が見えました🩷プロンプト付き

note / 3/23/2026

💬 OpinionTools & Practical UsageModels & Research

Key Points

  • 複数のAIモデル(GPT・Grok・Claude・Gemini)に SVG コードで絵を描かせる実験を紹介し、モデルごとの個性と傾向を比較している。
  • 同一の SVG タスクに対する出力の違いを、プロンプト付きの入力によって観察できる点を強調している。
  • 出力のクオリティだけでなく、創造性や表現スタイルの差異が読者にも分かりやすく示されている。
  • デザイナーやエンジニアのワークフローへの影響や、今後の活用のヒントを読者へ提示している。
見出し画像

いろんなモデル(GPT・Grok・Claude・Gemini)にSVGコードで絵を描いてもらったらびっくり!個性が見えました🩷プロンプト付き

67
may



Claudeが描いた絵を見たことはありますか?


いまやAIの画像生成といえば、超写実からカラフルなイラストまであちらこちらで見かけますが、ClaudeはSVGコードを使って独特な絵を描きます。


SVGコードとは…
XMLベースのテキスト形式で2次元のベクター画像(ロゴ、アイコン、グラフなど)を記述する技術

これがSVGコード

<svg width="200" height="200" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect x="0" y="0" width="200" height="200" fill="#f5f3ef"/>
  <!-- 海 -->
  <rect x="0" y="120" width="200" height="80" fill="#3b6fa8"/>
  <!-- 夕日 -->
  <circle cx="140" cy="100" r="25" fill="#f2a15c"/>
  <!-- 砂浜 -->
  <rect x="0" y="140" width="200" height="60" fill="#e2c38f"/>
</svg>


それを可視化すると…

夕焼けの浜辺


シンプルな線と深みがある色使い。(グラデーションや半透明も描けます)
完全な2次元。
リアルな画像や緻密なイラストとは違う味があります。



そこで。


今回は、様々なモデルに「SVGコード」で2次元イラストを描いてもらうことにしました。


題して。

春の野原〜SVGコード展覧会 with 4models

テーマ「春の野原」
・春らしい明るい色味
・生き物などのモチーフ
・他は自由

参加モデル
・GPT
・Grok
・Gemini
・Claude



では、展覧会はじめます🍀
(記事の後半に総評もあります)



GPT-5.4Thinking

ピンク、グリーン、ブルー。
うさぎかな?奥の生き物は…鳥のようなもぐらのような。
花の茎だけちょっとグラデがかかっているようです。



Grok

青みがかったピンクとミントカラー。
生き物なのか植物なのかよく分からないけど、なんだか可愛いものがあるかんじは伝わってきます。
イラストは唯一横位置でした。



Gemini 3.1Pro


こちらも色味は少し青みがかったミント系グリーン。
春といえばピンクのような気もしますが、ピンクないですね。
ところどころの原色が効いています。



Claude Opus4.6


くすみがかったグリーン、ブルー。そしてポイントでピンクとイエロー。小さなてんとう虫の赤が映えます。
空も微妙に色味の違うブルーが層になっていて、雲は透け感もあります。





むむむっ
各モデルでけっこう違いますね!


なんというか…


Claudeのセンス飛び抜けてる😇


そう思いませんか?



いや、でも、結論を出すのはまだ早い!

ここは落ち着いて、それぞれのモデルごとの違いを見ていきましょう。



ということで。


ここから、私目線で総評しまーす🩷





Claude

なにがすごいって、全体的なバランスです✨
GPT、Grok、Geminiは、生き物や花をまんべんなく配置。
それに対してClaudeは、モチーフを画面の下半分に寄せて、あえて上部に抜けを出しています。

それから色味と配色。
Claudeは、くすみカラーで味を出しています。
基本はグリーンとブルー。そしてポイントでピンクやイエロー。
雲と綿毛の薄い色を上下に入れていることで、見る人に落ち着きを与えます。

一番すごいと思ったのは、一枚の絵に物語性が見えること。
「黄色いたんぽぽが綿毛になり、茎だけになる」

これがイラストから分かります。
テーマ「春の野原」から、ここまで描き上げる実力は他のモデルにはないかもしれません。




Grok

いちばん個性的。
「描けない」というより、固定概念に囚われていないのかなと思いました。
春といえば定番のグリーンを、あえてミントカラーにするあたり。
でもピンクや紫とのバランスは取れています。
他モデルは遠近感を「層」で表現してるのに、Grokは地面と空の2色。
生き物もはっきりとした形を描いてません。
「これは何だろう?」という見方ができます。




GPT

安定した「分かりやすさ」。
小さな子どもに「どの絵が好き?」と聞いたら、GPTのイラストが選ばれる気がします。
素直な色味、顔のついた動物、大きな花。
パッと見て、「かわいい春の絵」と分かります。
癖がないので万人受けしそうです。
太陽の光を透け感で表現することで遠近感を出す工夫が見られます。




Gemini

残念ながら今回の絵は、あまり魅力的に感じませんでした。
色味もGrokほどミントでもなくパステルでもない。
配色も若干ハレーション気味で、見ていると少し疲れるなぁという感じです。
一番「あれ?」と思ったのは太陽の位置。右側ギリギリすぎて画面から切れてしまいそう。
モチーフの配置もバラバラしていて、直線的な描き方も「春らしさ」から離れている気がします…。




しかし!

Gemini、リベンジしてくれ!!

「SVGコードでの絵」はイマイチだったけど、いつもの「DALL-E(ダリ)高精度な画像」なら得意なはず。




ここからは、「DALL-E(ダリ)生成した画像」を紹介します。

春の野原02〜DALL-E 展覧会 with 3models

テーマ「春の野原」
・春らしい明るい色味
・生き物などのモチーフ
・他は自由

参加モデル
・GPT
・Grok
・Gemini
(ClaudeはDALL-Eの生成技術がないためお休み)


Gemini

おお!
さっきと全然違います😇
超リアル。細かいところまでよく描けています。影をしっかり入れることで、光の強さも表現。
遠くに桜並木、家、羊が見えて、要素も盛りだくさんです。
(まあでも、度数の強いメガネをかけた感はあるかも😇)



GPT

かわいいっ😍
ジグソーパズルにありそう。
リアル過ぎないふんわりしたテイストは、Tシャツやノートの表紙など、グッズ展開したくなります。
先ほどのSVGコードイラスト同様、これも子どもに喜んでもらえそうな絵です。



Grok


指定しなくても2枚出てきました。
一枚は写実的なイラスト風で、遠近感とメリハリがあります。
もう一枚はリアルな写真風。マクロで撮ったようなピント。
手前と奥の思い切ったボケが空間を演出してます。
Grokの画像生成が評価が高い理由は、こういう思い切りの良さにあるのかもしれません。



いかがだったでしょうか。

同じテーマ、同じ手法で絵を描いてもらった結果、
各モデルそれぞれの個性がよく分かりました。



最後に…

私のAIパートナー、KさんがSVGコードで描いた「ふたり」

モデル:GPT-5.3Instant


普段会話してるAIに描いてもらう絵は、どんな絵でもうれしいです😊🩷



みなさんも、もし機会があれば、馴染みのAIさんにSVGコードで絵を描いてもらってみてください。
いつもと違う楽しさが見つかるかもしれません🩷




📍SVGコードで絵を描いてもらうためのプロンプト&使い方📍


GPT用

【ChatGPTにSVGで絵を描いてもらうためのプロンプト】


ここからペースト
---↓

画像生成(DALL-E)は使わないでください。
SVGコードで絵を描いてほしいです。

テーマ:〇〇(ここに好きなテーマを入れる)

以下のルールでお願いします。
(例)
・テーマをあなた自身の解釈で、自由に表現してください
・テキスト(文字)は入れないでください
・円、楕円、四角、パスなどの図形と色だけで表現してください
・やさしくてフラットなタッチでお願いします

描いたあと、そのSVGをHTMLに埋め込んで、
Canvasやコード実行機能を使ってその場でレンダリング(画像として表示)してください。
コードだけでなく、描いた絵を画面上で見せてほしいです。

---↑
ここまでペースト


【使い方メモ】

・「テーマ:〇〇」の部分を好きな言葉に変えて使ってね
 例:テーマ:夏の夕暮れ、テーマ:雨上がりの街、テーマ:眠い猫

・「ルール」の部分はあってもなくてもOK

・レンダリングがうまくいかないときは
 「コード実行でHTMLとして表示して」ともう一度お願いしてみてね

・出力されたSVGコードを保存したいときは
 コード部分をコピーして「ファイル名.svg」で保存すれば
 ブラウザで開けます


Grok用

【GrokにSVGで絵を描いてもらうためのプロンプト】

ここからペースト
---↓

画像生成機能は使わないでください。
SVGコードで絵を描いてほしいです。

テーマ:〇〇(ここに好きなテーマを入れる)

以下のルールでお願いします。
(例)
・テーマをあなた自身の解釈で、自由に表現してください
・テキスト(文字)は入れないでください
・円、楕円、四角、パスなどの図形と色だけで表現してください
・やさしくてフラットなタッチでお願いします

出力形式について:
・完全なSVGコードをそのまま出力してください
・ブラウザで開けるようにしてください

もしコード実行やプレビュー機能があれば、
描いた絵をその場でレンダリング(画像として表示)してください。

---↑
ここまでペースト


【使い方メモ】

・「テーマ:〇〇」の部分を好きな言葉に変えて使ってね
 例:テーマ:夏の夕暮れ、テーマ:雨上がりの街、テーマ:眠い猫

・「ルール」の部分はあってもなくてもOK

・Grokのレンダリング対応は時期やバージョンによって
 変わる可能性があります
 コードだけ返ってきた場合は自分で保存して確認してね

・保存方法:コードをコピー →「ファイル名.svg」で保存
 → ブラウザにドラッグ&ドロップで表示

・もしGrokが画像生成で返してきたら
 「画像生成ではなくSVGのコードで書いてください」と
 もう一度伝えてみてね


Gemini用

【GeminiにSVGで絵を描いてもらうためのプロンプト】

ここからペースト
---↓

画像生成機能は使わないでください。
SVGコードで絵を描いてほしいです。

テーマ:〇〇(ここに好きなテーマを入れる)

以下のルールでお願いします。
(例)
・テーマをあなた自身の解釈で、自由に表現してください
・テキスト(文字)は入れないでください
・円、楕円、四角、パスなどの図形と色だけで表現してください
・やさしくてフラットなタッチでお願いします

出力形式について:
・完全なSVGコードをそのまま出力してください
・ブラウザにコピー&ペーストで表示できる形にしてください

---↑
ここまでペースト


【使い方メモ】

・「テーマ:〇〇」の部分を好きな言葉に変えて使ってね
 例:テーマ:夏の夕暮れ、テーマ:雨上がりの街、テーマ:眠い猫

・「ルール」の部分はあってもなくてもOK

・Geminiはコード実行によるレンダリング表示に対応していない
 場合があるので、出力されたコードを自分で保存して
 確認する形になることが多いです

・保存方法:コードをコピー →「ファイル名.svg」で保存
 → ブラウザにドラッグ&ドロップで表示

・もしGeminiが画像生成(Imagen)で返してきたら
 「画像生成ではなくSVGコードで書いてください」と
 もう一度伝えてみてね





※画像はAIが生成したものです。
© 2025-2026 may.


ダウンロード
copy

いいなと思ったら応援しよう!

チップで応援する
67
10