「ロゴはベクターデータでください」
「その画像、ラスターだから拡大すると荒れますよ」
デザインを学び始めると出てくる、ベクターとラスターという言葉。
どちらも画像の形式のことですが、仕組みはまったく違います。
そして、この違いを知らないと「ロゴを大きくしたらぼやけた」「印刷したらギザギザになった」というトラブルの原因になります。
この記事では、デザイナーを目指す初心者向けに、ベクターとラスターの違いと使い分けをわかりやすく解説します。
結論：画像を「モザイク」で作るか、「設計図」で作るか
たとえで言うと、違いはこうなります。
- ラスター：色のついた小さなタイルを並べて絵を作る「モザイク画」
- ベクター：「ここからここへ、この曲がり方で線を引いて、中をこの色で塗る」と記録した「設計図」
| 項目 | ベクター | ラスター（ビットマップ） |
|---|---|---|
| 構成要素 | アンカーポイントとパス（座標と数式） | ピクセル（色のついた四角）の集合 |
| 拡大・縮小 | 劣化しない | 拡大するとぼやける・ギザギザになる |
| 得意な表現 | ロゴ、アイコン、文字、フラットなイラスト、図表 | 写真、細かいグラデーション、質感や陰影 |
| 苦手な表現 | 写真のような複雑な色の変化 | 大きさの変更、輪郭のはっきりした図形 |
| ファイルサイズの傾向 | シンプルな図形なら軽い | ピクセル数が増えるほど重くなる |
| 編集の仕方 | 点や線、図形ごとに動かして直す | ピクセルそのものを塗り替える |
| 代表的な形式 | AI、SVG、EPS、PDF（※） | JPEG、PNG、GIF、WebP、TIFF、PSD |
| 主なソフト | Illustrator、Figma | Photoshop |
※PDFはベクターとラスターの両方を含むことができます。
迷ったら、写真はラスター、ロゴはベクター。まずはこれだけ覚えれば大丈夫です。
ラスター画像とは？ピクセルのモザイク画
ラスター画像は、ピクセル（画素）と呼ばれる色のついた小さな四角を、格子状に並べて作られた画像です。ビットマップ画像とも呼ばれます。
スマホで撮った写真、Webサイトの画像、スクリーンショットは、ほぼすべてラスターです。写真をぐっと拡大していくと、最後は四角い粒の集まりに見えるはずです。それがピクセルです。
ラスターの強みと弱み
強みは、色の表現力です。1つ1つのピクセルが別々の色を持てるので、写真のような細かいグラデーション、光と影、質感まで表現できます。
弱みは、大きさの変更です。ラスター画像が持っているピクセルの数は最初から決まっています。それを引き伸ばすと、足りない部分をソフトが補うしかないため、ぼやけたり、輪郭がギザギザになる「ジャギー」が目立ったりします。
ここは前回の「解像度」の記事とつながる話で、解像度（dpi・ppi）を気にするのは、基本的にラスター画像です。ピクセルの密度の話だからです。
ベクター画像とは？数式で描く設計図
ベクター画像は、ピクセルを持ちません。その代わり、「点の座標」と「点と点を結ぶ線（パス）」、曲線の曲がり方や、塗りと線の色といった情報を、数式として記録しています。
Illustratorで図形を描くときに打つ点が「アンカーポイント」、それを結ぶ線が「パス」です。画面の裏側では、この座標をもとに図形が計算され、描き直されています。
ベクターが拡大しても劣化しない理由
表示や印刷のサイズが変わるたびに、設計図からそのサイズに合わせて描き直すからです。
名刺に載せる小さなロゴと、看板に載せる大きなロゴが、同じデータからどちらもくっきり作れるのはこのためです。「拡大しても劣化しない」と言われるのは、元の絵を引き伸ばしているのではなく、毎回その大きさで新しく描いているから、と考えるとイメージしやすいはずです。
ベクターの弱み
写真のような表現は苦手です。複雑な色の変化をすべて図形と数式で表そうとすると、データが膨大で扱いにくくなります。
また、図形が複雑になるほどファイルが重くなることもあり、「ベクター＝必ず軽い」わけではありません。
どっちを使えばいい？用途で判断する
判断のコツは、「後で大きさを変えるか」「写真のような表現が必要か」の2つです。
- ロゴ、アイコン、ピクトグラム、図表、文字を主体にしたデザイン → ベクター
大きさを変える場面が多く、輪郭のシャープさが大事だからです - 写真、写真の加工・合成、質感のあるイラストレーション → ラスター
色と陰影の細かさが大事だからです - イラスト → 描き方によります
フラットで図形的なイラストならベクター、筆の質感や厚塗りならラスターが向いています
実際のデザイン制作では、Illustratorのレイアウトの中にPhotoshopで加工した写真（ラスター）を配置する、というように両方を組み合わせて使うのが普通です。どちらか一方だけ、という仕事のほうが珍しいくらいです。
変換できるの？ラスタライズとベクター化
この2つの形式は、変換することもできます。ただし、方向によって難しさが正反対です。
ベクター → ラスター：ラスタライズ（簡単）
ベクターをJPEGやPNGで書き出すことをラスタライズと言います。
設計図から、そのサイズ専用のモザイク画を作る作業です。
注意点は、書き出した時点でピクセル数が固定されること。Web用に小さく書き出したPNGを、後から印刷に大きく使えば荒れます。「元データ（ベクター）を必ず残しておく」ことが実務の鉄則です。
ラスター → ベクター：ベクター化／トレース（限界あり）
写真やロゴの画像を、Illustratorの画像トレースなどでパスに変換することもあります。
ただし、これは「似た形の図形を作り直す」作業であって、元のベクターに戻す魔法ではありません。
写真をトレースすればイラスト風の表現にはなりますが、元の滑らかさは失われますし、ぼやけたロゴをトレースしても、輪郭の甘さを引き継いだパスができるだけです。
「JPEGしか残っていないロゴをベクター化してほしい」という依頼は現場でもよくありますが、正確さが求められるロゴでは、トレースではなく作り直し（リドロー）が前提になる、と覚えておきましょう。
初心者がやりがちな失敗3つ
1. ロゴをJPEGやPNGだけで納品・保管する
PNGもJPEGもラスターです。画面ではきれいに見えても、大きく使う場面で困ります。
ロゴの元データはAIやSVGなどのベクターで残し、用途ごとに書き出すのが基本です。
2. ラスター画像をIllustratorに配置すればベクターになると思う
配置しただけでは中身はラスターのままです。
Illustratorという「入れ物」に入れただけで、画像そのものの仕組みは変わりません。
3. 小さいロゴ画像を無理に引き伸ばして使う
ラスターの弱みそのものです。
先にベクターデータがないか確認する、作り直す、という判断ができるかどうかが、実務では大事な差になります。
よくある質問
Q. SVGとは何ですか？
Webで使えるベクター形式です。アイコンやロゴをSVGで用意すると、スマホの高精細な画面でもぼやけず、ファイルも軽く抑えやすいため、Webデザインでは標準的に使われます。
Q. PNGはベクターですか？
いいえ、PNGはラスターです。背景が透明なロゴ画像がPNGで配られることが多いため混同されがちですが、拡大すれば荒れるラスター画像です。
Q. 写真をベクターにすれば劣化しなくなりますか？
形式上は拡大しても「荒れ方」が変わりますが、写真の情報が増えるわけではありません。トレースによって表現自体がイラスト風に変わるため、写真として使いたいならラスターのまま、十分なピクセル数で扱うのが正解です。
ベクターとラスターの違いまとめ
- ラスターはピクセルのモザイク画。写真が得意で、拡大すると荒れる
- ベクターは座標と数式の設計図。ロゴやアイコンが得意で、拡大・縮小しても劣化しない
- 解像度を気にするのはラスター。ベクターは書き出してラスターにした瞬間に解像度が固定される
- ベクターからラスターへの変換は簡単、逆は「作り直し」に近く限界がある
- ロゴの元データはベクターで残す。これが実務の鉄則
この違いが分かると、IllustratorとPhotoshopという2つのソフトがなぜ分かれているのかも、自然と理解できるようになります。
次に学ぶなら、「SVGなどのファイル形式の使い分け」や、「解像度（dpi・ppi）」を合わせて読むと、データ作りの全体像がつかめますよ。
