ベクターとラスターの違い：イラストに向いている形式は？

空状態の画面に置いたPNGは、等倍ではきれいに見えていました。ところが2倍サイズのメインビジュアルに流用したとたん、輪郭がぼやけました。そこへブランド担当から「マスタードイエローをネイビーに」という依頼。Figmaの中では、そのファイルは手を入れられない一枚の画像でしかありませんでした。

イラストでいうベクターとラスターの違いとは、こういうことです。難しいコンピューターの理屈ではありません。来週になって「やっぱり色を変えたい」と言われたとき、塗りを差し替えられるかどうか。それだけの話です。

製品に載せるイラストは、いつもIllustroで作っています。UIに添えるイラストならAIのSVG作成ツールを開き、「スタイル」を「フラットイラスト」にしてSVGで書き出します。クレイ風の3Dや絵本風のページは、あえてPNGかJPEGのままにします。形式を決めるのは、用途です。

イラストで考えるベクターとラスターの違い

ラスターのイラストは、色のついたピクセルが格子状に並んだものです。PNG・JPEG・GIF・TIFF・WEBPがこれにあたります。拡大すると四角い粒が見え、元のサイズ以上に引き伸ばすとギザギザになります。

Adobeのラスターとベクターの比較も、同じ分け方をしています。写真や、絵の具で描いたような細部がラスター側に入るのは、ファイルが色の情報を1点ずつすべて記録しているからです。

ベクターのイラストは、図形・線・曲線を数式で記録したものです。Webで使うファイルならSVG。24pxのアイコンに縮めても、横幅いっぱいのメインビジュアルに広げても、輪郭は線のままくっきりしています。

見分け方は簡単です。MDNのSVG解説にあるとおりSVGの中身はXMLなので、ファイルを開いて中身を見ればわかります。パスを記述したXMLが出てくれば、ベクターです。ビットマップが包まれているだけなら、中身はラスターのまま。拡張子にだまされていたというわけです。

イラストに求められるのは、たいてい次のどちらかです。UIと並べて、色やサイズを自由に変えられること。あるいは、絵の具や粘土、光のやわらかさを残すこと。選ぶ基準はその役目を果たせるかどうかで、「プロっぽく」聞こえるかどうかではありません。

ベクターとラスターをひと目で比較

イラストに限らず、ベクター画像とラスター画像の違いはこの表のとおりです。チームで見落とされがちなのは、イラストの用途を書いた行のほう。きれいに描けたキツネのPNGも、ラスターであることに変わりはありません。「色を変更」で色を変えられるフラットなキツネなら、ベクターです。

ベクターが向いているイラスト

空状態の画面や機能紹介のセクション、ナビでは24px、LPでは1600pxで使い回すグラフィック。こうしたものは、SVGで持っておきたいところです。

Figmaとの相性も、ベクターのほうが上です。一枚に統合されたレイヤーではなく、図形として扱えます。逆にFigmaから取り出すときの「SVGとしてコピー」については、Figmaのエクスポートに関するヘルプに説明があります。

ポーズは完璧で、黄色だけが違う。そんなときもベクターなら、塗りを差し替えるだけです。Illustroでは「色を変更」がその機能で、無料で使えます。条件は、ファイルの中身が本当にSVGのコードで書かれていることです。

フラットなイラストとは見た目の話で、塗りつぶした図形、少ない色数、たいていはクリーム色の背景が特徴です。ベクターは、その下にあるファイルの話。線画もベクターです。塗りの図形ではなく、インクの線として見えるという違いだけです。

プロンプトは、写真ではなくグラフィックを頼むつもりで書きます。モチーフとポーズ、それに塗りの色を2〜3色。「シネマティック」や「8K」のような言葉は要りません。あとから色を変えられるSVGのプロンプトのコツと同じ考え方です。

ロゴは話が別です。小さなフラットの図形でも見やすくはできますが、Illustroはロゴ作成ツールではありません。何千ものグッズに刷るようなマークは、やはりペンツールを使いこなすデザイナーの仕事です。

ラスターが向いているイラスト

クレイ風の3Dは、スタジオで撮った小さな置物のような見た目です。マットで丸みがあり、光が当たっている。その光はピクセルでできていて、Illustroでは、この質感をそのまま再現したSVGは作れません。透過が必要ならPNG、白背景で構わなければJPEGでダウンロードします。

クレイ風のフィギュアを「ベクター化」してみたことがあります。結果は平べったい色のかたまりになり、3Dを選んだ意味がなくなりました。そういう用途なら、Blenderなしでできる3Dマスコットキャラクターの作り方を読んで、ラスターのまま使いましょう。

絵本風のイラストは、あえてガッシュのような風合いにしています。やわらかな色こそが持ち味です。硬いパスに置き換えると、ページの魅力が消えてしまいます。PNGかJPEGで使いましょう。「背景を削除」は絵本風と3Dイラストで1クレジット。フラットイラストと線画では使えません。

写真はラスターのままです。ベクター化ツールでロゴのようなベクターを作ることはできても、写真の粒子感までは残りません。ポーズだけ使いたいなら、写真をフラットなイラストに変換できます（3クレジット）。これはスタイルの変換で、そのあとSVGで書き出せます（1クレジット）。元の写真をそのまま写し取るものではありません。

ここでいうベクターとラスターの違いは、画質の優劣ではなく、スタイルの選び方の違いです。やわらかい絵はピクセルに、くっきりした図形はパスに向いています。

SVG・PNG・JPEGの違い

「PNG SVG 違い」と検索する人が知りたいのも、たいていはベクターとラスターの違いです。実際のダウンロードメニューに沿って見ていきましょう。

SVG：本物のベクターです。塗りの色を変えられ、拡大してもぼやけません。「SVGで書き出し」は、生成したイラストや変換したイラストなら1クレジット。自分でアップロードしたSVGなら無料です。絵本風と3Dイラストでは表示されません。

PNG：ラスターで、無料。透過を保てます。パス単位で色を変える予定のない静止画なら、これで十分です。IllustroはSVGを高解像度のPNGにブラウザ上で変換できますが、そのPNGをダウンロードした時点で、中身はまたピクセルに戻ります。

JPEG：ラスターで、無料。背景は白で塗られます。メールやプレゼン資料、透過をうまく扱えないツールに便利です。

SVGがいつでも優れているわけではありません。SVGが活きるのは、パスが必要なときです。絵そのものがすでに完成した見た目なら、PNGのほうが向いています。ベクター化しても、絵を傷めるだけです。

Illustroでベクターとラスターを選ぶ手順

1. 用途を決めます。UIやLPなら「フラットイラスト」か「線画」。おもちゃのようなマスコットなら「3Dイラスト」。絵本なら「絵本風」。
2. モードを確認します。アイデア出しにはIllustro Light（フラットイラストと線画は1クレジット、3Dイラストと絵本風は2クレジット）。仕上げにはIllustro MAX（同じ順に2クレジット、4クレジット）。エディターの初期設定はLightなので、「生成」を押す前にモードの表示を確認しましょう。
3. モチーフを書きます。ベクターの空状態なら、たとえばこんなプロンプトを貼り付けます。「吊るした鉢植えに水をやる人物、横向き、テラコッタ色のセーター、ネイビーのパンツ、クリーム色の背景、シンプルな幾何学図形、顔のパーツなし、グラデーションなし」
4. 「生成」を押して、ポーズを確認します。
5. ベクターのスタイルで配色が違うときは、「色を変更」を開きます。小物を足したいときは「AIで編集」（3クレジット）。「色を変更」では、新しいものは描けません。
6. ラスターのスタイルでは、「AIで編集」を使うか、生成し直します。切り抜きが必要なら「背景を削除」を使います。
7. PNGとJPEGのダウンロードは無料です。「SVGで書き出し」（1クレジット）は、対応しているスタイルのときだけ使います。

ファイルをグラフィックとして扱い続けたいときは、この手順をAIのSVG作成ツールで回しています。できたSVGはFigmaのIllustroプラグインで配置するか、書き出してキャンバスにドロップします。

3Dイラストや絵本のページを、無理にSVGにしようとしないでください。いくら探しても、そのボタンは出てきません。迷ったら、上の分け方に戻りましょう。フラットイラストと線画はSVGで書き出し、3Dイラストと絵本風はPNGかJPEGのまま使います。

よくある質問

JPEGはラスターとベクターのどちらですか？

JPEGはラスター形式のファイルです。ピクセルの並びを記録していて、たいていは色の情報を一部捨てる圧縮がかかっています。SVGのように、パスの色を変えることはできません。写真やクレイ風の3D、絵本風の静止画など、元のピクセルサイズより大きく拡大しない画像に使いましょう。

SVGはベクターとラスターのどちらですか？

本物のパスが入っていれば、SVGはベクター形式です。四角い粒の並びではなく、図形を記述したXMLでできています。ただしツールによっては、拡張子が.svgのファイルにPNGを包んでいるだけのこともあります。ファイルを開いて、塗りを選択できなければ、中身はまだラスターです。

PNGはベクターとラスターのどちらですか？

PNGはラスターです。透過を保てて、JPEGのような圧縮によるノイズも出ないのが利点です。Illustroでは、どのスタイルでもPNGのダウンロードは無料。3Dイラストと絵本風なら、PNGが最適な書き出し形式です。フラットイラストと線画では、あとから色を変える予定がなければ、プレビュー用として使えます。

PNGをベクターに変換できますか？

ベクター化（画像トレース）はできます。ピクセルに近い形の図形を新しく作る処理なので、もともとパスでなかった絵を元どおりに取り出せるわけではありません。IllustroのイラストをSVGに変換なら、PNG・JPG・WEBPをアップロードするだけで、ファイルの形と色をなぞったSVGが1クレジットで手に入ります。写真のスタイルごと変えたいときは、「写真をイラスト化」で「フラットイラスト」に変換し（3クレジット）、そのあとSVGで書き出せます（1クレジット）。

SVGはPNGより優れていますか？

UIのイラストで、拡大や色の変更が必要ならSVGです。クレイ風の3Dや絵本風のイラストなら、そうとは限りません。光とやわらかさでできた絵は、SVGにすると平板になってしまいます。そちらはPNGかJPEGを選び、SVGはフラットイラストと線画に使いましょう。

PDFはベクターですか？

PDFには、ベクターもラスターも、その両方も入れられます。1ページのロゴのPDFならパスでできているかもしれませんが、写真のPDFはピクセルのままです。拡張子を信じずに、図形を選択できるかどうか確かめましょう。Web用のイラストなら、IllustroからはPDFではなくSVGかPNGで書き出しています。ベクターかラスターかを決めるのはファイル名ではなく、中に入っているデータです。