ChatGPTでSVGファイルは作れますか？

ChatGPTが生成する画像はPNGファイルです。ごく単純な形ならSVGのコードを書くこともできますが、細部のある絵なら、画像を生成してからベクター図形にトレースするのが確実です。

Midjourneyでベクターファイルは書き出せますか？

いいえ。Midjourneyで得られるのはラスター画像です。印刷やカット、ロゴに使うには、ベクター図形にトレースしてSVG、PDF、EPSとして保存します。

トレースしたAI画像の図形が多すぎるのはなぜですか？

グラデーション、やわらかい影、質感は、それぞれ多数の小さな色の面になります。色の数を減らす、似た色をまとめる、またはフラットなスタイルと無地の背景で画像を生成し直してください。

ベクター化する前のAI画像の解像度はどれくらい必要ですか？

生成ツールで選べる最大のサイズにしましょう。長辺2000ピクセルほどあれば十分です。小さすぎる画像では、輪郭が丸まって精度が落ちます。

ChatGPTやMidjourneyで作った画像をベクター化する方法

AIが出力するのはPNGです。印刷会社やカッティングマシン、ロゴのデータに必要なのは図形です。

ChatGPT、Midjourney、Geminiが出力するのは、どれもラスター画像です。つまりピクセルの集まりで、たいていはPNG、ときにはWebPやJPGで保存されます。画面上ではくっきり見えますが、印刷会社やカッティングマシン、ロゴのデータに必要なのは輪郭を持った図形で、それが入っているのがベクターファイル（SVG、PDF、EPS）です。ベクターにするには、画像をフラットな色の図形にトレースしてSVGとして保存します。

手順をまとめると、画像をいちばん大きなサイズでダウンロードし、少ない色数のフラットな色でトレースし、輪郭を確認してSVGで書き出します。仕上がりのきれいさは、ほとんど元の画像で決まります。フラットな色と無地の背景ならきれいにトレースできます。やわらかいグラデーションや発光表現、絵画のような質感は、数百個の小さな図形になってしまいます。まずは下に画像をドロップして、何も変えずにトレースした結果を見てみましょう。

お手持ちの画像で試す

⌘V 貼り付け · ⌘O 開く · 一括変換

画像がない場合は、こちらでお試しください：

フラットな色のきれいなSVG

AIの画像生成がベクターではなくピクセルを出力する理由

画像生成モデルは、絵をピクセル単位で作ります。パスや曲線、レイヤーという概念を持っていないので、ダウンロードできるのは必ずビットマップです。プロンプトで「ベクターロゴ」や「SVG風」と指定すると、見た目はフラットですっきりしたアイコン風になりますが、ファイル自体はPNGのままです。

チャットAIはSVGのコードを直接書くこともできます。円やバッジ、数文字の文字のようなごく単純なものならそれで十分ですが、しっかりした形や細部がある絵では、たいてい雑な仕上がりになり、気に入った画像とも違うものになります。先に画像を生成してからトレースすれば、選んだ絵そのものを図形として手に入れられます。

ベクター化しやすい画像を生成するプロンプトのコツ

まだ最終的な画像を生成していないなら、プロンプトに少し言葉を足すだけで、あとの手直しがぐっと減ります。最初からベクターアートに近い絵を頼むイメージです。

フラットな色：「フラットなベクターイラスト」「フラットカラー」「ベタ塗り」と指定します。フラットな面は、それぞれ1つのきれいな図形になります。
グラデーションや陰影なし：「グラデーションなし、影なし、テクスチャなし」と加えます。グラデーションは段階ごとに別々の色の帯になってしまいます。
無地の背景：「無地の白背景」「単色の背景に被写体だけ」と指定します。被写体の後ろのごちゃごちゃした景色も一緒にトレースされます。
少ない色数：「4色に限定したパレット」「2色のロゴ」など。色が少ないほど、カットや印刷のレイヤーも少なくなります。
太くシンプルな形：「太い輪郭線」「シンプルな形」「最小限のディテール」。細い線や小さな装飾は、トレースが乱れやすい部分です。

AI画像をSVGにする手順

生成ツールで選べるいちばん大きなサイズで画像をダウンロードします。アップスケールや高解像度ダウンロードの機能があれば使いましょう。ピクセルが多いほど、曲線がなめらかになります。
上の変換ツールで画像を開きます。色は自動で選ばれます。不要な色の濃淡が混ざっている場合は、パレットに切り替えて必要な色の数を設定します。
ほぼ同じ色が別々の図形として残るときは、パレットの色の数を1つか2つ減らします。AI画像には、本来1色のはずの面にうっすらノイズが入っていることが多く、色数を絞るとそれが1色にまとまります。
比較表示で輪郭を確認します。小さな点が出ていれば最小図形サイズを上げます。曲線がよれているときは、なめらかさをなめらかな曲線の方向に動かします。
背景の切れ端など不要なものを図形を削除ツールで消したら、ダウンロードを押してSVGを選びます（印刷会社に渡すならPDFやEPSも選べます）。

画像を少数のフラットな色にまとめるところ — 画像を少数のフラットな色にまとめます。1色が、きれいな図形のレイヤー1枚になります。

ChatGPTやClaudeから離れずにベクター化する

ShapesodaはChatGPTとClaudeの中で使えるアプリとしても動きます。ChatGPTでは設定（Settings）→ アプリ（Apps）を開いてShapesodaを探し、画像を添付してSVGにしてほしいと頼むと、チャットの中にShapesodaの画面が開いて結果が表示されます。Claudeでは設定（Settings）→ コネクタ（Connectors）からShapesodaを追加し、画像をベクター化してほしいと頼むと、Shapesodaの画面が開くので、そこでファイルを選びます。開発者の方はAPIから同じことができます。

細かく調整したいならWebサイトがいちばんです。すべての設定パネルと編集ツールが使えます。会話の中で画像を生成している最中なら、チャットのアプリのほうが手早く済みます。

AI風のイラストをフラットなベクター図形にトレースした結果 — AI風のイラストを、フラットなベクター図形にトレースした結果です。

トレース結果がごちゃごちゃするときは

陰影のある部分に図形が多すぎる：パレットの色の数を減らすか、複雑さを図形を少なくの方向に動かします。
背景がまだらにトレースされる：無地の背景で生成し直すか、ダウンロードの前に余分な図形を削除します。
輪郭がギザギザになる：もっと大きな画像から始めるか、なめらかさを上げます。アンカーポイントの数はパスとアンカーポイントを表示で確認できます。詳しくはSVGのアンカーポイントが多すぎる原因をご覧ください。
やわらかい光の写真のような画像：トレースするとフラットな色の帯になります。きれいな図形が必要なら、フラットなスタイルで生成し直しましょう。

AIで作った画像をロゴに使ってもいい？

トレースしてロゴのデータにすることはでき、実際にそうしている小さなお店もたくさんあります。気をつけたい点は2つです。1つ目は、使った生成ツールの利用規約で、出力をどう使ってよいかを確認すること。2つ目は、ロゴは小さくしても1色にしても使える必要があるので、色を減らし、形を太くし、細かい質感をなくしてシンプルにすることです。ベクター版ができたら、SVG・EPS・PDFをまとめて保管しておけば、あとで探し回らずに済みます。印刷会社や看板店が何を求めているかは、ロゴのベクターデータを手に入れる方法で解説しています。

変換だけしたい場合は、画像をSVGに変換、PNGをSVGに変換、ロゴをベクター化をお使いください。